/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
/* NOTE: This is the "master file" for the Index page. It should only contain `@import` directives. */
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
/* Color */
.bui-f-color-destructive {
color: #c00 !important;
}
.bui_color_destructive {
color: #c00 !important;
}
.bui-f-color-callout {
color: #ff8000 !important;
}
.bui_color_callout {
color: #ff8000 !important;
}
.bui-f-color-constructive {
color: #008009 !important;
}
.bui_color_constructive {
color: #008009 !important;
}
.bui-f-color-complement {
color: #febb02 !important;
}
.bui_color_complement {
color: #febb02 !important;
}
.bui-f-color-primary {
color: #003580 !important;
}
.bui_color_primary {
color: #003580 !important;
}
.bui-f-color-grayscale {
color: #6b6b6b !important;
}
.bui_color_grayscale {
color: #6b6b6b !important;
}
.bui-f-color-grayscale-darker {
color: #333 !important;
}
.bui-f-color-black {
color: #000 !important;
}
.bui_color_black {
color: #000 !important;
}
.bui-f-color-white {
color: #fff !important;
}
.bui_color_white {
color: #fff !important;
}
.bui-f-color-action {
color: #0071c2 !important;
}
.bui_color_action {
color: #0071c2 !important;
}
/* Fill */
.bui-f-fill-destructive {
background-color: #c00 !important;
fill: #c00 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_destructive {
background-color: #c00 !important;
fill: #c00 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-callout {
background-color: #ff8000 !important;
fill: #ff8000 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_callout {
background-color: #ff8000 !important;
fill: #ff8000 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-complement {
background-color: #febb02 !important;
fill: #febb02 !important;
border-color: #333 !important;
color: #333 !important;
}
.bui_fill_complement {
background-color: #febb02 !important;
fill: #febb02 !important;
border-color: #333 !important;
color: #333 !important;
}
.bui-f-fill-constructive {
background-color: #008009 !important;
fill: #008009 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_constructive {
background-color: #008009 !important;
fill: #008009 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-primary {
background-color: #003580 !important;
fill: #003580 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_primary {
background-color: #003580 !important;
fill: #003580 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-grayscale {
background-color: #6b6b6b !important;
fill: #6b6b6b !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_grayscale {
background-color: #6b6b6b !important;
fill: #6b6b6b !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-black {
background-color: #000 !important;
fill: #000 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_black {
background-color: #000 !important;
fill: #000 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-white {
background-color: #fff !important;
fill: #fff !important;
border-color: #333 !important;
color: #333 !important;
}
.bui_fill_white {
background-color: #fff !important;
fill: #fff !important;
border-color: #333 !important;
color: #333 !important;
}
.bui-f-fill-action {
background-color: #0071c2 !important;
fill: #0071c2 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_action {
background-color: #0071c2 !important;
fill: #0071c2 !important;
border-color: #fff !important;
color: #fff !important;
}
/* Outline */
.bui-f-outline-destructive {
background-color: transparent !important;
fill: transparent !important;
border-color: #c00 !important;
color: #c00 !important;
}
.bui_fill_destructive_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #c00 !important;
color: #c00 !important;
}
.bui-f-outline-callout {
background-color: transparent !important;
fill: transparent !important;
border-color: #ff8000 !important;
color: #ff8000 !important;
}
.bui_fill_callout_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #ff8000 !important;
color: #ff8000 !important;
}
.bui-f-outline-complement {
background-color: transparent !important;
fill: transparent !important;
border-color: #febb02 !important;
color: #febb02 !important;
}
.bui_fill_complement_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #febb02 !important;
color: #febb02 !important;
}
.bui-f-outline-constructive {
background-color: transparent !important;
fill: transparent !important;
border-color: #008009 !important;
color: #008009 !important;
}
.bui_fill_constructive_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #008009 !important;
color: #008009 !important;
}
.bui-f-outline-primary {
background-color: transparent !important;
fill: transparent !important;
border-color: #003580 !important;
color: #003580 !important;
}
.bui_fill_primary_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #003580 !important;
color: #003580 !important;
}
.bui-f-outline-grayscale {
background-color: transparent !important;
fill: transparent !important;
border-color: #6b6b6b !important;
color: #6b6b6b !important;
}
.bui_fill_grayscale_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #6b6b6b !important;
color: #6b6b6b !important;
}
.bui-f-outline-black {
background-color: transparent !important;
fill: transparent !important;
border-color: #000 !important;
color: #000 !important;
}
.bui_fill_black_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #000 !important;
color: #000 !important;
}
.bui-f-outline-white {
background-color: transparent !important;
fill: transparent !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_white_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-outline-action {
background-color: transparent !important;
fill: transparent !important;
border-color: #0071c2 !important;
color: #0071c2 !important;
}
.bui_fill_action_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #0071c2 !important;
color: #0071c2 !important;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
/* media size definitions */
/* fonts definitions */
:root {
/* Focus states */
}
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
/* NOTE: This is the "master file" for common CSS imports. It should only contain `@import` directives. */
/* Update: this file was forked from Extranet base.css. A lot of things were cleanup that are not needed for joinapp, but we need to cleanup this file better (bring the styles to build.scss maybe? */
/* Media queries go in the media query css file :P */
/* bootstrap default overrides */
label {
font-weight: normal;
}
legend {
font-size: 23px;
}
.container {
max-width: 100%;
}
.modal-body .loading {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(255, 255, 255, 0.8) url(https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/loader.gif) no-repeat 50% 50%;
}
.content {
padding-left: 30px;
}
.contact-form {
padding-bottom: 60px;
}
#content{
background: #eee;
}
#content:before {
content: "";
width: 34%;
background: #003580;
height: 100%;
position: absolute;
top: 0;
left: -34%;
z-index: 0;
}
/* base.css */
body {
margin: 0;
background-color: #f5f5f5;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
/* Mobile JS detection module */
body:before {
content: 'normal';
display: none;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
h1 {
font-weight: normal;
border-bottom: 1px solid #ddd;
padding: 0.2em 0 0.3em;
margin: 0.2em 0 0.5em;
position: relative;
font-size: 38.5px;
line-height: 1.37;
}
a {
color: #0071c2;
}
a:hover {
color: #bad4f7;
}
.page_description.row {
margin: 0;
}
.page_description p {
font-size: 15px;
color: #525252;
padding: 0 0 15px;
font-weight: normal;
margin-bottom: 15px;
}
/* Menu */
.menu {
background: #355E97;
padding-left: 0;
padding-right: 0;
text-rendering: optimizeLegibility;
z-index:1;
}
.menu .nav li a {
font-size: 20px;
font-weight: normal;
color: #fff;
border-top: 1px solid #6984b4;
padding: 16px 10px 20px 60px;
min-height: 0;
position: relative;
line-height: 1.15;
transition: background 0.2s linear;
word-wrap: break-word;
}
.menu .nav li a:hover,
.menu .nav li a:focus {
background: #313e57;
}
.menu .nav .active a,
.menu .nav .menu-selected a {
background: #EFEFEF !important;
color: #495d82;
text-shadow: 1px 0 1px rgba(255,255,255,0.7);
position: relative;
border-right: 1px solid #DDD;
}
.menu .nav .menu-selected a {
background: #f5f5f5 !important;
border-top: 1px solid #DDD;
}
.menu .nav .disabled > a {
pointer-events: none;
}
.menu .nav li.active a:after,
.menu .nav li.menu-selected a:after,
.menu .nav li.active a:before,
.menu .nav li.menu-selected a:before {
border: solid transparent;
content: " ";
height: 0;
width: 0;
right: -1px;
position: absolute;
pointer-events: none;
}
.menu .nav li.active a:after {
border-color: rgba(238, 238, 238, 0);
border-right-color: #f5f5f5;
border-width: 9px;
top: 35%;
margin-top: 0px;
}
.is_right_to_left .menu .nav .active a,
.is_right_to_left .menu .nav .menu-selected a {
border-right: 0;
border-left: 1px solid #DDD;
}
.is_right_to_left .menu .nav li.active a:after,
.is_right_to_left .menu .nav li.menu-selected a:after,
.is_right_to_left .menu .nav li.active a:before,
.is_right_to_left .menu .nav li.menu-selected a:before {
left: -1px;
right: initial;
}
.is_right_to_left .menu .nav li.active a:after {
border-left-color: #EEE;
border-right-color: transparent;
}
.is_right_to_left .menu .nav li.active a:before {
border-left-color: #DDD;
border-right-color: transparent;
}
.menu .nav li.active a:before {
border-color: rgba(204, 204, 204, 0);
border-right-color: #DDD;
border-width: 11px;
top: 35%;
margin-top: -2px;
}
.menu .subnav li a:after,
.menu .subnav li a:before {
display: none;
}
/* no icon menu */
.menu.no_icons .nav > li > a {
padding-left: 17px;
}
.menu.no_icons .nav > li > a.completed {
padding-left: 60px;
}
.menu.no_icons .nav > li > a > .glyphicon {
display: none;
}
.menu.no_icons .nav > li > a.completed > .glyphicon {
display: block;
}
.menu a em {
font-size: 13px;
font-style: normal;
display: block;
margin: 7px 5px 5px 0;
line-height: 1.5;
}
.menu li ul {
padding: 0 0 10px 50px;
margin: 0;
background: #EEE;
list-style: none;
display: none;
}
.menu .menu-selected ul {
background: #fafcff;
}
.menu .active ul,
.menu .menu-selected ul {
display: block;
}
.menu .nav li li a {
padding: 10px 25px 10px 10px;
border: 0;
font-size: 14px;
font-weight: bold;
display: block;
min-height: 20px;
border-radius: 2px;
position: relative;
border-bottom: 1px solid #E2E2E2;
}
.menu .nav li li a .glyphicon {
position: absolute;
top: 25%;
right: 10px;
color: #ebf3ff;
text-shadow: none;
}
.menu .state-opened {
display: none;
}
.menu .state-collapsed {
display: block;
}
.menu .menu-selected > a > .state-opened {
display: block;
}
.menu .menu-selected > a > .state-collapsed {
display: none;
}
.menu .subnav .pull-left {
/* for messages sub nav */
position: relative;
margin-left: 10px;
}
.menu li li a.active {
background: #bad4f7 !important;
color: #fff;
text-shadow: none;
}
.menu li li a.active {
background: #bad4f7 !important;
color: #fff;
text-shadow: none;
}
.nav > li > a > .glyphicon {
font-size: 22px;
text-align: center;
position: absolute;
top: 14px;
left: 10px;
width: 40px;
}
.user {
color: #fff;
background: #003580;
}
.user p {
margin-bottom: 0;
}
.user p:first-of-type {
font-weight: 600;
}
.user hr {
margin-top: 10px;
margin-bottom: 8px;
border-color: #bad4f7;
}
.navbar-fixed-top h1 {
font-weight: normal;
line-height: 20px;
font-size: 14px;
letter-spacing: 0.1em;
}
.mobile-nav {
display: none;
position: relative;
z-index: 9;
}
/* Menu ends */
/* Logo */
#logo{
display:block;
width:170px;
padding:1em 10px 10px;
}
#logo>img{
display:block;
width:150px;
}
.join_logo{
float: left;
}
.join_logo img {
width: 150px;
margin: 14px 0 9px 10px;
}
/* hotel name block above nav / below logo */
nav .block_details {
background-color: #003580;
border: 0;
border-top: 1px solid #00224f;
padding: 10px 10px 10px 10px;
margin-bottom: 0;
}
nav .sb {
clear: both;
}
nav .block_details a.btn {
color: #fff;
margin: 8px 0 5px 0;
}
nav .block_details a.btn i {
padding-left: 10px;
}
nav .block_details p {
color: #ebf3ff;
}
/* progress */
p.progress_status {
font-size: 85%;
margin-bottom: 5px;
font-weight: 500;
display: block;
}
nav .block_details p.progress_status {
color: #fff;
}
nav .block_details .progress {
margin-bottom: 5px;
}
nav .block_details p span {
color: #fafcff;
font-weight: normal;
}
/* forms */
fieldset {
padding: 1em;
margin-bottom: 1.5em;
border-radius: 4px;
border: 1px solid #e7e7e7;
background-color: #fff;
}
legend {
background-color: #fff;
display: inline-block;
width: auto;
padding: 5px 15px 0 12px;
margin: 0 0 5px -14px;
border-radius: 4px 4px 0 0;
line-height: 1.3em;
border-bottom: none;
}
label {
font-weight: 600;
color: #555;
}
.form-control[disabled] {
color: #bdbdbd;
}
.form-control[readonly] {
color: #bdbdbd;
}
fieldset[disabled] .form-control {
color: #bdbdbd;
}
option:disabled {
color: #bdbdbd;
}
optgroup:disabled {
color: #bdbdbd;
}
.form-control option:disabled {
color: #bdbdbd;
}
.is-block {
/* override for occasional layout gremlins where it doesn't make sense to have to insert another row */
display: block !important;
clear: both;
}
label.is-block {
margin-top: 10px;
}
/* radio toggle blocks */
.radio-block .radio {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
.radio-block .radio label {
display: inline-block;
position: relative;
}
.radio-block label span {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 7px 8px 7px 30px;
margin: 0;
min-width: 150px;
background-color: #F9F9F9;
font-weight: 600;
}
.radio-block input[type="radio"] {
position: absolute;
top: 30%;
left: 10px;
margin: 0;
float: none;
}
.radio-block input:checked ~ span {
background-color: #e5f7d9;
border-color: #b5ea96;
text-shadow: 1px 0 rgba(255,255,255,0.7);
}
.radio-block .radio+.radio {
margin-left: 8px;
}
/* General content styles */
h2 {
font-size: 24px;
line-height: 30px;
font-weight: normal;
margin: 0 0 10px;
}
.describe-block {
background: #fff8f0;
padding: 1em;
color: #2e2e2e;
font-weight: normal;
border-top: 1px solid #ffc489;
border-bottom: 1px solid #ffc489;
border-left: 1px solid #e7e7e7;
border-right: 1px solid #e7e7e7;
margin-bottom: 15px;
}
.describe-block.secondary {
margin: 15px 0 0;
}
.describe-text {
margin-left: 25px;
margin-bottom: 0;
}
.describe-block .glyphicon-hand-right {
margin-right: 10px;
float: left;
}
.describe-block.action {
background: #fff0f0;
border-top: 1px solid #fff0f0;
border-bottom: 1px solid #fff0f0;
}
.remove_lang_link {
color: #a30000;
}
.remove_breakfast_type_link {
color: #a30000;
}
.edit {
padding-left: 12px;
margin: -5px 0 10px 0;
font-size: 12px;
background: url("https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/edit.png") no-repeat 0;
white-space: nowrap;
display: block;
clear: both;
}
#calendar .btn-info {
width: 15px;
height: 15px;
line-height: 1px;
padding: 0;
position: relative;
top: 25px;
left: 20px;
}
#calendar .count + .btn-info {
left: -20px;
}
/* Styling the success messages */
/* Errors */
.has-error label {
font-weight: 600;
}
.help-block,
.warning-block {
font-size: 12px;
}
.has-error .input-group-addon {
color: #a30000;
background-color: #fff0f0;
border-color: #a30000;
}
.alert-info {
color: #bad4f7;
background-color: #fafcff;
border-color: #ebf3ff;
}
.has-error .form-control:focus {
border-color: #a30000;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 6px #ffebeb;
}
/* hiding the Plack thing */
#plDebug {
display: none;
}
.dropdown-menu.is-active {
display: block;
right: 0;
max-height: 300px;
overflow-y: auto;
}
.dropdown-menu.is-active a:focus {
outline: none;
}
.dropdown-menu.is-active a span {
font-size: 0.85em;
}
.disambiguation-modal-options {
list-style: none;
margin: 0;
padding: 0;
}
.disambiguation-modal-options li {
margin: 0;
padding: 0;
}
.disambiguation-modal-options input {
margin-right: 0.5em;
}
.map-wrapper {
height: 350px;
position: relative;
overflow: hidden;
}
.map-wrapper #city-map {
height: 350px;
width: 100%;
direction: ltr;
}
/* Creditcard logos */
.has_select_none .select_all{
display: none;
}
.has_select_none .select_none{
display: block;
}
.creditcard_section .radio,
.creditcard_section .checkbox{ /* This overrides Bootstrap default styling to include CC logos */
padding-left: 57px;
}
.creditcard_section .radio input[type="radio"],
.creditcard_section .radio-inline input[type="radio"],
.creditcard_section .checkbox input[type="checkbox"],
.creditcard_section .checkbox-inline input[type="checkbox"]{
margin: 7px 0 0 -75px;
}
.cc_remote_accepted {
margin-top: 8px;
}
.cc_remote_accepted .radio input[type="radio"],
.cc_remote_accepted .radio-inline input[type="radio"],
.cc_remote_accepted .checkbox input[type="checkbox"],
.cc_remote_accepted .checkbox-inline input[type="checkbox"]{
margin: 0;
}
.is_right_to_left .creditcard_section .checkbox input[type="checkbox"],
.is_right_to_left .creditcard_section .checkbox-inline input[type="checkbox"]{
margin: inherit;
margin-right: -75px;
margin-top: 7px;
}
.creditcard {
background: url(https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/cc_vert.png) no-repeat;
height: 28px;
position: relative;
margin: 0 0 10px 18px;
line-height: 25px;
}
.americanexpress {
background-position: 0px -216px;
}
.visa {
background-position: 0px 0px;
}
.euromastercard {
background-position: 0px -36px;
}
.dinersclub {
background-position: 0px -144px;
}
.discover {
background-position: 0px -108px;
}
.maestro {
background-position: 0px -72px;
}
.switch {
background-position: 0px -252px;
}
.solo {
background-position: 0 -468px;
}
.jcb {
background-position: 0px -180px;
}
.cartebleue{
background-position: 0 -396px;
}
.hipercard{
background-position: 0 -360px;
}
.argencard{
background-position: 0px -432px;
}
.unionpaycreditcard,
.unionpaydebitcard {
background-position: 0px -288px;
}
.eccard {
background-position: 0 -324px;
}
.cartasi {
background-position: 0 -504px;
}
.carteblanche {
background-position: 0 -540px;
}
.eftpos {
background-position: 0 -576px;
}
.uc {
background-position: 0 -612px;
}
.bancontact {
background-position: 0 -648px;
}
.nicos {
background-position: 0 -684px;
}
.redcompra {
background-position: 0 -720px;
}
.bccard {
background-position: 0 -756px;
}
.cabal {
background-position: 0 -792px;
}
.australianbankcard {
background-position: 0 -828px;
}
.no_cc{
background-position: 0 -900px;
}
.elocreditcard{
background-position: 0 -934px;
}
.mir {
background: url('https://q.bstatic.com/static/img/payments/payment_icons_redesign/mir.svg') no-repeat left/contain;
}
.atmcard,
.pin,
.jinsui,
.dragon,
.bankcard,
.red6000,
.chipper,
.greatwall,
.peony,
.pacific,
.khszechenyipihenokartya,
.mkbszechenyipihenokartya,
.mkbszchnyipihenkrtya,
.khszchnyipihenkrtya,
.otpszchnyipihenkrtya,
.otpszechenyipihenokartya,
.othercards,
.greatwall{
background-position: 0 -864px;
min-width: 17px;
height: 28px;
line-height: 25px;
}
.clear-left{
clear: left;
}
.form-loading {
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/loader-button.gif') !important;
background-repeat: no-repeat;
background-position: 98% 48%;
}
.is_right_to_left .form-loading {
background-position: 2% 48%;
}
/* Settings page */
.lang_spoken_line {
clear: both;
}
.remove_bed_link {
color: #a30000;
}
.remove_bed_link:hover {
color: #a30000;
}
.text_not_bold {
font-weight: normal;
}
/* Footer */
footer {
background-color: #fafcff;
text-align: right;
padding: 15px;
}
footer li {
margin: 0 10px 10px 0;
}
.is_right_to_left footer li.pull-left{
float:right!important;
}
/* Dev/test env changes */
.test .user {
background: #888;
}
/* Error validation styling for SM --- Potentialy, build could share this code. */
.form-group.has-error .help-block {
border: 1px solid #a30000;
margin-top: -2px;
padding-top: 0.6em;
width: 100%;
}
.has-error .help-block {
padding: 0.5em;
background-color: #FFF8F8;
border-radius: 0 0 4px 4px;
display: inline-block;
}
.special-chars-lang #photo-tips li {
font-weight: 700;
}
.special-chars-lang .page_description p,
.special-chars-lang .describe-block,
.special-chars-lang h1,
.special-chars-lang h1 .submenu_title,
.special-chars-lang .menu li a,
.special-chars-lang .menu li a em,
.special-chars-lang .photo-counter,
.special-chars-lang #photo-tips span,
.special-chars-lang .message-empty,
.special-chars-lang .no-invoices {
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
/* Direct payment styling for sb/sm/migration */
#direct_payment_fields {
transition-duration: 700ms;
}
#direct_payment_fields.with-summary {
border: 1px solid #fafcff;
padding: 15px;
border-bottom: none;
transition-duration: 700ms;
}
body.aa-font, body.aa-font h1, body.aa-font h2, body.aa-font h3, body.aa-font h4, body.aa-font h5, body.aa-font h6, body.aa-font .h1, body.aa-font .h2, body.aa-font .h3, body.aa-font .h4, body.aa-font .h5, body.aa-font .h6{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* */
.rotation90 {
transform: rotate(90deg);
}
.rotation180 {
transform: rotate(180deg);
}
.rotation270 {
transform: rotate(-90deg);
}
/* */
/* Body antialiased fonts */
.aa_fonts {
-webkit-font-smoothing: antialiased;
}
/* language selector */
.language-selector {
padding: 15px 15px 10px;
border-left: 1px solid rgba(83, 123, 180, 0.3);
border-right: 1px solid rgba(83, 123, 180, 0.3);
float: right;
width: 3.75em;
height: 3.5em;
cursor: pointer;
position: relative;
}
.flag_icon {
width: 20px;
height: 20px;
display: inline-block;
background-position: 0 0;
background-size: cover;
}
.ontoplang {
float: right;
position: absolute;
width: 3.75em;
height: 3.5em;
top: 0;
left: 0;
display: block;
border: 10px solid transparent;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
cursor: pointer;
}
.ontoplang:active {
width: auto;
}
.flag_ar { /* Arabic */
background-image: url('//xx.bstatic.com/static/img/flags/24/arab_league.png');
}
.flag_bg { /* Bulgarian */
background-image: url('//xx.bstatic.com/static/img/flags/24/bg.png');
}
.flag_ca { /* Catalan */
background-image: url('//xx.bstatic.com/static/img/flags/24/catalonia.png');
}
.flag_cs { /* Czech */
background-image: url('//xx.bstatic.com/static/img/flags/24/cz.png');
}
.flag_da { /* Danish */
background-image: url('//xx.bstatic.com/static/img/flags/24/dk.png');
}
.flag_de { /* German */
background-image: url('//xx.bstatic.com/static/img/flags/24/de.png');
}
.flag_el { /* Greek */
background-image: url('//xx.bstatic.com/static/img/flags/24/gr.png');
}
.flag_en { /* EN-GB */
background-image: url('//xx.bstatic.com/static/img/flags/24/gb.png');
}
.flag_en-us,
.flag_xu { /* EN-US */
background-image: url('//xx.bstatic.com/static/img/flags/24/us.png');
}
.flag_es { /* Spanish */
background-image: url('//xx.bstatic.com/static/img/flags/24/es.png');
}
.flag_es-ar,
.flag_xa { /* Spanish Argentinian */
background-image: url('//xx.bstatic.com/static/img/flags/24/ar.png');
}
.flag_et { /* Estonian */
background-image: url('//xx.bstatic.com/static/img/flags/24/ee.png');
}
.flag_fi { /* Finnish/Suomi */
background-image: url('//xx.bstatic.com/static/img/flags/24/fi.png');
}
.flag_fr { /* French */
background-image: url('//xx.bstatic.com/static/img/flags/24/fr.png');
}
.flag_he { /* Hebrew */
background-image: url('//xx.bstatic.com/static/img/flags/24/il.png');
}
.flag_hr { /* Croatian */
background-image: url('//xx.bstatic.com/static/img/flags/24/hr.png');
}
.flag_hi { /* Hindi */
background-image: url('//xx.bstatic.com/static/img/flags/24/in.png');
}
.flag_hu { /* Hungarian */
background-image: url('//xx.bstatic.com/static/img/flags/24/hu.png');
}
.flag_id { /* Bahasa Indonesia */
background-image: url('//xx.bstatic.com/static/img/flags/24/id.png');
}
.flag_is { /* Icelandic */
background-image: url('//xx.bstatic.com/static/img/flags/24/is.png');
}
.flag_it { /* Italian */
background-image: url('//xx.bstatic.com/static/img/flags/24/it.png');
}
.flag_ja { /* Japanese */
background-image: url('//xx.bstatic.com/static/img/flags/24/jp.png');
}
.flag_ko { /* Korean */
background-image: url('//xx.bstatic.com/static/img/flags/24/kr.png');
}
.flag_lt { /* Lithuanian */
background-image: url('//xx.bstatic.com/static/img/flags/24/lt.png');
}
.flag_lv { /* Latvian */
background-image: url('//xx.bstatic.com/static/img/flags/24/lv.png');
}
.flag_ms { /* Bahasa Malaysia */
background-image: url('//xx.bstatic.com/static/img/flags/24/my.png');
}
.flag_nl { /* Dutch */
background-image: url('//xx.bstatic.com/static/img/flags/24/nl.png');
}
.flag_no { /* Norwegian */
background-image: url('//xx.bstatic.com/static/img/flags/24/no.png');
}
.flag_pl { /* Polish */
background-image: url('//xx.bstatic.com/static/img/flags/24/pl.png');
}
.flag_tl { /* Filipino */
background-image: url('//xx.bstatic.com/static/img/flags/24/ph.png');
}
.flag_pt-br,
.flag_xb { /* Brazillian Portugese */
background-image: url('//xx.bstatic.com/static/img/flags/24/br.png');
}
.flag_pt { /* Portugese */
background-image: url('//xx.bstatic.com/static/img/flags/24/pt.png');
}
.flag_ro { /* Romanian */
background-image: url('//xx.bstatic.com/static/img/flags/24/ro.png');
}
.flag_ru { /* Russian */
background-image: url('//xx.bstatic.com/static/img/flags/24/ru.png');
}
.flag_sk { /* Slovak */
background-image: url('//xx.bstatic.com/static/img/flags/24/sk.png');
}
.flag_sl { /* Slovenian */
background-image: url('//xx.bstatic.com/static/img/flags/24/si.png');
}
.flag_sr { /* Serbian */
background-image: url('//xx.bstatic.com/static/img/flags/24/rs.png');
}
.flag_sv { /* Swedish */
background-image: url('//xx.bstatic.com/static/img/flags/24/se.png');
}
.flag_th { /* Thai */
background-image: url('//xx.bstatic.com/static/img/flags/24/th.png');
}
.flag_tr { /* Turkish */
background-image: url('//xx.bstatic.com/static/img/flags/24/tr.png');
}
.flag_uk { /* Ukranian */
background-image: url('//xx.bstatic.com/static/img/flags/24/ua.png');
}
.flag_vi { /* Vietnamese */
background-image: url('//xx.bstatic.com/static/img/flags/24/vn.png');
}
.flag_zh { /* Chinese */
background-image: url('//xx.bstatic.com/static/img/flags/24/cn.png');
}
.flag_zh-tw,
.flag_xt { /* Traditional Chinese */
background-image: url('//xx.bstatic.com/static/img/flags/24/z4.png');
}
.tooltip .tooltip-inner {
text-align: left;
}
/* npx_joinapp_landing_use_connect_help_icon
These styles have been copied/pasted from manage.css. We are trying to unify Connect and joinapp headers.
Last step would be to unify also this code
*/
.topnav__menu_section {
background: none;
border: 0;
display: block;
height: 32px;
padding: 26px 22px;
position: relative;
text-align: center;
width: 32px;
overflow: visible;
}
.topnav__menu_section.active:after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 12px 14px 12px;
border-color: transparent transparent color(#0071c2 s(5.6%) l(92.9%)) transparent;
z-index: 3;
}
.topnav__menu_section span {
display: none;
font-size: 14px;
font-weight: 300;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 2.4;
}
@media screen and (min-width: 768px) {
.menu .user {
display: block;
}
.topnav__menu_section {
padding: 35px 0 0;
width: 80px;
}
.topnav__menu_section span {
display: inline-block;
width: 100%;
}
.topnav__menu_section.active:after {
bottom: -8px;
}
}
.topnav__menu_section:before {
content: '';
position: absolute;
background: color(#0071c2 s(5.5%) l(82.2%));
border-radius: 50%;
color: #fff;
box-shadow: 0 0 0 1px #fff inset;
top: 10px;
left: 50%;
overflow: hidden;
width: 32px;
height: 32px;
margin-left: -16px;
font-family: 'biconset-buddy';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.topnav__menu_section--help:before {
background: #febb02;
content: "?";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 30px;
top: 7px;
}
.topnav__menu_section--tour:before {
background: #febb02;
content: "?";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 30px;
top: 7px;
}
.topnav__menu_section--help.active{
outline: none;
}
.topnav__menu_section--tour.active:after {
display: none;
}
/* Cookie warning */
.cookie-warning {
background: #333;
color: #fff;
padding: 8px 24px;
font-size: 12px;
font-weight: 300;
margin: 0;
overflow: hidden;
position: relative;
text-align: center;
z-index: 9999;
}
.cookie-warning p {
max-width: 1100px;
margin: 0 auto;
display: block;
}
.cookie-warning a {
color: #ebf3ff;
}
.cookie-warning__close {
background: transparent;
border: 0;
bottom: 0;
color: #fff;
cursor: pointer;
font-family: Arial;
font-size: 22px;
font-weight: bold;
opacity: .9;
padding: 0;
position: absolute;
right: 8px;
top: 0;
-webkit-appearance: none;
}
.cookie-warning__close:hover,
.cookie-warning__close:focus {
opacity: 1;
}
@font-face {
font-family: 'biconset-buddy';
src:url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/bootstrap/fonts/biconset-buddy.eot');
src:url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/bootstrap/fonts/biconset-buddy.eot?#iefix') format('embedded-opentype'),
url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/bootstrap/fonts/biconset-buddy.woff') format('woff'),
url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/bootstrap/fonts/biconset-buddy.ttf') format('truetype'),
url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/bootstrap/fonts/biconset-buddy.svg') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'biconset-buddy';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Enable Ligatures ================ */
letter-spacing: 0;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bed:before {
content: "\b396";
}
.icon-boost:before {
content: "\d001";
}
.icon-bookingsuite:before {
content: "\d000";
}
.icon-arrowright:before {
content: "\b177";
}
.icon-messagecircle:before {
content: "\b16b";
}
.icon-geniussquare:before {
content: "\b164";
}
.icon-genius:before {
content: "\b163";
}
.icon-ge:before {
content: "\b162";
}
.icon-star:before {
content: "\b161";
}
.icon-exclamation:before {
content: "\b160";
}
.icon-nonsmoking:before {
content: "\b06c";
}
.icon-tick:before {
content: "\b058";
}
.icon-tickdot:before {
content: "\b057";
}
.icon-camera:before {
content: "\b044";
}
.icon-mybooking:before {
content: "\b015";
}
.icon-circle:before {
content: "\b007";
}
.icon-plus:before {
content: "\b0ef";
}
.icon-users:before {
content: "\b088";
}
.icon-suitcasevert:before {
content: "\b089";
}
.icon-speech:before {
content: "\b08a";
}
.icon-signal:before {
content: "\b08b";
}
.icon-mobilephone:before {
content: "\b08c";
}
.icon-location:before {
content: "\b08d";
}
.icon-key:before {
content: "\b08e";
}
.icon-graph:before {
content: "\b08f";
}
.icon-flag:before {
content: "\b091";
}
.icon-openmail:before {
content: "\b092";
}
.icon-plusmail:before {
content: "\b093";
}
.icon-crop:before {
content: "\b094";
}
.icon-coins:before {
content: "\b095";
}
.icon-bbooking:before {
content: "\b097";
}
.icon-arrowleft2:before {
content: "\b096";
}
.icon-message:before {
content: "\b086";
}
.icon-share:before {
content: "\b085";
}
.icon-refresh:before {
content: "\b084";
}
.icon-alarm:before {
content: "\b083";
}
.icon-dashboard:before {
content: "\b082";
}
.icon-warning:before {
content: "\b117";
}
@media (min-width: 991px) {
.row .menu .nav .lang-select {
padding-left: 20px;
}
}
/* down to medium screen - 1170px */
@media (max-width: 1170px) {
#calendar .date-info {
margin-right: 0.7em;
}
#calendar .date-rooms .single-unit {
font-size: 1.1em;
}
.mobile_property_status.label {
display: none;
}
}
/* Tablet size and under */
@media screen and (max-width: 991px) {
body:before { content: 'small'; }
.menu + .content {
padding-left: 15px;
clear: both;
}
.menu {
width: 100%;
font-weight: 400;
background-color: transparent;
}
.menu em {
font-size: 1.35rem;
}
.unread_notification {
left: 23px;
font-size: 12px;
padding: 0 3px;
}
.mobile-nav {
padding: 10px 0 0 10px;
}
.env-self-manage .user {
overflow: hidden;
}
.hamburger {
border-radius: 4px;
border: 1px solid #537BB4;
display: block;
float: left;
padding: 0.35em 0.5em;
text-align: center;
margin-right: 10px;
}
.b_logo {
float: left;
background-position: left center;
margin: 25px 0px;
}
#logo {
float: left;
margin: 13px 0px 15px 0;
}
.join_logo {
margin: 13px 0px 15px 13px;
}
.join_logo img {
margin-left: 0;
}
nav .block_details {
float: right;
background-color: #003580;
text-align: right;
padding: 8px 10px 12px 10px;
border-top: none;
font-size: 14px;
}
nav .block_details.sb {
width: 50%;
text-align: left;
padding-top: 15px;
clear: none;
}
nav .block_details a.btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
margin-top: 6px;
margin-bottom: 0;
}
.icon-bar {
background-color: #FFF;
display: block;
width: 28px;
height: 3px;
border-radius: 1px;
margin: 6px auto;
}
.mobile-nav {
display: block;
float: left;
height: 50px;
margin: 3px 0 0 0;
}
.menu ul.nav {
width: 90%;
background-color: #537BB4;
display: none;
}
.menu .nav > li > a > .glyphicon {
left: 0px;
font-size: 2rem;
}
.menu.no_icons .nav > li > a.completed {
padding-left: 42px;
}
.menu.no_icons .nav > li > a {
padding-left: 9px;
}
.menu .nav li a .bicon-key {
font-size: 2.6rem;
}
nav.menu-opened ul.nav {
display: block;
position: relative;
}
nav.menu-opened .hamburger {
background-color: #EEE;
}
nav.menu-opened .hamburger .icon-bar {
background: #003580;
}
nav .hamburger:active .icon-bar {
background: #96D99D;
}
nav .sidebar-usps {
display: none;
}
nav.menu-opened .sidebar-usps {
display: block;
width: 90%;
}
.menu .nav .selected {
background-color: #eee;
}
.menu .nav .subnav {
padding-left: 45px;
}
.menu .nav .subnav a {
border-radius: 0;
}
.menu .nav .subnav a:hover {
background-color: #E9F0FA !important;
}
.menu .nav.actions,
.menu .nav.actions>li {
}
.thankyousb .list-unstyled li {
margin: 0 10px 40px 130px;
font-size: 17px;
}
.thankyousb .glyphicon {
margin-bottom: 25px;
}
.radio-block .radio+.radio {
margin-left: 0;
}
.footer-language-selector {
display: none !important;
}
/* progress bar on top */
.progress_bar_on_top {
clear: both;
}
.join_logo.progress_on_top {
float: none;
width: 150px;
margin: 13px auto 0 auto;
}
.progress_bar_on_top + .content {
clear: both;
}
.menu.no_icons .nav > li > a.completed {
padding-left: 42px;
}
.menu.no_icons .nav > li > a {
padding-left: 9px;
}
.bottom-sticky-save-button-container {
width: 100%;
left: 0;
}
}
/* iPad specific tweaks */
.ua-hw-ipad .btn-lg {
font-weight: 600;
font-size: 23px;
}
.ua-hw-ipad .menu .nav > li > a > .glyphicon {
left: 0px;
}
.ua-hw-ipad .menu {
font-size: 1.2em;
font-weight: 400;
}
.ua-hw-ipad .menu a {
font-weight: 400;
}
.ua-hw-ipad .menu em {
font-size: 1.35rem;
}
.ua-hw-ipad #content {
background-attachment: inherit;
background-position-y: 250px;
}
html .ua-hw-ipad {
font-size: 17px;
}
.ua-hw-ipad h3 {
margin-bottom: 0.6em;
}
.ua-hw-ipad .page_description p {
font-size: 1em;
font-weight: normal;
}
.ua-hw-ipad .describe-block {
font-weight: 400;
margin-left: -3px;
margin-right: -3px;
}
.ua-hw-ipad legend {
margin-left: -17px;
font-size: 1.4em;
}
.ua-hw-ipad .form-control {
font-size: 0.9em;
height: 2.5em;
}
.ua-hw-ipad .btn-sm,
.ua-hw-ipad .btn-xs {
font-size: 0.9em;
}
.ua-hw-ipad .top-lang-picker {
font-size: 14px;
}
@media screen and (orientation:landscape) {
/* Landscape-specific styles */
.ua-hw-ipad .menu {
font-size: 1em;
font-weight: 400;
line-height: 1.3;
}
.ua-hw-ipad .menu a {
font-weight: 400;
}
.ua-hw-ipad .menu em {
font-size: 1.35rem;
line-height: 1.3;
}
.menu .nav .submenu li a {
font-size: 1em;
}
nav .block_details {
font-size: 14px;
}
.ua-hw-ipad .top-lang-picker {
font-size: 14px;
}
}
@media screen and (orientation:portrait) {
/* Portrait-specific styles */
.ua-hw-ipad .menu {
background-color: transparent;
}
.ua-hw-ipad ul.nav {
width: 90%;
background-color: #537BB4;
display: none;
}
nav.menu-opened ul.nav {
display: block;
position: relative;
}
.ua-hw-ipad .menu .nav:before {
border: 7px solid transparent;
border-bottom-color: #537BB4;
position: absolute;
top: -13px;
left: 4%;
z-index: 2;
}
.ua-hw-ipad .menu .nav .selected {
background-color: #eee;
}
.mobile-nav {
display: block;
float: left;
height: 50px;
margin: 3px 0 0 0;
}
.ua-hw-ipad .thankyousb .list-unstyled li {
margin: 0 10px 40px 130px;
font-size: 17px;
}
.ua-hw-ipad .thankyousb .glyphicon {
margin-bottom: 25px;
}
.ua-hw-ipad nav .actions li.lang-select {
max-height: 60px;
}
.ua-hw-ipad .top-lang-picker {
font-size: 14px;
}
}
/* end iPad */
/* Phone size 'xs' screens */
@media screen and (max-width: 767px) {
.user {
padding: 10px 10px 5px 10px;
}
#logo {
display: none;
}
.join_logo {
display: none;
}
.hamburger {
height: auto;
width: auto;
}
.mobile-nav {
margin: 0;
padding: 0;
}
nav .block_details {
float: none;
text-align: left;
padding: 2px 0 0 0;
}
nav .block_details.sb {
padding: 0;
width: 100%;
}
nav .block_details span {
display: block;
}
.menu a em {
margin-top: 2px;
line-height: 1.25;
}
.menu .nav:before {
border: 7px solid transparent;
border-bottom-color: #537BB4;
position: absolute;
top: -13px;
left: 7%;
z-index: 2;
}
ul.nav {
width: 97%;
}
.menu .nav > li > a > .glyphicon {
top: 13px;
}
.menu .nav li a .bicon-key {
margin-top: -4px;
}
.menu .nav .subnav {
padding-left: 35px;
}
.menu .nav .submenu li a {
font-size: 1em;
}
.menu .nav.actions,
.menu .nav.actions>li {
background-color: #003580;
}
.menu .nav.actions:before {
display: none;
}
.menu .nav.actions li a {
font-size: 0.9em;
font-weight: 600;
padding-top: 15px;
padding-bottom: 15px;
}
.menu .nav.actions .glyphicon {
font-size: 1.5rem;
opacity: 0.75;
top: 13px;
color: #FFF;
position: absolute;
}
.menu .nav .lang-select {
padding: 15px 15px 15px 10px;
border-top: 1px solid #537BB4;
}
nav #lang_selector {
margin: -3px 0 -3px 35px;
}
h1 {
font-size: 2em;
}
h1 .submenu_arrow {
font-size:0.8em;
}
h1 span {
display: block;
}
h1 a.btn.pull-right {
float: none !important;
}
.page_description {
display: none;
}
#error_header ul {
margin-left: -20px;
line-height: 1.2;
}
#error_header li {
margin-bottom: 0.5em;
}
.room-size-card-header {
margin-bottom: 15px;
}
.room-size-card-input {
padding-right: 15px;
}
#footer_wrapper ul {
font-size:0.8em;
text-align: left;
margin:0;
}
#btn_availability span, #btn_availability {
cursor:pointer;
}
.survey-topics > li {
border: none;
}
.survey-topics > li label,
.survey-topics .radio-block {
float: none;
width: 100%;
}
.survey-topics .radio-block {
padding: 0;
text-align: left;
}
.is_right_to_left .survey-topics .radio-block {
padding: 0;
text-align: right;
}
#facilities_section .row:last-child ul {
padding-top: 0;
padding-bottom: 0;
}
#facilities_section li {
padding: 0;
border: none;
}
#facilities_section .form-control {
margin-bottom: 10px;
}
#facilities_section .checkbox {
margin-bottom: 2px;
}
/* progress bar on top */
.join_logo.progress_on_top {
display: block;
}
.join_logo.progress_on_top img {
margin: 0;
}
.progress_bar_on_top .block_details.sb {
padding-top: 0;
}
.progress_bar_on_top .block_details.sb .progress_status {
float: none;
margin-right: 0;
text-align: left;
line-height: normal;
}
}
/* TODO: we have flag list also in base.scss */
/* Country Flags */
.flag_icon {
width: 20px;
height: 20px;
display: inline-block;
background-position: 0 0;
background-size: cover;
}
.flag_ar { /* Arabic */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/ar.png');
}
.flag_bg { /* Bulgarian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/bg.png');
}
.flag_ca { /* Catalan */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/ca.png');
}
.flag_cs { /* Czech */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/cz.png');
}
.flag_da { /* Danish */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/dk.png');
}
.flag_de { /* German */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/de.png');
}
.flag_el { /* Greek */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/gr.png');
}
.flag_en,
.flag_gb,
.flag_en-gb { /* EN-GB */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/gb.png');
}
.flag_en-us { /* EN-US */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/us.png');
}
.flag_es,
.flag_es-mx { /* Spanish */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/es.png');
}
.flag_et { /* Estonian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/ee.png');
}
.flag_fi { /* Finnish/Suomi */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/fi.png');
}
.flag_fr,
.flag_fr-ca { /* French */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/fr.png');
}
.flag_he { /* Hebrew */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/il.png');
}
.flag_hr { /* Croatian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/hr.png');
}
.flag_hu { /* Hungarian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/hu.png');
}
.flag_id { /* Bahasa Indonesia */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/id.png');
}
.flag_is { /* Icelandic */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/is.png');
}
.flag_it { /* Italian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/it.png');
}
.flag_ja { /* Japanese */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/jp.png');
}
.flag_ko { /* Korean */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/kr.png');
}
.flag_lt { /* Lithuanian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/lt.png');
}
.flag_lv { /* Latvian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/lv.png');
}
.flag_ms { /* Bahasa Malaysia */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/my.png');
}
.flag_nl { /* Dutch */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/nl.png');
}
.flag_no { /* Norwegian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/no.png');
}
.flag_pl { /* Polish */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/pl.png');
}
.flag_pt-br { /* Brazillian Portugese */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/br.png');
}
.flag_pt,
.flag_pt-pt { /* Portugese */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/pt.png');
}
.flag_ro { /* Romanian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/ro.png');
}
.flag_ru { /* Russian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/ru.png');
}
.flag_sk { /* Slovak */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/sk.png');
}
.flag_sl { /* Slovenian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/si.png');
}
.flag_sr { /* Serbian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/rs.png');
}
.flag_sv { /* Swedish */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/se.png');
}
.flag_th { /* Thai */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/th.png');
}
.flag_tr { /* Turkish */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/tr.png');
}
.flag_uk { /* Ukranian */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/ua.png');
}
.flag_vi { /* Vietnamese */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/vn.png');
}
.flag_zh,
.flag_zh-cn { /* Chinese */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/cn.png');
}
.flag_zh-tw { /* Traditional Chinese */
background-image: url('https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/flags/z4.png')
}
/* FAQs page */
.faq-page {
background: #fff;
padding: 10px 20px 20px 20px;
margin: 30px 0;
}
.section-wrapper .faq-container {
max-width: 1000px;
font-size: 1.1em;
margin: 0 auto;
}
.faq-content {
max-width: 250px;
}
/* new FAQ */
.faq-help {
background: #fff;
padding-bottom: 80px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
}
.faq-help h3 {
margin-top: 30px;
margin-bottom: 20px;
padding-top: 20px;
font-size: 20px;
}
.faq-help .faq-section[active="true"] {
opacity: 1 !important;
}
.faq-help .faq-section h3 span {
color: #003580;
margin-left: -26px;
display: none;
}
.faq-help h2 {margin-top: 20px;}
.faq-help .faq-content a {
display: block;
}
.faq-help .faq-content {
margin-top: 100px;
line-height: 19px;
margin-bottom: 50px
}
.faq-help .faq-content[stick="true"] {
position: fixed;
margin-top: 0;
top: 20px;
}
.faq-help .faq-reg-scheme ul {
list-style: none;
padding-left: 0;
margin-bottom: 20px;
line-height: 30px;
}
.faq-help .faq-reg-scheme li {
color: #8E8E8E;
}
.faq-help .faq-reg-scheme li.done {
color: #008009;
}
.faq-help .bread-crumbs {
padding-left: 0
}
.bread-crumbs {
color: #003580;
padding: 12px 30px;
font-size: 13px;
line-height: 1;
}
.bread-crumbs .separator {
color: #febb02;
padding: 0 5px;
}
.bread-crumbs a {
color: #0071c2;
text-decoration: underline;
}
@media screen and (max-width: 768px) {
.faq-help {
padding-left: 15px;
padding-right: 15px;
}
.faq-help .faq-content {
margin-top: 20px;
}
.faq-help .faq-content[stick="true"] {
position: relative;
top: 20px;
}
}
/* end of new FAQ */
/* why commission */
.why-commission dl {
max-width: 55em;
margin: auto;
position: relative;
padding-left: 2em;
}
.why-commission dt:after {
position: absolute;
font-family: 'Glyphicons Halflings';
content: "\e013";
color: #008009;
font-weight: 400;
left: 0em;
margin-top: -2px;
}
.why-commission dt {
font-size: 1.1
}
.why-commission dd {
margin-bottom: 0.85em;
}
.add-another-property-button_footer {
width: 100%;
height: 50px;
text-align: center;
}
/* Start Apartment Therapy Banner */
.apartmenttherapy-banner .row {
position: relative;
margin: 0.7em auto;
max-width: 800px;
font-weight: 500;
background: #fff;
border: 1px solid #fafcff;
padding: 0.5em;
}
.apartmenttherapy-banner-description h3 {
font-size: 1.2em;
margin: 0.5em 0 0.2em;
padding-right: 25px;
}
.apartmenttherapy-banner .apart-logo {
max-width: 100%;
user-drag: none;
user-select: none;
}
.apartmenttherapy-banner-description p {
color: #bad4f7;
margin-bottom: 0.2em;
}
.close-apartmenttherapy-banner {
position: absolute;
right: 10px;
top: 10px;
}
.close-apartmenttherapy-banner .glyphicon-remove-circle:before {
font-size: 18px;
color: #bad4f7;
}
.close-apartmenttherapy-banner:hover .glyphicon-remove-circle:before {
color: #bad4f7;
}
@media screen and (max-width: 1200px) {
.apartmenttherapy-banner .row {
margin: 0;
margin-top: 50px;
}
}
@media screen and (max-width: 600px) {
.apartmenttherapy-banner-logo {
width: 70%;
}
.apartmenttherapy-banner-description {
width: 100%;
}
.apartmenttherapy-banner {
position: relative;
}
}
@media screen and (max-width: 768px) {
.apartmenttherapy-banner .row {
margin-top: 0;
}
}
/* End Apartment Therapy Banner */
/* Start Tripping Banner */
.tripping-banner .row {
position: relative;
margin: 0.7em auto;
max-width: 800px;
font-weight: 500;
background: #fff;
border: 1px solid #fafcff;
padding: 0.5em;
}
.tripping-banner-description h3 {
font-size: 1.2em;
margin: 0.5em 0 0.2em;
padding-right: 25px;
}
.tripping-banner .tripping-logo {
max-width: 80%;
user-drag: none;
user-select: none;
}
.tripping-banner-description p {
color: #bad4f7;
margin-bottom: 0.2em;
}
.close-tripping-banner {
position: absolute;
right: 10px;
top: 10px;
}
.close-tripping-banner .glyphicon-remove-circle:before {
font-size: 18px;
color: #bad4f7;
}
.close-tripping-banner:hover .glyphicon-remove-circle:before {
color: #bad4f7;
}
@media screen and (max-width: 1200px) {
.tripping-banner .row {
margin: 0;
margin-top: 50px;
}
}
@media screen and (max-width: 600px) {
.tripping-logo {
width: 70%;
}
.tripping-description {
width: 100%;
}
.tripping-banner {
position: relative;
}
}
@media screen and (max-width: 768px) {
.tripping-banner .row {
margin-top: 0;
}
}
/* End Tripping Banner */
/* Start General styles for Index Banner AID */
.index-banner .row {
position: relative;
margin: 0.7em auto;
max-width: 600px;
font-weight: 500;
background: #fff;
border: 1px solid #fafcff;
padding: 0.5em;
}
.description-index-banner h3 {
font-size: 1.2em;
margin: 0.5em 0 0.2em;
padding-right: 25px;
}
.index-banner .logo-index-banner {
max-width: 100%;
padding-top: 15px;
user-drag: none;
user-select: none;
}
.index-banner .image-index-banner {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}
.campaign-banner__title {
color: #fff;
font-size: 16px;
line-height: 24px;
margin: 20px;
width: 55%;
position: absolute;
z-index: 9;
}
.campaign-banner {
width: 500px;
height: 200px;
border: 1px solid #fafcff;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 10px;
overflow: hidden;
position: relative;
background-image: url(https://q.bstatic.com/static/img/join/join-host-banner.jpeg);
background-position: 0 -210px;
background-size: cover;
}
.campaign-banner_box {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
cursor: pointer;
}
.campaign-banner:hover:before {
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
}
.campaign-banner:before {
content: " ";
position: absolute;
z-index: 1;
width: 100%;
top: 0;
height: 100%;
background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%);
transition-duration: 0.5s;
transition-timing-function: ease-in;
transition-property: background;
}
.campaign-banner__picture {
margin-top: -230px;
position: absolute;
width: 100%;
}
.campaign-banner__anchor:link {
color: #fff;
display:block;
}
.campaign-banner__anchor:visited {
color: #fff;
display:block;
}
.campaign-banner__anchor:hover {
color: #fff;
display:block;
}
.description-index-banner p {
color: #bad4f7;
margin-bottom: 0.2em;
}
.close-index-banner {
position: absolute;
right: 10px;
top: 10px;
z-index: 11;
}
.close-index-banner .glyphicon-remove-circle:before {
font-size: 18px;
color: #bad4f7;
}
.close-index-banner:hover .glyphicon-remove-circle:before {
color: #bad4f7;
}
@media screen and (max-width: 1280px) {
.index-banner .row {
margin-top: 50px;
}
}
@media screen and (max-width: 600px) {
.logo-index-banner {
width: 100%;
}
.description-index-banner {
width: 100%;
}
.index-banner {
position: relative;
}
}
@media screen and (max-width: 768px) {
.index-banner .row {
margin-top:0;
margin-bottom: 0;
}
}
/* Finish General styles for Index Banner AID */
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
[class^=bui-],
[class^=bui-]:before,
[class^=bui-]:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Spacers */
.bui-spacer { margin-bottom: 24px !important; }
.bui-spacer--smaller { margin-bottom: 2px !important; }
.bui-spacer--small { margin-bottom: 4px !important; }
.bui-spacer--medium { margin-bottom: 8px !important; }
.bui-spacer--large { margin-bottom: 16px !important; }
.bui-spacer--larger { margin-bottom: 24px !important; }
.bui-spacer--largest { margin-bottom: 32px !important; }
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
/* Color */
.bui-f-color-destructive {
color: #c00 !important;
}
.bui_color_destructive {
color: #c00 !important;
}
.bui-f-color-callout {
color: #ff8000 !important;
}
.bui_color_callout {
color: #ff8000 !important;
}
.bui-f-color-constructive {
color: #008009 !important;
}
.bui_color_constructive {
color: #008009 !important;
}
.bui-f-color-complement {
color: #febb02 !important;
}
.bui_color_complement {
color: #febb02 !important;
}
.bui-f-color-primary {
color: #003580 !important;
}
.bui_color_primary {
color: #003580 !important;
}
.bui-f-color-grayscale {
color: #6b6b6b !important;
}
.bui_color_grayscale {
color: #6b6b6b !important;
}
.bui-f-color-grayscale-darker {
color: #333 !important;
}
.bui-f-color-black {
color: #000 !important;
}
.bui_color_black {
color: #000 !important;
}
.bui-f-color-white {
color: #fff !important;
}
.bui_color_white {
color: #fff !important;
}
.bui-f-color-action {
color: #0071c2 !important;
}
.bui_color_action {
color: #0071c2 !important;
}
/* Fill */
.bui-f-fill-destructive {
background-color: #c00 !important;
fill: #c00 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_destructive {
background-color: #c00 !important;
fill: #c00 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-callout {
background-color: #ff8000 !important;
fill: #ff8000 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_callout {
background-color: #ff8000 !important;
fill: #ff8000 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-complement {
background-color: #febb02 !important;
fill: #febb02 !important;
border-color: #333 !important;
color: #333 !important;
}
.bui_fill_complement {
background-color: #febb02 !important;
fill: #febb02 !important;
border-color: #333 !important;
color: #333 !important;
}
.bui-f-fill-constructive {
background-color: #008009 !important;
fill: #008009 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_constructive {
background-color: #008009 !important;
fill: #008009 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-primary {
background-color: #003580 !important;
fill: #003580 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_primary {
background-color: #003580 !important;
fill: #003580 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-grayscale {
background-color: #6b6b6b !important;
fill: #6b6b6b !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_grayscale {
background-color: #6b6b6b !important;
fill: #6b6b6b !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-black {
background-color: #000 !important;
fill: #000 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_black {
background-color: #000 !important;
fill: #000 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-fill-white {
background-color: #fff !important;
fill: #fff !important;
border-color: #333 !important;
color: #333 !important;
}
.bui_fill_white {
background-color: #fff !important;
fill: #fff !important;
border-color: #333 !important;
color: #333 !important;
}
.bui-f-fill-action {
background-color: #0071c2 !important;
fill: #0071c2 !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_action {
background-color: #0071c2 !important;
fill: #0071c2 !important;
border-color: #fff !important;
color: #fff !important;
}
/* Outline */
.bui-f-outline-destructive {
background-color: transparent !important;
fill: transparent !important;
border-color: #c00 !important;
color: #c00 !important;
}
.bui_fill_destructive_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #c00 !important;
color: #c00 !important;
}
.bui-f-outline-callout {
background-color: transparent !important;
fill: transparent !important;
border-color: #ff8000 !important;
color: #ff8000 !important;
}
.bui_fill_callout_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #ff8000 !important;
color: #ff8000 !important;
}
.bui-f-outline-complement {
background-color: transparent !important;
fill: transparent !important;
border-color: #febb02 !important;
color: #febb02 !important;
}
.bui_fill_complement_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #febb02 !important;
color: #febb02 !important;
}
.bui-f-outline-constructive {
background-color: transparent !important;
fill: transparent !important;
border-color: #008009 !important;
color: #008009 !important;
}
.bui_fill_constructive_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #008009 !important;
color: #008009 !important;
}
.bui-f-outline-primary {
background-color: transparent !important;
fill: transparent !important;
border-color: #003580 !important;
color: #003580 !important;
}
.bui_fill_primary_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #003580 !important;
color: #003580 !important;
}
.bui-f-outline-grayscale {
background-color: transparent !important;
fill: transparent !important;
border-color: #6b6b6b !important;
color: #6b6b6b !important;
}
.bui_fill_grayscale_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #6b6b6b !important;
color: #6b6b6b !important;
}
.bui-f-outline-black {
background-color: transparent !important;
fill: transparent !important;
border-color: #000 !important;
color: #000 !important;
}
.bui_fill_black_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #000 !important;
color: #000 !important;
}
.bui-f-outline-white {
background-color: transparent !important;
fill: transparent !important;
border-color: #fff !important;
color: #fff !important;
}
.bui_fill_white_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #fff !important;
color: #fff !important;
}
.bui-f-outline-action {
background-color: transparent !important;
fill: transparent !important;
border-color: #0071c2 !important;
color: #0071c2 !important;
}
.bui_fill_action_outline {
background-color: transparent !important;
fill: transparent !important;
border-color: #0071c2 !important;
color: #0071c2 !important;
}
[class^=bui-],
[class^=bui-]:before,
[class^=bui-]:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Spacers */
.bui-spacer { margin-bottom: 24px !important; }
.bui-spacer--smaller { margin-bottom: 2px !important; }
.bui-spacer--small { margin-bottom: 4px !important; }
.bui-spacer--medium { margin-bottom: 8px !important; }
.bui-spacer--large { margin-bottom: 16px !important; }
.bui-spacer--larger { margin-bottom: 24px !important; }
.bui-spacer--largest { margin-bottom: 32px !important; }
/* Layout & display
============================================= */
.u-show {
display: block !important;
}
.bui-u-full-width,
.u-full-width {
display: block !important;
width: 100% !important;
}
.u-hidden {
display: none !important;
}
.bui-u-inline,
.u-inline {
display: inline-block !important;
width: auto !important;
}
@media (max-width: 575px) {
.u-show\@small {
display: block !important;
}
.u-hidden\@small {
display: none !important;
}
.bui-u-inline\@small,
.u-inline\@small {
display: inline-block !important;
width: auto !important;
}
.bui-u-full-width\@small,
.u-full-width\@small {
display: block !important;
width: 100% !important;
}
}
@media (min-width: 576px) {
.u-show\@medium {
display: block !important;
}
.u-hidden\@medium {
display: none !important;
}
.bui-u-inline\@medium,
.u-inline\@medium {
display: inline-block !important;
width: auto !important;
}
.bui-u-full-width\@medium,
.u-full-width\@medium {
display: block !important;
width: 100% !important;
}
}
@media (min-width: 992px) {
.u-show\@large {
display: block !important;
}
.u-hidden\@large {
display: none !important;
}
.bui-u-inline\@large,
.u-inline\@large {
display: inline-block !important;
width: auto !important;
}
.bui-u-full-width\@large,
.u-full-width\@large {
display: block !important;
width: 100% !important;
}
}
@media (min-width: 1170px) {
.bui-u-show\@huge,
.u-show\@huge {
display: block !important;
}
.bui-u-hidden\@huge,
.u-hidden\@huge {
display: none !important;
}
.bui-u-inline\@huge,
.u-inline\@huge {
display: inline-block !important;
width: auto !important;
}
.bui-u-full-width\@huge,
.u-full-width\@huge {
display: block !important;
width: 100% !important;
}
}
.u-full-height {
height: 100%;
}
@media (max-width: 575px) {
.u-bleed\@small {
margin-left: calc(16px * -1) !important;
margin-right: calc(16px * -1) !important;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
}
/* Text alignment
============================================= */
.bui-u-text-left,
.u-text-left {
text-align: left !important;
}
.rtl .bui-u-text-left,
[dir="rtl"] .bui-u-text-left,
.rtl .u-text-left,
[dir="rtl"] .u-text-left {
text-align: right !important;
}
.bui-u-text-center,
.u-text-center {
text-align: center !important;
}
.bui-u-text-right,
.u-text-right {
text-align: right !important;
}
.rtl .bui-u-text-right,
[dir="rtl"] .bui-u-text-right,
.rtl .u-text-right,
[dir="rtl"] .u-text-right {
text-align: left !important;
}
@media (max-width: 575px) {
.bui-u-text-left\@small {
text-align: left !important;
}
.rtl .bui-u-text-left\@small, [dir="rtl"] .bui-u-text-left\@small {
text-align: right !important;
}
.bui-u-text-right\@small {
text-align: right !important;
}
.rtl .bui-u-text-right\@small, [dir="rtl"] .bui-u-text-right\@small {
text-align: left !important;
}
.bui-u-text-center\@small {
text-align: center !important;
}
}
@media (min-width: 576px) {
.bui-u-text-left\@medium {
text-align: left !important;
}
.rtl .bui-u-text-left\@medium, [dir="rtl"] .bui-u-text-left\@medium {
text-align: right !important;
}
.bui-u-text-right\@medium {
text-align: right !important;
}
.rtl .bui-u-text-right\@medium, [dir="rtl"] .bui-u-text-right\@medium {
text-align: left !important;
}
.bui-u-text-center\@medium {
text-align: center !important;
}
}
@media (min-width: 992px) {
.bui-u-text-left\@large {
text-align: left !important;
}
.rtl .bui-u-text-left\@large, [dir="rtl"] .bui-u-text-left\@large {
text-align: right !important;
}
.bui-u-text-right\@large {
text-align: right !important;
}
.rtl .bui-u-text-right\@large, [dir="rtl"] .bui-u-text-right\@large {
text-align: left !important;
}
.bui-u-text-center\@large {
text-align: center !important;
}
}
@media (min-width: 1170px) {
.bui-u-text-left\@huge {
text-align: left !important;
}
.rtl .bui-u-text-left\@huge, [dir="rtl"] .bui-u-text-left\@huge {
text-align: right !important;
}
.bui-u-text-right\@huge {
text-align: right !important;
}
.rtl .bui-u-text-right\@huge, [dir="rtl"] .bui-u-text-right\@huge {
text-align: left !important;
}
.bui-u-text-center\@huge {
text-align: center !important;
}
}
/* Accessibility
============================================= */
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0;
}
.u-sr-only-focusable:active,
.u-sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none;
}
/* Print
============================================= */
.u-visible-print-block,
.u-visible-print-inline-block,
.u-visible-print-inline {
display: none !important;
}
@media print {
.u-hidden-print {
display: none !important;
}
.u-visible-print-block {
display: block !important;
}
.u-visible-print-inline-block {
display: inline-block !important;
}
.u-visible-print-inline {
display: inline !important;
}
}
/* Deprecated
============================================= */
.bui-u-pull-start,
.u-pull-start {
float: left !important;
}
.rtl .bui-u-pull-start,
[dir="rtl"] .bui-u-pull-start,
.rtl .u-pull-start,
[dir="rtl"] .u-pull-start {
float: right !important;
}
.bui-u-pull-end,
.u-pull-end {
float: right !important;
}
.rtl .bui-u-pull-end,
[dir="rtl"] .bui-u-pull-end,
.rtl .u-pull-end,
[dir="rtl"] .u-pull-end {
float: left !important;
}
.bui-u-clearfix:before,
.bui-u-clearfix:after,
.u-clearfix:before,
.u-clearfix:after {
content: " ";
display: table;
line-height: 0;
}
.bui-u-clearfix:after,
.u-clearfix:after {
clear: both;
}
/* Spacing
============================================= */
.bui-u-margin-start--2 {
margin-left: 2px !important;
}
.rtl .bui-u-margin-start--2, [dir="rtl"] .bui-u-margin-start--2 {
margin-left: 0 !important;
margin-right: 2px !important;
}
.bui-u-margin-start--4 {
margin-left: 4px !important;
}
.rtl .bui-u-margin-start--4, [dir="rtl"] .bui-u-margin-start--4 {
margin-left: 0 !important;
margin-right: 4px !important;
}
.bui-u-margin-start--8 {
margin-left: 8px !important;
}
.rtl .bui-u-margin-start--8, [dir="rtl"] .bui-u-margin-start--8 {
margin-left: 0 !important;
margin-right: 8px !important;
}
.bui-u-margin-start--16 {
margin-left: 16px !important;
}
.rtl .bui-u-margin-start--16, [dir="rtl"] .bui-u-margin-start--16 {
margin-left: 0 !important;
margin-right: 16px !important;
}
.bui-u-margin-start--24 {
margin-left: 24px !important;
}
.rtl .bui-u-margin-start--24, [dir="rtl"] .bui-u-margin-start--24 {
margin-left: 0 !important;
margin-right: 24px !important;
}
.bui-u-margin-start--32 {
margin-left: 32px !important;
}
.rtl .bui-u-margin-start--32, [dir="rtl"] .bui-u-margin-start--32 {
margin-left: 0 !important;
margin-right: 32px !important;
}
.bui-u-margin-end--2 {
margin-right: 2px !important;
}
.rtl .bui-u-margin-end--2, [dir="rtl"] .bui-u-margin-end--2 {
margin-right: 0 !important;
margin-left: 2px !important;
}
.bui-u-margin-end--4 {
margin-right: 4px !important;
}
.rtl .bui-u-margin-end--4, [dir="rtl"] .bui-u-margin-end--4 {
margin-right: 0 !important;
margin-left: 4px !important;
}
.bui-u-margin-end--8 {
margin-right: 8px !important;
}
.rtl .bui-u-margin-end--8, [dir="rtl"] .bui-u-margin-end--8 {
margin-right: 0 !important;
margin-left: 8px !important;
}
.bui-u-margin-end--16 {
margin-right: 16px !important;
}
.rtl .bui-u-margin-end--16, [dir="rtl"] .bui-u-margin-end--16 {
margin-right: 0 !important;
margin-left: 16px !important;
}
.bui-u-margin-end--24 {
margin-right: 24px !important;
}
.rtl .bui-u-margin-end--24, [dir="rtl"] .bui-u-margin-end--24 {
margin-right: 0 !important;
margin-left: 24px !important;
}
.bui-u-margin-end--32 {
margin-right: 32px !important;
}
.rtl .bui-u-margin-end--32, [dir="rtl"] .bui-u-margin-end--32 {
margin-right: 0 !important;
margin-left: 32px !important;
}
.bui-u-margin-top--2 {
margin-top: 2px !important;
}
.bui-u-margin-top--4 {
margin-top: 4px !important;
}
.bui-u-margin-top--8 {
margin-top: 8px !important;
}
.bui-u-margin-top--16 {
margin-top: 16px !important;
}
.bui-u-margin-top--24 {
margin-top: 24px !important;
}
.bui-u-margin-top--32 {
margin-top: 32px !important;
}
.bui-u-margin-bottom--2 {
margin-bottom: 2px !important;
}
.bui-u-margin-bottom--4 {
margin-bottom: 4px !important;
}
.bui-u-margin-bottom--8 {
margin-bottom: 8px !important;
}
.bui-u-margin-bottom--16 {
margin-bottom: 16px !important;
}
.bui-u-margin-bottom--24 {
margin-bottom: 24px !important;
}
.bui-u-margin-bottom--32 {
margin-bottom: 32px !important;
}
/* Spacing: padding */
.bui-u-padding-start--2 {
padding-left: 2px !important;
}
.rtl .bui-u-padding-start--2, [dir="rtl"] .bui-u-padding-start--2 {
padding-left: 0 !important;
padding-right: 2px !important;
}
.bui-u-padding-start--4 {
padding-left: 4px !important;
}
.rtl .bui-u-padding-start--4, [dir="rtl"] .bui-u-padding-start--4 {
padding-left: 0 !important;
padding-right: 4px !important;
}
.bui-u-padding-start--8 {
padding-left: 8px !important;
}
.rtl .bui-u-padding-start--8, [dir="rtl"] .bui-u-padding-start--8 {
padding-left: 0 !important;
padding-right: 8px !important;
}
.bui-u-padding-start--16 {
padding-left: 16px !important;
}
.rtl .bui-u-padding-start--16, [dir="rtl"] .bui-u-padding-start--16 {
padding-left: 0 !important;
padding-right: 16px !important;
}
.bui-u-padding-start--24 {
padding-left: 24px !important;
}
.rtl .bui-u-padding-start--24, [dir="rtl"] .bui-u-padding-start--24 {
padding-left: 0 !important;
padding-right: 24px !important;
}
.bui-u-padding-start--32 {
padding-left: 32px !important;
}
.rtl .bui-u-padding-start--32, [dir="rtl"] .bui-u-padding-start--32 {
padding-left: 0 !important;
padding-right: 32px !important;
}
.bui-u-padding-end--2 {
padding-right: 2px !important;
}
.rtl .bui-u-padding-end--2, [dir="rtl"] .bui-u-padding-end--2 {
padding-right: 0 !important;
padding-left: 2px !important;
}
.bui-u-padding-end--4 {
padding-right: 4px !important;
}
.rtl .bui-u-padding-end--4, [dir="rtl"] .bui-u-padding-end--4 {
padding-right: 0 !important;
padding-left: 4px !important;
}
.bui-u-padding-end--8 {
padding-right: 8px !important;
}
.rtl .bui-u-padding-end--8, [dir="rtl"] .bui-u-padding-end--8 {
padding-right: 0 !important;
padding-left: 8px !important;
}
.bui-u-padding-end--16 {
padding-right: 16px !important;
}
.rtl .bui-u-padding-end--16, [dir="rtl"] .bui-u-padding-end--16 {
padding-right: 0 !important;
padding-left: 16px !important;
}
.bui-u-padding-end--24 {
padding-right: 24px !important;
}
.rtl .bui-u-padding-end--24, [dir="rtl"] .bui-u-padding-end--24 {
padding-right: 0 !important;
padding-left: 24px !important;
}
.bui-u-padding-end--32 {
padding-right: 32px !important;
}
.rtl .bui-u-padding-end--32, [dir="rtl"] .bui-u-padding-end--32 {
padding-right: 0 !important;
padding-left: 32px !important;
}
.bui-u-padding-top--2 {
padding-top: 2px !important;
}
.bui-u-padding-top--4 {
padding-top: 4px !important;
}
.bui-u-padding-top--8 {
padding-top: 8px !important;
}
.bui-u-padding-top--16 {
padding-top: 16px !important;
}
.bui-u-padding-top--24 {
padding-top: 24px !important;
}
.bui-u-padding-top--32 {
padding-top: 32px !important;
}
.bui-u-padding-bottom--2 {
padding-bottom: 2px !important;
}
.bui-u-padding-bottom--4 {
padding-bottom: 4px !important;
}
.bui-u-padding-bottom--8 {
padding-bottom: 8px !important;
}
.bui-u-padding-bottom--16 {
padding-bottom: 16px !important;
}
.bui-u-padding-bottom--24 {
padding-bottom: 24px !important;
}
.bui-u-padding-bottom--32 {
padding-bottom: 32px !important;
}
.bui-f-font-defaults {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
.bui_font_defaults {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
.bui-f-font-defaults h1,
.bui_font_defaults h1{
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.bui-f-font-defaults h2,
.bui_font_defaults h2 {
font-size: 20px;
font-weight: 700;
line-height: 28px;
}
.bui-f-font-defaults h3,
.bui_font_defaults h3 {
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.bui-f-font-defaults h4,
.bui_font_defaults h4 {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-f-font-defaults h5,
.bui_font_defaults h5 {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-f-font-defaults h6,
.bui_font_defaults h6 {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-f-font-defaults input {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
.bui-f-font-defaults textarea {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
.bui-f-font-defaults button {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
.bui-f-font-defaults select {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
.bui_font_defaults input {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
.bui_font_defaults textarea {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
.bui_font_defaults button {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
.bui_font_defaults select {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
}
body .bui-f-font-display_three,
body .bui_font_display_three {
font-size: 32px;
font-weight: 700;
line-height: 40px;
}
body .bui-f-font-display_two,
body .bui_font_display_two {
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
body .bui-f-font-display_one,
body .bui_font_display_one {
font-size: 20px;
font-weight: 700;
line-height: 28px;
}
body .bui-f-font-heading,
body .bui_font_heading {
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
body .bui-f-font-featured,
body .bui_font_featured {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
body .bui-f-font-strong,
body .bui_font_strong {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
body .bui-f-font-emphasized,
body .bui_font_emphasized {
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
body .bui-f-font-body,
body .bui_font_body {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
body .bui-f-font-caption,
body .bui_font_caption {
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.bui-box {
padding: 16px;
}
.bui-box--overflow-hidden {
overflow: hidden;
}
/* Padding Sizes */
.bui-box--padding-none {
padding: 0;
}
.bui-box--padding-small {
padding: 8px;
}
.bui-box--padding-medium {
padding: 16px;
}
.bui-box--padding-large {
padding: 24px;
}
/* Border */
.bui-box--border-width-100 {
border: 1px solid;
}
.bui-box--border-radius-100 {
border-radius: 2px;
}
.bui-box--border-radius-200 {
border-radius: 2px;
}
.bui-box--border-radius-300 {
border-radius: 2px;
}
.bui-box--border-radius-circle {
border-radius: 9999px;
}
/* Colors */
.bui-box--background-color-destructive_alt {
background-color: #fff0f0;
}
.bui-box--background-color-constructive_alt {
background-color: #e7fde9;
}
.bui-box--background-color-callout_alt {
background-color: #fff0e0;
}
.bui-box--background-color-accent_alt {
background-color: #fdf4d8;
}
.bui-box--background-color-action_alt {
background-color: #e4f4ff;
}
.bui-box--background-color-neutral_alt {
background-color: #f2f2f2;
}
.bui-box--background-color-elevation_one {
background-color: #fff;
}
.bui-box--background-color-elevation_two {
background-color: #fff;
}
.bui-box--background-color-brand_primary {
color: #fff;
background-color: #003580;
}
.bui-box--background-color-brand_primary_dynamic {
color: #fff;
background-color: #003580;
}
.bui-box--border-color-destructive {
border-color: #c00;
}
.bui-box--border-color-constructive {
border-color: #008009;
}
.bui-box--border-color-accent {
border-color: #febb02;
}
.bui-box--border-color-callout {
border-color: #ff8000;
}
.bui-box--border-color-neutral_alt {
border-color: #e7e7e7;
}
.bui-box--border-color-neutral {
border-color: #949494;
}
/* Orientation */
.bui-box--orientation-horizontal {
padding-top: 0;
padding-bottom: 0;
}
.bui-box--orientation-vertical {
padding-left: 0;
padding-right: 0;
}
/* DEPRECATED */
.bui-box--size-large {
padding: 24px;
}
.bui-grid {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: calc(-1 * 16px) calc(-1 * 16px / 2) 0 calc(-1 * 16px / 2);
clear: both; /* Fix for floated elements before the grid, that break due to negative margin */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
/* Reset list styles */
padding: 0;
list-style-type: none;
}
[class*='bui-grid__column'] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 16px calc(16px / 2) 0 calc(16px / 2);
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
/* Reset list styles */
margin: 0;
}
.bui-grid--bleed {
margin: 0;
}
.bui-grid--bleed > [class*='bui-grid__column'] {
padding: 0;
}
.bui-grid__column-1,
.bui-grid__column-1\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 1));
flex-basis: calc(100% / (12 / 1));
width: calc(100% / (12 / 1));
max-width: calc(100% / (12 / 1));
}
.bui-grid__column-2,
.bui-grid__column-2\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 2));
flex-basis: calc(100% / (12 / 2));
width: calc(100% / (12 / 2));
max-width: calc(100% / (12 / 2));
}
.bui-grid__column-3,
.bui-grid__column-1\/4 {
-ms-flex-preferred-size: calc(100% / (12 / 3));
flex-basis: calc(100% / (12 / 3));
width: calc(100% / (12 / 3));
max-width: calc(100% / (12 / 3));
}
.bui-grid__column-4,
.bui-grid__column-1\/3 {
-ms-flex-preferred-size: calc(100% / (12 / 4));
flex-basis: calc(100% / (12 / 4));
width: calc(100% / (12 / 4));
max-width: calc(100% / (12 / 4));
}
.bui-grid__column-5,
.bui-grid__column-5\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 5));
flex-basis: calc(100% / (12 / 5));
width: calc(100% / (12 / 5));
max-width: calc(100% / (12 / 5));
}
.bui-grid__column-6,
.bui-grid__column-half,
.bui-grid__column-1\/2 {
-ms-flex-preferred-size: calc(100% / (12 / 6));
flex-basis: calc(100% / (12 / 6));
width: calc(100% / (12 / 6));
max-width: calc(100% / (12 / 6));
}
.bui-grid__column-7,
.bui-grid__column-7\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 7));
flex-basis: calc(100% / (12 / 7));
width: calc(100% / (12 / 7));
max-width: calc(100% / (12 / 7));
}
.bui-grid__column-8,
.bui-grid__column-2\/3 {
-ms-flex-preferred-size: calc(100% / (12 / 8));
flex-basis: calc(100% / (12 / 8));
width: calc(100% / (12 / 8));
max-width: calc(100% / (12 / 8));
}
.bui-grid__column-9,
.bui-grid__column-3\/4 {
-ms-flex-preferred-size: calc(100% / (12 / 9));
flex-basis: calc(100% / (12 / 9));
width: calc(100% / (12 / 9));
max-width: calc(100% / (12 / 9));
}
.bui-grid__column-10,
.bui-grid__column-10\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 10));
flex-basis: calc(100% / (12 / 10));
width: calc(100% / (12 / 10));
max-width: calc(100% / (12 / 10));
}
.bui-grid__column-11,
.bui-grid__column-11\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 11));
flex-basis: calc(100% / (12 / 11));
width: calc(100% / (12 / 11));
max-width: calc(100% / (12 / 11));
}
.bui-grid__column-full,
.bui-grid__column-12,
.bui-grid__column-1\/1 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
.bui-grid__column--offset-1 {
margin-left: calc(100% / (12 / 1));
}
.rtl .bui-grid__column--offset-1, [dir="rtl"] .bui-grid__column--offset-1 {
margin-left: 0;
margin-right: calc(100% / (12 / 1));
}
.bui-grid__column--offset-2 {
margin-left: calc(100% / (12 / 2));
}
.rtl .bui-grid__column--offset-2, [dir="rtl"] .bui-grid__column--offset-2 {
margin-left: 0;
margin-right: calc(100% / (12 / 2));
}
.bui-grid__column--offset-3 {
margin-left: calc(100% / (12 / 3));
}
.rtl .bui-grid__column--offset-3, [dir="rtl"] .bui-grid__column--offset-3 {
margin-left: 0;
margin-right: calc(100% / (12 / 3));
}
.bui-grid__column--offset-4 {
margin-left: calc(100% / (12 / 4));
}
.rtl .bui-grid__column--offset-4, [dir="rtl"] .bui-grid__column--offset-4 {
margin-left: 0;
margin-right: calc(100% / (12 / 4));
}
.bui-grid__column--offset-5 {
margin-left: calc(100% / (12 / 5));
}
.rtl .bui-grid__column--offset-5, [dir="rtl"] .bui-grid__column--offset-5 {
margin-left: 0;
margin-right: calc(100% / (12 / 5));
}
.bui-grid__column--offset-6,
.bui-grid__column--offset-half {
margin-left: calc(100% / (12 / 6));
}
.rtl .bui-grid__column--offset-6,
[dir="rtl"] .bui-grid__column--offset-6,
.rtl .bui-grid__column--offset-half,
[dir="rtl"] .bui-grid__column--offset-half {
margin-left: 0;
margin-right: calc(100% / (12 / 6));
}
.bui-grid__column--offset-7 {
margin-left: calc(100% / (12 / 7));
}
.rtl .bui-grid__column--offset-7, [dir="rtl"] .bui-grid__column--offset-7 {
margin-left: 0;
margin-right: calc(100% / (12 / 7));
}
.bui-grid__column--offset-8 {
margin-left: calc(100% / (12 / 8));
}
.rtl .bui-grid__column--offset-8, [dir="rtl"] .bui-grid__column--offset-8 {
margin-left: 0;
margin-right: calc(100% / (12 / 8));
}
.bui-grid__column--offset-9 {
margin-left: calc(100% / (12 / 9));
}
.rtl .bui-grid__column--offset-9, [dir="rtl"] .bui-grid__column--offset-9 {
margin-left: 0;
margin-right: calc(100% / (12 / 9));
}
.bui-grid__column--offset-10 {
margin-left: calc(100% / (12 / 10));
}
.rtl .bui-grid__column--offset-10, [dir="rtl"] .bui-grid__column--offset-10 {
margin-left: 0;
margin-right: calc(100% / (12 / 10));
}
.bui-grid__column--offset-11 {
margin-left: calc(100% / (12 / 11));
}
.rtl .bui-grid__column--offset-11, [dir="rtl"] .bui-grid__column--offset-11 {
margin-left: 0;
margin-right: calc(100% / (12 / 11));
}
/* Vertical alignment
============================================= */
.bui-grid--align-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bui-grid--align-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.bui-grid--align-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
/* Horizontal alignment
============================================= */
.bui-grid--justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.bui-grid--justify-space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.bui-grid--justify-space-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
/* RTL
============================================= */
.bui-grid--reversed {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
/* Breakpoint switches (medium)
============================================= */
@media (min-width: 576px) {
.bui-grid {
margin: calc(-1 * 24px) calc(-1 * 24px / 2) 0 calc(-1 * 24px / 2);
}
.bui-grid > [class*='bui-grid__column'] {
padding: 24px calc(24px / 2) 0 calc(24px / 2);
}
.bui-grid--size-small {
margin: calc(-1 * 16px) calc(-1 * 16px / 2) 0 calc(-1 * 16px / 2);
}
.bui-grid--size-small > [class*='bui-grid__column'] {
padding: 16px calc(16px / 2) 0 calc(16px / 2);
}
.bui-grid--bleed {
margin: 0;
}
.bui-grid--bleed > [class*='bui-grid__column'] {
padding: 0;
}
.bui-grid__column-1\@medium,
.bui-grid__column-1\/12\@medium {
-ms-flex-preferred-size: calc(100% / 12);
flex-basis: calc(100% / 12);
width: calc(100% / 12);
max-width: calc(100% / 12);
}
.bui-grid__column-2\@medium,
.bui-grid__column-2\/12\@medium {
-ms-flex-preferred-size: calc(100% / 6);
flex-basis: calc(100% / 6);
width: calc(100% / 6);
max-width: calc(100% / 6);
}
.bui-grid__column-3\@medium,
.bui-grid__column-1\/4\@medium {
-ms-flex-preferred-size: calc(100% / 4);
flex-basis: calc(100% / 4);
width: calc(100% / 4);
max-width: calc(100% / 4);
}
.bui-grid__column-4\@medium,
.bui-grid__column-1\/3\@medium {
-ms-flex-preferred-size: calc(100% / 3);
flex-basis: calc(100% / 3);
width: calc(100% / 3);
max-width: calc(100% / 3);
}
.bui-grid__column-5\@medium,
.bui-grid__column-5\/12\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 5));
flex-basis: calc(100% / (12 / 5));
width: calc(100% / (12 / 5));
max-width: calc(100% / (12 / 5));
}
.bui-grid__column-6\@medium,
.bui-grid__column-half\@medium,
.bui-grid__column-1\/2\@medium {
-ms-flex-preferred-size: calc(100% / 2);
flex-basis: calc(100% / 2);
width: calc(100% / 2);
max-width: calc(100% / 2);
}
.bui-grid__column-7\@medium,
.bui-grid__column-7\/12\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 7));
flex-basis: calc(100% / (12 / 7));
width: calc(100% / (12 / 7));
max-width: calc(100% / (12 / 7));
}
.bui-grid__column-8\@medium,
.bui-grid__column-2\/3\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 8));
flex-basis: calc(100% / (12 / 8));
width: calc(100% / (12 / 8));
max-width: calc(100% / (12 / 8));
}
.bui-grid__column-9\@medium,
.bui-grid__column-3\/4\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 9));
flex-basis: calc(100% / (12 / 9));
width: calc(100% / (12 / 9));
max-width: calc(100% / (12 / 9));
}
.bui-grid__column-10\@medium,
.bui-grid__column-10\/12\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 10));
flex-basis: calc(100% / (12 / 10));
width: calc(100% / (12 / 10));
max-width: calc(100% / (12 / 10));
}
.bui-grid__column-11\@medium,
.bui-grid__column-11\/12\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 11));
flex-basis: calc(100% / (12 / 11));
width: calc(100% / (12 / 11));
max-width: calc(100% / (12 / 11));
}
.bui-grid__column-full\@medium,
.bui-grid__column-12\@medium,
.bui-grid__column-1\/1\@medium {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
.bui-grid__column--offset-1\@medium {
margin-left: calc(100% / (12 / 1));
}
.rtl .bui-grid__column--offset-1\@medium, [dir="rtl"] .bui-grid__column--offset-1\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 1));
}
.bui-grid__column--offset-2\@medium {
margin-left: calc(100% / (12 / 2));
}
.rtl .bui-grid__column--offset-2\@medium, [dir="rtl"] .bui-grid__column--offset-2\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 2));
}
.bui-grid__column--offset-3\@medium {
margin-left: calc(100% / (12 / 3));
}
.rtl .bui-grid__column--offset-3\@medium, [dir="rtl"] .bui-grid__column--offset-3\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 3));
}
.bui-grid__column--offset-4\@medium {
margin-left: calc(100% / (12 / 4));
}
.rtl .bui-grid__column--offset-4\@medium, [dir="rtl"] .bui-grid__column--offset-4\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 4));
}
.bui-grid__column--offset-5\@medium {
margin-left: calc(100% / (12 / 5));
}
.rtl .bui-grid__column--offset-5\@medium, [dir="rtl"] .bui-grid__column--offset-5\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 5));
}
.bui-grid__column--offset-6\@medium,
.bui-grid__column--offset-half\@medium {
margin-left: calc(100% / (12 / 6));
}
.rtl .bui-grid__column--offset-6\@medium,
[dir="rtl"] .bui-grid__column--offset-6\@medium,
.rtl .bui-grid__column--offset-half\@medium,
[dir="rtl"] .bui-grid__column--offset-half\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 6));
}
.bui-grid__column--offset-7\@medium {
margin-left: calc(100% / (12 / 7));
}
.rtl .bui-grid__column--offset-7\@medium, [dir="rtl"] .bui-grid__column--offset-7\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 7));
}
.bui-grid__column--offset-8\@medium {
margin-left: calc(100% / (12 / 8));
}
.rtl .bui-grid__column--offset-8\@medium, [dir="rtl"] .bui-grid__column--offset-8\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 8));
}
.bui-grid__column--offset-9\@medium {
margin-left: calc(100% / (12 / 9));
}
.rtl .bui-grid__column--offset-9\@medium, [dir="rtl"] .bui-grid__column--offset-9\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 9));
}
.bui-grid__column--offset-10\@medium {
margin-left: calc(100% / (12 / 10));
}
.rtl .bui-grid__column--offset-10\@medium, [dir="rtl"] .bui-grid__column--offset-10\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 10));
}
.bui-grid__column--offset-11\@medium {
margin-left: calc(100% / (12 / 11));
}
.rtl .bui-grid__column--offset-11\@medium, [dir="rtl"] .bui-grid__column--offset-11\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 11));
}
}
/* Breakpoint switches (large)
============================================= */
@media (min-width: 992px) {
.bui-grid {
margin: calc(-1 * 32px) calc(-1 * 32px / 2) 0 calc(-1 * 32px / 2);
}
.bui-grid > [class*='bui-grid__column'] {
padding: 32px calc(32px / 2) 0 calc(32px / 2);
}
.bui-grid--size-small {
margin: calc(-1 * 16px) calc(-1 * 16px / 2) 0 calc(-1 * 16px / 2);
}
.bui-grid--size-small > [class*='bui-grid__column'] {
padding: 16px calc(16px / 2) 0 calc(16px / 2);
}
.bui-grid--bleed {
margin: 0;
}
.bui-grid--bleed > [class*='bui-grid__column'] {
padding: 0;
}
.bui-grid__column-1\@large,
.bui-grid__column-1\/12\@large {
-ms-flex-preferred-size: calc(100% / 12);
flex-basis: calc(100% / 12);
width: calc(100% / 12);
max-width: calc(100% / 12);
}
.bui-grid__column-2\@large,
.bui-grid__column-2\/12\@large {
-ms-flex-preferred-size: calc(100% / 6);
flex-basis: calc(100% / 6);
width: calc(100% / 6);
max-width: calc(100% / 6);
}
.bui-grid__column-3\@large,
.bui-grid__column-1\/4\@large {
-ms-flex-preferred-size: calc(100% / 4);
flex-basis: calc(100% / 4);
width: calc(100% / 4);
max-width: calc(100% / 4);
}
.bui-grid__column-4\@large,
.bui-grid__column-1\/3\@large {
-ms-flex-preferred-size: calc(100% / 3);
flex-basis: calc(100% / 3);
width: calc(100% / 3);
max-width: calc(100% / 3);
}
.bui-grid__column-5\@large,
.bui-grid__column-5\/12\@large {
-ms-flex-preferred-size: calc(100% / (12 / 5));
flex-basis: calc(100% / (12 / 5));
width: calc(100% / (12 / 5));
max-width: calc(100% / (12 / 5));
}
.bui-grid__column-6\@large,
.bui-grid__column-1\/2\@large {
-ms-flex-preferred-size: calc(100% / 2);
flex-basis: calc(100% / 2);
width: calc(100% / 2);
max-width: calc(100% / 2);
}
.bui-grid__column-7\@large,
.bui-grid__column-7\/12\@large {
-ms-flex-preferred-size: calc(100% / (12 / 7));
flex-basis: calc(100% / (12 / 7));
width: calc(100% / (12 / 7));
max-width: calc(100% / (12 / 7));
}
.bui-grid__column-8\@large,
.bui-grid__column-2\/3\@large {
-ms-flex-preferred-size: calc(100% / (12 / 8));
flex-basis: calc(100% / (12 / 8));
width: calc(100% / (12 / 8));
max-width: calc(100% / (12 / 8));
}
.bui-grid__column-9\@large,
.bui-grid__column-3\/4\@large {
-ms-flex-preferred-size: calc(100% / (12 / 9));
flex-basis: calc(100% / (12 / 9));
width: calc(100% / (12 / 9));
max-width: calc(100% / (12 / 9));
}
.bui-grid__column-10\@large,
.bui-grid__column-10\/12\@large {
-ms-flex-preferred-size: calc(100% / (12 / 10));
flex-basis: calc(100% / (12 / 10));
width: calc(100% / (12 / 10));
max-width: calc(100% / (12 / 10));
}
.bui-grid__column-11\@large,
.bui-grid__column-11\/12\@large {
-ms-flex-preferred-size: calc(100% / (12 / 11));
flex-basis: calc(100% / (12 / 11));
width: calc(100% / (12 / 11));
max-width: calc(100% / (12 / 11));
}
.bui-grid__column-12\@large,
.bui-grid__column-1\/1\@large {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
.bui-grid__column--offset-1\@large {
margin-left: calc(100% / (12 / 1));
}
.rtl .bui-grid__column--offset-1\@large, [dir="rtl"] .bui-grid__column--offset-1\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 1));
}
.bui-grid__column--offset-2\@large {
margin-left: calc(100% / (12 / 2));
}
.rtl .bui-grid__column--offset-2\@large, [dir="rtl"] .bui-grid__column--offset-2\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 2));
}
.bui-grid__column--offset-3\@large {
margin-left: calc(100% / (12 / 3));
}
.rtl .bui-grid__column--offset-3\@large, [dir="rtl"] .bui-grid__column--offset-3\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 3));
}
.bui-grid__column--offset-4\@large {
margin-left: calc(100% / (12 / 4));
}
.rtl .bui-grid__column--offset-4\@large, [dir="rtl"] .bui-grid__column--offset-4\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 4));
}
.bui-grid__column--offset-5\@large {
margin-left: calc(100% / (12 / 5));
}
.rtl .bui-grid__column--offset-5\@large, [dir="rtl"] .bui-grid__column--offset-5\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 5));
}
.bui-grid__column--offset-6,
.bui-grid__column--offset-half\@large {
margin-left: calc(100% / (12 / 6));
}
.rtl .bui-grid__column--offset-6,
[dir="rtl"] .bui-grid__column--offset-6,
.rtl .bui-grid__column--offset-half\@large,
[dir="rtl"] .bui-grid__column--offset-half\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 6));
}
.bui-grid__column--offset-7\@large {
margin-left: calc(100% / (12 / 7));
}
.rtl .bui-grid__column--offset-7\@large, [dir="rtl"] .bui-grid__column--offset-7\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 7));
}
.bui-grid__column--offset-8\@large {
margin-left: calc(100% / (12 / 8));
}
.rtl .bui-grid__column--offset-8\@large, [dir="rtl"] .bui-grid__column--offset-8\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 8));
}
.bui-grid__column--offset-9\@large {
margin-left: calc(100% / (12 / 9));
}
.rtl .bui-grid__column--offset-9\@large, [dir="rtl"] .bui-grid__column--offset-9\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 9));
}
.bui-grid__column--offset-10\@large {
margin-left: calc(100% / (12 / 10));
}
.rtl .bui-grid__column--offset-10\@large, [dir="rtl"] .bui-grid__column--offset-10\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 10));
}
.bui-grid__column--offset-11\@large {
margin-left: calc(100% / (12 / 11));
}
.rtl .bui-grid__column--offset-11\@large, [dir="rtl"] .bui-grid__column--offset-11\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 11));
}
}
.bui-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
ul.bui-group {
/* Reset list styles */
margin: 0;
padding: 0;
list-style-type: none;
}
.bui-group > * {
margin-top: 8px !important;
}
.bui-group > *:first-child {
margin-top: 0 !important;
}
.bui-group__item {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.bui-group__item--grow {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.bui-group__item--align-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.bui-group__item--align-center {
-ms-flex-item-align: center;
align-self: center;
}
.bui-group__item--align-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.bui-group--inline {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin: calc(8px * -1) 0 0 calc(8px * -1);
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.rtl .bui-group--inline, [dir="rtl"] .bui-group--inline {
margin: calc(8px * -1) calc(8px * -1) 0 0;
}
.bui-group--inline > .bui-group__item {
-ms-flex-negative: 1;
flex-shrink: 1;
}
.bui-group--inline > * {
margin: 8px 0 0 8px !important;
}
.rtl .bui-group--inline > *, [dir="rtl"] .bui-group--inline > * {
margin: 8px 8px 0 0 !important;
}
.bui-group--inline > *:first-child {
margin: 8px 0 0 8px !important;
}
.rtl .bui-group--inline > *:first-child, [dir="rtl"] .bui-group--inline > *:first-child {
margin: 8px 8px 0 0 !important;
}
.bui-group--inline.bui-group--vertical-align-middle {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bui-group--large > * {
margin-top: 16px !important;
}
.bui-group--inline.bui-group--large {
margin: calc(16px * -1) 0 0 calc(16px * -1);
}
.rtl .bui-group--inline.bui-group--large, [dir="rtl"] .bui-group--inline.bui-group--large {
margin: calc(16px * -1) calc(16px * -1) 0 0;
}
.bui-group--inline.bui-group--large > * {
margin: 16px 0 0 16px !important;
}
.rtl .bui-group--inline.bui-group--large > *, [dir="rtl"] .bui-group--inline.bui-group--large > * {
margin: 16px 16px 0 0 !important;
}
.bui-group--inline.bui-group--large > *:first-child {
margin: 16px 0 0 16px !important;
}
.rtl .bui-group--inline.bui-group--large > *:first-child, [dir="rtl"] .bui-group--inline.bui-group--large > *:first-child {
margin: 16px 16px 0 0 !important;
}
.bui-group--small > * {
margin-top: 4px !important;
}
.bui-group--inline.bui-group--small {
margin: calc(4px * -1) 0 0 calc(4px * -1);
}
.rtl .bui-group--inline.bui-group--small, [dir="rtl"] .bui-group--inline.bui-group--small {
margin: calc(4px * -1) calc(4px * -1) 0 0;
}
.bui-group--inline.bui-group--small > * {
margin: 4px 0 0 4px !important;
}
.rtl .bui-group--inline.bui-group--small > *, [dir="rtl"] .bui-group--inline.bui-group--small > * {
margin: 4px 4px 0 0 !important;
}
.bui-group--inline.bui-group--small > *:first-child {
margin: 4px 0 0 4px !important;
}
.rtl .bui-group--inline.bui-group--small > *:first-child, [dir="rtl"] .bui-group--inline.bui-group--small > *:first-child {
margin: 4px 4px 0 0 !important;
}
.bui-group--align-end.bui-group--inline {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.bui-group--align-center.bui-group--inline {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* For inline with grow */
.bui-group.--wrap-nowrap,
.bui-group.bui-group--wrap-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bui-group.--wrap-nowrap .bui-group__item:not(.bui-group__item--grow),
.bui-group.bui-group--wrap-nowrap .bui-group__item:not(.bui-group__item--grow) {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.bui-container {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 100%;
padding: 16px;
}
.bui-container--center {
margin: 0 auto;
max-width: 1140px;
}
/* General */
.bui-u-show {
display: block !important;
}
.bui-u-hidden {
display: none !important;
}
@media (max-width: 575px) {
.bui-u-show\@small {
display: block !important;
}
.bui-u-hidden\@small {
display: none !important;
}
}
@media (min-width: 576px) {
.bui-u-show\@medium {
display: block !important;
}
.bui-u-hidden\@medium {
display: none !important;
}
}
@media (min-width: 992px) {
.bui-u-show\@large {
display: block !important;
}
.bui-u-hidden\@large {
display: none !important;
}
}
.bui-u-full-height {
height: 100%;
}
@media (max-width: 575px) {
.bui-u-bleed\@small {
margin-left: calc(16px * -1) !important;
margin-right: calc(16px * -1) !important;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
.u-bleed\@small {
margin-left: calc(16px * -1) !important;
margin-right: calc(16px * -1) !important;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
}
/* Accessibility */
.bui-u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0;
}
.bui-u-sr-only-focusable:active,
.bui-u-sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none;
}
/* Print */
.bui-u-visible-print-block,
.bui-u-visible-print-inline-block,
.bui-u-visible-print-inline {
display: none !important;
}
@media print {
.bui-u-hidden-print {
display: none !important;
}
.bui-u-visible-print-block {
display: block !important;
}
.bui-u-visible-print-inline-block {
display: inline-block !important;
}
.bui-u-visible-print-inline {
display: inline !important;
}
}
/* Depth */
.bui-f-depth-0,
.bui_depth_0 {
z-index: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.bui-f-depth-1,
.bui_depth_1 {
z-index: 100;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.12),
0 2px 3px -1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.12),
0 2px 3px -1px rgba(0, 0, 0, 0.2);
}
.bui-f-depth-2,
.bui_depth_2 {
z-index: 200;
-webkit-box-shadow: 0 3px 18px 0 rgba(0, 0, 0, 0.12),
0 3px 5px -1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 18px 0 rgba(0, 0, 0, 0.12),
0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.bui-f-depth-3,
.bui_depth_3 {
z-index: 300;
-webkit-box-shadow: 0 4px 15px 2px rgba(0, 0, 0, 0.12),
0 5px 6px -3px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 15px 2px rgba(0, 0, 0, 0.12),
0 5px 6px -3px rgba(0, 0, 0, 0.2);
}
.bui-f-depth-4,
.bui_depth_4 {
z-index: 400;
-webkit-box-shadow: 0 6px 30px 5px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.2);
box-shadow: 0 6px 30px 5px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.bui-f-depth-1,
.bui-f-depth-2,
.bui-f-depth-3,
.bui-f-depth-4,
.bui_depth_1,
.bui_depth_2,
.bui_depth_3,
.bui_depth_4 {
border-color: transparent !important;
}
/* Forms */
.bui-form__control {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #333;
background: #fff;
border-radius: 2px;
border: 1px solid #bdbdbd;
display: block;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
padding: calc(8px - 1px);
width: 100%;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: left;
-webkit-transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rtl .bui-form__control, [dir="rtl"] .bui-form__control {
text-align: right;
}
.bui-form__control:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
border-color: #0071c2;
}
input.bui-form__control[disabled],
textarea.bui-form__control[disabled],
button.bui-form__control[disabled] {
color: #bdbdbd;
}
.bui-form__control:disabled,
.bui-form__control--disabled {
border-color: #e6e6e6;
background-color: #f5f5f5;
cursor: not-allowed;
}
.bui-form__control::-ms-clear {
display: none;
}
.bui-form__control::-webkit-input-placeholder {
color: #6b6b6b;
}
.bui-form__control::-moz-placeholder {
color: #6b6b6b;
}
.bui-form__control:-ms-input-placeholder {
color: #6b6b6b;
}
.bui-form__control::-ms-input-placeholder {
color: #6b6b6b;
}
.bui-form__control::placeholder {
color: #6b6b6b;
}
.bui-form__control:disabled::-webkit-input-placeholder {
color: #bdbdbd;
}
.bui-form__control:disabled::-moz-placeholder {
color: #bdbdbd;
}
.bui-form__control:disabled:-ms-input-placeholder {
color: #bdbdbd;
}
.bui-form__control:disabled::-ms-input-placeholder {
color: #bdbdbd;
}
.bui-form__control:disabled::placeholder {
color: #bdbdbd;
}
.bui-form__group {
border: none;
padding: 0;
margin: 0;
}
.bui-form__label {
display: block;
padding-bottom: 4px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.bui-form__group:last-child {
margin-bottom: 0;
}
.bui-form__error {
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-top: 4px;
}
.bui-form__success {
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-top: 4px;
}
.bui-form__helper {
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-top: 4px;
}
.bui-form__error {
display: none;
color: #c00;
}
.bui-form__success {
display: none;
color: #008009;
}
.bui-form__helper {
color: #6b6b6b;
}
/* Validation */
.bui-has-error .bui-form__control {
border-color: #c00;
}
.bui-has-error .bui-form__control:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.24);
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.24);
border-color: #c00;
}
.bui-has-error .bui-form__error {
display: block;
}
.bui-has-success .bui-form__control {
border-color: #008009;
}
.bui-has-success .bui-form__control:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
border-color: #0071c2;
}
.bui-has-success .bui-form__success {
display: block;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-button {
border: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: left;
padding: 8px 16px;
cursor: pointer;
font-family: inherit;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
position: relative;
color: #fff;
min-height: calc(4px * 9);
min-width: calc(4px * 9);
font-size: 14px;
font-weight: 500;
line-height: 20px;
/* For outline shadow shape */
border-radius: 2px;
background: transparent;
}
.rtl .bui-button, [dir="rtl"] .bui-button {
text-align: right;
}
.bui-button:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
-webkit-transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
background-color: #0071c2;
border: 1px solid #0071c2;
border-radius: 2px;
}
.bui-button:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
}
.bui-button:focus,
.bui-button:hover {
text-decoration: none;
}
.bui-button:hover {
color: #fff;
/* Covers modifiers specificity, removes product overrides */
text-decoration: none;
}
.bui-button:visited {
color: #fff;
/* Covers modifiers specificity, removes product overrides */
text-decoration: none;
}
.bui-button:focus {
color: #fff;
/* Covers modifiers specificity, removes product overrides */
text-decoration: none;
}
.bui-button:active {
color: #fff;
/* Covers modifiers specificity, removes product overrides */
text-decoration: none;
}
.bui-button.bui-button--active {
color: #fff;
/* Covers modifiers specificity, removes product overrides */
text-decoration: none;
}
.bui-button:link {
color: #fff;
/* Covers modifiers specificity, removes product overrides */
text-decoration: none;
}
.bui-button:not(.bui-is-loading):hover:before {
background-color: #00487a;
border-color: #00487a;
}
.bui-button:not(.bui-is-loading):active:before {
background-color: #00487a;
border-color: #00487a;
}
.bui-button.bui-button--active:before {
background-color: #00487a;
border-color: #00487a;
}
.bui-button__icon {
position: relative;
fill: currentColor;
height: 16px;
width: 16px;
margin-right: 8px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.rtl .bui-button__icon, [dir="rtl"] .bui-button__icon {
margin-right: 0;
margin-left: 8px;
}
.bui-button .bui-button__icon:only-child {
margin: 0 calc(12px * -1);
}
.bui-button__icon--end {
margin-left: 8px;
margin-right: 0;
}
.rtl .bui-button__icon--end, [dir="rtl"] .bui-button__icon--end {
margin-right: 8px;
margin-left: 0;
}
.bui-button__text {
position: relative;
}
.bui-button__loader {
display: none;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rtl .bui-button__loader, [dir="rtl"] .bui-button__loader {
left: auto;
right: 50%;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
/* Type modifiers */
.bui-button--secondary {
background-color: #fff;
color: #0071c2;
}
.bui-button--secondary.bui-button--destructive {
background-color: #fff;
color: #c00;
}
.bui-button--secondary:before {
background: transparent;
border-color: #0071c2;
}
.bui-button--secondary.bui-button--destructive:before {
background: transparent;
border-color: #c00;
}
.bui-button--secondary:hover {
color: #0071c2;
}
.bui-button--secondary:visited {
color: #0071c2;
}
.bui-button--secondary:focus {
color: #0071c2;
}
.bui-button--secondary:active {
color: #0071c2;
}
.bui-button--secondary.bui-button--active {
color: #0071c2;
}
.bui-button--secondary:link {
color: #0071c2;
}
.bui-button--secondary.bui-button--destructive:hover {
color: #c00;
}
.bui-button--secondary.bui-button--destructive:visited {
color: #c00;
}
.bui-button--secondary.bui-button--destructive:focus {
color: #c00;
}
.bui-button--secondary.bui-button--destructive:active {
color: #c00;
}
.bui-button--secondary.bui-button--destructive.bui-button--active {
color: #c00;
}
.bui-button--secondary.bui-button--destructive:link {
color: #c00;
}
.bui-button--secondary:not(.bui-is-loading):hover:before {
background-color: rgba(0, 113, 194, 0.06);
border-color: #0071c2;
}
.bui-button--secondary.bui-button--destructive:not(.bui-is-loading):hover:before {
background-color: rgba(204, 0, 0, 0.06);
border-color: #c00;
}
.bui-button--secondary:not(.bui-is-loading):active:before {
background-color: rgba(0, 113, 194, 0.06);
border-color: #0071c2;
}
.bui-button--secondary.bui-button--active:before {
background-color: rgba(0, 113, 194, 0.06);
border-color: #0071c2;
}
.bui-button--secondary.bui-button--destructive:not(.bui-is-loading):active:before {
background-color: rgba(204, 0, 0, 0.06);
border-color: #c00;
}
.bui-button--secondary.bui-button--destructive.bui-button--active:before {
background-color: rgba(204, 0, 0, 0.06);
border-color: #c00;
}
.bui-button--tertiary {
padding-left: 8px;
padding-right: 8px;
}
.bui-button--tertiary-neutral {
padding-left: 8px;
padding-right: 8px;
}
.bui-button--tertiary {
color: #0071c2;
}
.bui-button--tertiary-neutral {
color: #6b6b6b;
}
.bui-button--tertiary.bui-button--destructive {
color: #c00;
}
.bui-button--tertiary-neutral.bui-button--destructive {
color: #c00;
}
.bui-button--tertiary:before,
.bui-button--tertiary-neutral:before {
border-color: transparent;
background-color: transparent;
}
.bui-button--tertiary.bui-button--destructive:before,
.bui-button--tertiary-neutral.bui-button--destructive:before {
border-color: transparent;
background-color: transparent;
}
.bui-button--tertiary:hover {
color: #0071c2;
}
.bui-button--tertiary:visited {
color: #0071c2;
}
.bui-button--tertiary:focus {
color: #0071c2;
}
.bui-button--tertiary:active {
color: #0071c2;
}
.bui-button--tertiary.bui-button--active {
color: #0071c2;
}
.bui-button--tertiary:link {
color: #0071c2;
}
.bui-button--tertiary-neutral:hover {
color: #6b6b6b;
}
.bui-button--tertiary-neutral:visited {
color: #6b6b6b;
}
.bui-button--tertiary-neutral:focus {
color: #6b6b6b;
}
.bui-button--tertiary-neutral:active {
color: #6b6b6b;
}
.bui-button--tertiary-neutral.bui-button--active {
color: #6b6b6b;
}
.bui-button--tertiary-neutral:link {
color: #6b6b6b;
}
.bui-button--tertiary.bui-button--destructive:hover {
color: #c00;
}
.bui-button--tertiary.bui-button--destructive:visited {
color: #c00;
}
.bui-button--tertiary.bui-button--destructive:focus {
color: #c00;
}
.bui-button--tertiary.bui-button--destructive:active {
color: #c00;
}
.bui-button--tertiary.bui-button--destructive.bui-button--active {
color: #c00;
}
.bui-button--tertiary.bui-button--destructive:link {
color: #c00;
}
.bui-button--tertiary-neutral.bui-button--destructive:hover {
color: #c00;
}
.bui-button--tertiary-neutral.bui-button--destructive:visited {
color: #c00;
}
.bui-button--tertiary-neutral.bui-button--destructive:focus {
color: #c00;
}
.bui-button--tertiary-neutral.bui-button--destructive:active {
color: #c00;
}
.bui-button--tertiary-neutral.bui-button--destructive.bui-button--active {
color: #c00;
}
.bui-button--tertiary-neutral.bui-button--destructive:link {
color: #c00;
}
.bui-button--tertiary:not(.bui-is-loading):hover:before {
background-color: rgba(0, 113, 194, 0.06);
border-color: transparent;
}
.bui-button--tertiary:not(.bui-is-loading):active:before {
background-color: rgba(0, 113, 194, 0.06);
border-color: transparent;
}
.bui-button--tertiary.bui-button--active:before {
background-color: rgba(0, 113, 194, 0.06);
border-color: transparent;
}
.bui-button--tertiary-neutral:not(.bui-is-loading):hover:before {
background-color: rgba(0, 0, 0, 0.06);
border-color: transparent;
}
.bui-button--tertiary-neutral:not(.bui-is-loading):active:before {
background-color: rgba(0, 0, 0, 0.06);
border-color: transparent;
}
.bui-button--tertiary-neutral.bui-button--active:before {
background-color: rgba(0, 0, 0, 0.06);
border-color: transparent;
}
.bui-button--tertiary.bui-button--destructive:not(.bui-is-loading):hover:before {
background-color: rgba(204, 0, 0, 0.06);
border-color: transparent;
}
.bui-button--tertiary.bui-button--destructive:not(.bui-is-loading):active:before {
background-color: rgba(204, 0, 0, 0.06);
border-color: transparent;
}
.bui-button--tertiary.bui-button--destructive.bui-button--active:before {
background-color: rgba(204, 0, 0, 0.06);
border-color: transparent;
}
.bui-button--tertiary-neutral.bui-button--destructive:not(.bui-is-loading):hover:before {
background-color: rgba(204, 0, 0, 0.06);
border-color: transparent;
}
.bui-button--tertiary-neutral.bui-button--destructive:not(.bui-is-loading):active:before {
background-color: rgba(204, 0, 0, 0.06);
border-color: transparent;
}
.bui-button--tertiary-neutral.bui-button--destructive.bui-button--active:before {
background-color: rgba(204, 0, 0, 0.06);
border-color: transparent;
}
.bui-button--light {
padding-left: 8px;
padding-right: 8px;
color: #fff;
}
.bui-button--light:before {
border-color: transparent;
background-color: transparent;
}
.bui-button--light:hover {
color: #fff;
}
.bui-button--light:visited {
color: #fff;
}
.bui-button--light:focus {
color: #fff;
}
.bui-button--light:active {
color: #fff;
}
.bui-button--light.bui-button--active {
color: #fff;
}
.bui-button--light:link {
color: #fff;
}
.bui-button--light:not(.bui-is-loading):hover:before {
background-color: rgba(255, 255, 255, 0.12);
border-color: transparent;
}
.bui-button--light:not(.bui-is-loading):active:before,
.bui-button--light.bui-button--active:before {
background-color: rgba(255, 255, 255, 0.12);
border-color: transparent;
}
.bui-button--tertiary .bui-button__icon:only-child,
.bui-button--tertiary-neutral .bui-button__icon:only-child,
.bui-button--light .bui-button__icon:only-child {
margin: 0 auto;
}
.bui-button--destructive {
color: #fff;
}
.bui-button--destructive:before {
background-color: #c00;
border-color: #c00;
}
.bui-button--destructive:hover {
color: #fff;
}
.bui-button--destructive:visited {
color: #fff;
}
.bui-button--destructive:focus {
color: #fff;
}
.bui-button--destructive:active {
color: #fff;
}
.bui-button--destructive.bui-button--active {
color: #fff;
}
.bui-button--destructive:link {
color: #fff;
}
.bui-button--destructive:not(.bui-is-loading):hover:before {
background-color: #8a0000;
border-color: #8a0000;
}
.bui-button--destructive:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.24);
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.24);
}
.bui-button--destructive:not(.bui-is-loading):active:before {
background-color: #8a0000;
border-color: #8a0000;
}
.bui-button--destructive.bui-button--active:before {
background-color: #8a0000;
border-color: #8a0000;
}
/* Size modifiers */
.bui-button--large {
padding: 12px 24px;
min-height: calc(4px * 12);
min-width: calc(4px * 12);
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.bui-button--large.bui-button--tertiary {
padding-left: 12px;
padding-right: 12px;
}
.bui-button--large.bui-button--tertiary-neutral {
padding-left: 12px;
padding-right: 12px;
}
.bui-button--large.bui-button--light {
padding-left: 12px;
padding-right: 12px;
}
.bui-button--large > .bui-button__icon {
width: 24px;
height: 24px;
}
.bui-button--large .bui-button__icon:only-child {
margin: 0 calc(12px * -1);
}
.bui-button--large.bui-button--tertiary .bui-button__icon:only-child,
.bui-button--large.bui-button--tertiary-neutral .bui-button__icon:only-child,
.bui-button--large.bui-button--light .bui-button__icon:only-child {
margin: 0 auto;
}
.bui-button--wide {
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.bui-button--icon-only {
padding-left: 8px;
padding-right: 8px;
}
.bui-button--icon-only.bui-button--large {
padding-left: 16px;
padding-right: 16px;
}
/* Negative Inset Adjustments */
.bui-button--large.bui-button--negative-inset-adjustment--top {
margin-top: calc(12px * -1);
}
.bui-button--large.bui-button--negative-inset-adjustment--bottom {
margin-bottom: calc(12px * -1);
}
.bui-button--large.bui-button--negative-inset-adjustment--start {
margin-left: calc(12px * -1);
}
.rtl .bui-button--large.bui-button--negative-inset-adjustment--start, [dir="rtl"] .bui-button--large.bui-button--negative-inset-adjustment--start {
margin-left: 0;
margin-right: calc(12px * -1);
}
.bui-button--large.bui-button--negative-inset-adjustment--end {
margin-right: calc(12px * -1);
}
.rtl .bui-button--large.bui-button--negative-inset-adjustment--end, [dir="rtl"] .bui-button--large.bui-button--negative-inset-adjustment--end {
margin-right: 0;
margin-left: calc(12px * -1);
}
.bui-button.bui-button--negative-inset-adjustment--top {
margin-top: calc(8px * -1);
}
.bui-button.bui-button--negative-inset-adjustment--bottom {
margin-bottom: calc(8px * -1);
}
.bui-button.bui-button--negative-inset-adjustment--start {
margin-left: calc(8px * -1);
}
.rtl .bui-button.bui-button--negative-inset-adjustment--start, [dir="rtl"] .bui-button.bui-button--negative-inset-adjustment--start {
margin-left: 0;
margin-right: calc(8px * -1);
}
.bui-button.bui-button--negative-inset-adjustment--end {
margin-right: calc(8px * -1);
}
.rtl .bui-button.bui-button--negative-inset-adjustment--end, [dir="rtl"] .bui-button.bui-button--negative-inset-adjustment--end {
margin-right: 0;
margin-left: calc(8px * -1);
}
.bui-button[disabled] {
color: #949494;
cursor: not-allowed;
text-decoration: none;
}
.bui-button[disabled]:hover {
color: #949494;
cursor: not-allowed;
text-decoration: none;
}
.bui-button[disabled]:active {
color: #949494;
cursor: not-allowed;
text-decoration: none;
}
.bui-button[disabled]:before {
background-color: #d9d9d9;
border-color: #d9d9d9;
}
.bui-button[disabled]:hover:before {
background-color: #d9d9d9;
border-color: #d9d9d9;
}
.bui-button[disabled]:active:before {
background-color: #d9d9d9;
border-color: #d9d9d9;
}
.bui-button[disabled].bui-button--tertiary:before,
.bui-button[disabled].bui-button--tertiary-neutral:before,
.bui-button[disabled].bui-button--light:before,
.bui-button[disabled].bui-button--tertiary:hover:before,
.bui-button[disabled].bui-button--tertiary:active:before,
.bui-button[disabled].bui-button--tertiary-neutral:hover:before,
.bui-button[disabled].bui-button--tertiary-neutral:active:before,
.bui-button[disabled].bui-button--light:hover:before,
.bui-button[disabled].bui-button--light:active:before {
background-color: transparent;
border-color: transparent;
}
/* Loading */
.bui-button.bui-is-loading,
.bui-button.is-loading {
cursor: default;
}
.bui-button.bui-is-loading > .bui-button__loader,
.bui-button.is-loading > .bui-button__loader {
display: block;
}
.bui-button.bui-is-loading > .bui-button__text,
.bui-button.bui-is-loading > .bui-button__icon,
.bui-button.is-loading > .bui-button__text,
.bui-button.is-loading > .bui-button__icon {
visibility: hidden;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-link {
color: #0071c2;
text-decoration: underline;
cursor: pointer;
display: inline;
}
.bui-link--primary,
.bui-link--primary:link,
.bui-link--secondary,
.bui-link--secondary:link {
text-decoration: none;
}
.bui-link:hover {
color: #0071c2;
text-decoration: underline;
}
.bui-link:focus {
color: #0071c2;
text-decoration: underline;
}
.bui-link:active {
color: #0071c2;
text-decoration: underline;
}
.bui-link:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
}
.bui-link:visited {
color: #0071c2;
}
.bui-link:active {
color: #0071c2;
}
.bui-link__icon {
margin-right: 8px;
}
.rtl .bui-link__icon, [dir="rtl"] .bui-link__icon {
margin-right: 0;
margin-left: 8px;
}
.bui-link--icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bui-link--secondary {
color: #262626;
}
.bui-link--secondary:hover {
color: #262626;
}
.bui-link--secondary:focus {
color: #262626;
}
.bui-link--secondary:active {
color: #262626;
}
.bui-link--secondary:visited {
color: #262626;
}
/* Override for button elements of bui-link */
button.bui-link {
border: 0;
background: none;
padding: 0;
font-size: inherit;
}
.bui-link[disabled] {
color: #949494;
cursor: not-allowed;
text-decoration: none;
}
.bui-link[disabled]:focus {
color: #949494;
cursor: not-allowed;
text-decoration: none;
}
.bui-link[disabled]:visited {
color: #949494;
cursor: not-allowed;
text-decoration: none;
}
.bui-link[disabled]:active {
color: #949494;
cursor: not-allowed;
text-decoration: none;
}
.bui-link[disabled]:hover {
color: #949494;
cursor: not-allowed;
text-decoration: none;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-input-text__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 0;
}
.bui-input-text__field {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.bui-input-text__addon {
color: #6b6b6b;
padding: 0 8px;
text-align: center;
white-space: nowrap;
position: relative;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.bui-input-text__addon:after {
content: '';
position: absolute;
right: 0;
width: 1px;
top: 8px;
bottom: 8px;
background: #e7e7e7;
}
.rtl .bui-input-text__addon:after, [dir="rtl"] .bui-input-text__addon:after {
right: auto;
left: 0;
}
.bui-input-text__addon:first-child:after {
right: 0;
}
.rtl .bui-input-text__addon:first-child:after, [dir="rtl"] .bui-input-text__addon:first-child:after {
right: auto;
left: 0;
}
.bui-input-text__addon:last-child:after {
left: 0;
}
.rtl .bui-input-text__addon:last-child:after, [dir="rtl"] .bui-input-text__addon:last-child:after {
left: auto;
right: 0;
}
.bui-input-text__decorator {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #333;
background: #fff;
border-radius: 2px;
border: 1px solid #bdbdbd;
display: block;
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
padding: calc(8px - 1px);
width: 100%;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: left;
-webkit-transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rtl .bui-input-text__decorator, [dir="rtl"] .bui-input-text__decorator {
text-align: right;
}
.bui-input-text__control {
position: relative;
z-index: 5;
border-radius: 2px;
margin: 0; /* Reset for Safari */
font-size: 14px;
font-weight: 400;
line-height: 20px;
background: none;
display: block;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 8px;
outline: none;
}
.bui-input-text__side {
position: relative;
z-index: 5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.bui-input-text__side:empty {
display: none;
}
.bui-input-text__side:first-child {
padding-left: 8px;
}
.rtl .bui-input-text__side:first-child, [dir="rtl"] .bui-input-text__side:first-child {
padding-left: 0;
padding-right: 8px;
}
.bui-input-text__side:last-child {
padding-right: 8px;
}
.rtl .bui-input-text__side:last-child, [dir="rtl"] .bui-input-text__side:last-child {
padding-right: 0;
padding-left: 8px;
}
.bui-input-text__content:hover .bui-input-text__control:focus + .bui-input-text__decorator {
border: 2px solid #0071c2;
}
.bui-input-text__control:focus + .bui-input-text__decorator {
border: 2px solid #0071c2;
}
.bui-input-text__control:disabled::-webkit-input-placeholder {
color: #bdbdbd;
}
.bui-input-text__control:disabled::-moz-placeholder {
color: #bdbdbd;
}
.bui-input-text__control:disabled:-ms-input-placeholder {
color: #bdbdbd;
}
.bui-input-text__control:disabled::-ms-input-placeholder {
color: #bdbdbd;
}
.bui-input-text__control:disabled::placeholder {
color: #bdbdbd;
}
.bui-input-text__control:disabled {
cursor: not-allowed;
color: #949494;
}
.bui-input-text__content:hover .bui-input-text__control:disabled + .bui-input-text__decorator,
.bui-input-text__control:disabled + .bui-input-text__decorator {
border-color: #e6e6e6;
background-color: #f5f5f5;
cursor: not-allowed;
}
.bui-input-text--size-large .bui-input-text__addon {
padding: 0 12px;
}
.bui-input-text--size-large .bui-input-text__control {
padding: calc(12px + 2px) 12px;
}
.bui-input-text--size-large .bui-input-text__side:first-child {
padding-left: 12px;
}
.rtl .bui-input-text--size-large .bui-input-text__side:first-child, [dir="rtl"] .bui-input-text--size-large .bui-input-text__side:first-child {
padding-left: 0;
padding-right: 12px;
}
.bui-input-text--size-large .bui-input-text__side:last-child {
padding-right: 12px;
}
.rtl .bui-input-text--size-large .bui-input-text__side:last-child, [dir="rtl"] .bui-input-text--size-large .bui-input-text__side:last-child {
padding-right: 0;
padding-left: 12px;
}
.bui-input-text--size-large .bui-input-text__addon:after {
top: 12px;
bottom: 12px;
}
.bui-has-error .bui-input-text__content:hover .bui-input-text__decorator,
.bui-has-error .bui-input-text__decorator {
border-color: #c00;
}
.bui-has-error .bui-input-text__content:hover .bui-input-text__control:focus + .bui-input-text__decorator {
border: 2px solid #c00;
}
.bui-has-error .bui-input-text__control:focus + .bui-input-text__decorator {
border: 2px solid #c00;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-tooltip {
font-size: 14px;
font-weight: 400;
line-height: 20px;
z-index: 400;
-webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
background: #171717;
color: #f2f2f2;
display: inline-block;
border-radius: 2px;
padding: 4px 8px;
max-width: calc(32px * 10);
pointer-events: none;
position: relative;
/* Fix tooltip position calculations, not defining position here will result in incorrect wrapping for its content */
left: 0 /*rtl:ignore*/;
top: 0;
/* Name goes first because otherwise it will fail to work with css modules in other projects */
-webkit-animation: bui-tooltip-enter-top 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
animation: bui-tooltip-enter-top 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
}
.bui-tooltip--bottom,
.bui-tooltip--bottom-start,
.bui-tooltip--bottom-end {
-webkit-animation-name: bui-tooltip-enter-bottom;
animation-name: bui-tooltip-enter-bottom;
}
.bui-tooltip--start {
-webkit-animation-name: bui-tooltip-enter-left;
animation-name: bui-tooltip-enter-left;
}
.bui-tooltip--end {
-webkit-animation-name: bui-tooltip-enter-right;
animation-name: bui-tooltip-enter-right;
}
.bui-tooltip__arrow {
-webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
content: '';
width: 7px;
height: 7px;
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
background: inherit;
overflow: hidden;
}
.rtl .bui-tooltip__arrow, [dir="rtl"] .bui-tooltip__arrow {
-webkit-transform: translateX(50%) translateY(-50%) rotate(-45deg);
transform: translateX(50%) translateY(-50%) rotate(-45deg);
}
.bui-tooltip--top > .bui-tooltip__arrow {
top: 100%;
left: 50%;
}
.rtl .bui-tooltip--top > .bui-tooltip__arrow, [dir="rtl"] .bui-tooltip--top > .bui-tooltip__arrow {
left: auto;
right: 50%;
}
.bui-tooltip--bottom > .bui-tooltip__arrow {
top: 0;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg);
transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
.rtl .bui-tooltip--bottom > .bui-tooltip__arrow, [dir="rtl"] .bui-tooltip--bottom > .bui-tooltip__arrow {
left: auto;
right: 50%;
-webkit-transform: translateX(50%) translateY(-50%) rotate(135deg);
transform: translateX(50%) translateY(-50%) rotate(135deg);
}
.bui-tooltip--start > .bui-tooltip__arrow {
top: 50%;
left: 100%;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.rtl .bui-tooltip--start > .bui-tooltip__arrow, [dir="rtl"] .bui-tooltip--start > .bui-tooltip__arrow {
left: auto;
right: 100%;
-webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
transform: translateX(50%) translateY(-50%) rotate(45deg);
}
.bui-tooltip--end > .bui-tooltip__arrow {
top: 50%;
left: 0;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg);
transform: translateX(-50%) translateY(-50%) rotate(135deg);
}
.rtl .bui-tooltip--end > .bui-tooltip__arrow, [dir="rtl"] .bui-tooltip--end > .bui-tooltip__arrow {
left: auto;
right: 0;
-webkit-transform: translateX(50%) translateY(-50%) rotate(-135deg);
transform: translateX(50%) translateY(-50%) rotate(-135deg);
}
.bui-tooltip--top-start > .bui-tooltip__arrow {
top: 100%;
left: 24px;
}
.rtl .bui-tooltip--top-start > .bui-tooltip__arrow, [dir="rtl"] .bui-tooltip--top-start > .bui-tooltip__arrow {
left: auto;
right: 24px;
}
.bui-tooltip--top-end > .bui-tooltip__arrow {
top: 100%;
left: auto;
right: 16px;
}
.rtl .bui-tooltip--top-end > .bui-tooltip__arrow, [dir="rtl"] .bui-tooltip--top-end > .bui-tooltip__arrow {
right: auto;
left: 16px;
}
.bui-tooltip--bottom-start > .bui-tooltip__arrow {
top: 0;
left: 24px;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg);
transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
.rtl .bui-tooltip--bottom-start > .bui-tooltip__arrow, [dir="rtl"] .bui-tooltip--bottom-start > .bui-tooltip__arrow {
left: auto;
right: 24px;
-webkit-transform: translateX(50%) translateY(-50%) rotate(135deg);
transform: translateX(50%) translateY(-50%) rotate(135deg);
}
.bui-tooltip--bottom-end > .bui-tooltip__arrow {
top: 0;
left: auto;
right: 16px;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg);
transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
.rtl .bui-tooltip--bottom-end > .bui-tooltip__arrow, [dir="rtl"] .bui-tooltip--bottom-end > .bui-tooltip__arrow {
right: auto;
left: 16px;
-webkit-transform: translateX(50%) translateY(-50%) rotate(135deg);
transform: translateX(50%) translateY(-50%) rotate(135deg);
}
.bui-tooltip--no-arrow > .bui-tooltip__arrow {
display: none;
}
.bui-tooltip--light {
background: #fff;
color: #262626;
}
@-webkit-keyframes bui-tooltip-enter-bottom {
0% {
opacity: 0;
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bui-tooltip-enter-bottom {
0% {
opacity: 0;
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes bui-tooltip-enter-top {
0% {
opacity: 0;
-webkit-transform: translateY(calc(8px * -1));
transform: translateY(calc(8px * -1));
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bui-tooltip-enter-top {
0% {
opacity: 0;
-webkit-transform: translateY(calc(8px * -1));
transform: translateY(calc(8px * -1));
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes bui-tooltip-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(calc(8px * -1));
transform: translateX(calc(8px * -1));
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes bui-tooltip-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(calc(8px * -1));
transform: translateX(calc(8px * -1));
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@-webkit-keyframes bui-tooltip-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes bui-tooltip-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-popover {
z-index: 100;
-webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
background: #fff;
/* Name goes first because otherwise it will fail to work with css modules in other projects */
-webkit-animation: bui-popover-enter-top 0.15s cubic-bezier(0.4, 0, 1, 1) 0s 1;
animation: bui-popover-enter-top 0.15s cubic-bezier(0.4, 0, 1, 1) 0s 1;
position: relative;
max-width: 360px;
border-radius: 2px;
}
.bui-popover > .bui-card > :first-child,
.bui-popover > .bui-panel > :first-child,
.bui-popover > .bui-card-group > .bui-card > :first-child {
margin-top: 0;
}
.bui-popover > .bui-card,
.bui-popover > .bui-panel {
border: 0;
margin: 0;
}
.bui-popover > .bui-card-group > .bui-card {
border-left: 0;
border-right: 0;
}
.bui-popover > .bui-card-group > .bui-card:first-child {
border-top: 0;
}
.bui-popover > .bui-card-group > .bui-card:last-child {
border-bottom: 0;
}
.bui-popover__arrow {
-webkit-box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.05);
width: 12px;
height: 12px;
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
background: inherit;
overflow: hidden;
z-index: -1;
}
.rtl .bui-popover__arrow, [dir="rtl"] .bui-popover__arrow {
-webkit-box-shadow: -2px 2px 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: -2px 2px 1px 0 rgba(0, 0, 0, 0.05);
-webkit-transform: translateX(50%) translateY(-50%) rotate(-45deg);
transform: translateX(50%) translateY(-50%) rotate(-45deg);
}
.bui-popover--bottom,
.bui-popover--bottom-start,
.bui-popover--bottom-end {
-webkit-animation-name: bui-popover-enter-bottom;
animation-name: bui-popover-enter-bottom;
}
.bui-popover--start {
-webkit-animation-name: bui-popover-enter-left;
animation-name: bui-popover-enter-left;
}
.bui-popover--end {
-webkit-animation-name: bui-popover-enter-right;
animation-name: bui-popover-enter-right;
}
.bui-popover--top > .bui-popover__arrow {
top: 100%;
left: 50%;
right: auto;
}
.rtl .bui-popover--top > .bui-popover__arrow, [dir="rtl"] .bui-popover--top > .bui-popover__arrow {
right: 50%;
left: auto;
}
.bui-popover--bottom > .bui-popover__arrow {
top: 0;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg);
transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
.rtl .bui-popover--bottom > .bui-popover__arrow, [dir="rtl"] .bui-popover--bottom > .bui-popover__arrow {
right: 50%;
left: auto;
-webkit-transform: translateX(50%) translateY(-50%) rotate(135deg);
transform: translateX(50%) translateY(-50%) rotate(135deg);
}
.bui-popover--start > .bui-popover__arrow {
top: 50%;
left: 100%;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.rtl .bui-popover--start > .bui-popover__arrow, [dir="rtl"] .bui-popover--start > .bui-popover__arrow {
right: 100%;
left: auto;
-webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
transform: translateX(50%) translateY(-50%) rotate(45deg);
}
.bui-popover--end > .bui-popover__arrow {
top: 50%;
left: 0;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg);
transform: translateX(-50%) translateY(-50%) rotate(135deg);
}
.rtl .bui-popover--end > .bui-popover__arrow, [dir="rtl"] .bui-popover--end > .bui-popover__arrow {
right: 0;
left: auto;
-webkit-transform: translateX(50%) translateY(-50%) rotate(-135deg);
transform: translateX(50%) translateY(-50%) rotate(-135deg);
}
.bui-popover--top-start > .bui-popover__arrow {
top: 100%;
left: 24px;
right: auto;
}
.rtl .bui-popover--top-start > .bui-popover__arrow, [dir="rtl"] .bui-popover--top-start > .bui-popover__arrow {
right: 24px;
left: auto;
}
.bui-popover--top-end > .bui-popover__arrow {
top: 100%;
left: auto;
right: 16px;
}
.rtl .bui-popover--top-end > .bui-popover__arrow, [dir="rtl"] .bui-popover--top-end > .bui-popover__arrow {
right: auto;
left: 16px;
}
.bui-popover--bottom-start > .bui-popover__arrow {
top: 0;
left: 24px;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg);
transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
.rtl .bui-popover--bottom-start > .bui-popover__arrow, [dir="rtl"] .bui-popover--bottom-start > .bui-popover__arrow {
right: 24px;
left: auto;
-webkit-transform: translateX(50%) translateY(-50%) rotate(135deg);
transform: translateX(50%) translateY(-50%) rotate(135deg);
}
.bui-popover--bottom-end > .bui-popover__arrow {
top: 0;
left: auto;
right: 16px;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg);
transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
.rtl .bui-popover--bottom-end > .bui-popover__arrow, [dir="rtl"] .bui-popover--bottom-end > .bui-popover__arrow {
right: auto;
left: 16px;
-webkit-transform: translateX(50%) translateY(-50%) rotate(135deg);
transform: translateX(50%) translateY(-50%) rotate(135deg);
}
.bui-popover--no-arrow > .bui-popover__arrow {
display: none;
}
.bui-popover--stretch {
max-width: none;
}
@-webkit-keyframes bui-popover-enter-bottom {
0% {
opacity: 0;
-webkit-transform: translateY(16px);
transform: translateY(16px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bui-popover-enter-bottom {
0% {
opacity: 0;
-webkit-transform: translateY(16px);
transform: translateY(16px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes bui-popover-enter-top {
0% {
opacity: 0;
-webkit-transform: translateY(calc(16px * -1));
transform: translateY(calc(16px * -1));
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bui-popover-enter-top {
0% {
opacity: 0;
-webkit-transform: translateY(calc(16px * -1));
transform: translateY(calc(16px * -1));
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes bui-popover-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(calc(16px * -1));
transform: translateX(calc(16px * -1));
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes bui-popover-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(calc(16px * -1));
transform: translateX(calc(16px * -1));
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@-webkit-keyframes bui-popover-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(16px);
transform: translateX(16px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes bui-popover-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(16px);
transform: translateX(16px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
.bui-popover__close {
position: absolute;
z-index: 100; /* Quick fix. Will work together with __content in 8.x */
-ms-flex-item-align: start;
align-self: flex-start;
height: 24px;
width: 24px;
top: 16px;
right: 16px;
padding: 0;
text-decoration: none;
color: #262626;
opacity: 0.4;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
}
.rtl .bui-popover__close, [dir="rtl"] .bui-popover__close {
right: auto;
left: 16px;
}
.bui-popover__close:hover {
opacity: 0.8;
}
.bui-popover__close:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
}
@media (max-width: 575px) {
.bui-popover {
max-width: none;
}
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-nav-progress {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.bui-nav-progress__item {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #6b6b6b;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bui-nav-progress__icon {
width: 16px;
height: 16px;
vertical-align: middle;
}
.bui-nav-progress__title {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-nav-progress__indicator {
border-radius: 50%;
background: #0071c2;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: 1;
margin-right: 8px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 24px;
height: 24px;
}
.rtl .bui-nav-progress__indicator, [dir="rtl"] .bui-nav-progress__indicator {
margin-right: 0;
margin-left: 8px;
}
.bui-nav-progress__item--active {
color: #262626;
}
.bui-nav-progress__item--disabled .bui-nav-progress__indicator {
background: #494949;
color: #fff;
}
.bui-nav-progress__divider {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 1px;
background: #e7e7e7;
margin: 0 8px;
min-width: 16px;
}
.bui-nav-progress__step {
display: none;
}
@media (max-width: 575px) {
.bui-nav-progress--horizontal .bui-nav-progress__item {
display: none;
}
.bui-nav-progress--horizontal .bui-nav-progress__divider {
display: none;
}
.bui-nav-progress--horizontal .bui-nav-progress__indicator {
display: none;
}
.bui-nav-progress--horizontal .bui-nav-progress__title {
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.bui-nav-progress--horizontal .bui-nav-progress__item--active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bui-nav-progress--horizontal .bui-nav-progress__item--active .bui-nav-progress__title {
display: block;
}
.bui-nav-progress--horizontal .bui-nav-progress__item--active .bui-nav-progress__step {
display: block;
margin-left: 8px;
}
.rtl .bui-nav-progress--horizontal .bui-nav-progress__item--active .bui-nav-progress__step, [dir="rtl"] .bui-nav-progress--horizontal .bui-nav-progress__item--active .bui-nav-progress__step {
margin-left: 0;
margin-right: 8px;
}
}
.bui-nav-progress--vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.bui-nav-progress--vertical .bui-nav-progress__item {
display: block;
padding-bottom: 24px;
position: relative;
width: 100%;
}
.bui-nav-progress--vertical .bui-nav-progress__item:last-child {
padding-bottom: 0;
}
.bui-nav-progress--vertical .bui-nav-progress__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bui-nav-progress--vertical .bui-nav-progress__content {
display: block;
margin-top: 16px;
margin-left: calc(24px + 8px);
}
.rtl .bui-nav-progress--vertical .bui-nav-progress__content, [dir="rtl"] .bui-nav-progress--vertical .bui-nav-progress__content {
margin-left: 0;
margin-right: calc(24px + 8px);
}
.bui-nav-progress--vertical .bui-nav-progress__divider {
display: none;
}
.bui-nav-progress--vertical .bui-nav-progress__indicator {
position: relative;
}
.bui-nav-progress--vertical .bui-nav-progress__item:before {
content: '';
background: #949494;
position: absolute;
height: 100%;
left: 12px;
top: 0;
width: 1px;
}
.rtl .bui-nav-progress--vertical .bui-nav-progress__item:before, [dir="rtl"] .bui-nav-progress--vertical .bui-nav-progress__item:before {
left: auto;
right: 12px;
}
.bui-nav-progress--vertical .bui-nav-progress__item:last-child:before {
content: none;
}
@media (max-width: 575px) {
.bui-nav-progress--vertical .bui-nav-progress__title {
display: block;
}
}
.logo {
margin-top: 13px;
float: left;
width: 150px;
}
#lang-picker {
padding: 15px 15px 10px;
margin-right: 6px;
border-left: 1px solid #003580;
border-right: 1px solid #003580;
float: right;
position: relative;
width: 3.75em;
height: 3.5em;
display: inline-block;
}
#lang-picker:hover {
background-color: #003580;
text-decoration: none;
}
#lang-picker:focus {
background-color: #003580;
text-decoration: none;
}
#lang {
position: absolute;
width: 3.75em;
height: 3.5em;
top: 0;
left: 0;
display: block;
border: 10px solid transparent;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
}
#lang:active {
width: auto;
}
@media all and (max-width: 480px) {
.logo {
width: 130px;
}
.logo-smaller .logo {
width: 96px;
padding-top: 5px;
}
#lang-picker {
margin-right: 0;
width: 3em;
padding: 15px 10px 10px;
}
.login .btn {
display: block;
margin-left: 5px;
}
.logo-smaller .js-continue-reg-button {
font-size: 12px;
}
}
@media all and (max-width: 340px) {
.logo {
width: 88px;
padding-top: 5px;
}
.logo-smaller .js-continue-reg-button {
display: none;
}
}
/* Start header notification */
.header-notification-container {
position: absolute;
top: 20px;
left: 22px;
z-index: 2;
cursor: pointer;
opacity: 0;
margin-left: calc(-1 * 16px);
}
.header-notification {
padding: 6px 10px;
font-size: 13px;
border-radius: 3px;
border: 1px solid #008009;
box-shadow: 0 0 5px 0 rgba(0, 27, 66, 0.5);
background: #008009;
color: #fff;
position: relative;
font-weight: bold;
}
.header-notification:before {
position: absolute;
width: 0;
height: 0;
content: "";
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #008009;
top: -9px;
left: 20px;
}
.is_right_to_left .header-notification-container {
right: 8px;
left: inherit;
}
.is_right_to_left .header-notification:before {
left: inherit;
right: 20px;
}
@media (max-width: 992px) {
.header-notification-container {
display: none;
}
.header-notification-container.header-notification__mobile {
display: block;
}
.header-notification__mobile .header-notification {
padding: 8px;
border-radius: 2px;
}
}
/* End header notification */
.join-header {
min-height: 50px;
height: 50px;
padding: 0 8px;
margin: 0;
position: relative;
line-height: 50px;
}
.join-section #lang-picker {
padding: 5px 15px 10px;
height: 50px;
border: none;
opacity: 0.9;
margin: 0;
transition: all 0.2s linear;
}
.join-section #lang-picker:hover {
background: transparent;
opacity: 1;
}
.join-section #lang:hover {
cursor: pointer;
}
.join-header__item-margin {
margin-right: 8px;
}
.is_right_to_left .join-header__item-margin {
margin-right: 0;
margin-left: 8px;
}
@media (max-width: 512px) {
.join-header .join-section__label {
display: none;
}
}
/* exp npx_joinapp_landing_use_connect_help_icon */
.join-header-new-icon .join-help-block {
right: 30%;
top: 140%;
}
/* from base.css, no need to load here */
body {
font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 24px;
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* end base.css */
/* Override bootstrap link color based on new pallete */
a {
color: #0071c2;
}
a:hover {
color: #bad4f7;
}
a:active {
color: #bad4f7;
}
a:focus {
color: #bad4f7;
}
body {
background-color: #fff;
}
p { margin: 0; }
.content {
/* content override for index */
padding-left: 0;
background-color: #fff;
}
.ua-hw-ipad .container .content {
/* content override for index */
padding-left: 0;
background-color: #fff;
}
#footer_wrapper {
padding: 56px 0 32px;
margin-right: 0px;
margin-left: 0px;
border-top: 1px solid #EDEDED;
}
#content {
background: #fff;
}
#error_header ul {
margin-left: 0px
}
/* header */
.booking-header {
min-height: 50px;
height: 50px;
background-color: #003580;
padding-left: 32px;
margin: 0;
position: relative;
}
.ua-hw-ipad .booking-header {
font-size: 14px;
}
.g-recaptcha {
margin-bottom: 16px;
}
@media (max-width: 768px) {
.g-recaptcha {
transform: scale(0.77);
transform-origin:0 0;
}
.is_right_to_left .g-recaptcha {
transform-origin: 100% 0;
}
}
#add_property {
float: none;
position: relative;
}
#add_property .loading {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border-radius: 8;
background: rgba(255, 255, 255, 0.6) url(https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/loader.gif) no-repeat 50% 50%;
display: none;
z-index: 1030;
}
#add_property.j1 {
background-color: #fff0f0 !important;
color: #a30000 !important;
}
#add_property.j1 label {
color: #a30000;
text-shadow: none;
}
.signup-access .legal_copy {
font-size: 13px;
line-height: 18px;
color: #3E3E3E;
}
.alternative-proceed-registration form {
padding-bottom: 32px;
}
@media all and (max-width: 480px) {
.booking-header {
padding: 0 8px;
overflow: visible;
}
}
/* FORM */
.signup-access {
padding: 16px 32px;
max-width: 416px;
background: #bad4f7;
}
.signup-access label {
font-size: 14px;
color: #000;
line-height: 20px;
font-weight: 400;
}
.alert-danger {
box-shadow: none;
border: none;
background: #fff0f0;
color: #b94a48;
margin-bottom: 8px;
}
.alert-danger ul {
padding: 0 16px;
}
.join-section__registration-form {
width: 416px;
box-shadow: 0 20px 56px 2px rgba(0, 0, 0, 0.6);
margin-top: -504px;
margin-right: calc(-1 * 8px);
border-radius: 5px;
}
/* END FORM */
/* FORM TABS */
.form-tabs {
margin: 0;
padding: 0;
left: 0;
right: 0;
text-align: center;
position: relative;
max-width: 750px;
border: none;
}
.form-tabs__block-tab {
width: 100%;
background: none;
line-height: normal;
color: initial;
padding: 16px 12px 24px;
display: none;
}
.form-tabs.form-tabs__bordered {
border-radius: 0;
}
.form-tabs.form-tabs__bordered .form-tabs__block-tab{
padding-bottom: 16px;
}
.form-tabs__block-tab.active {
display: block;
}
.form-tabs__block-tab-title {
color: #fff;
}
.form-tabs__button {
color: #ebf3ff;
border: 1px solid #ebf3ff;
border-radius: 2px;
padding: 10px 15px;
background: transparent;
font-size: 16px;
font-weight: bold;
}
.form-tabs--inline {
background: #fff;
}
.form-tabs--inline .form-tabs__block-tab {
padding: 0 24px 24px;
}
.form-tabs--inline .form-tabs__button {
color: #0091fd;
border: none;
padding: 0;
text-decoration: underline;
font-size: 14px;
margin: 0;
display: block;
}
.form-tabs--inline .form-tabs__block-tab-title {
color: #333;
text-align: left;
margin: 0;
line-height: 18px;
margin-bottom: 4px;
}
/* exp start pai_joinapp_index_fix_a11y_contrast_issue */
.form-tabs--inline .form-tabs__block-tab-title.tab-title--black {
color: #000;
}
/* exp end pai_joinapp_index_fix_a11y_contrast_issue */
/* EXP START: pai_joinapp_a_accounts_portal_new_design */
.form-tabs__new-design {
padding-top: 16px;
border-top: 1px solid #e6e6e6;
}
/* EXP END: pai_joinapp_a_accounts_portal_new_design */
.is_right_to_left .form-tabs--inline .form-tabs__block-tab-title {
text-align: right;
}
/* END FORM TABS */
.join-form-benefits {
list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNC44Mjk5OTUzNyAxMWMtLjE4NDYzODAzLS4wMDI5MzEtLjM2MDc1Nzc5LS4wODcwNTI1LS40ODk5OTg3OS0uMjM0MDQxOUwuMTQwMDA3IDYuMDg1MTIwMDJjLS4yMDkwMTI2NC0uMzEwNTg5NDUtLjE4MTI5ODY3LS43NDUyMDA5OS4wNjUwMjUwOS0xLjAxOTcyNTg3LjI0NjMyMzc2LS4yNzQ1MjQ4OC42MzYyODg5Ni0uMzA1NDExNzcuOTE0OTcyNDgtLjA3MjQ2OTY5bDMuNzA5OTkwOCA0LjExNTIzNjgyTDEyLjczOTk3NTcuMzEyMDg2MzhjLjE2NDMzOS0uMjQ0MjA1MDEuNDQxMzc4NS0uMzU5MTUzOTMuNzA4OTk5OC0uMjk0MTc3My4yNjc2MjEyLjA2NDk3NjYzLjQ3NjY1MzQuMjk3OTQwNDcuNTM0OTU1Mi41OTYyMDExNS4wNTgzMDE3LjI5ODI2MDY3LS4wNDQ4Mzg4LjYwNzAxNzk0LS4yNjM5NTc0Ljc5MDE3MTcxTDUuMzE5OTk0MTUgMTAuNzY1OTU4MWMtLjEyOTI0MS4xNDY5ODk0LS4zMDUzNjA3Ni4yMzExMTA5LS40ODk5OTg3OC4yMzQwNDE5eiIgZmlsbD0iIzBDQjIxQiIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIvPgo8L3N2Zz4K");
padding-left: 24px;
padding-right: 24px;
margin-top: 16px;
}
.is_right_to_left .join-form-benefits {
padding-left: 0;
padding-right: 24px;
}
/* START exp pai_joinapp_a_accounts_portal_new_design */
.join-lp-form__benefits .join-lp-form__check-icon{
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNC44Mjk5OTUzNyAxMWMtLjE4NDYzODAzLS4wMDI5MzEtLjM2MDc1Nzc5LS4wODcwNTI1LS40ODk5OTg3OS0uMjM0MDQxOUwuMTQwMDA3IDYuMDg1MTIwMDJjLS4yMDkwMTI2NC0uMzEwNTg5NDUtLjE4MTI5ODY3LS43NDUyMDA5OS4wNjUwMjUwOS0xLjAxOTcyNTg3LjI0NjMyMzc2LS4yNzQ1MjQ4OC42MzYyODg5Ni0uMzA1NDExNzcuOTE0OTcyNDgtLjA3MjQ2OTY5bDMuNzA5OTkwOCA0LjExNTIzNjgyTDEyLjczOTk3NTcuMzEyMDg2MzhjLjE2NDMzOS0uMjQ0MjA1MDEuNDQxMzc4NS0uMzU5MTUzOTMuNzA4OTk5OC0uMjk0MTc3My4yNjc2MjEyLjA2NDk3NjYzLjQ3NjY1MzQuMjk3OTQwNDcuNTM0OTU1Mi41OTYyMDExNS4wNTgzMDE3LjI5ODI2MDY3LS4wNDQ4Mzg4LjYwNzAxNzk0LS4yNjM5NTc0Ljc5MDE3MTcxTDUuMzE5OTk0MTUgMTAuNzY1OTU4MWMtLjEyOTI0MS4xNDY5ODk0LS4zMDUzNjA3Ni4yMzExMTA5LS40ODk5OTg3OC4yMzQwNDE5eiIgZmlsbD0iIzBDQjIxQiIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIvPgo8L3N2Zz4K");
background-repeat: no-repeat;
background-size: contain;
width: 15px;
height: 11px;
}
.join-lp-form__benefits .bui-list__item {
align-items: center;
}
.join-lp-form-divider__full-width{
margin-left: -24px;
margin-right: -24px;
border-color: #e6e6e6;
}
.join-section__registration-form-mobile .join-lp-form-divider__full-width {
margin-left: -16px;
margin-right: -16px;
}
/* END exp pai_joinapp_a_accounts_portal_new_design */
/* THIS IS OUR MAIN BUTTONS */
/* TAKEN FROM STYLEGUIDES FOR LANDING PAGES */
.join-btn {
background: #0071c2;
padding: 8px 16px;
color: #fff;
font-size: 14px;
line-height: 20px;
border: none;
border-radius: 2px;
display: inline-block;
text-align: center;
}
.join-btn:hover {
background: color(#0071c2 l(36%));
color: #fff;
text-decoration: none;
}
.join-btn:active {
background: color(#0071c2 l(32%));
}
.join-btn:focus {
box-shadow: 0 0 0 2px color(#0071c2 l(68%));
outline: none;
color: #fff;
text-decoration: none;
}
.join-btn-secondary {
padding: 8px 16px;
border-radius: 2px;
font-size: 14px;
line-height: 20px;
display: inline-block;
border: 1px solid color(#6b6b6b l(75%));
background: #fff;
}
.join-btn-secondary:hover {
border: 1px solid #6b6b6b;
}
.join-btn-secondary--with-arrow:hover:after {
content: '→';
position: absolute;
margin-left: 5px;
}
.is_right_to_left .join-btn-secondary--with-arrow:hover:after {
content: '←';
position: absolute;
margin-right: 5px;
margin-left: 0;
}
.join-btn-secondary--contrast {
background: transparent;
color: #fff;
border: 1px solid #fff;
}
.join-btn-secondary--contrast:hover {
background: rgba(255, 255, 255, 0.1);
text-decoration: none;
color: #fff;
border: 1px solid #fff;
}
.join-btn-secondary--contrast:active {
background: rgba(255, 255, 255, 0.2);
text-decoration: none;
color: #fff;
}
.join-btn-secondary--contrast:focus {
text-decoration: none;
box-shadow: 0 0 0 1px color(#0071c2 l(68%));
outline: none;
color: #fff;
border: 1px solid color(#0071c2 l(68%));
}
/* EXP: pai_joinapp_a_entry_point_for_existing_parters_in_mobile_lp */
.join-btn-secondary__borderless{
border: none;
background: none;
margin: 0;
padding: 14px;
line-height: 100%;
}
.fright.join-btn-container{
height:50px;
display: inline-block;
}
.join-btn--large {
padding: calc(24px / 2) 16px;
font-size: 16px;
line-height: 16px;
}
.join-btn--wide {
width: 100%;
}
/* END FOR BUTTONS */
/* No web font */
.aa-font {
-moz-osx-font-smoothing: grayscale;
}
/* REGISTRATION FORM INPUTS */
.signup-access input:not([type=submit]) {
border: 1px solid #d8d8d8;
background-color: #fff;
color: #000;
box-shadow: none;
height: 33px;
margin-bottom: 16px;
}
.signup-access select {
border-radius: 3px;
margin-bottom: 16px;
}
.signup-access input[type="checkbox"] {
display: inline-block;
width: auto;
margin: 0 4px 16px 0;
vertical-align: middle;
cursor: pointer;
}
.signup-access input[type="checkbox"] + label {
width: 90%;
margin-bottom: 16px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
}
.signup-access input:not([type=submit]):hover,
.signup-access input:not([type=submit]):focus {
outline: none;
box-shadow: none;
border: 1px solid #b8b8b8;
}
.signup-access input[type="number"] {
width: 100px;
-moz-appearance: textfield;
}
.signup-access input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.signup-access label {
margin-bottom: 2px;
}
/* END REGISTRATION FORM INPUTS */
.right {
float: right;
}
.continue-modal .modal-footer {
margin-top: 0;
}
.continue-modal .modal-footer {
text-align: left;
}
.continue-modal .modal-body {
padding: 0 0;
}
.wide-modal .modal-dialog {
width: 650px;
}
.modal-header-alt {
padding-top: 4px;
border-bottom: 1px solid #fafcff;
}
.modal-header-alt .modal-title {
margin-top: 24px;
}
/* Email tooltip */
.tooltip-inner {
max-width: 300px;
}
select.form-control { /* Fix to prevent drop-down blinking on initial-open, on Chrome */
transition: none;
}
/* End experiment with white background */
/* Start bh_mppr_join_password_requirements / authors: Timur Zhilenkov, Nikolai Katkov - CLEAN THIS FO */
.txp-password-rules-container .password-field-with-toggle input {
margin-bottom: 0;
}
.txp-password-rules {
font-size: 14px!important;
}
.txp-password-rules__items {
list-style: none;
padding: 0 0 24px 0;
margin: 0;
line-height: 22px;
}
.txp-password-rules__item {
color: #fcb4b4;
}
.txp-password-rules__item--icon {
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48dGl0bGU+Y2xvc2U8L3RpdGxlPjxwYXRoIGZpbGw9IiNGRjZDNkMiIGQ9Ik02OS43IDY0bDMzLjEtMzMuMmE0IDQgMCAwIDAtNS42LTUuNkw2NCA1OC4zIDMwLjggMjUuMmE0IDQgMCAxIDAtNS42IDUuNkw1OC4zIDY0IDI1LjIgOTcuMmE0IDQgMCAxIDAgNS42IDUuNkw2NCA2OS43bDMzLjIgMzMuMWE0IDQgMCAwIDAgNS42LTUuNnoiLz48L3N2Zz4=') no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
.txp-password-rules .txp-password-rules__items .txp-password-rules__item--state-good {
color: #333;
font-weight: 500;
}
.txp-password-rules__item--state-good > .txp-password-rules__item--icon {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTI4IDEyOCI+CiAgPHRpdGxlPmNoZWNrbWFyazwvdGl0bGU+CiAgPHBhdGggZmlsbD0iIzBhYjIxYiIgZD0iTTUyIDk2YTQgNCAwIDAgMS0yLjgtMS4ybC0yNC0yNGE0IDQgMCAwIDEgNS42LTUuNkw1MiA4Ni4zbDQ1LjItNDUuMWE0IDQgMCAxIDEgNS42IDUuNmwtNDggNDhBNCA0IDAgMCAxIDUyIDk2eiIvPgo8L3N2Zz4K') no-repeat;
}
/* affordance for password toggle */
.txp-password-toggle-password span {
font-weight: normal!important;
color: #0071c2;
font-size: 14px!important;
}
.txp-password-toggle-password > span:hover {
color: #bad4f7
}
.legal-copy_last_item {
margin-bottom: 16px;
}
/* Start experiment join_lp_section_redesign */
.fright {
float: right;
}
.fleft {
float: left;
}
.join-wide {
width: 100%;
}
.join-content-layout {
background-color: transparent;
max-width: auto;
margin: 0 auto;
position: relative;
}
@media (min-width: 768px) {
.join-content-layout {
max-width: 750px;
}
}
@media (min-width: 992px) {
.join-content-layout {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.join-content-layout {
max-width: 1170px;
}
}
.join-table-layout {
display: table;
width: 100%;
min-width: 100%;
}
.join-table-layout__cell {
display: table-cell;
width: 50%;
vertical-align: middle;
position: relative;
}
.join-table-layout__cell:first-child {
padding-right: 32px;
}
.is_right_to_left .join-table-layout__cell:first-child {
padding-right: auto;
padding-left: 32px;
}
@media (max-width: 992px) {
.join-table-layout__cell,
.join-table-layout__cell:first-child {
display: block;
width: 100%;
padding: 0;
}
}
@media (max-width: 767px) {
.join-table-layout__cell,
.join-table-layout__cell:first-child {
display: block;
width: 100%;
padding: 0;
}
}
.join-section {
width: 100%;
position: relative;
float: left;
padding: calc(2 * 32px) 0;
clear: both;
}
.join-section--half-padding {
padding: 32px 0;
}
.join-section--lightgrey {
background: #f5f5f5;
}
.join-section--bordered {
border-bottom: 1px solid #dedede;
}
.join-section--no-float {
float: none;
}
.join-section--zero-bottom-padding {
padding-bottom: 0;
}
.join-section--top-bordered {
border-top: 1px solid #dedede;
}
.join-section--collapsible {
padding: 32px 0;
}
.join-section__header {
font-size: 24px;
line-height: 32px;
padding-right: 50px;
position: relative;
}
.join-section__header:after {
background: url("data:image/svg+xml,%3Csvg width='14px' height='25px' viewBox='0 0 14 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .5l10.5 12L3 24.5l-2.3-2 8.6-10-8.6-10' fill='%234A4A4A' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") no-repeat center center transparent;
background-size: 16px auto;
content: '';
display: block;
height: 32px;
margin-top: calc(32px / -2);
position: absolute;
right: 0;
top: 50%;
transform: rotate(-90deg);
transition: all .2s linear;
width: 32px;
}
.join-section__header.collapsed:after {
transform: rotate(90deg);
}
.is_right_to_left .join-section__header:after {
left: 0;
right: auto;
}
.join-section--collapsible .join-section__header.collapsed {
margin-bottom: 0;
}
.is_right_to_left .join-section__header {
padding-left: 50px;
padding-right: 0;
}
.join-section__body {
height: auto;
opacity: 1;
overflow: visible;
}
.join-section__body.collapsed {
height: 1px;
opacity: 0;
overflow: hidden;
}
.join-section--header {
background: #003580;
color: #fff;
float: none;
padding: 0px !important;
z-index: 10;
}
.join-section--header-blue {
background: #00224f;
}
.join-section--sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.join-section--header-transparent {
background: transparent;
}
.join-section--hero {
position: relative;
height: 512px;
color: #fff;
background-size: cover;
background-position: center bottom;
margin-top: 0;
transition: 0.3s backgroundImage;
}
.join-section--welcome-hero {
height: auto;
background: linear-gradient(#003282, #001637, #001637);
color: white;
padding-top: 16px;
text-align: center;
}
.join-section--no-padding {
padding: 0;
}
.join-section--center {
text-align: center;
}
.join-section__label {
padding: 8px;
font-weight: bold;
}
.join-headline {
max-width: 512px;
}
@media (min-width:1200px) {
.join-headline {
max-width: none;
}
}
/* fonts */
.join-xlarge {
font-size: 38px;
line-height: 44px;
font-weight: bold;
margin-bottom: 24px;
}
.join-large {
font-size: 24px;
line-height: 32px;
font-weight: bold;
margin-bottom: 32px;
}
.join-medium {
font-size: 20px;
line-height: 28px;
margin-bottom: 8px;
}
.join-sub {
font-size: 16px;
line-height: 24px;
margin-bottom: 8px;
}
.join-regular {
font-size: 16px;
line-height: 24px;
margin: 8px 0;
}
.join-small {
font-size: 12px;
line-height: 18px;
margin-top: 8px;
margin-bottom: 8px;
}
.join-h1 {
margin-bottom: 0;
padding-bottom: 0;
text-decoration: none;
border-bottom: none;
font-size: 48px;
line-height: 56px;
}
@media (min-width: 767px){
.join-h1:lang(ru){
font-size: 32px;
line-height: 40px;
}
.join-h1:lang(bg){
font-size: 24px;
line-height: 32px;
}
.join-animated-header-property-type-container:lang(bg){
height: 32px;
}
.join-animated-header-property-type-container:lang(ru){
height: 40px;
}
}
@media (min-width: 1200px){
.join-h1:lang(bg) {
font-size: 32px;
line-height: 40px;
}
.join-animated-header-property-type-container:lang(bg) {
height: 40px;
}
}
.join-h2 {
color: #333;
}
/* end fonts */
.join-no-margin {
margin: 0;
}
.join-margin-bottom-bui_unit_small {
margin-bottom: 4px;
}
.join-margin-bottom-bui_unit_medium {
margin-bottom: 8px;
}
.join-margin-bottom-bui_unit_large {
margin-bottom: 16px;
}
.join-margin-bottom-bui_unit_larger {
margin-bottom: 24px;
}
.join-margin-bottom-for-bui_font_display_three {
margin-bottom: 40px;
}
.join-section__registration-form--white {
box-shadow: none;
border-radius: 3px 3px 0 0;
overflow: visible;
}
.join-section__registration-form--white form.signup-access {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.proceed-registration-form-header {
color: #000;
font-size: 14px;
line-height: 20px;
margin-bottom: 8px;
}
.join-section__registration-form .form-loading {
background-repeat: no-repeat !important;
background-position: 8px !important;
padding-left: 40px !important;
background-size: 24px !important;
}
.join-section__registration-form #add_property {
font-size: 14px;
margin-bottom: 0;
}
.join-learn-more {
width: 100%;
float: left;
padding: 32px 0px 0;
}
.join-modal p {
margin: 16px 0;
}
.join-modal .modal-header {
padding: 16px;
border-bottom: 1px solid #e6e6e6;
}
.join-modal .modal-title {
font-size: 20px;
line-height: 28px;
font-weight: bold;
}
.join-modal .btn-success {
background: #008009;
border: none;
border-radius: 3px;
text-shadow: none;
box-shadow: none;
transition: all .2s linear;
color: #fff;
}
.join-modal .btn-success:hover {
background: #006607;
}
.join-modal .modal-footer {
padding: 16px;
margin-top: 0;
border-top: 1px solid #e5e5e5;
}
.join-section--pulse {
padding: 16px 0;
background: #00224f;
color: #fff;
}
.join-section--pulse .join-section__registration-form {
margin-top: 0 !important;
margin: 0 auto;
float: none;
}
@media (max-width: 767px) {
.join-section__registration-form {
float: none !important;
margin-right: 0px;
margin: 0 auto;
margin-top: -400px;
z-index: 12;
}
.join-headline {
max-width: none;
}
}
@media (max-width: 512px) {
.join-section__registration-form,
.join-section__registration-form form.signup-access {
width: 100%;
max-width: none;
}
.join-xlarge {
font-size: 32px;
line-height: 40px;
}
}
footer {
background-color: transparent;
padding: 0;
max-width: 1110px;
margin: 0 auto;
background-color: #fff;
}
html[dir="rtl"] .fright {
float: left;
}
html[dir="rtl"] .fleft {
float: right;
}
/* END experiment join_lp_section_redesign */
.join-signup-floating-button {
position: fixed;
bottom: 8px;
display: none;
z-index: 12;
width: 100%;
text-align: center;
padding: 0 16px;
}
.continue-registration-property-header {
font-size: 12px;
line-height: 20px;
color: #000;
padding-bottom: 4px;
margin-bottom: 4px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
font-weight: bold;
}
.join-section__registration-form-mobile .continue-registration-property-header {
font-size: 16px;
font-weight: normal;
padding-bottom: 16px;
}
.continue-registration-property-table {
width: 100%;
}
.continue-registration-property-table__actions {
vertical-align: middle;
padding-bottom: 8px;
padding-top: 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.continue-registration-property-table__content {
vertical-align: middle;
padding-bottom: 8px;
padding-top: 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.continue-registration-property-table__actions {
padding-left: 4px;
}
.continue-registration-property-name {
color: #000;
font-size: 16px;
line-height: 16px;
margin-bottom: 0;
}
.continue-registration-property-name--single {
margin-top: 16px;
}
.continue-registration-property-wrong-user {
font-size: 13px;
line-height: 18px;
color: #707070;
margin-top: 10px;
}
.continue-registration-property-wrong-user-action {
text-decoration: underline;
cursor: pointer;
}
.continue-registration-property-time-cta {
margin-top: 16px;
}
.continue-registration-property-time {
font-size: 12px;
line-height: 16px;
color: black;
margin-bottom: 0;
color: #6b6b6b;
margin-top: 4px;
}
/* Exp: npi_join_lp_bottom_form_followup */
.join-section--bottom-form {
background: #37609B;
background: linear-gradient(#37609B, #1C3150);
padding: calc(2 * 32px) 0;
}
.join-section__registration-form--transparent {
margin: 0;
box-shadow: none;
margin: auto;
}
.join-section__registration-form--transparent form.signup-access {
position: relative;
padding-top: 24px;
background: #f4f4f4;
}
.join-section__registration-form--transparent-new form.signup-access {
background: #fff;
padding: 22px 24px;
}
.join-section__registration-form--transparent .legal-copy_last_item {
margin-top: 16px;
}
.join-section__registration-form-mobile form.signup-access {
padding: 24px 16px 16px 16px;
background: #fefefe;
}
.join-section__registration-form-mobile .get-started-button {
margin-bottom: 16px;
}
#add_property_bottom_form .loading {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border-radius: 5px;
background: rgba(255, 255, 255, 0.6) url(https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/loader.gif) no-repeat 50% 50%;
display: none;
z-index: 1030;
}
/* End: npi_join_lp_bottom_form_followup */
/* Begin exp join_15min_homepage_add_password_field */
.password-field-with-toggle {
position: relative;
}
.password-field-with-toggle .toggle-password {
position: absolute;
top: 29px;
right: 15px;
display: none;
}
.password-field-with-toggle input {
padding-right: 60px;
}
.password-field-with-toggle span {
cursor: pointer;
font-size: 13px;
font-weight: bold;
}
.password-field-with-toggle span:last-child {
display: none;
}
.is_right_to_left .password-field-with-toggle .toggle-password {
left: 15px;
right: auto;
}
.is_right_to_left .password-field-with-toggle input {
padding-left: 60px;
padding-right: 12px;
}
/* End exp join_15min_homepage_add_password_field */
@media (max-width: 767px) {
.join-mobile-margin {
margin-top: 32px;
}
}
@media (min-width: 768px) and (max-width: 992px) {
.join-tablet-margin {
margin-top: 32px;
}
.join-tablet-centered {
margin: auto;
}
}
.join-large-margin {
margin-top: 32px;
}
.join-margin {
margin-top: 32px;
}
.join-small-margin {
margin-top: 8px;
}
.join-medium-margin {
margin-top: 16px;
}
/* Start: npi_join_lp_high_demand */
.join-high-demand-content {
width: calc(100% - 55px);
display: inline-block;
vertical-align: top;
margin-left: 8px;
}
.is_right_to_left .join-high-demand-content {
margin-right: 8px;
margin-left: 0;
}
.join-high-demand-area-number {
line-height: 1;
font-size: 40px;
font-weight: 300;
}
.join-high-demand-area-number-cross {
font-size: 34px;
}
@media (max-width: 767px) {
.join-high-demand-content {
margin-left: 10px;
width: calc(100% - 64px);
}
.is_right_to_left .join-high-demand-content {
margin-right: 10px;
margin-left: 0;
}
}
/* End: npi_join_lp_high_demand */
/* Start: npi_join_lp_how_it_works_explain_details */
.join-how-it-works-content {
width: calc(100% - 145px);
display: inline-block;
vertical-align: top;
margin-left: 16px;
}
.is_right_to_left .join-how-it-works-content {
margin-right: 16px;
margin-left: 0;
}
.join-how-it-works-svg {
position: relative;
min-width: 96px;
margin-top: 16px;
}
@media (max-width: 767px) {
.join-how-it-works-svg {
display: block;
margin-bottom: 16px;
min-width: auto;
}
.join-how-it-works-content,
.is_right_to_left .join-how-it-works-content {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
/* End: npi_join_lp_how_it_works_explain_details */
/* Exp: npi_lp_dt_hand_hero */
.join-section--blue-contrast {
background: #00224f;
overflow: hidden;
padding: 46px 0;
}
.join-section--blue-contrast.join-section--bordered {
border-top: 1px solid color(#fafcff a(30%));
}
@media (max-width: 992px) {
.join-section--blue-contrast[not(.join-section--blue-contrast-no-padding-change)] {
padding: 8px 0 32px;
}
}
.join-hero-container-cell {
padding: 0 8px;
}
.join-hero-container {
display: table;
width: 100%;
}
.join-hero-container__text {
display: table-cell;
padding-right: 60px;
vertical-align: top;
}
.is_right_to_left .join-hero-container__text {
padding-right: 0px;
padding-left: 60px;
}
.join-hero-container__form {
display: table-cell;
width: 416px;
vertical-align: top;
background: transparent;
}
.join-h3-new-form {
font-size: 22px;
margin-top: 8px;
color: #fafcff;
}
@media (max-width: 767px) {
.join-h3-new-form {
font-size: 16px;
line-height: 24px;
}
}
.join-h3-subtitle {
color: #ebf3ff;
}
@media (max-width: 992px) {
.join-xlarge {
font-size: 32px;
line-height: 40px;
}
.join-hero-image-hand {
display: none;
}
.join-hero-container {
display: block;
}
.join-hero-container .join-hero-container__text,
.is_right_to_left .join-hero-container .join-hero-container__text {
display: block;
min-width: auto;
width: 100%;
text-align: center;
padding: 0;
}
.join-hero-container .join-hero-container__form {
display: block;
min-width: auto;
width: 100%;
padding: 0;
}
.join-h3-contrast {
font-size: 18px;
margin-bottom: 32px;
}
.ua-hw-ipad .join-h3-contrast {
font-size: 18px;
margin-bottom: 32px;
}
}
.alternative-proceed-registration--limited-height .continue-registration-property-table-container {
max-height: 276px;
overflow-y: auto;
overflow-x: hidden;
}
/* End: npi_lp_dt_hand_hero */
/* Start: npi_join_lp_header_help */
.join-help-block {
position: absolute;
top: 100%;
right: 0;
z-index: 10;
display: none;
width: 387px;
padding: 24px;
margin: 2px 0 0;
font-size: 14px;
background-color: #fff;
box-shadow: 0 7px 24px 4px rgba(0,0,0,.5);
line-height: normal;
border-radius: 3px;
}
.join-help-block-faq-answer {
color: #333;
margin-top: 16px;
font-size: 14px;
line-height: 17px;
}
.is_right_to_left .join-help-block {
right: auto;
left: 0;
}
.join-help-block:after,
.join-help-block:before {
content: ' ';
display: block;
width: 0;
height: 0;
border: 0 solid transparent;
position: absolute;
}
.join-help-block:after {
border: 0 solid transparent;
border-right-width: 9px;
border-left-width: 9px;
border-bottom: 9px solid #DDDDDD;
right: 8px;
top: -9px;
}
.join-help-block:before {
border-right-width: 8px;
border-left-width: 8px;
border-bottom: 8px solid white;
z-index: 10;
top: -8px;
right: 9px;
}
.is_right_to_left .join-help-block:after {
right: auto;
left: 8px;
}
.is_right_to_left .join-help-block:before {
right: auto;
left: 9px;
}
.join-help-block-title {
color: #6b6b6b;
line-height: 12px;
margin-bottom: 8px;
}
.open > .join-help-block {
display: block;
}
.join-help-block-header {
font-weight: bold;
font-size: 20px;
line-height: 28px;
margin-bottom: 8px;
color: #333;
margin-top: 0;
}
.join-help-block-title {
font-size: 14px;
line-height: 20px;
margin-bottom: 16px;
color: #333;
}
.join-help-block-form {
display: table;
width: 100%;
}
.join-help-block-form__cell {
display: table-cell;
vertical-align: middle;
}
.join-help-block-form-input-container {
border: 1px solid #bdbdbd;
}
.join-help-block-form-input {
display: inline-block;
width: calc(100% - 33px);
font-size: 16px;
line-height: 1;
border: none;
height: 33px;
padding: 0px calc(24px / 2);
vertical-align: middle;
outline: none;
}
.join-help-block-form-input-icon {
display: inline-block;
width: 33px;
height: 33px;
vertical-align: middle;
text-align: center;
line-height: 40px;
}
.join-help-block-form-button-margin {
margin-left: 10px;
}
.is_right_to_left .join-help-block-form-button-margin {
margin-left: 0;
margin-right: 10px;
}
.join-help-block-links {
padding: 0;
margin-bottom: 18px;
margin-top: 6px;
list-style: none;
}
.join-help-block-links-item {
border-bottom: 1px solid #bdbdbd;
padding-bottom: 16px;
padding-top: 16px;
}
/* End: npi_join_lp_header_help */
.join-form-container {
width: 416px;
max-width: 100%;
margin: auto;
}
/* Exp: npi_lp_d_new_form_no_tabs */
.join-section__registration-form--white #add_property.signup-access {
padding: 22px 24px;
background: #fff;
}
.join-section__registration-form--white form.signup-access {
padding: 22px 24px;
background: #fff;
}
.legal_copy_block {
font-size: 12px;
color: #e6e6e6;
padding: 0 24px;
margin-top: 16px;
line-height: 18px;
}
/* end: npi_lp_d_new_form_no_tabs */
.join-faq-header {
margin-top: 0;
padding-bottom: 10px;
margin-bottom: -5px;
border-bottom: 1px solid #eee;
}
/* start npi_lp_a_animated_header */
.join-animated-header-property-type-container {
height: 56px;
overflow: hidden;
}
.join-animated-header-property-type {
overflow: hidden;
}
@media (max-width: 992px) {
.join-h1 {
font-size: 32px;
line-height: 38px;
}
.join-animated-header-property-type-container {
height: 38px;
}
}
@media (max-width: 767px) {
.join-h1 {
font-size: 24px;
line-height: 28px;
font-weight: 700;
margin-bottom: 8px;
}
.join-animated-header-property-type-container {
height: 28px;
}
}
.join-animated-header-property-type-container {
color: color(#0071c2 l(50%));
}
/* end npi_lp_a_animated_header */
/* npi_lp_dt_highlight_form */
.join-form-focus-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,27,66, 0);
z-index: 99;
transition: 0.5s background;
}
.join-form-focus-overlay--active {
background: rgba(0,27,66, 0.8);
}
/* end npi_lp_dt_highlight_form */
/*start npi_lp_a_recent_stories*/
.join-recent-stories-image {
width: 100%;
height: 228px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 16px;
}
.join-recent-stories-location {
color: #6b6b6b;
}
/*end npi_lp_a_recent_stories*/
.join-hero-list {
list-style: none;
list-style-type: decimal;
margin-top: 16px;
padding-left: 0;
padding-right: 0;
margin-bottom: 15px;
}
.join-hero-list__item {
margin-bottom: 12px;
}
.join-hero-list__item:last-child {
margin-bottom: 0;
}
@media (max-width: 996px) {
.join-hero-list {
text-align: left;
display: inline-block;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 0;
}
.is_right_to_left .join-hero-list {
text-align: right;
}
}
.join-hero-terms-and-conditions {
text-decoration: none;
border-bottom: 1px solid #bdbdbd;
color: #bdbdbd;
font-size: 12px;
}
.join-hero-terms-and-conditions:focus {
text-decoration: none;
border-bottom: 1px solid #bdbdbd;
color: #bdbdbd;
font-size: 12px;
}
.join-hero-terms-and-conditions:hover {
text-decoration: none;
border-bottom-color: #6b6b6b;
color: #6b6b6b;
}
.join-hero-terms-and-conditions:active {
text-decoration: none;
border-bottom-color: #6b6b6b;
color: #6b6b6b;
}
@media (max-width: 996px) {
.join-hero-terms-and-conditions-container {
position: static;
text-align: center;
margin-top: 16px;
}
}
.is_right_to_left .join-hero-terms-and-conditions-container {
text-align: right;
}
@media (min-width: 768px) and (max-width: 996px) {
.join-hero-list {
margin-bottom: 16px;
}
.join-hero-terms-and-conditions-container {
margin-bottom: 16px;
margin-top: 0;
}
}
.join-referral-frontend-header {
color: #fff;
font-size: 32px;
font-weight: bold;
line-height: 40px;
margin: 0;
padding: 0;
text-decoration: none;
border-bottom: none;
}
/* npi_lp_dt_scroll_from_hightlighting */
.join-form-focus-scroll-more-container {
position: fixed;
left: 0;
right: 0;
opacity: 0;
transition: 0.2s all;
bottom: -100px;
}
.join-form-focus-overlay--active .join-form-focus-scroll-more-container {
opacity: 1;
bottom: 20px;
transition: 0.5s all;
}
.join-form-overlay-scroll-more {
text-align: center;
}
/* end npi_lp_dt_scroll_from_hightlighting */
.join-save-button-svg {
position: relative;
transition: 0.2s right;
right: 0;
}
.join-save-button:hover .join-save-button-svg {
right: -5px;
}
.is_right_to_left .join-save-button-svg {
right: auto;
left: 0;
transition: 0.2s left;
}
.is_right_to_left .join-save-button:hover .join-save-button-svg {
left: -5px;
right: auto;
}
.join-comission-benefits {
list-style: none;
padding: 0;
margin-bottom: 24px;
line-height: 20px;
}
.join-comission-benefits li {
padding-left: 24px;
margin-bottom: 8px;
}
.is_right_to_left .join-comission-benefits li {
padding-left: 0px;
padding-right: 24px;
}
.join-comission-benefits--icon {
position: absolute;
margin-left: calc(-1 * 24px);
}
.is_right_to_left .join-comission-benefits--icon {
margin-right: calc(-1 * 24px);
}
.join-commission-block {
background: #f5f5f5;
padding: 24px 24px 8px 24px;
}
.join-commission-block--white {
background: white;
border: 1px solid #e6e6e6;
}
.join-commission-table {
width: 100%;
margin-top: 16px;
}
.join-commission-table tr {
border-top: 1px solid #e6e6e6;
}
.join-commission-table td
{
padding: 16px 0px;
}
.join-commission-block__num-field {
display: flex;
align-items: center;
justify-content: flex-end;
}
.join-currency-symbol {
padding: 0px 5px 0px 0px;
}
.is_right_to_left .join-currency-symbol {
padding: 0px 0px 0px 5px;
}
.join-commission-block__strong {
font-weight: bold;
}
.join-commission-table tr:last-child {
border-top: 1px solid #6b6b6b;
}
.join-price-value {
display: inline-block;
max-width: 100px;
text-align: right;
}
.is_right_to_left .join-price-value {
text-align: left;
}
.join-commission-tooltip-icon {
color: #6b6b6b;
}
@media all and (max-width: 480px) {
.join-price-value {
max-width: 80px;
}
}
.is_right_to_left .index-carousel {
direction: rtl;
}
.index-carousel__image {
background-position: center center;
background-repeat: none;
background-size: cover;
}
.lp-carousel__card .index-carousel__image.js-lazy-loading-image {
height: 200px;
}
p.index-carousel__number {
margin-top: 4px;
}
.index-carousel__add {
align-items: center;
background: #f5f5f5;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.index-carousel__more-overlay {
align-items: center;
background: #0071c2;
color: #fff;
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
text-align: center;
top: 0;
transition: 0.3s opacity;
width: 100%;
}
.index-carousel__more-overlay:hover {
opacity: .9;
}
.join-m1lp-cta {
margin-top: 10px;
}
/* exp npi_lp_d_scroll_hook*/
.join-global-scroll-content {
width: 100%;
opacity: 0;
transition: all 0.7s ease;
}
.join-global-scroll-content-section--visible .join-global-scroll-content {
opacity: 1;
}
.join-scroll-progress {
position: fixed;
right: 32px;
top: 45%;
display: none;
}
.join-scroll-progress__step {
width: 8px;
height: 8px;
border: 1px solid #6b6b6b;
border-radius: 8px;
margin: 8px;
background-color: #fff;
transition: 0.2s all;
}
.join-scroll-progress__step--active {
background-color: #6b6b6b;
}
/* end npi_lp_d_scroll_hook*/
/* START: iam_redirect_joinapp_to_accounts_portal */
.txp-hero-redesign {
background: #dedede;
background: url(https://q.bstatic.com/static/img/join/apartment-hero-min.jpg) no-repeat;
background-size: cover;
background-position: center center;
padding: 54px 0;
}
.txp-hero-redesign .js-animated-header-type-out-wrapper {
color: #333!important;
}
.txp-hero-redesign .join-h3-subtitle {
color: #6b6b6b!important;
}
/* .txp-hero-redesign .join-hero-container {
margin-top: 54px;
margin-bottom: 54px;
} */
.txp-hero-redesign .join-hero-container-cell {
padding: 0;
}
.txp-hero-redesign .join-hero-container__text {
border-radius: 4px;
padding: 32px;
background: #fff;
box-shadow: 0 10px 20px 0px rgba(0,0,0,0.2);
text-align: left;
}
.txp-hero-redesign .join-hero-container__text .join-h1 {
margin-top: 0;
padding-top: 0;
}
.txp-hero-redesign .txp-main-cta .bui-button--primary {
margin: 16px 0 16px;
}
.txp-hero-redesign .join-hero-container__text h1 {
color: #333!important;
}
.txp-hero-redesign .join-hero-container__text h3 {
color: #6b6b6b;
}
.txp-hero-redesign .join-hero-terms-and-conditions {
color: #0071c2;
border: none;
text-align: left;
}
.txp-hero-redesign .join-hero-terms-and-conditions-container {
margin-bottom: 1em;
}
.txp-hero-redesign .join-animated-header-property-type-container {
height: 38px;
}
.txp-hero-redesign .txp-secondary-cta .bui-link--secondary {
color: #0071c2;
text-align: left;
}
@media (max-width: 992px) and (min-width: 768px) {
.txp-hero-redesign .join-tablet-centered {
margin: 0;
}
}
@media (max-width: 767px) {
.txp-hero-redesign .join-hero-container__text {
padding: 1.2em;
}
}
@media (max-width: 996px) {
.txp-hero-redesign .join-hero-terms-and-conditions-container {
text-align: left;
}
}
/* Styles for the LP header */
.txp-iam-header .join-btn {
background: none;
display: flex;
}
.txp-iam-header .join-btn > svg {
fill: #fafcff;
}
.txp-iam-header .bui-avatar-block .bui-avatar > svg {
fill: #fafcff;
}
.txp-iam-header .join-account-badge-trigger {
padding-right: 0;
padding-left: 16px;
}
.txp-iam-header .join-account-badge-trigger .bui-avatar-block {
text-align: center;
}
.txp-iam-header .dropdown.fright {
align-items: center;
display: flex;
height: 100%;
}
.txp-iam-header .join-btn:focus {
box-shadow: none;
}
.txp-iam-header .join-account-badge-trigger .bui-avatar--callout {
background: #ff8000;
color: #fff;
}
.txp-iam-header .join-help-block {
box-shadow:
0 3px 4px 0 rgba(0, 0, 0, .14),
0 1px 8px 0 rgba(0, 0, 0, .12),
0 2px 3px -1px rgba(0, 0, 0, .2);
}
.txp-iam-header .bui-avatar__label {
text-transform: uppercase;
}
.txp-hero-redesign .join-hero-container-cell {
max-width: 480px;
}
.txp-hero-redesign .join-h3-subtitle {
font-size: 20px;
}
.txp-hero-redesign .join-h1 {
font-size: 32px;
line-height: 1.2;
}
/* Referral program */
.txp-hero-redesign .join-hero-list {
color: #333!important;
padding-left: 1em;
}
/* Mobile needs some love as well */
.txp-mob-hero {
padding: 1.6em;
}
.txp-mob-hero .text-center {
text-align: left!important;
padding: 0;
}
.txp-mob-hero .txp-main-cta {
margin: 1em 0;
}
.txp-mob-hero .txp-secondary-cta {
color: #fff;
}
.txp-mob-hero .txp-secondary-cta a {
color: #fff;
}
.txp-mob-hero .txp-secondary-cta a {
text-decoration: underline;
}
.txp-mob-hero .txp-main-cta {
margin: 1em 0;
}
.txp-mob-hero .txp-promo-code label {
color: #fff;
}
.txp-mob-hero .join-hero-terms-and-conditions {
color: #fff;
}
.txp-mob-hero .join-hero-terms-and-conditions-container {
text-align: left!important;
}
/* END: iam_redirect_joinapp_to_accounts_portal */
.join-channel-manager {
list-style: none;
padding: 0;
}
.join-channel-manager__list-item {
display: flex;
}
.join-channel-manager__svg {
margin-top: 4px;
margin-right: 32px;
flex-grow: 0;
flex-shrink: 0;
}
.is_right_to_left .join-channel-manager__svg {
margin-right: 0;
margin-left: 32px;
}
.join-channel-manager__image {
max-width: 507px;
max-height: 384px;
}
/* marketing_lp_generator */
.join-marketing-lp-image {
background-position: center bottom;
background-size: cover;
}
.join-marketing-lp-headline {
max-width: none ;
}
/* end marketing_lp_generator */
.join-help-button {
border: none;
background: transparent;
box-sizing: border-box;
position: relative;
top: 2px;
padding: 0 8px;
opacity: 0.9;
color: inherit;
}
.feedback-loop {
background-color: #fff;
border: 1px solid #fefefe;
border-radius: 4px;
}
.feedback-loop > [data-view] {
display: none;
}
.feedback-loop__header {
color: #000;
font-size: 14px;
margin-bottom: 10px;
}
.feedback-loop__header--inline {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
}
.feedback-loop__options {
width: 100%;
}
.feedback-loop__options td.feedback-loop__cta {
border: 0;
vertical-align: top;
padding-left: 10px;
}
.is_right_to_left td.feedback-loop__cta {
padding-left: 0;
padding-right: 10px;
}
.feedback-loop__options button {
height: 33px;
font-size: 14px;
color: #6b6b6b;
background-color: #fff;
border: 0;
}
.feedback-loop__buttons {
border: 1px solid #DBDBDB;
border-radius: 3px;
width: auto;
display: inline-block;
overflow: hidden;
margin-top: 0;
margin-left: 10px;
}
.is_right_to_left .feedback-loop__buttons {
margin-left: 0;
margin-right: 10px
}
.feedback-loop__buttons button {
border-left: 1px solid #DBDBDB;
min-width: 80px;
text-align: center;
}
.feedback-loop__buttons button:first-child {
border-left: none;
}
.is_right_to_left .feedback-loop__buttons button:first-child {
border-left: 1px solid #DBDBDB;
}
.is_right_to_left .feedback-loop__buttons button:last-child {
border-left: none;
}
.feedback-loop__options button:hover {
color: #6b6b6b;
background-color: #f5f5f5;
}
/* styles for data-view="feedback" */
.feedback-loop__view-feedback textarea {
padding: 10px;
height: 63px;
width: 100%;
border: 1px solid #DBDBDB;
border-radius: 3px;
font-size: 14px;
line-height: 150%;
}
.feedback-loop__options.feedback-loop__submit button {
color: #0071c2;
border: 1px solid #0071c2;
border-radius: 3px;
background-color: #fff;
}
.feedback-loop__cta button {
padding: 9px 22px;
height: auto;
}
.feedback-loop__cta button:hover {
color: #fff;
background-color: #0071c2;
}
.feedback-loop button:focus {
outline: 0;
}
@media (max-width: 768px) {
.feedback-loop__buttons,
.is_right_to_left .feedback-loop__buttons {
display: inline-block;
margin-top: 10px;
margin-left: 0;
margin-right: 0;
text-align: center;
}
.feedback-loop__header--inline {
display: block;
}
}
/* Typography */
/* This file is where our main font call for joinapp happens. If you wish to experiment with fonts, this is the place. Mind that the styles below should override base.scss. Happy styling! */
/* Font System */
body {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body h1 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body h2 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body h3 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body h4 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body h5 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body h6 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body .h1 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body .h2 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body .h3 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body .h4 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body .h5 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
body .h6 {
font-family: "BlinkMacSystemFont", -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
}
/* Standard classes for headers */
.bui_font_display_three { @apply(--bui_font_display_three); }
.bui_font_display_two { @apply(--bui_font_display_two); }
.bui_font_display_one { @apply(--bui_font_display_one); }
.bui_font_heading { @apply(--bui_font_heading); }
.bui_font_featured { @apply(--bui_font_featured); }
.bui_font_body { @apply(--bui_font_body); }
.bui_font_emphasized { @apply(--bui_font_emphasized); }
.bui_font_caption { @apply(--bui_font_caption); }
.bui_font_strong { @apply(--bui_font_strong); }
/* Copy base color bui_color_grayscale_dark */
.message-empty {
color: #333;
}
.content-compact .page_description p {
color: #333;
}
.photo-counter {
color: #333;
}
.content-compact label {
color: #333;
}
.js-upload.btn-default {
color: #333;
}
.form-control {
color: #333;
}
.btn-default {
color: #333;
}
.no-web-font .content-compact .page_description p {
color: #333;
}
.drag-and-drop-photos .upload-form-drop-instruction {
color: #333;
}
.accomAgreement h3 {
color: #333;
}
.accomAgreement #bottom_message h4 {
color: #333;
}
.timeline dl dt {
color: #333;
}
.thankyou-block--color {
color: #333;
}
.thankyou-block h4 {
color: #333;
}
.roomlist-footer {
color: #333;
}
.roomlist-items {
color: #333;
}
.font-hierarchy-updated .content-compact legend {
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #333;
}
.font-hierarchy-updated .content-compact h1 {
font-size: 24px;
line-height: 32px;
font-weight: 700;
}
.font-hierarchy-updated .room_block h3 {
font-size: 16px;
line-height: 24px;
font-weight: 500;
}
.font-hierarchy-updated .side-container span {
color: #0071c2;
}
.font-hierarchy-updated .content-compact .thankyou-block h1 {
font-weight: normal;
}
.join-trust {
width: 100%;
}
.join-trust__content {
width: 100%;
}
.join-trust__icon {
display: none;
}
.join-trust__list {
font-size: 16px;
line-height: 24px;
list-style: none;
margin: 16px 0;
padding: 0;
}
.join-trust__item {
margin-bottom: 8px;
padding-left: 32px;
position: relative;
}
.join-trust__tick {
left: 8px;
margin-top: -4px;
position: absolute;
top: 50%;
}
.join-trust__tick svg {
height: 12px;
width: 16px;
}
.join-trust__text {
font-size: 16px;
line-height: 24px;
margin: 16px 0;
}
.is_right_to_left .join-trust__item {
padding-left: 0;
padding-right: 32px;
}
.is_right_to_left .join-trust__tick {
left: auto;
right: 8px;
}
@media screen and (min-width: 768px) {
.join-trust {
display: table;
width: 100%;
}
.join-trust__content {
display: table-cell;
vertical-align: middle;
width: calc(100% - 240px);
}
.join-trust__icon {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
}
.join-trust__icon svg {
width: 220px;
}
.join-trust__icon--smaller svg {
width: 200px;
}
}
@media (min-width: 993px) {
.join-trust__content {
width: calc(100% - 350px);
}
.join-trust__text {
padding-right: 100px;
}
.is_right_to_left .join-trust__text {
padding-left: 100px;
padding-right: 0;
}
.join-trust__icon {
width: 350px;
}
.join-trust__icon svg {
width: 290px;
}
.join-trust__icon--smaller svg {
width: 240px;
}
}
.join-trust__tick_container {
position: absolute;
left: 0;
top: 2px;
}
.rtl .join-trust__tick_container {
left: auto;
right: 0;
}
.percentage-circle {
height: 80px;
position: relative;
width: 80px;
}
.percentage-circle__value {
color: #0071c2;
display: block;
font-size: 20px;
font-weight: bold;
left: 0;
line-height: 1;
margin-top: calc(-0.5 * 20px);
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
.percentage-circle__svg {
transform: rotate(-90deg);
}
.percentage-circle__progress {
transition: all .5s ease;
}
.what-guest__subtitle {
margin-bottom: 32px;
}
.what-guest__section {
background: #fff;
margin: 8px 0 32px;
}
.what-guest__section:last-child {
margin-bottom: 0;
}
.what-guest__number {
margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
.what-guest {
background: url(https://q.bstatic.com/static/img/join/world-map-gray.png) no-repeat center center #fff;
background-size: contain;
}
.what-guest__title {
text-align: center;
}
.what-guest__subtitle {
text-align: center;
}
.what-guest__sections {
display: table;
border-collapse: separate;
border-spacing: 32px;
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
.what-guest__row {
display: table-row;
}
.what-guest__section {
border: 1px solid #e6e6e6;
display: table-cell;
min-height: 100px;
padding-left: calc(2 * 16px + 80px);
position: relative;
vertical-align: middle;
width: 50%;
}
.what-guest__number {
height: 80px;
left: 16px;
margin-top: -40px;
position: absolute;
top: 50%;
width: 80px;
}
.what-guest__text {
padding: 16px;
padding-left: 0;
}
.is_right_to_left .what-guest__section {
padding-left: 0;
padding-right: calc(2 * 16px + 80px);
}
.is_right_to_left .what-guest__number {
left: auto;
right: 16px;
}
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #fff;
color: #262626;
border: 1px solid #e7e7e7;
border-radius: 2px;
padding: 16px;
}
a.bui-card {
text-decoration: none;
color: #262626;
}
a.bui-card:link {
text-decoration: none;
color: #262626;
}
.bui-card:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
}
.bui-card__image {
width: calc(4px * 18);
height: calc(4px * 18);
margin-right: 16px;
border: none;
-ms-flex-negative: 0;
flex-shrink: 0;
display: block;
}
.rtl .bui-card__image, [dir="rtl"] .bui-card__image {
margin-right: 0;
margin-left: 16px;
}
.bui-card__content {
max-width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.bui-card__title,
.bui-card__subtitle {
margin: 0;
padding: 0;
}
.bui-card__title {
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.bui-card__subtitle {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #6b6b6b;
}
.bui-card__slot {
margin-top: 16px;
}
.bui-card__slot:first-child {
margin-top: 0;
}
.bui-card__text {
margin: 16px 0 0;
}
.bui-card__text:first-child {
margin-top: 0;
}
.bui-card__actions {
padding-top: 16px;
}
@media (min-width: 576px) {
.bui-card--size-large {
padding: 24px;
}
}
.bui-card--media {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
}
.bui-card--media .bui-card__content {
padding: 16px;
}
.bui-card--media.bui-card--size-large .bui-card__content {
padding: 16px;
}
.bui-card__image-container {
position: relative;
border-radius: 2px 2px 0 0;
height: calc(24px * 10);
overflow: hidden;
}
.bui-card--media .bui-card__image {
width: 100%;
height: 100%;
margin: 0;
-o-object-fit: cover;
object-fit: cover;
}
.bui-card--media-alt .bui-card__header {
position: absolute;
padding: 16px;
bottom: 0;
left: 0;
width: 100%;
margin-bottom: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 1)), color-stop(50%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 100%);
}
.rtl .bui-card--media-alt .bui-card__header, [dir="rtl"] .bui-card--media-alt .bui-card__header {
left: auto;
right: 0;
}
.bui-card--media-alt .bui-card__header > .bui-card__title {
color: #fff;
}
.bui-card--media-alt .bui-card__header > .bui-card__subtitle {
color: #fff;
}
.bui-card--media-full .bui-card__header > .bui-card__title {
color: #fff;
}
.bui-card--media-full .bui-card__header > .bui-card__subtitle {
color: #fff;
}
.bui-card--media-full {
padding-bottom: 0;
border: 0;
}
.bui-card--media-full > .bui-card__image-container {
border-radius: 2px;
}
.bui-card--media-full .bui-card__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
background: rgba(0, 0, 0, 0.5);
}
.bui-card--transparent {
background-color: transparent;
border: none;
}
.bui-card--transparent .bui-card__content {
padding: 16px 0 0;
}
.bui-card--transparent.bui-card--size-large .bui-card__content {
padding: 16px 0 0;
}
.bui-card--transparent .bui-card__image-container {
border-radius: 2px;
}
.bui-card--transparent .bui-card__image {
margin-left: 0;
margin-right: 16px;
}
.rtl .bui-card--transparent .bui-card__image, [dir="rtl"] .bui-card--transparent .bui-card__image {
margin-right: 0;
margin-left: 16px;
}
.bui-card--transparent.bui-card--media .bui-card__image {
margin: 0;
}
.bui-card--fill {
padding: 0;
}
/* Card group */
.bui-card-group > .bui-card + .bui-card {
border-top: none;
}
.bui-card-group > .bui-card {
border-radius: 0;
}
.bui-card-group > .bui-card:first-child {
border-radius: 2px 2px 0 0;
}
.bui-card-group > .bui-card:last-child {
border-radius: 0 0 2px 2px;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-carousel {
position: relative;
margin-left: calc(16px * -1);
margin-right: calc(16px * -1);
}
.bui-carousel__inner {
list-style: none;
padding: 0 16px;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
overflow-x: scroll;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.bui-carousel__inner:after {
width: 16px;
content: '';
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.bui-carousel__inner::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.bui-carousel__nav {
display: none;
pointer-events: none;
}
.bui-carousel__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-sizing: initial;
box-sizing: initial;
padding-right: 8px;
}
.rtl .bui-carousel__item, [dir="rtl"] .bui-carousel__item {
padding-right: 0;
padding-left: 8px;
}
.bui-carousel__item:last-child {
padding-right: 0;
}
.rtl .bui-carousel__item:last-child, [dir="rtl"] .bui-carousel__item:last-child {
padding-right: 0;
padding-left: 0;
}
.bui-carousel .bui-card__image-container {
height: auto;
}
.bui-carousel--small .bui-card__title {
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.bui-carousel--medium .bui-card__title {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-carousel--medium .bui-card__subtitle {
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.bui-carousel--small .bui-carousel__item {
width: calc((100% - 4 * 16px) / 3);
}
.bui-carousel--medium .bui-carousel__item {
width: calc((100% - 3 * 16px) / 2);
}
.bui-carousel--large .bui-carousel__item {
width: calc((100% - 7 * 16px) / 1);
}
/* Tablet */
@media (min-width: 576px) {
.bui-carousel--small .bui-card__title {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-carousel--small .bui-carousel__item {
width: calc((100% - 4 * 16px) / 5);
}
.bui-carousel--medium .bui-carousel__item {
width: calc((100% - 3 * 16px) / 4);
}
.bui-carousel--large .bui-carousel__item {
width: calc((100% - 2 * 16px) / 3);
}
}
/* Desktop */
@media (min-width: 992px) {
.bui-carousel {
margin: 0;
}
.bui-carousel__inner {
padding-left: 0;
padding-right: 0;
}
.bui-carousel__inner:after {
content: none;
}
.bui-carousel__nav {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: calc(16px * -1);
right: calc(16px * -1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.bui-carousel__button {
z-index: 100;
-webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
padding: 4px;
border-radius: 50%;
cursor: default;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: #fff;
color: #262626;
-webkit-transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: all;
opacity: 0;
visibility: hidden;
outline: none;
}
.bui-carousel__button.bui-is-clickable {
visibility: visible;
}
.bui-carousel__button.bui-is-visible {
opacity: 1;
cursor: pointer;
}
.bui-carousel:focus,
.bui-carousel__button.bui-is-visible:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
}
.bui-carousel__button.bui-is-visible:active {
opacity: 1;
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
.bui-carousel__next {
height: 24px;
width: 24px;
vertical-align: middle;
}
.rtl .bui-carousel__next, [dir="rtl"] .bui-carousel__next {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.bui-carousel__prev {
height: 24px;
width: 24px;
vertical-align: middle;
}
.rtl .bui-carousel__prev, [dir="rtl"] .bui-carousel__prev {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.bui-carousel--small .bui-card__title {
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.bui-carousel--medium .bui-card__title {
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.bui-carousel--medium .bui-card__subtitle {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.bui-carousel__item {
padding-right: 16px;
}
.rtl .bui-carousel__item, [dir="rtl"] .bui-carousel__item {
padding-right: 0;
padding-left: 16px;
}
.bui-carousel__item:last-child {
padding-right: 0;
}
.rtl .bui-carousel__item:last-child, [dir="rtl"] .bui-carousel__item:last-child {
padding-right: 0;
padding-left: 0;
}
}
/* Exp iam_redirect_joinapp_to_accounts_portal */
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-avatar {
position: relative;
height: 32px;
width: 32px;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #494949;
color: #fff;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-avatar__image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
background-color: #f2f2f2;
}
.bui-avatar__icon {
width: 16px;
height: 16px;
}
.bui-avatar--small {
height: 24px;
width: 24px;
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.bui-avatar--small .bui-avatar__icon {
width: calc(12px + 2px);
height: calc(12px + 2px);
}
.bui-avatar--large {
height: calc(4px * 12);
width: calc(4px * 12);
font-size: 20px;
font-weight: 700;
line-height: 28px;
}
.bui-avatar--large .bui-avatar__icon {
width: 24px;
height: 24px;
}
.bui-avatar--larger {
height: calc(4px * 16);
width: calc(4px * 16);
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.bui-avatar--larger .bui-avatar__icon {
width: calc(4px * 7);
height: calc(4px * 7);
}
.bui-avatar--largest {
height: calc(4px * 32);
width: calc(4px * 32);
font-size: 32px;
font-weight: 700;
line-height: 40px;
}
.bui-avatar--largest .bui-avatar__icon {
width: calc(4px * 9);
height: calc(4px * 9);
}
/* Colors */
.bui-avatar--destructive {
background-color: #c00;
color: #fff;
}
.bui-avatar--callout {
background-color: #ff8000;
color: #262626;
}
.bui-avatar--accent {
background-color: #febb02;
color: #262626;
}
.bui-avatar--constructive {
background-color: #008009;
color: #fff;
}
/* Outline */
.bui-avatar--outline-white {
border: 2px solid #fff;
}
.bui-avatar--outline-accent {
border: 2px solid #febb02;
}
.bui-avatar--outline-callout {
border: 2px solid #ff8000;
}
.bui-avatar--outline-destructive {
border: 2px solid #c00;
}
.bui-avatar--outline-constructive {
border: 2px solid #008009;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
}
.bui-dropdown__content {
display: none;
position: absolute;
left: 0;
min-width: 100%;
top: 100%;
-webkit-transform: translateY(8px);
transform: translateY(8px);
z-index: 200;
}
.rtl .bui-dropdown__content, [dir="rtl"] .bui-dropdown__content {
left: auto;
right: 0;
}
.bui-dropdown__more {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
cursor: pointer;
opacity: 0.5;
padding: 0;
}
.bui-dropdown__more:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
}
.bui-dropdown__more:hover {
opacity: 0.7;
}
.bui-dropdown--active .bui-dropdown__more {
opacity: 1;
}
.bui-dropdown__more + .bui-dropdown__content {
left: auto;
right: 0;
}
.rtl .bui-dropdown__more + .bui-dropdown__content, [dir="rtl"] .bui-dropdown__more + .bui-dropdown__content {
right: auto;
left: 0;
}
.bui-dropdown--active .bui-dropdown__content {
display: block;
}
.bui-dropdown--end .bui-dropdown__content {
left: auto;
right: 0;
}
.rtl .bui-dropdown--end .bui-dropdown__content, [dir="rtl"] .bui-dropdown--end .bui-dropdown__content {
right: auto;
left: 0;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-dropdown-menu {
padding: 16px;
background: #fff;
border-radius: 2px;
overflow: hidden;
min-width: calc(4px * 50);
z-index: 100;
-webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
}
.bui-dropdown-menu__items {
list-style-type: none;
margin: calc(16px * -1);
padding: 4px 0;
}
.bui-dropdown-menu__button {
position: relative;
display: block;
width: 100%;
text-align: left;
outline: none;
}
.rtl .bui-dropdown-menu__button, [dir="rtl"] .bui-dropdown-menu__button {
text-align: right;
}
.bui-dropdown-menu__button {
border: none;
margin: 0;
cursor: pointer;
padding: 12px 16px;
white-space: nowrap;
text-decoration: none;
color: #262626;
background-color: transparent;
fill: #262626;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.bui-dropdown-menu__button:visited {
border: none;
margin: 0;
cursor: pointer;
padding: 12px 16px;
white-space: nowrap;
text-decoration: none;
color: #262626;
background-color: transparent;
fill: #262626;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.bui-dropdown-menu__button:link {
border: none;
margin: 0;
cursor: pointer;
padding: 12px 16px;
white-space: nowrap;
text-decoration: none;
color: #262626;
background-color: transparent;
fill: #262626;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.bui-dropdown-menu__button:hover {
background-color: rgba(0, 0, 0, 0.06);
}
.bui-dropdown-menu__button:focus {
background-color: rgba(0, 0, 0, 0.06);
}
.bui-dropdown-menu__button:active {
background-color: rgba(0, 0, 0, 0.06);
}
.bui-dropdown-menu__button[disabled] {
fill: #949494;
color: #949494;
cursor: not-allowed;
}
.bui-dropdown-menu__button[disabled]:visited {
fill: #949494;
color: #949494;
cursor: not-allowed;
}
.bui-dropdown-menu__button[disabled]:link {
fill: #949494;
color: #949494;
cursor: not-allowed;
}
.bui-dropdown-menu__button[disabled]:hover,
.bui-dropdown-menu__button[disabled]:focus,
.bui-dropdown-menu__button[disabled]:active {
background: none;
}
.bui-dropdown-menu__icon {
margin-right: 12px;
color: #6b6b6b;
vertical-align: middle;
}
.rtl .bui-dropdown-menu__icon, [dir="rtl"] .bui-dropdown-menu__icon {
margin-right: 0;
margin-left: 12px;
}
.bui-dropdown-menu__text {
line-height: 24px;
height: 24px;
}
.bui-dropdown-menu__text-slot {
margin-left: 8px;
}
.rtl .bui-dropdown-menu__text-slot, [dir="rtl"] .bui-dropdown-menu__text-slot {
margin-left: 0;
margin-right: 8px;
}
.bui-dropdown-menu__end-slot {
padding-left: 8px;
margin-left: auto;
}
.rtl .bui-dropdown-menu__end-slot, [dir="rtl"] .bui-dropdown-menu__end-slot {
padding-left: 0;
padding-right: 8px;
margin-left: 0;
margin-right: auto;
}
.bui-dropdown-menu__divider {
margin: 4px 0;
}
.bui-dropdown-menu--fill {
padding: 0;
}
.bui-dropdown-menu--fill .bui-dropdown-menu__items {
margin: 0;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-avatar-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-avatar-block__avatar {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.bui-avatar-block__text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 8px;
}
.rtl .bui-avatar-block__text, [dir="rtl"] .bui-avatar-block__text {
margin-left: 0;
margin-right: 8px;
}
.bui-avatar-block__title,
.bui-avatar-block__subtitle {
display: block;
}
.bui-avatar-block__subtitle {
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.bui-avatar-block--large .bui-avatar-block__title {
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.bui-avatar-block--large .bui-avatar-block__subtitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.bui-avatar-block--small .bui-avatar-block__title {
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.bui-avatar-block__flag {
margin-right: 8px;
}
.rtl .bui-avatar-block__flag, [dir="rtl"] .bui-avatar-block__flag {
margin-right: 0;
margin-left: 8px;
}
.bui-avatar-block--small .bui-avatar-block__flag {
margin-right: 4px;
}
.rtl .bui-avatar-block--small .bui-avatar-block__flag, [dir="rtl"] .bui-avatar-block--small .bui-avatar-block__flag {
margin-right: 0;
margin-left: 4px;
}
.join-account-badge-trigger .bui-avatar-block:hover {
cursor: pointer;
}
.join-account-badge-trigger .bui-avatar-block {
outline: none;
}
.join-header-account-icon {
vertical-align: middle;
}
.join-account-badge-trigger {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
padding-right: 16px;
}
#join-account-badge {
padding: 16px;
}
.join-account-badge-trigger .bui-avatar--callout {
background-color: #f5f5f5;
color: #6b6b6b;
}
.account-badge_no-hover:hover {
background-color: transparent;
cursor: default;
}
.join-account-badge-trigger .bui-dropdown__item:not(:last-child) {
padding-bottom: 4px;
}
.join-account-badge-trigger a:focus{
outline: none;
}
/* LP for professionals */
.join-section-pro {
padding: calc(24px * 3) 0;
}
.professionals-banner {
background: #f5f5f5;
}
.join-headline-hightlight-word {
color: #0071c2;
display: block;
}
.mpp-section {
margin-top: 32px;
}
.mpp-section__box {
margin: 32px 0;
width: 100%;
}
@media screen and (min-width: 600px) {
.mpp-section {
align-items: stretch;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: calc(32px * 2);
}
.mpp-section__box {
border: 1px solid #bdbdbd;
border-radius: 2px;
padding: 50px 32px 32px;
position: relative;
width: calc(50% - 16px);
}
.mpp-section__icon {
left: 32px;
position: absolute;
top: -25px;
}
.rtl .mpp-section__icon {
left: auto;
right: 32px;
}
}
/*@import "styles/national_mode_phone_exp.css";*/
.join-tools__tool {
margin-bottom: 24px;
}
.join-tools__image {
display: block;
margin: 32px auto 0;
max-width: 1010px;
width: 100%;
}
@media screen and (min-width: 600px) {
.join-tools__tool {
display: flex;
justify-content: space-between;
margin-top: 24px;
}
.join-tools__icon {
padding-top: 32px;
width: 64px;
}
.join-tools__body {
width: calc(100% - 80px);
}
.join-tools__image {
margin: calc(2 * 32px) auto 32px;
}
}
.index-payments__list {
margin: 32px 0;
}
.index-payments__item {
margin-bottom: 32px;
}
.index-payments__number span {
align-items: center;
background: #0071c2;
border-radius: 50%;
display: flex;
color: #fff;
font-size: 24px;
height: 50px;
justify-content: center;
width: 50px;
}
.index-payments__explanation {
background: #f5f5f5;
margin: 0 -15px;
padding: 16px;
}
.index-payments__usps {
list-style: none;
margin: 24px 0;
padding: 0;
}
.index-payments__usp {
margin-bottom: 8px;
padding-left: 30px;
position: relative;
}
.index-payments__usp svg {
left: 0;
position: absolute;
top: 5px;
}
.rtl .index-payments__usp {
padding-left: 0;
padding-right: 30px;
}
.rtl .index-payments__usp svg {
left: auto;
right: 0;
}
.index-payments__no-ufi {
margin: 32px 0 calc(-1 * 16px);
}
.index-payments__commission {
margin: 32px 0 16px;
position: relative;
}
.index-payments__commission.loading:after {
background: url(https://q.bstatic.com/backend_static/common/dist/extranet_ng/static/images/loader.gif) no-repeat center center color(#f5f5f5 a(75%));
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.index-payments__city {
margin-bottom: 4px;
}
.index-payments__change-location {
background: transparent;
border: 0;
color: #0071c2;
font-size: inherit;
line-height: inherit;
padding: 0;
text-decoration: underline;
}
.index-payments__change-location:hover {
text-decoration: none;
}
.index-payments__commission-error {
color: #a30000;
}
@media screen and (min-width: 700px) {
.index-payments__help {
margin-left: 32px;
margin-top: 16px;
}
.index-payments__help .index-payments__item {
margin-bottom: 24px;
}
.index-payments__help .index-payments__bold {
display: block;
font-weight: 700;
}
.index-payments__help-header {
margin-top: 32px;
}
.index-payments__item {
align-items: flex-start;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.index-payments__number {
margin-top: 16px;
width: 50px;
}
.index-payments__text {
width: calc(100% - 74px); /* 74px = 50px + 24px (bui_unit_larger) */
}
.index-payments__explanation {
margin: 32px 16px 0;
padding: 32px;
}
.index-payments__setting-prices {
margin-top: 0;
}
}
.index-channel-manager__points {
margin: calc(32px * 2) 0;
}
.index-channel-manager__point {
margin-bottom: 32px;
}
.index-channel-manager__image {
display: block;
margin: 32px auto;
max-width: 1010px;
width: 100%;
}
@media screen and (max-width: 600px) {
.index-channel-manager__points {
margin: 0px;
}
}
.index-support__content:before {
background: url(https://q.bstatic.com/static/img/join/professional_support.jpg) no-repeat center center;
background-size: cover;
content: '';
display: block;
height: 0;
margin: 32px -15px;
padding-bottom: 66.7%;
}
.rtl .index-support__content:before {
background-image: url(https://q.bstatic.com/static/img/join/professional_support_rtl.jpg);
}
.index-support__content {
margin-top: 32px;
}
.index-faq__content {
margin-top: 32px;
}
@media screen and (min-width: 700px) {
.index-support {
background: url(https://q.bstatic.com/static/img/join/professional_support.jpg) no-repeat right center #f5f5f5;
background-size: contain;
}
.rtl .index-support {
background-image: url(https://q.bstatic.com/static/img/join/professional_support_rtl.jpg);
background-position: left center;
}
.index-support__content:before {
display: none;
}
}
@media screen and (min-width: 1400px) {
.index-support {
background: url(https://q.bstatic.com/static/img/join/professional_support.jpg) no-repeat 75% center #f5f5f5;
background-size: contain;
}
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-grid {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: calc(-1 * 16px) calc(-1 * 16px / 2) 0 calc(-1 * 16px / 2);
clear: both; /* Fix for floated elements before the grid, that break due to negative margin */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
/* Reset list styles */
padding: 0;
list-style-type: none;
}
[class*='bui-grid__column'] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 16px calc(16px / 2) 0 calc(16px / 2);
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
/* Reset list styles */
margin: 0;
}
.bui-grid--bleed {
margin: 0;
}
.bui-grid--bleed > [class*='bui-grid__column'] {
padding: 0;
}
.bui-grid__column-1,
.bui-grid__column-1\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 1));
flex-basis: calc(100% / (12 / 1));
width: calc(100% / (12 / 1));
max-width: calc(100% / (12 / 1));
}
.bui-grid__column-2,
.bui-grid__column-2\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 2));
flex-basis: calc(100% / (12 / 2));
width: calc(100% / (12 / 2));
max-width: calc(100% / (12 / 2));
}
.bui-grid__column-3,
.bui-grid__column-1\/4 {
-ms-flex-preferred-size: calc(100% / (12 / 3));
flex-basis: calc(100% / (12 / 3));
width: calc(100% / (12 / 3));
max-width: calc(100% / (12 / 3));
}
.bui-grid__column-4,
.bui-grid__column-1\/3 {
-ms-flex-preferred-size: calc(100% / (12 / 4));
flex-basis: calc(100% / (12 / 4));
width: calc(100% / (12 / 4));
max-width: calc(100% / (12 / 4));
}
.bui-grid__column-5,
.bui-grid__column-5\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 5));
flex-basis: calc(100% / (12 / 5));
width: calc(100% / (12 / 5));
max-width: calc(100% / (12 / 5));
}
.bui-grid__column-6,
.bui-grid__column-half,
.bui-grid__column-1\/2 {
-ms-flex-preferred-size: calc(100% / (12 / 6));
flex-basis: calc(100% / (12 / 6));
width: calc(100% / (12 / 6));
max-width: calc(100% / (12 / 6));
}
.bui-grid__column-7,
.bui-grid__column-7\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 7));
flex-basis: calc(100% / (12 / 7));
width: calc(100% / (12 / 7));
max-width: calc(100% / (12 / 7));
}
.bui-grid__column-8,
.bui-grid__column-2\/3 {
-ms-flex-preferred-size: calc(100% / (12 / 8));
flex-basis: calc(100% / (12 / 8));
width: calc(100% / (12 / 8));
max-width: calc(100% / (12 / 8));
}
.bui-grid__column-9,
.bui-grid__column-3\/4 {
-ms-flex-preferred-size: calc(100% / (12 / 9));
flex-basis: calc(100% / (12 / 9));
width: calc(100% / (12 / 9));
max-width: calc(100% / (12 / 9));
}
.bui-grid__column-10,
.bui-grid__column-10\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 10));
flex-basis: calc(100% / (12 / 10));
width: calc(100% / (12 / 10));
max-width: calc(100% / (12 / 10));
}
.bui-grid__column-11,
.bui-grid__column-11\/12 {
-ms-flex-preferred-size: calc(100% / (12 / 11));
flex-basis: calc(100% / (12 / 11));
width: calc(100% / (12 / 11));
max-width: calc(100% / (12 / 11));
}
.bui-grid__column-full,
.bui-grid__column-12,
.bui-grid__column-1\/1 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
.bui-grid__column--offset-1 {
margin-left: calc(100% / (12 / 1));
}
.rtl .bui-grid__column--offset-1, [dir="rtl"] .bui-grid__column--offset-1 {
margin-left: 0;
margin-right: calc(100% / (12 / 1));
}
.bui-grid__column--offset-2 {
margin-left: calc(100% / (12 / 2));
}
.rtl .bui-grid__column--offset-2, [dir="rtl"] .bui-grid__column--offset-2 {
margin-left: 0;
margin-right: calc(100% / (12 / 2));
}
.bui-grid__column--offset-3 {
margin-left: calc(100% / (12 / 3));
}
.rtl .bui-grid__column--offset-3, [dir="rtl"] .bui-grid__column--offset-3 {
margin-left: 0;
margin-right: calc(100% / (12 / 3));
}
.bui-grid__column--offset-4 {
margin-left: calc(100% / (12 / 4));
}
.rtl .bui-grid__column--offset-4, [dir="rtl"] .bui-grid__column--offset-4 {
margin-left: 0;
margin-right: calc(100% / (12 / 4));
}
.bui-grid__column--offset-5 {
margin-left: calc(100% / (12 / 5));
}
.rtl .bui-grid__column--offset-5, [dir="rtl"] .bui-grid__column--offset-5 {
margin-left: 0;
margin-right: calc(100% / (12 / 5));
}
.bui-grid__column--offset-6,
.bui-grid__column--offset-half {
margin-left: calc(100% / (12 / 6));
}
.rtl .bui-grid__column--offset-6,
[dir="rtl"] .bui-grid__column--offset-6,
.rtl .bui-grid__column--offset-half,
[dir="rtl"] .bui-grid__column--offset-half {
margin-left: 0;
margin-right: calc(100% / (12 / 6));
}
.bui-grid__column--offset-7 {
margin-left: calc(100% / (12 / 7));
}
.rtl .bui-grid__column--offset-7, [dir="rtl"] .bui-grid__column--offset-7 {
margin-left: 0;
margin-right: calc(100% / (12 / 7));
}
.bui-grid__column--offset-8 {
margin-left: calc(100% / (12 / 8));
}
.rtl .bui-grid__column--offset-8, [dir="rtl"] .bui-grid__column--offset-8 {
margin-left: 0;
margin-right: calc(100% / (12 / 8));
}
.bui-grid__column--offset-9 {
margin-left: calc(100% / (12 / 9));
}
.rtl .bui-grid__column--offset-9, [dir="rtl"] .bui-grid__column--offset-9 {
margin-left: 0;
margin-right: calc(100% / (12 / 9));
}
.bui-grid__column--offset-10 {
margin-left: calc(100% / (12 / 10));
}
.rtl .bui-grid__column--offset-10, [dir="rtl"] .bui-grid__column--offset-10 {
margin-left: 0;
margin-right: calc(100% / (12 / 10));
}
.bui-grid__column--offset-11 {
margin-left: calc(100% / (12 / 11));
}
.rtl .bui-grid__column--offset-11, [dir="rtl"] .bui-grid__column--offset-11 {
margin-left: 0;
margin-right: calc(100% / (12 / 11));
}
/* Vertical alignment
============================================= */
.bui-grid--align-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bui-grid--align-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.bui-grid--align-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
/* Horizontal alignment
============================================= */
.bui-grid--justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.bui-grid--justify-space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.bui-grid--justify-space-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
/* RTL
============================================= */
.bui-grid--reversed {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
/* Breakpoint switches (medium)
============================================= */
@media (min-width: 576px) {
.bui-grid {
margin: calc(-1 * 24px) calc(-1 * 24px / 2) 0 calc(-1 * 24px / 2);
}
.bui-grid > [class*='bui-grid__column'] {
padding: 24px calc(24px / 2) 0 calc(24px / 2);
}
.bui-grid--size-small {
margin: calc(-1 * 16px) calc(-1 * 16px / 2) 0 calc(-1 * 16px / 2);
}
.bui-grid--size-small > [class*='bui-grid__column'] {
padding: 16px calc(16px / 2) 0 calc(16px / 2);
}
.bui-grid--bleed {
margin: 0;
}
.bui-grid--bleed > [class*='bui-grid__column'] {
padding: 0;
}
.bui-grid__column-1\@medium,
.bui-grid__column-1\/12\@medium {
-ms-flex-preferred-size: calc(100% / 12);
flex-basis: calc(100% / 12);
width: calc(100% / 12);
max-width: calc(100% / 12);
}
.bui-grid__column-2\@medium,
.bui-grid__column-2\/12\@medium {
-ms-flex-preferred-size: calc(100% / 6);
flex-basis: calc(100% / 6);
width: calc(100% / 6);
max-width: calc(100% / 6);
}
.bui-grid__column-3\@medium,
.bui-grid__column-1\/4\@medium {
-ms-flex-preferred-size: calc(100% / 4);
flex-basis: calc(100% / 4);
width: calc(100% / 4);
max-width: calc(100% / 4);
}
.bui-grid__column-4\@medium,
.bui-grid__column-1\/3\@medium {
-ms-flex-preferred-size: calc(100% / 3);
flex-basis: calc(100% / 3);
width: calc(100% / 3);
max-width: calc(100% / 3);
}
.bui-grid__column-5\@medium,
.bui-grid__column-5\/12\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 5));
flex-basis: calc(100% / (12 / 5));
width: calc(100% / (12 / 5));
max-width: calc(100% / (12 / 5));
}
.bui-grid__column-6\@medium,
.bui-grid__column-half\@medium,
.bui-grid__column-1\/2\@medium {
-ms-flex-preferred-size: calc(100% / 2);
flex-basis: calc(100% / 2);
width: calc(100% / 2);
max-width: calc(100% / 2);
}
.bui-grid__column-7\@medium,
.bui-grid__column-7\/12\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 7));
flex-basis: calc(100% / (12 / 7));
width: calc(100% / (12 / 7));
max-width: calc(100% / (12 / 7));
}
.bui-grid__column-8\@medium,
.bui-grid__column-2\/3\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 8));
flex-basis: calc(100% / (12 / 8));
width: calc(100% / (12 / 8));
max-width: calc(100% / (12 / 8));
}
.bui-grid__column-9\@medium,
.bui-grid__column-3\/4\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 9));
flex-basis: calc(100% / (12 / 9));
width: calc(100% / (12 / 9));
max-width: calc(100% / (12 / 9));
}
.bui-grid__column-10\@medium,
.bui-grid__column-10\/12\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 10));
flex-basis: calc(100% / (12 / 10));
width: calc(100% / (12 / 10));
max-width: calc(100% / (12 / 10));
}
.bui-grid__column-11\@medium,
.bui-grid__column-11\/12\@medium {
-ms-flex-preferred-size: calc(100% / (12 / 11));
flex-basis: calc(100% / (12 / 11));
width: calc(100% / (12 / 11));
max-width: calc(100% / (12 / 11));
}
.bui-grid__column-full\@medium,
.bui-grid__column-12\@medium,
.bui-grid__column-1\/1\@medium {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
.bui-grid__column--offset-1\@medium {
margin-left: calc(100% / (12 / 1));
}
.rtl .bui-grid__column--offset-1\@medium, [dir="rtl"] .bui-grid__column--offset-1\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 1));
}
.bui-grid__column--offset-2\@medium {
margin-left: calc(100% / (12 / 2));
}
.rtl .bui-grid__column--offset-2\@medium, [dir="rtl"] .bui-grid__column--offset-2\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 2));
}
.bui-grid__column--offset-3\@medium {
margin-left: calc(100% / (12 / 3));
}
.rtl .bui-grid__column--offset-3\@medium, [dir="rtl"] .bui-grid__column--offset-3\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 3));
}
.bui-grid__column--offset-4\@medium {
margin-left: calc(100% / (12 / 4));
}
.rtl .bui-grid__column--offset-4\@medium, [dir="rtl"] .bui-grid__column--offset-4\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 4));
}
.bui-grid__column--offset-5\@medium {
margin-left: calc(100% / (12 / 5));
}
.rtl .bui-grid__column--offset-5\@medium, [dir="rtl"] .bui-grid__column--offset-5\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 5));
}
.bui-grid__column--offset-6\@medium,
.bui-grid__column--offset-half\@medium {
margin-left: calc(100% / (12 / 6));
}
.rtl .bui-grid__column--offset-6\@medium,
[dir="rtl"] .bui-grid__column--offset-6\@medium,
.rtl .bui-grid__column--offset-half\@medium,
[dir="rtl"] .bui-grid__column--offset-half\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 6));
}
.bui-grid__column--offset-7\@medium {
margin-left: calc(100% / (12 / 7));
}
.rtl .bui-grid__column--offset-7\@medium, [dir="rtl"] .bui-grid__column--offset-7\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 7));
}
.bui-grid__column--offset-8\@medium {
margin-left: calc(100% / (12 / 8));
}
.rtl .bui-grid__column--offset-8\@medium, [dir="rtl"] .bui-grid__column--offset-8\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 8));
}
.bui-grid__column--offset-9\@medium {
margin-left: calc(100% / (12 / 9));
}
.rtl .bui-grid__column--offset-9\@medium, [dir="rtl"] .bui-grid__column--offset-9\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 9));
}
.bui-grid__column--offset-10\@medium {
margin-left: calc(100% / (12 / 10));
}
.rtl .bui-grid__column--offset-10\@medium, [dir="rtl"] .bui-grid__column--offset-10\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 10));
}
.bui-grid__column--offset-11\@medium {
margin-left: calc(100% / (12 / 11));
}
.rtl .bui-grid__column--offset-11\@medium, [dir="rtl"] .bui-grid__column--offset-11\@medium {
margin-left: 0;
margin-right: calc(100% / (12 / 11));
}
}
/* Breakpoint switches (large)
============================================= */
@media (min-width: 992px) {
.bui-grid {
margin: calc(-1 * 32px) calc(-1 * 32px / 2) 0 calc(-1 * 32px / 2);
}
.bui-grid > [class*='bui-grid__column'] {
padding: 32px calc(32px / 2) 0 calc(32px / 2);
}
.bui-grid--size-small {
margin: calc(-1 * 16px) calc(-1 * 16px / 2) 0 calc(-1 * 16px / 2);
}
.bui-grid--size-small > [class*='bui-grid__column'] {
padding: 16px calc(16px / 2) 0 calc(16px / 2);
}
.bui-grid--bleed {
margin: 0;
}
.bui-grid--bleed > [class*='bui-grid__column'] {
padding: 0;
}
.bui-grid__column-1\@large,
.bui-grid__column-1\/12\@large {
-ms-flex-preferred-size: calc(100% / 12);
flex-basis: calc(100% / 12);
width: calc(100% / 12);
max-width: calc(100% / 12);
}
.bui-grid__column-2\@large,
.bui-grid__column-2\/12\@large {
-ms-flex-preferred-size: calc(100% / 6);
flex-basis: calc(100% / 6);
width: calc(100% / 6);
max-width: calc(100% / 6);
}
.bui-grid__column-3\@large,
.bui-grid__column-1\/4\@large {
-ms-flex-preferred-size: calc(100% / 4);
flex-basis: calc(100% / 4);
width: calc(100% / 4);
max-width: calc(100% / 4);
}
.bui-grid__column-4\@large,
.bui-grid__column-1\/3\@large {
-ms-flex-preferred-size: calc(100% / 3);
flex-basis: calc(100% / 3);
width: calc(100% / 3);
max-width: calc(100% / 3);
}
.bui-grid__column-5\@large,
.bui-grid__column-5\/12\@large {
-ms-flex-preferred-size: calc(100% / (12 / 5));
flex-basis: calc(100% / (12 / 5));
width: calc(100% / (12 / 5));
max-width: calc(100% / (12 / 5));
}
.bui-grid__column-6\@large,
.bui-grid__column-1\/2\@large {
-ms-flex-preferred-size: calc(100% / 2);
flex-basis: calc(100% / 2);
width: calc(100% / 2);
max-width: calc(100% / 2);
}
.bui-grid__column-7\@large,
.bui-grid__column-7\/12\@large {
-ms-flex-preferred-size: calc(100% / (12 / 7));
flex-basis: calc(100% / (12 / 7));
width: calc(100% / (12 / 7));
max-width: calc(100% / (12 / 7));
}
.bui-grid__column-8\@large,
.bui-grid__column-2\/3\@large {
-ms-flex-preferred-size: calc(100% / (12 / 8));
flex-basis: calc(100% / (12 / 8));
width: calc(100% / (12 / 8));
max-width: calc(100% / (12 / 8));
}
.bui-grid__column-9\@large,
.bui-grid__column-3\/4\@large {
-ms-flex-preferred-size: calc(100% / (12 / 9));
flex-basis: calc(100% / (12 / 9));
width: calc(100% / (12 / 9));
max-width: calc(100% / (12 / 9));
}
.bui-grid__column-10\@large,
.bui-grid__column-10\/12\@large {
-ms-flex-preferred-size: calc(100% / (12 / 10));
flex-basis: calc(100% / (12 / 10));
width: calc(100% / (12 / 10));
max-width: calc(100% / (12 / 10));
}
.bui-grid__column-11\@large,
.bui-grid__column-11\/12\@large {
-ms-flex-preferred-size: calc(100% / (12 / 11));
flex-basis: calc(100% / (12 / 11));
width: calc(100% / (12 / 11));
max-width: calc(100% / (12 / 11));
}
.bui-grid__column-12\@large,
.bui-grid__column-1\/1\@large {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
.bui-grid__column--offset-1\@large {
margin-left: calc(100% / (12 / 1));
}
.rtl .bui-grid__column--offset-1\@large, [dir="rtl"] .bui-grid__column--offset-1\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 1));
}
.bui-grid__column--offset-2\@large {
margin-left: calc(100% / (12 / 2));
}
.rtl .bui-grid__column--offset-2\@large, [dir="rtl"] .bui-grid__column--offset-2\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 2));
}
.bui-grid__column--offset-3\@large {
margin-left: calc(100% / (12 / 3));
}
.rtl .bui-grid__column--offset-3\@large, [dir="rtl"] .bui-grid__column--offset-3\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 3));
}
.bui-grid__column--offset-4\@large {
margin-left: calc(100% / (12 / 4));
}
.rtl .bui-grid__column--offset-4\@large, [dir="rtl"] .bui-grid__column--offset-4\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 4));
}
.bui-grid__column--offset-5\@large {
margin-left: calc(100% / (12 / 5));
}
.rtl .bui-grid__column--offset-5\@large, [dir="rtl"] .bui-grid__column--offset-5\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 5));
}
.bui-grid__column--offset-6,
.bui-grid__column--offset-half\@large {
margin-left: calc(100% / (12 / 6));
}
.rtl .bui-grid__column--offset-6,
[dir="rtl"] .bui-grid__column--offset-6,
.rtl .bui-grid__column--offset-half\@large,
[dir="rtl"] .bui-grid__column--offset-half\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 6));
}
.bui-grid__column--offset-7\@large {
margin-left: calc(100% / (12 / 7));
}
.rtl .bui-grid__column--offset-7\@large, [dir="rtl"] .bui-grid__column--offset-7\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 7));
}
.bui-grid__column--offset-8\@large {
margin-left: calc(100% / (12 / 8));
}
.rtl .bui-grid__column--offset-8\@large, [dir="rtl"] .bui-grid__column--offset-8\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 8));
}
.bui-grid__column--offset-9\@large {
margin-left: calc(100% / (12 / 9));
}
.rtl .bui-grid__column--offset-9\@large, [dir="rtl"] .bui-grid__column--offset-9\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 9));
}
.bui-grid__column--offset-10\@large {
margin-left: calc(100% / (12 / 10));
}
.rtl .bui-grid__column--offset-10\@large, [dir="rtl"] .bui-grid__column--offset-10\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 10));
}
.bui-grid__column--offset-11\@large {
margin-left: calc(100% / (12 / 11));
}
.rtl .bui-grid__column--offset-11\@large, [dir="rtl"] .bui-grid__column--offset-11\@large {
margin-left: 0;
margin-right: calc(100% / (12 / 11));
}
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
/* Layout & display
============================================= */
.u-show {
display: block !important;
}
.bui-u-full-width,
.u-full-width {
display: block !important;
width: 100% !important;
}
.u-hidden {
display: none !important;
}
.bui-u-inline,
.u-inline {
display: inline-block !important;
width: auto !important;
}
@media (max-width: 575px) {
.u-show\@small {
display: block !important;
}
.u-hidden\@small {
display: none !important;
}
.bui-u-inline\@small,
.u-inline\@small {
display: inline-block !important;
width: auto !important;
}
.bui-u-full-width\@small,
.u-full-width\@small {
display: block !important;
width: 100% !important;
}
}
@media (min-width: 576px) {
.u-show\@medium {
display: block !important;
}
.u-hidden\@medium {
display: none !important;
}
.bui-u-inline\@medium,
.u-inline\@medium {
display: inline-block !important;
width: auto !important;
}
.bui-u-full-width\@medium,
.u-full-width\@medium {
display: block !important;
width: 100% !important;
}
}
@media (min-width: 992px) {
.u-show\@large {
display: block !important;
}
.u-hidden\@large {
display: none !important;
}
.bui-u-inline\@large,
.u-inline\@large {
display: inline-block !important;
width: auto !important;
}
.bui-u-full-width\@large,
.u-full-width\@large {
display: block !important;
width: 100% !important;
}
}
@media (--bui_huge_viewport) {
.bui-u-show\@huge,
.u-show\@huge {
display: block !important;
}
.bui-u-hidden\@huge,
.u-hidden\@huge {
display: none !important;
}
.bui-u-inline\@huge,
.u-inline\@huge {
display: inline-block !important;
width: auto !important;
}
.bui-u-full-width\@huge,
.u-full-width\@huge {
display: block !important;
width: 100% !important;
}
}
.u-full-height {
height: 100%;
}
@media (max-width: 575px) {
.u-bleed\@small {
margin-left: calc(16px * -1) !important;
margin-right: calc(16px * -1) !important;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
}
/* Text alignment
============================================= */
.bui-u-text-left,
.u-text-left {
text-align: left !important;
}
.rtl .bui-u-text-left,
[dir="rtl"] .bui-u-text-left,
.rtl .u-text-left,
[dir="rtl"] .u-text-left {
text-align: right !important;
}
.bui-u-text-center,
.u-text-center {
text-align: center !important;
}
.bui-u-text-right,
.u-text-right {
text-align: right !important;
}
.rtl .bui-u-text-right,
[dir="rtl"] .bui-u-text-right,
.rtl .u-text-right,
[dir="rtl"] .u-text-right {
text-align: left !important;
}
@media (max-width: 575px) {
.bui-u-text-left\@small {
text-align: left !important;
}
.rtl .bui-u-text-left\@small, [dir="rtl"] .bui-u-text-left\@small {
text-align: right !important;
}
.bui-u-text-right\@small {
text-align: right !important;
}
.rtl .bui-u-text-right\@small, [dir="rtl"] .bui-u-text-right\@small {
text-align: left !important;
}
.bui-u-text-center\@small {
text-align: center !important;
}
}
@media (min-width: 576px) {
.bui-u-text-left\@medium {
text-align: left !important;
}
.rtl .bui-u-text-left\@medium, [dir="rtl"] .bui-u-text-left\@medium {
text-align: right !important;
}
.bui-u-text-right\@medium {
text-align: right !important;
}
.rtl .bui-u-text-right\@medium, [dir="rtl"] .bui-u-text-right\@medium {
text-align: left !important;
}
.bui-u-text-center\@medium {
text-align: center !important;
}
}
@media (min-width: 992px) {
.bui-u-text-left\@large {
text-align: left !important;
}
.rtl .bui-u-text-left\@large, [dir="rtl"] .bui-u-text-left\@large {
text-align: right !important;
}
.bui-u-text-right\@large {
text-align: right !important;
}
.rtl .bui-u-text-right\@large, [dir="rtl"] .bui-u-text-right\@large {
text-align: left !important;
}
.bui-u-text-center\@large {
text-align: center !important;
}
}
@media (--bui_huge_viewport) {
.bui-u-text-left\@huge {
text-align: left !important;
}
.rtl .bui-u-text-left\@huge, [dir="rtl"] .bui-u-text-left\@huge {
text-align: right !important;
}
.bui-u-text-right\@huge {
text-align: right !important;
}
.rtl .bui-u-text-right\@huge, [dir="rtl"] .bui-u-text-right\@huge {
text-align: left !important;
}
.bui-u-text-center\@huge {
text-align: center !important;
}
}
/* Accessibility
============================================= */
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0;
}
.u-sr-only-focusable:active,
.u-sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none;
}
/* Print
============================================= */
.u-visible-print-block,
.u-visible-print-inline-block,
.u-visible-print-inline {
display: none !important;
}
@media print {
.u-hidden-print {
display: none !important;
}
.u-visible-print-block {
display: block !important;
}
.u-visible-print-inline-block {
display: inline-block !important;
}
.u-visible-print-inline {
display: inline !important;
}
}
/* Deprecated
============================================= */
.bui-u-pull-start,
.u-pull-start {
float: left !important;
}
.rtl .bui-u-pull-start,
[dir="rtl"] .bui-u-pull-start,
.rtl .u-pull-start,
[dir="rtl"] .u-pull-start {
float: right !important;
}
.bui-u-pull-end,
.u-pull-end {
float: right !important;
}
.rtl .bui-u-pull-end,
[dir="rtl"] .bui-u-pull-end,
.rtl .u-pull-end,
[dir="rtl"] .u-pull-end {
float: left !important;
}
.bui-u-clearfix:before,
.bui-u-clearfix:after,
.u-clearfix:before,
.u-clearfix:after {
content: " ";
display: table;
line-height: 0;
}
.bui-u-clearfix:after,
.u-clearfix:after {
clear: both;
}
/* Spacing
============================================= */
.bui-u-margin-start--2 {
margin-left: 2px !important;
}
.rtl .bui-u-margin-start--2, [dir="rtl"] .bui-u-margin-start--2 {
margin-left: 0 !important;
margin-right: 2px !important;
}
.bui-u-margin-start--4 {
margin-left: 4px !important;
}
.rtl .bui-u-margin-start--4, [dir="rtl"] .bui-u-margin-start--4 {
margin-left: 0 !important;
margin-right: 4px !important;
}
.bui-u-margin-start--8 {
margin-left: 8px !important;
}
.rtl .bui-u-margin-start--8, [dir="rtl"] .bui-u-margin-start--8 {
margin-left: 0 !important;
margin-right: 8px !important;
}
.bui-u-margin-start--16 {
margin-left: 16px !important;
}
.rtl .bui-u-margin-start--16, [dir="rtl"] .bui-u-margin-start--16 {
margin-left: 0 !important;
margin-right: 16px !important;
}
.bui-u-margin-start--24 {
margin-left: 24px !important;
}
.rtl .bui-u-margin-start--24, [dir="rtl"] .bui-u-margin-start--24 {
margin-left: 0 !important;
margin-right: 24px !important;
}
.bui-u-margin-start--32 {
margin-left: 32px !important;
}
.rtl .bui-u-margin-start--32, [dir="rtl"] .bui-u-margin-start--32 {
margin-left: 0 !important;
margin-right: 32px !important;
}
.bui-u-margin-end--2 {
margin-right: 2px !important;
}
.rtl .bui-u-margin-end--2, [dir="rtl"] .bui-u-margin-end--2 {
margin-right: 0 !important;
margin-left: 2px !important;
}
.bui-u-margin-end--4 {
margin-right: 4px !important;
}
.rtl .bui-u-margin-end--4, [dir="rtl"] .bui-u-margin-end--4 {
margin-right: 0 !important;
margin-left: 4px !important;
}
.bui-u-margin-end--8 {
margin-right: 8px !important;
}
.rtl .bui-u-margin-end--8, [dir="rtl"] .bui-u-margin-end--8 {
margin-right: 0 !important;
margin-left: 8px !important;
}
.bui-u-margin-end--16 {
margin-right: 16px !important;
}
.rtl .bui-u-margin-end--16, [dir="rtl"] .bui-u-margin-end--16 {
margin-right: 0 !important;
margin-left: 16px !important;
}
.bui-u-margin-end--24 {
margin-right: 24px !important;
}
.rtl .bui-u-margin-end--24, [dir="rtl"] .bui-u-margin-end--24 {
margin-right: 0 !important;
margin-left: 24px !important;
}
.bui-u-margin-end--32 {
margin-right: 32px !important;
}
.rtl .bui-u-margin-end--32, [dir="rtl"] .bui-u-margin-end--32 {
margin-right: 0 !important;
margin-left: 32px !important;
}
.bui-u-margin-top--2 {
margin-top: 2px !important;
}
.bui-u-margin-top--4 {
margin-top: 4px !important;
}
.bui-u-margin-top--8 {
margin-top: 8px !important;
}
.bui-u-margin-top--16 {
margin-top: 16px !important;
}
.bui-u-margin-top--24 {
margin-top: 24px !important;
}
.bui-u-margin-top--32 {
margin-top: 32px !important;
}
.bui-u-margin-bottom--2 {
margin-bottom: 2px !important;
}
.bui-u-margin-bottom--4 {
margin-bottom: 4px !important;
}
.bui-u-margin-bottom--8 {
margin-bottom: 8px !important;
}
.bui-u-margin-bottom--16 {
margin-bottom: 16px !important;
}
.bui-u-margin-bottom--24 {
margin-bottom: 24px !important;
}
.bui-u-margin-bottom--32 {
margin-bottom: 32px !important;
}
/* Spacing: padding */
.bui-u-padding-start--2 {
padding-left: 2px !important;
}
.rtl .bui-u-padding-start--2, [dir="rtl"] .bui-u-padding-start--2 {
padding-left: 0 !important;
padding-right: 2px !important;
}
.bui-u-padding-start--4 {
padding-left: 4px !important;
}
.rtl .bui-u-padding-start--4, [dir="rtl"] .bui-u-padding-start--4 {
padding-left: 0 !important;
padding-right: 4px !important;
}
.bui-u-padding-start--8 {
padding-left: 8px !important;
}
.rtl .bui-u-padding-start--8, [dir="rtl"] .bui-u-padding-start--8 {
padding-left: 0 !important;
padding-right: 8px !important;
}
.bui-u-padding-start--16 {
padding-left: 16px !important;
}
.rtl .bui-u-padding-start--16, [dir="rtl"] .bui-u-padding-start--16 {
padding-left: 0 !important;
padding-right: 16px !important;
}
.bui-u-padding-start--24 {
padding-left: 24px !important;
}
.rtl .bui-u-padding-start--24, [dir="rtl"] .bui-u-padding-start--24 {
padding-left: 0 !important;
padding-right: 24px !important;
}
.bui-u-padding-start--32 {
padding-left: 32px !important;
}
.rtl .bui-u-padding-start--32, [dir="rtl"] .bui-u-padding-start--32 {
padding-left: 0 !important;
padding-right: 32px !important;
}
.bui-u-padding-end--2 {
padding-right: 2px !important;
}
.rtl .bui-u-padding-end--2, [dir="rtl"] .bui-u-padding-end--2 {
padding-right: 0 !important;
padding-left: 2px !important;
}
.bui-u-padding-end--4 {
padding-right: 4px !important;
}
.rtl .bui-u-padding-end--4, [dir="rtl"] .bui-u-padding-end--4 {
padding-right: 0 !important;
padding-left: 4px !important;
}
.bui-u-padding-end--8 {
padding-right: 8px !important;
}
.rtl .bui-u-padding-end--8, [dir="rtl"] .bui-u-padding-end--8 {
padding-right: 0 !important;
padding-left: 8px !important;
}
.bui-u-padding-end--16 {
padding-right: 16px !important;
}
.rtl .bui-u-padding-end--16, [dir="rtl"] .bui-u-padding-end--16 {
padding-right: 0 !important;
padding-left: 16px !important;
}
.bui-u-padding-end--24 {
padding-right: 24px !important;
}
.rtl .bui-u-padding-end--24, [dir="rtl"] .bui-u-padding-end--24 {
padding-right: 0 !important;
padding-left: 24px !important;
}
.bui-u-padding-end--32 {
padding-right: 32px !important;
}
.rtl .bui-u-padding-end--32, [dir="rtl"] .bui-u-padding-end--32 {
padding-right: 0 !important;
padding-left: 32px !important;
}
.bui-u-padding-top--2 {
padding-top: 2px !important;
}
.bui-u-padding-top--4 {
padding-top: 4px !important;
}
.bui-u-padding-top--8 {
padding-top: 8px !important;
}
.bui-u-padding-top--16 {
padding-top: 16px !important;
}
.bui-u-padding-top--24 {
padding-top: 24px !important;
}
.bui-u-padding-top--32 {
padding-top: 32px !important;
}
.bui-u-padding-bottom--2 {
padding-bottom: 2px !important;
}
.bui-u-padding-bottom--4 {
padding-bottom: 4px !important;
}
.bui-u-padding-bottom--8 {
padding-bottom: 8px !important;
}
.bui-u-padding-bottom--16 {
padding-bottom: 16px !important;
}
.bui-u-padding-bottom--24 {
padding-bottom: 24px !important;
}
.bui-u-padding-bottom--32 {
padding-bottom: 32px !important;
}
/* My World To You (mwty, myworldtoyou) */
.mwty-index__content {
padding: 32px 0;
}
.mwty-index__background {
background: url(https://q.bstatic.com/static/img/join/my_world_to_you_background.jpg) no-repeat center bottom #00224f;
background-size: cover;
}
@media screen and (min-width: 900px) {
.mwty-index__background {
background-size: auto 130%;
}
}
/* Hairy Bikers (hairybikers) */
.hairy-bikers-index__background {
background: #00224f;
}
.hairy-bikers-index__content {
padding: 32px 0;
}
@media screen and (min-width: 993px) {
.hairy-bikers-index__background {
background: url(https://q.bstatic.com/static/img/join/hairy_bikers.jpg) no-repeat #00224f;
background-size: auto 250px;
background-position: calc(50% - 315px) bottom;
padding-bottom: 130px;
}
.hairy-bikers-index__content {
padding: 32px 0;
}
}
@media screen and (min-width: 1200px) {
.hairy-bikers-index__background {
background-position: calc(50% - 400px) bottom;
}
}
/* Edinburgh Rugby (edinburghrubgy) */
.edinburgh-rugby-index__content {
padding: 32px 0;
}
.edinburgh-rugby-index__background {
background: #00224f;
}
@media screen and (min-width: 993px) {
.edinburgh-rugby-index__background {
background: url(https://q.bstatic.com/static/img/join/edinburgh_rugby/background.jpg) no-repeat #00224f;
background-size: auto 100%;
background-position: calc(50% + 75px) center;
padding-bottom: 32px;
}
.edinburgh-rugby-index__content {
padding: 32px 0;
}
}
.pages-footer {
background: #00224f;
clear: both;
margin: 24px 0 0;
max-width: 100%;
text-align: center;
}
.pages-footer--no-margin {
margin: 0;
}
.pages-footer__cta {
border-bottom: 1px solid #bad4f7;
padding: 24px;
text-align: center;
}
.pages-footer__links {
list-style: none;
margin: 0;
padding: 24px;
}
.pages-footer__links li {
display: inline-block;
}
.pages-footer a {
color: #fff;
display: inline-block;
text-decoration: underline;
}
.pages-footer a:hover {
text-decoration: none;
}
.pages-footer__copyright {
color: #fff;
padding: 0 16px 32px;
}
.pages-footer--desktop {
padding: 32px 0;
}
.pages-footer__subheader {
font-weight: 700;
}
.pages-footer__content {
align-items: flex-start;
display: flex;
justify-content: space-between;
}
.pages-footer__column {
width: calc(33.333% - 24px);
}
.pages-footer--desktop p {
color: #fff;
text-align: left;
}
.pages-footer--desktop ul {
padding: 16px 0;
}
.pages-footer--desktop li {
display: block;
margin: 0 0 8px;
text-align: left;
}
.pages-footer--desktop a {
padding: 0;
}
.pages-footer__bottom {
border-top: 1px solid #bad4f7;
margin-top: 16px;
padding-top: 32px;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-flag__flag {
width: 16px;
vertical-align: middle;
}
.bui-flag__text {
display: inline-block;
vertical-align: middle;
margin-left: 2px;
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.rtl .bui-flag__text, [dir="rtl"] .bui-flag__text {
margin-left: 0;
margin-right: 2px;
}
.bui-flag--large .bui-flag__flag {
width: 24px;
}
.bui-flag--large .bui-flag__text {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.lang-selector {
display: inline-block;
height: 50px;
position: relative;
}
.lang-selector__select {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.lang-selector__trigger {
display: flex;
background: transparent;
border: 0;
padding: 16px;
}
.lang-selector__languages {
background: #fff;
border-radius: 2px;
box-shadow: 0 0 8px color(#000 a(40%));
margin-top: 8px;
max-width: 900px;
position: absolute;
top: 100%;
width: calc(100vw - 32px);
z-index: 9999;
}
.lang-selector__triangle {
background: #fff;
display: block;
height: 16px;
margin-left: calc(-0.5 * 16px);
left: 50%;
position: absolute;
top: calc(-0.5 * 16px);
transform: rotate(45deg);
transform-origin: center center;
width: 16px;
}
.lang-selector--compact {
max-width: 250px;
}
.lang-selector__header {
color: #000;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin: 0;
padding: 24px 24px 0;
}
.lang-selector__list {
display: flex;
flex-direction: row;
padding: 24px;
}
.lang-selector__list--underline {
border-bottom: 1px solid #e6e6e6;
}
.lang-selector__list-column {
width: 33.33333%;
}
.lang-selector__list--wide .lang-selector__list-column {
width: 25%;
}
.lang-selector__language {
background: transparent;
border: 0;
display: block;
line-height: 1;
padding: 8px 16px 8px 24px;
text-align: left;
width: 100%;
}
.rtl .lang-selector__language {
padding: 8px 24px 8px 16px;
text-align: right;
}
.lang-selector__language--active {
background: url(https://q.bstatic.com/static/img/join/join-icon-check-black.svg) no-repeat left center transparent;
background-size: 16px auto;
}
.rtl .lang-selector__language--active {
background-position: right center;
}
.rtl .lang-selector__language-name {
direction: ltr; /* fixes broken brackets in rtl languages */
}
.lang-selector__language:hover,
.lang-selector__language--active:hover {
background: url(https://q.bstatic.com/static/img/join/join-icon-check-gray.svg) no-repeat left center transparent;
background-size: 16px auto;
}
.rtl .lang-selector__language:hover,
.rtl .lang-selector__language--active:hover {
background-position: right center;
}
.join-section-bordered {
border-top: 1px solid #dedede;
}
h2.bui_font_display_three.promote_pulse_title {
margin: 0 0 2px;
}
.promote_pulse_subtitle {
margin: 0px 0 24px;
color: #6b6b6b;
font-size: 16px;
}
.promote_pulse_body {
margin-bottom: 24px;
}
.store-badges {
display: flex;
}
.install-item {
padding-right: 4px;
}
.install-item img {
max-width: 100%;
}
#lp-survey .modal-dialog {
width: auto;
min-width: 600px;
max-width: 900px;
height: 100%;
}
#lp-survey .modal-header {
padding: 0;
}
#lp-survey .modal-header .close {
margin-top: 2px;
margin-right: 7px;
}
#lp-survey .modal-content {
height: 100%;
overflow: hidden;
}
#lp-survey .modal-survey {
height: calc(100% - 21px);
}
@media (max-width: 768px) {
#lp-survey .modal-dialog {
min-width: 300px;
}
#lp-survey .modal-survey {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-list {
padding-left: 16px;
margin: 0 0 16px 0;
}
.rtl .bui-list, [dir="rtl"] .bui-list {
padding-left: 0;
padding-right: 16px;
}
.bui-list:last-child {
margin-bottom: 0;
}
.bui-list__item {
margin-bottom: 16px;
}
.bui-list__item:last-child {
margin-bottom: 0;
}
.bui-list--text {
list-style-type: none;
padding-left: 0;
}
.rtl .bui-list--text, [dir="rtl"] .bui-list--text {
padding-left: 0;
padding-right: 0;
}
.bui-list--unordered {
list-style-type: disc;
}
.bui-list--ordered {
list-style-type: decimal;
}
.bui-list--divided > .bui-list__item {
margin: 0;
padding: 16px 0;
border-bottom: 1px solid #e7e7e7;
}
.bui-list--divided > .bui-list__item:first-child {
padding-top: 0;
}
.bui-list--divided > .bui-list__item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.bui-list--icon > .bui-list__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.bui-list__icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 16px;
}
.rtl .bui-list__icon, [dir="rtl"] .bui-list__icon {
margin-right: 0;
margin-left: 16px;
}
.bui-list__body {
margin: 0;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bui-list__description {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.bui-list__description-title,
.bui-list__description-subtitle {
display: block;
}
.bui-list__description-title {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-list__description-subtitle {
color: #6b6b6b;
}
.bui-list__item-action {
margin-left: 16px;
}
.rtl .bui-list__item-action, [dir="rtl"] .bui-list__item-action {
margin-left: 0;
margin-right: 16px;
}
@media (max-width: 575px) {
.bui-list__icon {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.bui-list__body {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.bui-list__description {
width: 100%;
}
.bui-list__item-action {
margin-left: 0;
margin-top: 8px;
}
.rtl .bui-list__item-action, [dir="rtl"] .bui-list__item-action {
margin-left: 0;
margin-right: 0;
}
}
/* EXP: pai_joinapp_index_segmentation_v1 */
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-tab__nav {
display: block;
list-style: none;
margin: 0;
padding: 0 0 1px;
position: relative;
font-size: 0;
}
/* Fake the border so overflow: auto on mobile works fine with selected item borders */
.bui-tab__nav:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #e7e7e7;
height: 1px;
}
.bui-tab__item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
display: inline-block;
vertical-align: bottom;
}
.bui-tab__link {
font-size: 14px;
font-weight: 500;
line-height: 20px;
display: block;
border: 0;
background: none;
color: #262626;
padding: 16px;
text-decoration: none;
max-width: none;
position: relative;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: inherit;
}
.bui-tab__item:not(.bui-tab__item--more) .bui-tab__link:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: calc(1px * -1);
height: 2px;
background: #0071c2;
display: none;
}
.bui-tab__link:hover {
background-color: rgba(0, 0, 0, 0.06);
text-decoration: none;
cursor: pointer;
}
.bui-tab__item:not(.bui-tab__item--more) .bui-tab__link--selected:after {
display: block;
}
.bui-tab__link:focus {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
}
.bui-tab__link:active {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.bui-tab__link:link {
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-decoration: none;
}
.bui-tab__link--selected {
color: #0071c2;
}
.bui-tab__link--selected:hover {
background-color: transparent;
cursor: default;
}
.bui-tab__link--disabled {
background-color: transparent;
color: #949494;
outline: none;
cursor: not-allowed;
}
.bui-tab__link--disabled:hover {
background-color: transparent;
color: #949494;
outline: none;
cursor: not-allowed;
}
.bui-tab__link--disabled:focus {
background-color: transparent;
color: #949494;
outline: none;
cursor: not-allowed;
}
.bui-tab__link--disabled:active {
background-color: transparent;
color: #949494;
outline: none;
cursor: not-allowed;
}
.bui-tab__text {
display: inline-block;
vertical-align: middle;
}
.bui-tab__title {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.bui-tab__icon {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
.rtl .bui-tab__icon, [dir="rtl"] .bui-tab__icon {
margin-right: 0;
margin-left: 8px;
}
.bui-tab__title {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
.rtl .bui-tab__title, [dir="rtl"] .bui-tab__title {
margin-right: 0;
margin-left: 8px;
}
.bui-tab__text-slot {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
}
.rtl .bui-tab__text-slot, [dir="rtl"] .bui-tab__text-slot {
margin-left: 0;
margin-right: 8px;
}
.bui-tab__item--hidden {
display: none;
}
.bui-tab__item--more .bui-tab__link {
margin: 0;
}
.bui-tab__item--more .bui-tab__link:after {
content: url("data:image/svg+xml;charset=utf-8,");
width: 16px;
height: 16px;
margin-left: 4px;
display: inline-block;
vertical-align: middle;
}
.rtl .bui-tab__item--more .bui-tab__link:after, [dir="rtl"] .bui-tab__item--more .bui-tab__link:after {
margin-left: 0;
margin-right: 4px;
}
.bui-tab__more-items {
position: absolute;
}
.bui-tab__item--more {
display: none;
position: relative;
margin: 0;
}
.bui-tab__item--more-active {
display: inline-block;
}
.bui-tab__dropdown-trigger {
position: absolute;
width: 0;
height: 0;
opacity: 0;
border: 0;
}
.bui-tab__dropdown-trigger:focus + .bui-tab__link {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
}
.bui-tab__content {
display: none;
}
.bui-tab__content--selected {
display: block;
}
.bui-tab__dropdown {
min-width: 160px;
position: absolute;
z-index: 200;
top: 100%;
right: 0;
display: none;
}
.rtl .bui-tab__dropdown, [dir="rtl"] .bui-tab__dropdown {
right: auto;
left: 0;
}
.bui-tab__item--more-dropdown-active .bui-tab__dropdown {
display: block;
}
.bui-tab--vertical .bui-tab__link {
text-align: center;
}
.bui-tab--vertical .bui-tab__title {
display: block;
margin-left: 0;
margin-right: 0;
}
.bui-tab--vertical .bui-tab__icon {
display: block;
margin: 0 auto 4px;
}
.bui-tab--vertical .bui-tab__item--more .bui-tab__link:after {
content: none;
}
.bui-tab--vertical .bui-tab__item--more .bui-tab__link:before {
content: url("data:image/svg+xml;charset=utf-8,");
width: 16px;
height: 16px;
display: block;
margin: 0 auto 4px;
}
.bui-tab--borderless .bui-tab__nav:before {
content: none;
}
.bui-tab--light .bui-tab__link {
color: #fff;
}
.bui-tab--light .bui-tab__link--selected {
color: #fff;
}
.bui-tab--light .bui-tab__item:not(.bui-tab__item--more) .bui-tab__link:after {
background-color: #fff;
}
.bui-tab--light .bui-tab__link:hover {
background-color: rgba(255, 255, 255, 0.06);
}
.bui-tab--equal .bui-tab__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 575px) {
.bui-tab:not(.bui-tab--equal) .bui-tab__nav {
overflow-x: auto;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
white-space: nowrap;
}
.bui-tab:not(.bui-tab--equal).bui-tab__item--more {
display: none;
}
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-timeline {
margin: 0;
padding: 0;
list-style: none;
}
.bui-timeline__item {
position: relative;
margin-top: 24px;
padding-left: 24px;
}
.rtl .bui-timeline__item, [dir="rtl"] .bui-timeline__item {
padding-left: 0;
padding-right: 24px;
}
.bui-timeline__item:before {
content: '';
position: absolute;
background: #949494;
/* Height of dot + double side offsets from dot */
top: calc(12px + 8px);
bottom: calc(24px * -1);
left: 4px;
width: 1px;
margin-left: calc(1px / -1);
}
.rtl .bui-timeline__item:before, [dir="rtl"] .bui-timeline__item:before {
left: auto;
right: 4px;
margin-left: 0;
margin-right: calc(1px / -1);
}
.bui-timeline__item:after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #949494;
position: absolute;
left: 0;
top: calc(4px + 2px);
}
.rtl .bui-timeline__item:after, [dir="rtl"] .bui-timeline__item:after {
left: auto;
right: 0;
}
.bui-timeline__item:last-child:before {
content: none;
}
.bui-timeline__title {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.bui-timeline__content {
margin-top: 8px;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-accordion {
list-style: none;
margin: 0;
padding: 0;
border-radius: 2px;
border: 1px solid #e7e7e7;
color: #262626;
background: #fff;
}
.bui-accordion__row + .bui-accordion__row {
border-top: 1px solid #e7e7e7;
}
.bui-accordion__row-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
padding: 16px;
text-align: left;
color: inherit;
}
.rtl .bui-accordion__row-inner, [dir="rtl"] .bui-accordion__row-inner {
text-align: right;
}
.bui-accordion__row-inner:hover {
background-color: rgba(0, 0, 0, 0.06);
}
.bui-accordion__row.bui-is-active .bui-accordion__row-inner:hover {
background-color: transparent;
}
.bui-accordion__row-inner:active,
.bui-accordion__row-inner:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
color: inherit;
}
.bui-accordion__row-inner:focus .bui-accordion__icon-container {
outline: none;
-webkit-box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
box-shadow: 0 0 0 3px rgba(0, 113, 194, 0.24);
}
.bui-accordion__row-header {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.bui-accordion__title,
.bui-accordion__subtitle {
margin: 0;
}
.bui-accordion__title {
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.bui-accordion__subtitle {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.bui-accordion__icon-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
fill: #6b6b6b;
margin-left: 16px;
}
.rtl .bui-accordion__icon-container, [dir="rtl"] .bui-accordion__icon-container {
margin-left: 0;
margin-right: 16px;
}
.bui-accordion__icon {
height: 24px;
width: 24px;
}
.bui-accordion__content {
display: none;
padding: 0 16px 16px;
}
.bui-accordion__row.bui-is-active .bui-accordion__content {
display: block;
}
.bui-accordion__row.bui-is-active .bui-accordion__icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rtl .bui-accordion__row.bui-is-active .bui-accordion__icon, [dir="rtl"] .bui-accordion__row.bui-is-active .bui-accordion__icon {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-pagination-indicator {
line-height: 0;
}
.bui-pagination-indicator__container {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
-webkit-transition: -webkit-transform 150ms cubic-bezier(0, 0, 0.2, 1);
transition: -webkit-transform 150ms cubic-bezier(0, 0, 0.2, 1);
transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
transition: transform 150ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.2, 1);
}
.bui-pagination-indicator__container:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
left: calc(16px * -1);
background: #949494;
top: 50%;
border-radius: 50%;
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
-webkit-transition: 150ms cubic-bezier(0, 0, 0.2, 1);
transition: 150ms cubic-bezier(0, 0, 0.2, 1);
-webkit-transition-property: opacity, color, -webkit-transform;
transition-property: opacity, color, -webkit-transform;
transition-property: transform, opacity, color;
transition-property: transform, opacity, color, -webkit-transform;
}
.rtl .bui-pagination-indicator__container:after, [dir="rtl"] .bui-pagination-indicator__container:after {
left: auto;
right: calc(16px * -1);
}
.bui-pagination-indicator__container:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
left: calc(16px * -1);
background: #949494;
top: 50%;
border-radius: 50%;
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
-webkit-transition: 150ms cubic-bezier(0, 0, 0.2, 1);
transition: 150ms cubic-bezier(0, 0, 0.2, 1);
-webkit-transition-property: opacity, color, -webkit-transform;
transition-property: opacity, color, -webkit-transform;
transition-property: transform, opacity, color;
transition-property: transform, opacity, color, -webkit-transform;
}
.rtl .bui-pagination-indicator__container:before, [dir="rtl"] .bui-pagination-indicator__container:before {
left: auto;
right: calc(16px * -1);
}
.bui-pagination-indicator__item {
width: 8px;
height: 8px;
border-radius: 50%;
background: #949494;
margin-left: 8px;
-webkit-transition: 150ms cubic-bezier(0, 0, 0.2, 1);
transition: 150ms cubic-bezier(0, 0, 0.2, 1);
-webkit-transition-property: opacity, color, -webkit-transform;
transition-property: opacity, color, -webkit-transform;
transition-property: transform, opacity, color;
transition-property: transform, opacity, color, -webkit-transform;
}
.rtl .bui-pagination-indicator__item, [dir="rtl"] .bui-pagination-indicator__item {
margin-left: 0;
margin-right: 8px;
}
.bui-pagination-indicator__item:first-child {
margin-left: 0;
}
.rtl .bui-pagination-indicator__item:first-child, [dir="rtl"] .bui-pagination-indicator__item:first-child {
margin-left: 0;
margin-right: 0;
}
.bui-pagination-indicator__item--active {
background: #0071c2;
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
.bui-pagination-indicator__item--size-small {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.bui-pagination-indicator__item--size-smaller {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.bui-pagination-indicator__item--hidden {
-webkit-transform: scale(0);
transform: scale(0);
}
/* Light */
.bui-pagination-indicator--light .bui-pagination-indicator__item {
background: #fff;
opacity: 0.5;
}
.bui-pagination-indicator--light .bui-pagination-indicator__item--active {
opacity: 1;
}
/* Ghost start/end */
.bui-pagination-indicator--ghost-start .bui-pagination-indicator__container {
-webkit-transform: translateX(16px);
transform: translateX(16px);
}
.rtl .bui-pagination-indicator--ghost-start .bui-pagination-indicator__container, [dir="rtl"] .bui-pagination-indicator--ghost-start .bui-pagination-indicator__container {
-webkit-transform: translateX(-16px);
transform: translateX(-16px);
}
.bui-pagination-indicator--ghost-end .bui-pagination-indicator__container {
-webkit-transform: translateX(calc(16px * -1));
transform: translateX(calc(16px * -1));
}
.rtl .bui-pagination-indicator--ghost-end .bui-pagination-indicator__container, [dir="rtl"] .bui-pagination-indicator--ghost-end .bui-pagination-indicator__container {
-webkit-transform: translateX(calc(-1*(16px * -1)));
transform: translateX(calc(-1*(16px * -1)));
}
.bui-pagination-indicator--ghost-start .bui-pagination-indicator__container:before,
.bui-pagination-indicator--ghost-end .bui-pagination-indicator__container:after {
-webkit-transform: translateY(-50%) scale(0.5);
transform: translateY(-50%) scale(0.5);
}
.bui-pagination-indicator--ghost-start .bui-pagination-indicator__container:before {
right: auto;
left: calc(16px * -1);
}
.rtl .bui-pagination-indicator--ghost-start .bui-pagination-indicator__container:before, [dir="rtl"] .bui-pagination-indicator--ghost-start .bui-pagination-indicator__container:before {
left: auto;
right: calc(16px * -1);
}
.bui-pagination-indicator--ghost-end .bui-pagination-indicator__container:after {
left: auto;
right: calc(16px * -1);
}
.rtl .bui-pagination-indicator--ghost-end .bui-pagination-indicator__container:after, [dir="rtl"] .bui-pagination-indicator--ghost-end .bui-pagination-indicator__container:after {
right: auto;
left: calc(16px * -1);
}
.bui-pagination-indicator--ghost-start.bui-pagination-indicator--light:before,
.bui-pagination-indicator--ghost-end.bui-pagination-indicator--light:after {
opacity: 0.5;
}
/* Animated */
.bui-pagination-indicator--not-animated .bui-pagination-indicator__container,
.bui-pagination-indicator--not-animated .bui-pagination-indicator__item,
.bui-pagination-indicator--not-animated .bui-pagination-indicator__container:before,
.bui-pagination-indicator--not-animated .bui-pagination-indicator__container:after {
-webkit-transition: none;
transition: none;
}
/* media size definitions */
/* fonts definitions */
:root,
.bui-theme-legacy-light {
/* colors definitions */
/* shadows definitions */
/* units definitions */
/* fonts values variable definitions */
}
:root {
/* Grid */
/* Animation */
/* z-index */
}
.bui-alert {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 1px solid;
padding: 16px;
border-radius: 2px;
}
.bui-alert__icon {
width: 24px;
height: 24px;
margin-right: 16px;
}
.rtl .bui-alert__icon, [dir="rtl"] .bui-alert__icon {
margin-right: 0;
margin-left: 16px;
}
.bui-alert__description {
font-size: 14px;
font-weight: 400;
line-height: 20px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.bui-alert__title {
font-size: 16px;
font-weight: 700;
line-height: 24px;
display: block;
margin-bottom: 8px;
}
.bui-alert__title:last-child {
margin-bottom: 0;
}
.bui-alert__text {
margin: 0 0 16px;
}
.bui-alert__text:first-child {
margin-top: 2px;
}
.bui-alert__text:last-child {
margin-bottom: 0;
}
/* Styles: Info */
.bui-alert--info {
background-color: #fff0e0;
border-color: #ff8000;
}
.bui-alert--info .bui-alert__icon {
fill: #923e01;
color: #923e01;
}
/* Styles: Error */
.bui-alert--error {
background-color: #fff0f0;
border-color: #c00;
}
.bui-alert--error .bui-alert__icon {
fill: #c00;
color: #c00;
}
/* Styles: Success */
.bui-alert--success {
background-color: #e7fde9;
border-color: #008009;
}
.bui-alert--success .bui-alert__icon {
fill: #008009;
color: #008009;
}
/* Styles: Inline */
.bui-alert--inline {
padding: 0;
border: none;
background: none;
}
.bui-alert--inline .bui-alert__description {
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.bui-alert--inline .bui-alert__icon {
margin-right: 8px;
}
.rtl .bui-alert--inline .bui-alert__icon, [dir="rtl"] .bui-alert--inline .bui-alert__icon {
margin-right: 0;
margin-left: 8px;
}
.bui-alert--inline.bui-alert--info {
color: #923e01;
}
.bui-alert--inline.bui-alert--error {
color: #c00;
}
.bui-alert--inline.bui-alert--success {
color: #008009;
}
/* Common */
.index-segmentation-spacer--huge {
margin-bottom: 48px !important;
}
.index-segmentation-no-border {
border: none;
}
.index-segmentation-no-padding {
padding: 0;
}
.index-segmentation-no-left-right-border {
border-left: 0;
border-right: 0;
}
.index-segmentation-header {
}
.index-segmentation-header-content {
padding: 0 16px 0 24px;
}
.rtl .index-segmentation-header-content {
padding: 0 24px 0 16px;
}
@media screen and (min-width: 768px) {
.index-segmentation-header-content {
padding: 0;
}
.rtl .index-segmentation-header-content {
padding: 0;
}
}
.index-segmentation-hero {
}
@media screen and (max-width: 414px) {
.index-segmentation-hero-layout {
padding: 0 32px;
}
}
@-webkit-keyframes index-segmentation-loading-indicator-rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
.index-segmentation-loading-indicator {
display: none;
position: absolute;
right: 16px;
width: 24px;
height: 24px;
top: 50%;
transform: translateY(-50%);
}
.rtl .index-segmentation-loading-indicator {
right: auto;
left: 16px;
}
.index-segmentation-loading-indicator svg {
animation: index-segmentation-loading-indicator-rotation 2s infinite linear;
}
.index-segmentation-loading-indicator-play {
display: block;
}
.index-segmentation-loading-indicator-container {
position: relative;
}
.index-segmentation-title {
margin-bottom: 0;
font-size: 32px;
line-height: 40px;
font-weight: 700;
color: #333;
}
.index-segmentation-subtitle {
font-size: 20px;
line-height: 28px;
margin-top: 16px;
margin-bottom: 0;
color: #333;
font-weight: normal;
}
@media screen and (max-width: 414px) {
.index-segmentation-title {
font-size: 32px;
line-height: 40px;
}
.index-segmentation-subtitle {
font-size: 20px;
line-height: 28px;
}
}
/* Default list - vertical */
.index-segmentation-list {
font-size: 24px;
list-style: none;
margin: 0;
padding: 0;
width: 90%;
}
@media screen and (max-width: 768px) {
.index-segmentation-list {
width: 100%;
}
}
/* Column based list - horizontal */
.index-segmentation-list--columns-2,
.index-segmentation-list--columns-3 {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
}
.index-segmentation-list--columns-2 .index-segmentation-list-item {
flex-basis: 45%;
width: 45%;
max-width: 45%;
margin-bottom: 0;
}
.index-segmentation-list--columns-3 .index-segmentation-list-item {
flex-basis: 27%;
width: 27%;
max-width: 27%;
margin-bottom: 0;
}
.index-segmentation-list--columns-3 .index-segmentation-list-item:last-child,
.index-segmentation-list--columns-2 .index-segmentation-list-item:last-child {
margin-right: 0;
}
@media screen and (max-width: 768px) {
.index-segmentation-list--columns-2 .index-segmentation-list-item {
flex-basis: 100%;
width: 100%;
max-width: 100%;
margin-right: 0;
margin-bottom: 32px;
}
.index-segmentation-list--columns-3 .index-segmentation-list-item {
flex-basis: 100%;
width: 100%;
max-width: 100%;
margin-right: 0;
margin-bottom: 32px;
}
}
.index-segmentation-list-cta {
padding: 12px 24px;
font-size: 16px;
line-height: 24px;
}
/* List item */
.index-segmentation-list-item {
margin-bottom: 24px;
margin-top: 0;
padding-left: 0;
position: relative;
display: flex;
flex-flow: column nowrap;
}
.index-segmentation-list-item--row {
flex-flow: row wrap;
}
.index-segmentation-list-item:last-child {
margin-bottom: 0;
}
.index-segmentation-list-item__image {
height: 100px;
align-items: flex-end;
display: flex;
padding-bottom: 24px;
}
.index-segmentation-list-item__title {
font-size: 20px;
line-height: 28px;
font-weight: bold;
color: #000;
}
.index-segmentation-list-item__title--huge {
font-size: 48px;
line-height: 40px;
}
.index-segmentation-list-item__body {
font-size: 16px;
line-height: 24px;
font-weight: normal;
padding-top: 4px;
color: #333;
}
.index-segmentation-list-item__icon {
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: 4px;
display: none;
}
.index-segmentation-list-item__bottom {
margin-top: auto;
}
.is_right_to_left .index-segmentation-list-item__icon {
left: auto;
right: 0;
}
.index-segmentation-list--icons__visible .index-segmentation-list-item {
padding-left: 24px;
}
.is_right_to_left .index-segmentation-list--icons__visible .index-segmentation-list-item {
padding-left: 0;
padding-right: 24px;
}
.index-segmentation-list--icons__visible .index-segmentation-list-item__body {
padding-left: 24px;
}
.is_right_to_left .index-segmentation-list--icons__visible .index-segmentation-list-item__body {
padding-left: 0;
padding-right: 24px;
}
.index-segmentation-list--icons__visible .index-segmentation-list-item__icon {
display: block;
}
@media screen and (max-width: 768px) {
.index-segmentation-list-item__image {
height: auto;
padding-bottom: 8px;
}
.index-segmentation .bui-grid__column-full {
padding: 0 24px;
}
.index-segmentation-list--icons .index-segmentation-list-item {
padding-left: 32px;
}
.is_right_to_left .index-segmentation-list--icons .index-segmentation-list-item {
padding-left: 0;
padding-right: 32px;
}
.index-segmentation-list--icons__visible .index-segmentation-list-item__body {
padding-left: 0;
}
.is_right_to_left .index-segmentation-list--icons__visible .index-segmentation-list-item__body {
padding-left: 0;
padding-right: 0;
}
.index-segmentation-list-item__icon {
width: 16px;
height: 16px;
display: block;
top: 8px;
}
}
@media screen and (max-width: 414px) {
.index-segmentation-list-item__title {
font-size: 20px;
line-height: 28px;
}
.index-segmentation-list-item__title--huge {
font-size: 24px;
line-height: 32px;
}
.index-segmentation-list-item__body {
font-size: 16px;
line-height: 28px;
}
}
.index-segmentation-section {
width: 100%;
position: relative;
float: left;
padding: calc(2 * 32px) 0;
clear: both;
}
.index-segmentation-section--collapsible {
padding: 0;
}
.index-segmentation-section__header {
font-size: 24px;
line-height: 32px;
padding-right: 50px;
position: relative;
}
.index-segmentation-section__header:after {
background: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 9.45a.74.74 0 0 1-.22.53l-5 5a1.08 1.08 0 0 1-.78.32 1.1 1.1 0 0 1-.78-.32l-5-5a.75.75 0 0 1 0-1.06.74.74 0 0 1 1.06 0L12 13.64l4.72-4.72a.74.74 0 0 1 1.06 0 .73.73 0 0 1 .22.53zm-5.72 4.47zm-.57 0z' fill='%23333333' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E")
no-repeat center center transparent;
content: "";
display: block;
height: 24px;
transform: rotate(180deg);
transition: all 0.2s linear;
width: 24px;
}
.index-segmentation-section__header.collapsed:after {
transform: rotate(0deg);
}
.is_right_to_left .index-segmentation-section__header:after {
left: 0;
right: auto;
}
.index-segmentation-section--collapsible .index-segmentation-section__header {
padding: 64px 0 0 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.index-segmentation-section--collapsible
.index-segmentation-section__header.collapsed {
margin-bottom: 0;
padding: 64px 0;
}
.is_right_to_left .index-segmentation-section__header {
padding-left: 50px;
padding-right: 0;
}
.index-segmentation-section__header.collapsed + .index-segmentation-subtitle {
display: none;
}
.index-segmentation-section__body {
height: auto;
opacity: 1;
overflow: visible;
margin-bottom: 64px;
}
.index-segmentation-section__body.collapsed {
height: 1px;
opacity: 0;
overflow: hidden;
margin-bottom: 0;
}
.index-segmentation-section__image {
width: 100%;
}
.index-segmentation-section--bordered::before {
content: " ";
position: absolute;
top: 0;
height: 1px;
background-color: #e6e6e6;
right: 50%; /* IE11 has horizontal scroll if we switch to left: 50% and translateX(-50%) */
transform: translateX(50%);
width: 100%;
max-width: 1170px;
}
.rtl .index-segmentation-section--bordered::before {
right: auto;
left: 50%; /* IE11 has horizontal scroll if we switch to right: 50% and translateX(50%) */
transform: translateX(-50%);
}
@media screen and (max-width: 1170px) {
.index-segmentation-section--bordered::before {
left: 24px;
right: 24px;
transform: translateX(0);
width: auto;
}
}
.index-segmentation-section--lightgrey {
background: #f5f5f5;
}
.index-segmentation-section-world-image {
background: no-repeat 50% #fff;
background-size: contain;
}
@media screen and (max-width: 414px) {
.index-segmentation-section-world-image {
background: none;
}
}
.index-segmentation-content-layout {
padding: 0;
max-width: 1170px;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 1170px) {
.index-segmentation-content-layout {
padding: 0 24px;
}
}
.index-segmentation-content {
position: relative;
}
.index-segmentation-content--collapsible {
padding: 24px 0;
}
.index-segmentation-content--collapsible .index-segmentation-section__header.collapsed {
margin-bottom: 0;
}
.index-segmentation-content--top-spacing {
padding-top: 48px;
}
.index-segmentation-content--spacing {
margin-top: 64px;
padding-top: 64px;
}
@media screen and (max-width: 768px) {
.index-segmentation-content--spacing {
margin-top: 24px;
padding-top: 24px;
}
}
.index-segmentation-content--bordered::before,
.index-segmentation-content--bordered-bottom::after {
content: ' ';
position: absolute;
top: 0;
height: 1px;
background-color: #E6E6E6;
right: 50%;
transform: translateX(50%);
width: 100%;
max-width: 1170px;
}
.rtl .index-segmentation-content--bordered::before,
.rtl .index-segmentation-content--bordered-bottom::after {
right: auto;
left: 50%;
transform: translateX(-50%);
}
.index-segmentation-content--bordered-bottom::after {
top: auto;
bottom: 0;
}
@media screen and (max-width: 1170px) {
.index-segmentation-content--bordered::before,
.index-segmentation-content--bordered-bottom::after {
left: 0;
right: 0;
transform: translateX(0);
width: auto;
}
}
.index-segmentation-content-title {
font-size: 32px;
line-height: 40px;
color: #333;
margin: 0;
padding: 0 0 0 44px;
position: relative;
font-weight: bold;
}
.is_right_to_left .index-segmentation-content-title {
padding: 0 44px 0 0;
}
.index-segmentation-content-title__icon {
width: 32px;
height: 32px;
position: absolute;
left: 0;
top: 3px;
}
.is_right_to_left .index-segmentation-content-title__icon {
right: 0;
left: auto;
}
.index-segmentation-grid {
}
.index-segmentation-grid--centered {
align-items: center;
}
@media screen and (max-width: 992px) {
.index-segmentation-grid {
flex-direction: column-reverse;
}
}
.index-segmentation-list-timeline__item {
margin-top: 0;
padding-left: 56px;
margin-bottom: 40px;
}
.rtl .index-segmentation-list-timeline__item {
padding-right: 56px;
}
.index-segmentation-list-timeline__item:before {
width: 1px;
bottom: -40px;
left: 21px;
}
.index-segmentation-list-timeline__item:after {
top: -4px;
left: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.rtl .index-segmentation-list-timeline__item:after {
right: -16px;
left: unset;
}
.index-segmentation-list-timeline__item--yellow:after {
background: #ffe08a;
content: '1';
}
.index-segmentation-list-timeline__item--lightorange:after {
background: #ffc489;
content: '2';
}
.index-segmentation-list-timeline__item--blue:after {
background: #bad4f7;
content: '3';
}
.index-segmentation-list-timeline__item--lightblue:after {
background: #a3d7fc;
content: '4';
}
.index-segmentation-list-timeline__item--green:after {
background: #97e59c;
content: '5';
}
.index-segmentation-tab {
background-color: #f5f5f5;
z-index: 1;
display: flex;
justify-content: center;
}
.index-segmentation-tab__logo,
.index-segmentation-tab__content,
.index-segmentation-tab__getstarted {
padding: 0;
}
.index-segmentation-tab__logo,
.index-segmentation-tab__getstarted {
display: none;
width: 180px; /* magic number to has symmetry with the logo in the sticky header */
}
@media screen and (min-width: 992px) {
.index-segmentation-tab__logo,
.index-segmentation-tab__getstarted {
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
transition: opacity 0.15s;
pointer-events: none;
}
.index-segmentation-tab--sticky .index-segmentation-tab__logo,
.index-segmentation-tab--sticky .index-segmentation-tab__getstarted {
opacity: 1;
pointer-events: all;
}
}
.index-segmentation-tab--sticky {
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .12), 0 2px 3px -1px rgba(0, 0, 0, .2);
}
@supports ((position: -webkit-sticky) or (position: sticky)) {
.index-segmentation-tab--sticky {
position: sticky !important; /* dirty hack for sticky-js library */
}
}
.index-segmentation-tab__getstarted-container {
text-align: right;
}
.rtl .index-segmentation-tab__getstarted-container {
text-align: left;
}
.index-segmentation-tab__getstarted-button {
width: 90%;
}
.index-segmentation-tab__logo a {
line-height: 0;
}
.index-segmentation-tab__logo svg {
transform: scale(0.9);
transform-origin: left;
}
.rtl .index-segmentation-tab__logo svg {
transform-origin: right;
}
.index-segmentation-tab__container {
max-width: 1170px;
width: 100%;
display: flex;
position: relative;
}
@media screen and (min-width: 992px) {
.index-segmentation-tab__container {
padding: 0;
}
}
.index-segmentation-tab__container .index-segmentation-tab__content {
flex: 1;
text-align: center;
}
.index-segmentation-tab__content {
overflow: hidden;
}
.index-segmentation-tab__content .bui-tab__nav {
scroll-snap-type: x proximity;
display: flex;
}
.index-segmentation-tab__content .bui-tab__nav::before {
display: none;
}
.index-segmentation-tab .bui-tab__item {
scroll-snap-align: start;
flex: 1;
}
@media screen and (min-width: 576px) {
.index-segmentation-tab .bui-tab__link {
height: 100%;
padding-left: 5px;
padding-right: 5px;
}
}
.index-segmentation-tab .bui-tab__nav .bui-tab__item:first-child {
margin: 0 0 0 24px;
}
.rtl .index-segmentation-tab .bui-tab__nav .bui-tab__item:last-child {
margin: 0 0 0 24px;
}
.index-segmentation-tab .bui-tab__nav .bui-tab__item:last-child {
margin: 0 24px 0 0;
}
.rtl .index-segmentation-tab .bui-tab__nav .bui-tab__item:first-child {
margin: 0 24px 0 0;
}
/* tabs navigation buttons */
.index-segmentation-tab-controls {
position: absolute;
left: 16px;
right: 16px;
bottom: 0;
}
@media screen and (min-width: 576px) {
.index-segmentation-tab-controls {
display: none;
}
}
.index-segmentation-tab-controls__button {
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.12),
0 2px 3px -1px rgba(0, 0, 0, 0.2);
z-index: 100;
padding: 4px;
border-radius: 50%;
line-height: 0;
cursor: default;
appearance: none;
border: none;
background-color: #fff;
color: #333;
transition: opacity 0.15s ease-in-out;
pointer-events: all;
opacity: 0;
visibility: hidden;
outline: none;
position: absolute;
bottom: calc(-1 * 16px);
}
.index-segmentation-tab-controls__button:first-child {
left: 0;
}
.index-segmentation-tab-controls__button:last-child {
right: 0;
}
.index-segmentation-tab-controls__button.index-segmentation-tab-controls__button-visibble {
opacity: 1;
cursor: pointer;
visibility: visible;
}
.index-segmentation-tab-controls__next,
.index-segmentation-tab-controls__prev {
height: 24px;
width: 24px;
vertical-align: middle;
}
.index-segmentation-carousel__item {
width: 100%;
}
@media (min-width: 576px) {
.index-segmentation-carousel__item {
width: 100%;
padding-right: 0;
}
}
.index-segmentation-carousel__item__container {
height: 100%;
}
@media screen and (min-width: 993px) {
.index-segmentation-carousel__item__container {
background-color: #fafcff;
border: 1px solid #f5f5f5;
border-radius: 4px;
}
}
.index-segmentation-carousel__item__image {
width: 100%;
max-width: 414px;
height: 366px;
border-radius: 4px;
overflow: hidden;
z-index: 0;
background-size: contain;
background-color: #f5f5f5;
}
.index-segmentation-carousel__item__content {
margin-left: -24px;
margin-right: 0;
padding-left: 58px;
padding-right: 58px;
padding-top: 40px;
flex-basis: 100%; /* fix IE11 long text not wrapping */
}
.is_right_to_left .index-segmentation-carousel__item__content {
margin-left: 0;
margin-right: -24px;
}
.index-segmentation-carousel__item__header {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
height: 100%;
padding-bottom: 32px;
}
.index-segmentation-carousel__item__title {
font-size: 32px;
line-height: 40px;
color: #000;
}
.index-segmentation-carousel__item__subtitle {
font-size: 20px;
line-height: 28px;
color: #000;
}
.index-segmentation-carousel__item__text {
font-size: 16px;
line-height: 24px;
color: #828282;
margin-top: 0;
}
@media screen and (min-width: 993px) {
.rtl .index-segmentation-carousel__item {
padding-right: 0;
padding-left: 0;
}
.rtl .index-segmentation-carousel__item__image {
margin-right: 0;
}
}
@media screen and (max-width: 992px) {
.index-segmentation-carousel__item {
padding-right: 24px;
}
.index-segmentation-carousel__item:last-child {
padding-right: 0;
}
.index-segmentation-carousel__item__container {
position: relative;
padding-top: 55px;
height: 100%;
}
.index-segmentation-carousel__item__image {
position: absolute;
top: 16px;
left: 24px;
width: 100px;
height: 100px;
}
.index-segmentation-carousel__item__title {
font-size: 20px;
line-height: 40px;
}
.index-segmentation-carousel__item__subtitle {
font-size: 16px;
line-height: 28px;
}
.index-segmentation-carousel__item__content {
background-color: #fafcff;
border: 1px solid #f5f5f5;
border-radius: 4px;
margin-left: 0;
padding-top: 80px;
padding-left: 24px;
padding-right: 24px;
}
}
.index-segmentation-carousel-pagination {
display: flex;
justify-content: center;
align-items: center;
padding-top: 24px;
}
.index-segmentation-carousel-pagination .bui-pagination-indicator__item {
background-color: transparent;
border: 1px solid #E0E0E0;
border-radius: 50%;
}
.index-segmentation-carousel-pagination .bui-pagination-indicator__item--active {
border-color: transparent;
background-color: #2F80ED;
}
.index-segmentation-faq-read-more {
font-size: 16px;
line-height: 32px;
padding-top: 32px;
}
.index-segmentation-faq-read-more__cta {
text-decoration: underline;
}
.index-segmentation-accordion--hide-top-border {
margin-top: -1px;
}
.index-segmentation-accordion__row-inner:hover {
background-color: transparent;
}
.index-segmentation-accordion__content {
font-size: 20px;
line-height: 28px;
font-weight: normal;
padding-top: 8px;
color: #333;
}
@media screen and (min-width: 768px) {
.index-segmentation-accordion__content {
padding-left: 0;
}
.index-segmentation-accordion__row-inner {
padding-left: 0;
padding-right: 0;
}
}
.index-segmentation-accordion__icon {
transition: all .2s linear;
}
@media screen and (max-width: 768px) {
.index-segmentation-accordion-bleed {
padding-top: 0;
margin-top: -1px;
}
}
.index-segmentation-earnings-calculator-container {
max-width: 520px;
}
@media screen and (max-width: 992px) {
.index-segmentation-earnings-calculator-container {
margin: 0 auto;
padding-top: 32px;
}
}
@media screen and (max-width: 768px) {
.index-segmentation-earnings-calculator-container {
max-width: 100%;
}
}
.index-segmentation-earnings-calculator-info {
padding-top: 24px;
margin-top: 24px;
}
.index-segmentation-earnings-calculator-info__text {
font-size: 14px;
line-height: 20px;
font-weight: bold;
}
.index-segmentation-earnings-calculator-info__button {
width: 100%;
background-color: #0077CC;
padding-top: 14px;
padding-bottom: 14px;
}
.index-segmentation-earnings-calculator {
background-color: #FAFCFF;
border: 1px solid #EBF3FF;
padding: 24px;
}
.index-segmentation-earnings-calculator__border {
position: relative;
}
.index-segmentation-earnings-calculator__border::before {
content: ' ';
background-color: rgba(186, 212, 247, 0.5);
position: absolute;
top: 0;
left: -24px;
right: -24px;
height: 1px;
}
.index-segmentation-earnings-calculator .join-commission-calculator-formatted-value {
font-size: 62px;
line-height: 62px;
color: #2F80ED !important;
}
@media screen and (max-width: 768px) {
.index-segmentation-earnings-calculator .join-commission-calculator-formatted-value {
font-size: 40px;
line-height: 47px;
}
}
.index-segmentation-earnings-calculator .join-commission-calculator-per-month {
color: #383838;
font-size: 18px !important;
}
.index-segmentation-earnings-calculator .join-commission-calculator-city-input {
padding-top: 12px;
padding-bottom: 12px;
border: 1px solid #EBF3FF;
}
.index-segmentation-commission {
display: flex;
align-items: center;
justify-content: center;
max-width: 520px;
}
@media screen and (max-width: 992px) {
.index-segmentation-commission {
margin: 0 auto;
padding-top: 32px;
}
}
@media screen and (max-width: 768px) {
.index-segmentation-commission {
max-width: 100%;
}
}
.index-segmentation-commission-in-city {
font-size: 24px;
line-height: 20px;
}
@media screen and (max-width: 768px) {
.index-segmentation-commission-in-city {
font-size: 18px;
}
}
.index-segmentation-commission-block {
width: 100%;
background: #fff;
padding: 24px 24px 8px 24px;
}
.index-segmentation-commission-block--lightgrey {
background: #f5f5f5;
}
.index-segmentation-commission-table {
width: 100%;
}
.index-segmentation-commission-table tr {
}
.index-segmentation-commission-table__item
{
padding: 18px 0;
}
.index-segmentation-commission-table__item--rightspace {
padding-right: 16px;
}
.index-segmentation-commission-table__item--nowrap {
white-space: nowrap;
min-width: 150px;
}
.index-segmentation-commission-table__item--first {
padding: 6px 0 8px 0;
}
.index-segmentation-commission-table tr:last-child {
border-top: 1px solid #e0e0e0;
}
.index-segmentation-commission-price-field {
display: flex;
justify-content: flex-end;
}
.index-segmentation-currency-symbol {
padding: 8px 5px 0 0;
border: 1px solid #E6E6E6;
width: 44px;
text-align: center;
background-color: #F5F5F5;
}
.is_right_to_left .index-segmentation-currency-symbol {
padding: 8px 0 0 5px;
}
.index-segmentation-price-value {
display: inline-block;
max-width: 106px;
text-align: right;
padding: 11px 4px;
margin-left: -1px;
}
.is_right_to_left .index-segmentation-price-value {
text-align: left;
margin-right: -1px;
margin-left: 0;
}
.index-segmentation-footer{
background-color: #003580;
padding-top: 18px;
padding-bottom: 0;
clear: both;
margin-top: 0;
@apply(--bui_font_body);
}
.index-segmentation-footer.index-segmentation-footer__dark {
background-color: #00224f;
}
.index-segmentation-footer .bui-container--center {
max-width: 1170px;
padding: 16px 24px;
}
@media screen and (min-width: 576px) and (max-width: 1170px){
.index-segmentation-footer{
padding-top: 56px;
}
}
@media screen and (min-width: 1171px){
.index-segmentation-footer .bui-container--center {
padding: 16px 0;
}
}
footer.index-segmentation-footer a{
margin-bottom: 12px;
}
footer.index-segmentation-footer .pages-footer__subheader{
@apply(--bui_font_display_one);
}
.index-segmentation-footer footer a:hover{
color: #a3d7fc;
}
.index-segmentation-footer footer a{
text-decoration: underline;
}
.index-segmentation-footer .join-section__registration-form{
margin: 0 auto;
box-shadow: none;
}
@media screen and (min-width: 992px){
.index-segmentation-footer .join-section__registration-form{
margin: 16px 0 auto auto;
}
.rtl .index-segmentation-footer .join-section__registration-form{
margin: 16px auto auto 0;
}
}
.index-segmentation-footer_title{
border: none;
text-align: center;
padding: 0 0 24px 0;
margin: 0;
font-size: 32px;
line-height: 40px;
}
@media screen and (min-width: 992px){
.index-segmentation-footer_title{
text-align: left;
font-size: 48px;
line-height: 64px;
padding: 0;
}
.rtl .index-segmentation-footer_title {
text-align: right;
}
}
ul.index-segmentation-footer__mini-list{
text-align: start;
list-style: none;
display: flex;
padding: 42px 0 0 0;
margin: 0;
flex: 0 0 auto;
flex-wrap: wrap;
border-top: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
}
.index-segmentation-footer__mini-list li{
@apply(--bui_font_body);
flex-basis: 100%;
margin-right: 0;
margin-left: 0;
}
@media screen and (min-width: 576px) {
.index-segmentation-footer__mini-list li{
flex-basis: auto;
}
.index-segmentation-footer__mini-list li:not(:first-child)::before {
content: "|";
margin: 0 10px;
}
.index-segmentation-footer__mini-list li:last-child {
margin-right: 0;
}
.rtl .index-segmentation-footer__mini-list li:last-child {
margin-left: 0;
}
.rtl .index-segmentation-footer__mini-list li:first-child {
margin-right: 0;
}
}
.index-segmentation-footer__mini-list li.index-segmentation-footer__list-item-full\@medium{
flex-basis: 100%;
}
.index-segmentation-footer__mini-list li.index-segmentation-footer__list-item-full\@medium::before{
content: none;
}
/* links column for mobile */
.index-segmentation-footer__links-column{
text-align: start;
}
.index-segmentation-footer__links-column li{
margin: 0;
}
.index-segmentation-footer__links-column li a{
margin: 0;
padding-top: 24px;
}
/* override global css styles */
#footer_wrapper ul.index-segmentation-footer__mini-list{
padding-left: 0;
}
@media screen and (min-width: 576px){
.index-segmentation-footer__mini-list li.index-segmentation-footer__list-item-full\@medium{
flex-basis: auto;
flex-grow: 1;
text-align: right;
}
.rtl .index-segmentation-footer__mini-list li.index-segmentation-footer__list-item-full\@medium{
text-align: left;
}
}
/* override non bui form style */
.index-segmentation-footer .signup-access {
max-width: none;
background: #fff;
}
.index-segmentation-more-about-listing-container {
background-color: #fafcff;
}
.index-segmentation-more-about-listing-block {
background-color: #fff;
border-radius: 2px;
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .12), 0 2px 3px -1px rgba(0, 0, 0, .2);
transition: all 0.3s;
color: inherit;
padding: 24px;
display: flex;
flex-direction: column;
width: 100%;
}
.index-segmentation-more-about-listing-block:focus {
box-shadow: none;
text-decoration: none;
color: inherit;
}
.index-segmentation-more-about-listing-block:hover {
box-shadow: none;
text-decoration: none;
color: inherit;
transform: scale(0.98);
}
.index-segmentation-more-about-listing-block__title {
font-size: 24px;
line-height: 32px;
padding: 0;
margin: 0;
}
.index-segmentation-more-about-listing-block__text {
font-size: 16px;
line-height: 32px;
padding-top: 12px;
}
.index-segmentation-more-about-listing-block__link {
font-size: 16px;
line-height: 18px;
color: #0071C2;
padding-top: 12px;
margin-top: auto;
}
.index-segmentation-card .bui-card {
border: 1px solid #F1F2F3;
box-shadow: 0 3px 3px rgba(182, 177, 177, 0.25);
border-radius: 5px;
padding: 32px;
}
.index-segmentation-card .bui-card__title {
font-size: 16px;
line-height: 24px;
}
.index-segmentation-card .bui-list__description {
color: #333333;
}
.index-segmentation-card .bui-list__icon svg {
fill: #27AE60;
}
/* EXP: pai_joinapp_a_overlay_signin_button */
.js-join-overlay-on .join-section--header{
z-index: auto;
}
.js-join-overlay-on .join__visible-on-overlay{
z-index: 101;
}
/*# sourceMappingURL=index.034a638c.css.map*/