/**
 * Theme Name: Keycafe Inc.
 * Theme URI: https://www.keycafe.com/
 * Description: A custom theme for android and web-app
 *
 * Author: Keycafe Inc.
 * Author URI: https://www.keycafe.com/
 *
 * normalize.css v7.0.0
 * MIT License
 * github.com/necolas/normalize.css
 *
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
* {
    -webkit-tap-highlight-color: transparent;
}

html {
    line-height: 1.15;

    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
    margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
    display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
    margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    overflow: visible;
    box-sizing: content-box;
    height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
    background-color: transparent;

    -webkit-text-decoration-skip: objects;
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
    border-bottom: none;
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
    font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
    color: #000;
    background-color: #ff0;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
    overflow: hidden;
}

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
    display: table;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0;
    white-space: normal;
    color: inherit;
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    display: inline-block;
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    outline-offset: -2px;

    -webkit-appearance: textfield;
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    font: inherit;

    -webkit-appearance: button;
}

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/**
 * Add the correct display in IE 9-.
 */
canvas {
    display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10-.
 */
[hidden] {
    display: none;
}

/**
 * Embedded fonts
 * -------------------------------------------------- */
@font-face {
    font-family: "MuseoSans-100";
    font-weight: normal;
    font-style: normal;

    src: url("0Za9RrBgGa54rKAuUMGN6BAK8vIG8Owh54afTKYvk2m.eot");
    src: url("0Za9RrBgGa54rKAuUMGN6BAK8vIG8Owh54afTKYvk2m.eot?#iefix") format("embedded-opentype"), url("fbJbzWgt8yaRuARk2kVuj86VgRkAagwYuuBNCOs6EQP.woff") format("woff"), url("u6RX5gnfElFELLP3eiu5fiU0OzDuHLVThVjv0Onw8uX.ttf") format("truetype"), url("gxASKWcoB3XInrAshiCVmyEHXmMVh8FKaP8f6OYM9uh.svg#MuseoSans-100") format("svg");
}

@font-face {
    font-family: "MuseoSans-300";
    font-weight: normal;
    font-style: normal;

    src: url("v3u70hODxzIthrTmZfv4H6jR7NrMosuozAISqeZT4uJ.eot");
    src: url("v3u70hODxzIthrTmZfv4H6jR7NrMosuozAISqeZT4uJ.eot?#iefix") format("embedded-opentype"), url("qNLfLJRxFZdAh2mwGOUOmw649XfkpVtvUt17IB9404V.woff") format("woff"), url("NvA1QlmXikdQUerrEEW15zLMVcEe8SyFxJK26TF7pYB.ttf") format("truetype"), url("Ek7wKDnQCNAlY3IHqIHrVnNeNdccxEkNdzbGYXQduqW.svg#MuseoSans-300") format("svg");
}

@font-face {
    font-family: "MuseoSans-500";
    font-weight: normal;
    font-style: normal;

    src: url("xtWl1gi8bh9p80l3zMlcxrE96wTuJNkb0EZ79nqX3wH.eot");
    src: url("xtWl1gi8bh9p80l3zMlcxrE96wTuJNkb0EZ79nqX3wH.eot?#iefix") format("embedded-opentype"), url("WrNUqiLfYI0x5KGEDpfBuJFHQGB9rJALGJ8PiHmorcx.woff") format("woff"), url("kPQdozsjuDR3a0jHoUSfsQVkDQxHYWNtZqUF0y0SPhL.ttf") format("truetype"), url("lX97BEkkaUzVnvzHa6C7HMMcyeMPBGCr56d4ejQbSpD.svg#MuseoSans-500") format("svg");
}

@font-face {
	font-family: 'MuseoSans-700';
    font-weight: normal;
	font-style: normal;

    src: url("MAWSzU1ELlOiYuXmLUVeGYjoekkPd4tgLtaz9yxiepG.eot");
    src: url("MAWSzU1ELlOiYuXmLUVeGYjoekkPd4tgLtaz9yxiepG.eot?#iefix") format("embedded-opentype"), url("3yvKHa0xVkkfQU5ZmIhRdwhAWa1AsBHazE9pcSqdsSq.woff") format("woff"), url("oqQ8OPeu4F3cgm6jJoS7k2SQ1aqhOjnCv13uP6DAdGJ.ttf") format("truetype"), url("sHmxxAa3v861n0tWvlc918ORRgsMDaX2t39YNC3gE62.svg#MuseoSans-700") format("svg");
}

@font-face {
    font-family: "MuseoSans-900";
    font-weight: normal;
    font-style: normal;

    src: url("sKX4N3gp3AYdQv4cAeAUENL5GGXOPJpE8ZEIfsDPXmI.eot");
    src: url("sKX4N3gp3AYdQv4cAeAUENL5GGXOPJpE8ZEIfsDPXmI.eot?#iefix") format("embedded-opentype"), url("MPrdH3iMQ9qf2LlfkDatoHKbTBx1ZFZFOqqXziUPgD7.woff") format("woff"), url("MyRV0mTaZJkQb08ZRYdZaLR75iYMkPajGkn8bNi2xKf.ttf") format("truetype"), url("jhBmnpyI4abNUPFw63FDHWFqMuEnYXk4kco2DbQeNU.svg#MuseoSans-900") format("svg");
}

/**
 * Base styles
 * -------------------------------------------------- */
html,
body,
body > .page,
body > .page > div {
    height: 100%;
}

body {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    background: #fff;
}

a {
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    color: #00a8e0;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none;
}

a:hover,
a:focus,
a:active {
    color: #fc6608;
}

a.orange {
    color: #fc6608;
}

a.orange:hover,
a.orange:focus,
a.orange:active {
    color: #dd5906;
}

.small-text {
    font-size: 0.85em;
}

.capitalize {
    text-transform: capitalize;
}

.picker-cell + .picker-cell.picker-hours {
    border-left: 10px solid #eee;
}

.picker-cell::before {
    background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.1)) !important;
}

.picker-cell::after {
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1)) !important;
}

.text-danger {
    color: #bf1e2e;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.overflow {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.ow-break-word {
    overflow-wrap: break-word;
}

.nouveau {
    flex: 1;
    overflow-y: auto;
}

/**
 * Remove all non-inherited styles from an element, especially user agent styles.
 *
 * Useful for e.g. a button that shouldn't look like a button.
 */
.nostyle {
    all: inherit
}

/**
 * Screen readers only
 * -------------------------------------------------- */
.sr-only {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

/**
 * Alignments
 * -------------------------------------------------- */
.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.v-center {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.fa-disabled,
.input-group.with-addons > .input-group-append .fas.fa-disabled,
.input-group.with-addons > .input-group-append .far.fa-disabled,
.input-group.with-addons > .input-group-append .fab.fa-disabled {
    opacity: 0.6;
    cursor: none;
    pointer-events: none;
}

/**
 * Responsive images
 * -------------------------------------------------- */
img {
    max-width: 100%;
}

/**
 * Headings
 * -------------------------------------------------- */
h1 {
    font-family: "MuseoSans-100", Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    font-weight: normal;
}

/**
 * Form Elements
 * -------------------------------------------------- */
button {
    cursor: pointer;
}

a.btn.disabled,
fieldset[disabled] a.btn,
.disabled,
[disabled] {
    pointer-events: none;
}

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

.btn-block-wrap {
    margin: 1.7rem 1rem;
}

.btn {
    font-family: "MuseoSans-100", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 1.3;
    display: inline-block;
    padding: 0.75rem 0.6rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

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

.btn:focus,
.btn.focus {
    outline: 0;
}

.btn.disabled,
.btn:disabled {
    opacity: 0.50;
}

.btn-blue,
a.btn-blue,
.input-group > a.btn-blue {
    color: #fff;
    border-color: #00a8e0;
    background-color: #00a8e0;
}

.btn-blue:hover,
a.btn-blue:hover {
    color: #fff;
    border-color: #0f7eba;
    background-color: #0f7eba;
}

.btn-blue.disabled,
.btn-blue:disabled {
    border-color: #00a8e0;
    background-color: #00a8e0;
}

.btn-orange {
    color: #fff;
    border-color: #fc6608;
    background-color: #fc6608;
}

.btn-orange:hover {
    color: #fff;
    border-color: #dd5906;
    background-color: #dd5906;
}

.btn-orange.disabled,
.btn-orange:disabled {
    border-color: #fc6608;
    background-color: #fc6608;
}


.btn-blue-grad,
.btn-blue-grad:hover,
.btn-blue-grad:focus,
.btn-blue-grad:active {
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
    width: auto;
    height: auto;
    padding: 0.688em 1.12em;
    color: #fff !important;
    border-radius: 5px;
    box-shadow: none;

    position: relative;
    z-index: 1;
    color: #fff;
    background: #0f4b60;
    background: -o-linear-gradient(315deg,  #0f4b60 0%,#06436d 100%);
    background: linear-gradient(135deg,  #0f4b60 0%,#06436d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f4b60', endColorstr='#06436d',GradientType=1 );
    border: none;
}

.btn-blue-grad:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    opacity: 1;
    border-radius: 4px;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    background: #00a7e0;
    background: -o-linear-gradient(315deg,  #00a7e0 0%,#085db7 100%);
    background: linear-gradient(135deg,  #00a7e0 0%,#085db7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a7e0', endColorstr='#085db7',GradientType=1 );
}

.btn-blue-grad:hover:before,
.btn-blue-grad:focus:before,
.btn-blue-grad:active:before {
    opacity: 0;
}

.btn-gray {
    color: #3a3a3a;
    border-color: #3a3a3a;
    background-color: #d1d1d1;
}

.btn-gray:hover {
    color: #3a3a3a;
    border-color: #5e5e5e;
    background-color: #e2e2e2;
}

.btn-cancel {
    color: #3a3a3a;
    border-color: #d1d1d1;
    background-color: #d1d1d1;
}

.btn-right {
    color: #ffffff;
    border-color: #b1b1b1;
    background-color: #b1b1b1;
}

.btn-right:hover {
    border-color: #919191;
    background-color: #919191;
}

.btn-link {
    color: #00a8e0;
    background-color: transparent;
}

.btn-link:hover {
    background-color: transparent;
    border-color: transparent;
}

.btn-link:focus,
.btn-link.focus {
    border-color: transparent;
    box-shadow: none;
}

.btn-link:disabled,
.btn-link.disabled {
    color: #6c757d;
    pointer-events: none;
}

.account-btn > .btn {
    margin-top: 10px;
}

input::-webkit-input-placeholder {
    opacity: 1;
    color: gray;
}

input:-ms-input-placeholder {
    opacity: 1;
    color: gray;
}

input::placeholder {
    opacity: 1;
    color: gray;
}

input::-webkit-input-placeholder {
    opacity: 1;
    color: gray;
}

input::-moz-placeholder {
    opacity: 1;
    color: gray;
}

input:-ms-input-placeholder {
    opacity: 1;
    color: gray;
}

input:-moz-placeholder {
    opacity: 1;
    color: gray;
}

input,
label,
textarea,
select {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.4;
    color: #111;
}

.tb,
.ta {
    font-size: 1.1em;
    display: block;
    width: 100%;
    padding: 12px 10px;
    border: none;
    background: transparent;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search {
    font-family: "Font Awesome 5 Free", "MuseoSans-100", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.31;
    display: block;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 6px 10px;
    text-align: center;
    color: #7b7b81;
    border: none;
    border-radius: 5px;
    background-color: #fff;
}

.input-group .search {
    text-align: left;
    background-color: unset;
    padding: 12px 10px;
}

.search,
.search:before,
.search:after,
.search *,
.search *:before,
.search *:after {
    box-sizing: border-box;
}

.search-address {
    font-family: "Font Awesome 5 Free", "MuseoSans-100", Arial, Helvetica, sans-serif;
    font-weight: 600;
}

textarea {
    padding: 10px;
    resize: none;
}

input[type="date"],
input[type="datetime-local"] {
    display: block;
    min-width: 180px;
    padding: 12px 10px;
    border: none;
    background: transparent;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media (min-width: 768px) {
    input[type="date"],
    input[type="datetime-local"] {
        padding: 12px 10px;
    }
}

input[type="date"]:focus,
input[type="datetime-local"]:focus {
    outline: none;
}

label {
    display: block;
    padding: 5px 5px 2px;
    color: #5a5a5a;
}

label ~ .input-group {
    margin-top: 0;
}

.input-group-currency-field {
    display: flex;

}

.input-group-currency-field span {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    margin-left: 10px;
    padding: 12px 0;
    line-height: 1.5;
}


.input-group {
    margin: 10px 0;
    border: 1px solid #d9d9d9;
    border-radius: 7px;
    background-color: #ebebeb;
}

.input-group.has-button-right {
    width: 65%;
    float: left;
}

.input-group.button-right {
    width: 34%;
    display: inline-block;
    margin-left: 1%;
}

.input-group.with-addon,
.input-group.with-addons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.input-group.with-addon > .tb,
.input-group.with-addons > .tb {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.input-group.with-addon > .input-group-append,
.input-group.with-addons > .input-group-append {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.input-group.with-addon > .input-group-append .fas,
.input-group.with-addon > .input-group-append .far,
.input-group.with-addon > .input-group-append .fab {
    opacity: 1;
    font-size: 1.3em;
    padding-left: 15px;
    padding-right: 15px;
}

.input-group.with-addons > .input-group-append .fas,
.input-group.with-addons > .input-group-append .far,
.input-group.with-addons > .input-group-append .fab {
    opacity: 1;
    font-size: 1.3em;
    padding-right: 15px;
}

.input-group.with-addon > .input-group-append .fas:hover,
.input-group.with-addon > .input-group-append .far:hover,
.input-group.with-addon > .input-group-append .fab:hover,
.input-group.with-addons > .input-group-append .fas:hover,
.input-group.with-addons > .input-group-append .far:hover,
.input-group.with-addons > .input-group-append .fab:hover {
    color: #00a8e0;
}

.input-group.with-hint {
    margin-bottom: 0;
}

.input-group.no-border {
    border: none;
}

.input-group.no-background {
    background-color: unset;
}

.input-group label {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 10px;
    color: #111;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.input-group .fas,
.input-group .far,
.input-group .fab  {
    font-size: 1.7rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all 0.2s ease-in-out;
    opacity: 0;
}

.input-group .check {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all 0.2s ease-in-out;
    opacity: 0;
}

.input-group .cb,
.input-group .rb {
    display: none;
}

.input-group .cb:checked ~ label .fas,
.input-group .rb:checked ~ label .fas,
.input-group .cb:checked ~ label .far,
.input-group .rb:checked ~ label .far,
.input-group .cb:checked ~ label .fab,
.input-group .rb:checked ~ label .fab {
    opacity: 1;
}

.input-group .cb:checked ~ label .check,
.input-group .rb:checked ~ label .check {
    width: 1.9rem;
    height: 1.9rem;
    opacity: 1;
    background-image: url("pBW1lnKDwn8qRmTrfgDatNijfyezYMHcDYMWjmoURSL.png");
    background-size: 100% 100%;
}

.input-group.checkbox label,
.input-group.radio label {
    box-sizing: content-box;
    height: 1.9rem;
    cursor: pointer;
}

.input-group.date {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-flow: wrap;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
}

.input-group.locale {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-flow: wrap;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
}

.input-group.locale .instruction-display-language-label {
    padding-left: 5px;
}

@media (min-width: 768px) {
    .input-group.date {
        -webkit-flex-flow: nowrap;
        -ms-flex-flow: nowrap;
        flex-flow: nowrap;
    }
}

.input-group.date input {
    width: 100%;

    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

@media (min-width: 768px) {
    .input-group.date input {
        width: 310px;
    }
}

.input-group.date label {
    flex: 1 0;

    -webkit-flex: 1 0;
    -ms-flex: 1 0;
}

.input-group.date-group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-flow: wrap;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
}

.input-group.date-group label {
    flex: 1 0;

    -webkit-flex: 1 0;
    -ms-flex: 1 0;
}

.input-group.date-group time-picker,
.input-group.date-group .time {
    width: 30%;
    border-left: 1px solid rgb(217, 217, 217);

    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

@media (min-width: 768px) {
    .input-group.date-group time-picker,
    .input-group.date-group .time {
        width: 10%;
    }
}

.input-group.date-group input,
.input-group.date-group .time {
    text-align: center;
}

.input-group.toggle {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.input-group.toggle .switch {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

.input-group.toggle label {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 1;
    padding: 10px;

    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.input-group .iti {
    margin-top: 0;
    margin-bottom: 0;
}

.input-group .iti__flag {
    box-shadow: none;
}

.input-group .iti.iti--separate-dial-code .iti__selected-flag {
    border-right: 1px solid #d9d9d9;
}

.input-group > a {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    line-height: 1.4;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 10px;
    color: #111;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.input-group > a .fa-angle-right {
    font-size: 1.4em;
    flex: 0 0 15px;
    opacity: 1;
    color: #00a8e0;

    -webkit-flex: 0 0 15px;
    -ms-flex: 0 0 15px;
}

.input-group > a span {
    flex: 1 1 auto;
    min-width: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.input-group select:required:invalid {
    color: #898989;
    box-shadow:none;
}

.input-group.select-box {
    position: relative;
}

.input-group.select-box .fa-angle-down {
    color: #4a4a4a;
    opacity: 1;
    position: absolute;
    top: 16px;
    right: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.input-group option[value=""][disabled] {
    display: none;
}

.input-group option {
    color: black;
    background-color: #ebebeb;
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.input-group.white {
    background-color: #fff;
}

.form-separator {
    display: flex;
    align-items: center;
    gap: 38px;
}

.form-separator hr {
    flex: 1;

    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(175, 186, 183, 0.3);
}

.iti {
    -webkit-overflow-scrolling: touch;
}

.btn-container {
    margin: 10px 0;
}

.input-section .info {
    padding: 0 10px;
}

.input-section .hint {
    color: #5a5a5a;
    margin: 0 0 10px 0;
    padding: 2px 0 0 5px;
    font-size: 0.8em;
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
}

.info.red {
    color: red;
}

.input-section-btns {
    margin-top: 40px;
}

.switch {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 0 0 56px !important;
    width: 56px;
    height: 32px;
    padding: 0 !important;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex: 0 0 56px !important;
    -ms-flex: 0 0 56px !important;
}

.switch input {
    display: none;
}

.switch input:checked + .slider {
    background-color: #00a8e0;
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px #00a8e0;
}

.switch input:disabled + .slider {
    background-color: #a7a7a7;
    cursor: not-allowed;
}

.switch input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.switch .slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    transition: 0.4s;
    border-radius: 40px;
    background-color: #fff;
}

.switch .slider::before {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    content: "";
    transition: 0.4s;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.07);
}

/**
 * Page Layout
 * -------------------------------------------------- */
.page > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;

    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.page > div.bootstrap-loading {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.content {
    position: relative;
    overflow-y: auto;
    flex: 1 1 auto;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

/**
 * Header & Footer
 * -------------------------------------------------- */
.header,
.footer {
    text-align: center;
    color: #111;
    background-color: #f9f9f9;

    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.header {
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 3px 15px 3px 9px;
    border-bottom: 1px solid rgba(163, 163, 163, 0.3);

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.header .page-title {
    overflow: hidden;
    flex: 3;
    min-width: 0;
    padding: 4px 2px 3px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;

    -webkit-flex: 3;
    -ms-flex: 3;
}

.header .mobile-search {
    overflow: hidden;
    flex: 3;
    min-width: 0;
    padding: 4px 2px 3px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;

    -webkit-flex: 3;
    -ms-flex: 3;
}

.header .mobile-filter {
    flex: 3;
    padding: 4px 2px 3px;
    text-align: center;
    white-space: nowrap;

    -webkit-flex: 3;
    -ms-flex: 3;
}

.header .mobile-filter > .dropdown-menu > li {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 0.9em;
}

.header .mobile-filter .filter-icon {
    margin-right: 10px;
}

.header .nav-left,
.header .nav-right {
    font-size: 0.9em;
    min-width: 0;
}

.header .nav-left div,
.header .nav-right a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 4px 0 3px;
    cursor: pointer;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.header .nav-left a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.header .nav-left .fas,
.header .nav-right .fas,
.header .nav-left .fab,
.header .nav-right .fab,
.header .nav-left .far,
.header .nav-right .far {
    font-size: 2em;
    line-height: 25.2px;
    position: relative;
    top: -2px;
}

.header .fas.fa-trophy {
    font-size: 1.4em;
}

.header .nav-left {
    font-family: "MuseoSans-100", Arial, Helvetica, sans-serif;
    flex: 1.25;

    -webkit-flex: 1.25;
    -ms-flex: 1.25;
}

.header .nav-left span {
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header .nav-left .fas,
.header .nav-left .fab,
.header .nav-left .far {
    margin-right: 1px;
}

.header .nav-right {
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
    flex: 1;

    -webkit-flex: 1;
    -ms-flex: 1;
}

.header .nav-right a {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.header .nav-right .far,
.header .nav-right .fab,
.header .nav-right .fas  {
    margin-left: 3px;
}

@media (min-width: 400px) {
    .header .page-title {
        flex: 2;

        -webkit-flex: 2;
        -ms-flex: 2;
    }
    .header .nav-left,
    .header .nav-right {
        flex: 1;

        -webkit-flex: 1;
        -ms-flex: 1;
    }

}

.footer {
    border-top: 1px solid rgba(163, 163, 163, 0.3);
}

.footer ul,
.footer li {
    font-family: "MuseoSans-100", Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #878787;
}

.footer ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.footer li {
    flex: 1;
    min-width: 0;

    -webkit-flex: 1;
    -ms-flex: 1;
}

.footer a {
    display: block;
    padding: 28px 0 0;
    color: #878787;
    background-repeat: no-repeat;
    background-position: 50% 1px;
    background-size: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer a:hover,
.footer a:focus,
.footer a:active,
.footer a.active {
    color: #00a8e0;
}

.footer .tab-bookings a {
    background-image: url(fCZs1HbKCyvk4FPaAzyGYPITHGIvTwgxBN9uBgEORd7.png);
}

.footer .tab-bookings a:hover,
.footer .tab-bookings a:focus,
.footer .tab-bookings a:active,
.footer .tab-bookings a.active {
    background-image: url(L1uvDpWdYFWqWIPmjiAN14dz5JsKE5wuUwXZQ3Z7oD.png);
}

.footer .tab-keys a {
    background-image: url(Dcsz5EKH9GcwvI25oUHdJnZRY5JEEZFJuLw4BFn6mSN.png);
}

.footer .tab-keys a:hover,
.footer .tab-keys a:focus,
.footer .tab-keys a:active,
.footer .tab-keys a.active {
    background-image: url(wMWvyCqc0sdKsHx3eDFDlK1nnpd0KH8sbsOkk5Nn1Hp.png);
}

.footer .tab-locations a {
    background-image: url(wJQTHFNIiRKq0ddVGVVrq9GXu9gD4ERQBFprOvyeDDH.png);
}

.footer .tab-locations a:hover,
.footer .tab-locations a:focus,
.footer .tab-locations a:active,
.footer .tab-locations a.active {
    background-image: url(WlVX2bKsWxyVJa3DlNg2wqtUiadIMgteBy6hrNVo5ge.png);
}

.footer .tab-more a {
    background-image: url(lcRFUUv9IuawJUKxQYYDiHKPdnK7Smg4pa17RAmRBEr.png);
}

.footer .tab-more a:hover,
.footer .tab-more a:focus,
.footer .tab-more a:active,
.footer .tab-more a.active {
    background-image: url(VQ02ixZHQ8roPhEhv5gHJPxmHcw9YC9fk6o4NsRmm0v.png);
}

.footer .tab-resources a {
    background-image: url(WxvK78nb4tvhjb50jHCRgrbNHe7v94YzWAhA7z78Cx5.png);
}

.footer .tab-resources a:hover,
.footer .tab-resources a:focus,
.footer .tab-resources a:active,
.footer .tab-resources a.active {
    background-image: url(bY6Ao9fPo2bmdbmTayhvnaxCVm9ovweVjdzP5hS3Kva.png);
}



.footer .tab-help a {
    background-image: url(kmuDiWA2fDoTVwbZWkYBuk2eQzMVY1SLtqZeHvUrHJB.png);
}

.footer .tab-help a:hover,
.footer .tab-help a:focus,
.footer .tab-help a:active,
.footer .tab-help a.active {
    background-image: url(fq4YlPDWBWF2vHQ2UJnBnKAgA2HOYGRFnDoSOmTI4xj.png);
}

.footer .tab-network a {
    background-image: url(wJQTHFNIiRKq0ddVGVVrq9GXu9gD4ERQBFprOvyeDDH.png);
}

.footer .tab-network a:hover,
.footer .tab-network a:focus,
.footer .tab-network a:active,
.footer .tab-network a.active {
    background-image: url(WlVX2bKsWxyVJa3DlNg2wqtUiadIMgteBy6hrNVo5ge.png);
}

.footer .tab-cabinets a {
    background-image: url(AyUNreWBAGdDIAFznBkWLMYdB02hPpv2ve1bnE6eYZy.png);
}

.footer .tab-cabinets a:hover,
.footer .tab-cabinets a:focus,
.footer .tab-cabinets a:active,
.footer .tab-cabinets a.active {
    background-image: url(x4X4bQEBKvubt3voUl9qhq3E4wT4Ed1W2K5WTqKjKoE.png);
}

.footer .tab-org-settings a {
    background-image: url(jSg7fUEAKh4QfVayQmICtBv6ywpR8F7L1fith0I0bZp.png);
}

.footer .tab-org-settings a:hover,
.footer .tab-org-settings a:focus,
.footer .tab-org-settings a:active,
.footer .tab-org-settings a.active {
    background-image: url(gd3CCcRdqZw8eSO9wnjxjYWOcg8mw4tXUF4eg9nMIxh.png);
}

.footer .tab-events a {
    background-image: url(hKz4TryE54vZSI2gwpZxtlgg6bfq9UzcaDWRCpm7l4r.png);
}

.footer .tab-events a:hover,
.footer .tab-events a:focus,
.footer .tab-events a:active,
.footer .tab-events a.active {
    background-image: url(OnAW3f6NPcilhSetNFfjUjwpBvYgAmcK6gcOfDoFUmk.png);
}

.footer .tab-integrations a {
    background-image: url(bTYaL32TF8WYKuvMkjenwmQq670zcRCAiIt3lvMopda.png);
    background-size: 30px;
}

.footer .tab-integrations a:hover,
.footer .tab-integrations a:focus,
.footer .tab-integrations a:active,
.footer .tab-integrations a.active {
    background-image: url(0z9Tg7ClvDLdMDF08yKByTQmvA4gmv7tASjTLMXQaD4.png);
}

.footer .tab-groups a {
    background-image: url(ca2Hw2JHtpcpMZq4mZOksRcAaO7qIN03Vnm2gfuajIJ.png);
}

.footer .tab-groups a:hover,
.footer .tab-groups a:focus,
.footer .tab-groups a:active,
.footer .tab-groups a.active {
    background-image: url(cPfTJY15jDLZvt96x28H2rXR27951eHFYs4HlQGKEgn.png);
}

.footer .tab-users a {
    background-image: url(OOUgiV9JqqYy0ZKkVHPyUsL4pIrNxJ1V1iBCjsyJFoG.png);
}

.footer .tab-users a:hover,
.footer .tab-users a:focus,
.footer .tab-users a:active,
.footer .tab-users a.active {
    background-image: url(CAUjnYKN9XqZlRflaG8Y3NtHVR1H06nkODQi0t971MX.png);
}

/**
 * Content Section
 * -------------------------------------------------- */
.content {
    min-height: 200px;
    padding: 20px 10px;

    -webkit-overflow-scrolling: touch;
}

.content,
.content:before,
.content:after,
.content *,
.content *:before,
.content *:after {
    box-sizing: border-box;
}

.content .full-width {
    margin-right: -10px;
    margin-left: -10px;
}

.content.full-screen {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;

    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.content.x-padding {
    padding: 20px;
}

.content.x-padding .full-width {
    margin-right: -20px;
    margin-left: -20px;
}

.content.tp-none {
    padding-top: 0;
}

.content.bp-none {
    padding-bottom: 0;
}

.content .loading,
.content .no-results {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    width: 50%;
    height: 20%;
    margin: auto;
    text-align: center;
}

.content .loading.static,
.content .no-results.static {
    position: static;
    min-height: 100px;
    padding-bottom: 20px;
    overflow: hidden;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.content .loading .fas,
.content .loading .far,
.content .loading .fab {
    margin-top: 7px;
}

.content .no-results-bg {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    background: white url(tZ6mHNyo6Zp2tTlslFw4Z1u0uuXVRSapd1Ic4BCZSu2.png) no-repeat center;
    background-size: contain;
}

.content .no-results-bg .no-result-img {
    width: 95%;
    height: 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.content .no-results-bg .no-result-text {
    margin-top: 10px;
    padding: 0 20px;
    font-size: 17px;
    line-height: 1.7;
    font-weight: bold;
}

.content .no-results-bg .no-result-text span.highlight {
    color: #00a8e0;
}

.content .no-results-bg.access .no-result-img {
    background-image: url(wnmFRoURIE80z0OF5jDooud0Kle007jWdSZwqQGELzV.svg);
}

.content .no-results-bg.locations .no-result-img {
    background-image: url(oP9VKjtMj2XHT9gxiKMafi0kaWjvI6tnzMLJ0Buo5A.png);
}

.content .no-results-bg.keys .no-result-img {
    background-image: url(WjSoRfoN0JVSUkj9qq7lszoSihxaD8uSe3johgh9WQ8.png);
}

.content .no-results-bg.smartbox .no-result-img {
    background-image: url(bxlObWBNCtznOLomiv8PwFqBpkvoBWcSe567cvZbevo.png);
}

.content .no-results-bg.integration .no-result-img {
    background-image: url(jhSXgn8DYU3y2GjRWktB40iSCPNyh8wZf1y5apnmuxj.png);
}

.content .no-results-bg.group .no-result-img {
    background-image: url(219bsxpWjUVxtSFtFzMe26sy7JWaa74qPmjLfegim5f.png);
}

.content .no-results-bg.user .no-result-img {
    background-image: url(DIbwUHQaotuVipx8gu20cqIbMBsGhnTMHMVUYxcHxzF.png);
}

.content .key-group-img {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(1CgxAz13dIEgYDT9SLuwNCf1fSm1Gc7YMlRF3W0CGPk.svg);
    background-size: 100%;
}
/**
 * Access List
 * -------------------------------------------------- */
.access-list {
    font-size: 1.1rem;
    color: #111;
}

.access-list .far,
.access-list .fas,
.access-list .fab {
    font-size: 1.5em;
}

.access-list a {
    display: block;
    color: #111;
}

.access-list,
.access-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.access-list a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 8px;
    padding: 10px 20px;
    text-align: left;
    border-radius: 5px;
    background-color: #ebebeb;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.access-list .access-icon {
    flex: 0 0 40px;

    -webkit-flex: 0 0 40px;
    -ms-flex: 0 0 40px;
}

.access-list .access-detail {
    flex: 1 1 auto;
    min-width: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.access-list .access-detail span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.access-list .access-more {
    font-size: 1.2em;
    flex: 0 0 30px;
    text-align: right;

    -webkit-flex: 0 0 30px;
    -ms-flex: 0 0 30px;
}

.access-list .access-duration {
    font-size: 1rem;
}

/**
 * Integration List
 * -------------------------------------------------- */

.integration-list a {
    color: #111;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 10px;
    padding: 13px 15px;
    text-align: left;
    border-radius: 5px;
    background-color: #ebebeb;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.integration-list .far,
.integration-list .fas,
.integration-list .fab {
    font-size: 1.5em;
    flex: 1;

    -webkit-flex: 1;
    -ms-flex: 1;
}

.integration-list .integration-more {
    display: flex;
    font-size: 1.2em;
    flex: 0 0 30px;
    text-align: right;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex: 0 0 30px;
    -ms-flex: 0 0 30px;
}

.integration-list .integration-detail {
    flex: 1 1 auto;
    min-width: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.integration-list .integration-detail span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.integration-list .integration-icon {
    flex: 0 0 35px;
    color: #ff5a5f;

    -webkit-flex: 0 0 35px;
    -ms-flex: 0 0 35px;
}

.integration-list .integration {
    background-repeat: no-repeat;
    background-size: 23px;
    background-position: 15px 14px;
    transition: none;
}

.integration-list .integration.airbnb {
    background-image: url("yDSxEfnAHTxFtyEBnMadgEhFdIx7EjLsI4q28lJxKaI.png");
}

.integration-list .integration.guesty {
    background-image: url("w8YaYQ2WGuKF9ccTKftDAYshs1FXotG9qRaUnnUJVBB.png");
}

.integration-list .integration.fleetio {
    background-image: url("XOckYzGZbqMwQVP6bESlG66BKyYwhq9zhc8PhMmBFr7.png");
}

.integration-list .integration.hostaway {
    background-image: url("JnhiKDad9wmMO8UYXly4iu3mKrXJp1i9H0tY7zc37mB.png");
}

.integration-list .integration.mews {
    padding-top: 9px;
    background-image: url("H90toTL3ndR9wQdkYrYbGFUdJA4UzW4Kh8jTwCsEH9K.png");
}

/**
 * Integration Success/Failure
 * -------------------------------------------------- */

.integration-success,
.integration-failure {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    font-size: 16px;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.integration-success .img-logo,
.integration-failure .img-logo {
    background: url(jhSXgn8DYU3y2GjRWktB40iSCPNyh8wZf1y5apnmuxj.png) no-repeat center;
    background-size: contain;
    width: 100%;
    margin-bottom: 20px;
    flex: 1;

    -webkit-flex: 1;
    -ms-flex: 1;
}

.integration-success .instructions,
.integration-failure .instructions {
    flex: 3;

    -webkit-flex: 3;
    -ms-flex: 3;
}

/**
 * Integration Connect
 * -------------------------------------------------- */

.integration-token {
    margin: 0 10px 20px 10px;
}

.fleetio-custom-instructions-table {
    padding: 10px;

    width: 100%;
    text-align: left;

}

.fleetio-custom-instructions-table {
    border-spacing: 0;
}

.fleetio-custom-instructions-table th {
    border-bottom: 1px solid #d9d9d9;

    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-weight: 500;
}

.fleetio-custom-instructions-table thead {
    border-spacing: 0 10px;
}

/** after psuedo element to add space between rows */
.fleetio-custom-instructions-table thead:after,
.fleetio-custom-instructions-table thead th:after {
    content: '';
    display: block;
    height: 6px;
}

.fleetio-custom-instructions-table tbody tr:after {
    content: '';
    display: block;
    height: 2px;
}


/**
 * Reservation/Property/Key Profile Lists
 * -------------------------------------------------- */

.property-list .property-action > div,
.key-profile-list .key-profile-action > div,
.reservation-list .reservation-action > div {
    font-size: 1.2em;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.property-list .property-action > div:hover,
.key-profile-list .key-profile-action > div:hover,
.key-profile-list .key-profile-action div.active,
.reservation-list .reservation-action > div:hover {
    color: #00a8e0;
}

.key-profile-list .key-profile-action .fas,
.key-profile-list .key-profile-action .far,
.key-profile-list .key-profile-action .fab,
.reservation-list .reservation-action .fas,
.reservation-list .reservation-action .far,
.reservation-list .reservation-action .fab {
    font-size: 1.5rem;
    padding-left: 8px;
    padding-right: 8px;
}

.property-list .property-action .fas,
.property-list .property-action .far,
.property-list .property-action .fab {
    font-size: 1.4rem;
    padding-left: 10px;
    padding-right: 10px;
}

/**
 * Reservation Info
 * -------------------------------------------------- */

.external-reservation-info .reservation-property {
    font-size: 1.3rem;
    padding: 10px 5px;
}

.external-reservation-info .btn-container {
    margin: 15px auto 15px;
}

/**
 * Property Info
 */
.external-property-info .external-property {
    font-size: 1.3rem;
    padding: 10px 5px;
}

.external-property-info .btn-container {
    margin: 15px auto 15px;
}

.external-property-info .fa{
    opacity: 100;
    font-size: 1em;
}


/**
 * Event List
 * -------------------------------------------------- */
.event-list {
    font-size: 1.1rem;
    color: #111;
}

.event-list,
.event-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-list li {
    margin: 0 0 8px;
    padding: 15px 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.event-list .event-date {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    color: #878787;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.event-list .event-date img {
    height: 2em;
}

/**
 * Location List
 * -------------------------------------------------- */
.location-list {
    font-size: 1.1rem;
    color: #111;
}

.location-list .fa {
    font-size: 1.5em;
}

.location-list,
.location-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.location-list .location-item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 10px;
    padding: 13px 15px;
    text-align: left;
    border-radius: 5px;
    background-color: #ebebeb;

    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.location-list .location-item a {
    color: #111;
}

.location-list .location-info {
    flex: 1 1 auto;
    min-width: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.location-list .location-info span {
    display: block;
}

.location-list .location-more {
    font-size: 1.2em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 0 0 30px;
    -webkit-flex: 0 0 30px;
    -ms-flex: 0 0 30px;
    cursor: pointer;
}

.location-list .location-more i {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 1;

    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.location-list .location-detail {
    padding-bottom: 0.5rem;
}

.location-list .location-name {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
}

.location-list .location-status {
    font-size: 0.9rem;
}

.location-list .location-status .fa {
    font-size: 1.1rem;
    width: 25px;
    text-align: center;
}

/**
 * Export/Import Lists
 * -------------------------------------------------- */

.export-list,
.import-list {
    font-size: 1.1rem;
    color: #111;
    margin-top: 10px;
}

.export-list,
.export-list li,
.import-list,
.import-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.export-list li,
.import-list li {
    margin: 0 0 8px;
    padding: 15px 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.export-list .export-date,
.import-list .import-date {
    font-family: 'MuseoSans-500', Arial, Helvetica, sans-serif;
    color: #878787;
}

.export-list .export-details,
.import-list .import-details {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.export-list .export-description,
.import-list .import-description {
    flex: 1 1 auto;
    min-width: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.export-list .export-status,
.import-list .import-status {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 0 0 30px;

    -webkit-flex: 0 0 30px;
    -ms-flex: 0 0 30px;
}

.export-list .export-status i,
.import-list .import-status i {
    font-size: 1.2em;
}

.import-list .import-action {
    -webkit-flex: 0 0 25px;
    -ms-flex: 0 0 25px;
    flex: 0 0 25px;
    cursor: pointer;
    text-align: right;
    color: #fc6608;
}

.import-list .import-error {
    font-size: 0.9em;
    padding-top: 20px;
}

/**
 * Permission / Group Membership Lists
 * -------------------------------------------------- */

.permission-list .permission-action > div,
.group-membership-list .group-membership-action > div {
    font-size: 1.2em;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.permission-list .permission-action > div:hover,
.group-membership-list .group-membership-action > div:hover {
    color: #00a8e0;
}

.permission-list .permission-action .fas,
.permission-list .permission-action .far,
.permission-list .permission-action .fab {
    font-size: 1.1rem;
    padding-left: 10px;
    padding-right: 10px;
}

.permission-list .permission-action .fas.fa-link {
    font-size: 1em;
}

.permission-list .permission-group {
    margin-top: 10px;
}

.group-membership-search {
    margin-bottom: 20px;
}

.group-membership-search input {
    font-family: "Font Awesome 5 Free", "MuseoSans-100", Arial, Helvetica, sans-serif;
    font-weight: 600;
}

.permission-input {
    position: relative;
}

.permission-list .permission-user.permission-user-active {
    cursor: pointer;
}

.permission-list .permission-user.permission-user-active:hover {
    color: #00a8e0;
}

.permission-description {
    white-space: pre-line;
}

/**
 * Sub List
 * -------------------------------------------------- */
.sub-list {
    font-family: "MuseoSans-100", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    color: #fff;
}

.sub-list,
.sub-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sub-list li {
    width: 100%;
    margin: 0 0 4px;
    text-align: left;
}

.sub-list .far,
.sub-list .fab,
.sub-list .fas {
    font-size: 1.5em;
    flex: 0 0 30px;
    margin-right: 17px;
    text-align: center;

    -webkit-flex: 0 0 30px;
    -ms-flex: 0 0 30px;
}

.sub-list a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 15px 25px;
    color: #fff;
    border-radius: 5px;
    background-color: #00a8e0;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.sub-list a:hover,
.sub-list a:focus,
.sub-list a:active {
    background-color: #0f7eba;
}

.sub-list a.disabled {
    pointer-events: none;
    opacity: 0.50;
    border-color: #00a8e0;
    background-color: #00a8e0;
}

.sub-list a span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sub-list .fas.fa-door-open {
    font-size: 1.3em;
}

.sub-list .fas.fa-users,
.sub-list .fas.fa-user-plus,
.sub-list .fas.fa-user-friends,
.sub-list .fas.fa-sitemap {
    font-size: 1.25em;
}

/**
 * Lists
 * -------------------------------------------------- */
.keys-list,
.cabinet-list,
.bin-list,
.location-list,
.bookings-list,
.invoice-list,
.integration-list,
.reservation-list,
.coupon-list,
.permission-list,
.group-list,
.group-membership-list,
.user-list,
.property-list,
.key-profile-list,
.timewindow-list,
.user-type-list,
.video-list {
    font-size: 1.1rem;
    color: #111;
}

.keys-list .fas,
.keys-list .far,
.keys-list .fab,
.cabinet-list .fas,
.cabinet-list .far,
.cabinet-list .fab,
.location-list .fas,
.location-list .far,
.location-list .fab {
    font-size: 1.5em;
}

.keys-list a,
.cabinet-list a,
.location-list a,
.group-list a,
.video-list a {
    color: #111;
}

.keys-list,
.keys-list li,
.cabinet-list,
.cabinet-list li,
.bin-list,
.bin-list li,
.location-list,
.location-list li,
.bookings-list,
.bookings-list li,
.invoice-list,
.invoice-list li,
.integration-list,
.integration-list li,
.reservation-list,
.reservation-list li,
.coupon-list,
.coupon-list li,
.permission-list,
.permission-list li,
.group-list,
.group-list li,
.group-membership-list,
.group-membership-list li,
.bin-code-list,
.user-list,
.user-list li,
.property-list,
.property-list li,
.key-profile-list,
.key-profile-list li,
.timewindow-list,
.timewindow-list li,
.alert-list,
.alert-list li,
.user-type-list,
.user-type-list li,
.video-list,
.video-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.keys-list a,
.cabinet-list a,
.bin-list a,
.location-list a,
.bookings-list a,
.invoice-list a,
.reservation-list a,
.coupon-list li,
.permission-list a,
.group-list a,
.group-membership-list a,
.user-list a,
.property-list a,
.key-profile-list a,
.alert-list a,
.user-type-list a,
.video-list li {
    color: #111;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 10px;
    padding: 13px 15px;
    text-align: left;
    border-radius: 5px;
    background-color: #ebebeb;

    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.invoice-list a {
    align-items: center;
}

.bin-list .bin-number,
.invoice-list .invoice-number {
    width: 45px;
    flex: 1 auto auto;
    min-width: 0;

    -webkit-flex: 1 auto auto;
    -ms-flex: 1 auto auto;
}

.bin-list .bin-contents,
.invoice-list .invoice-date {
    flex: auto;
    min-width: 0;

    -webkit-flex: auto;
    -ms-flex: auto;
}

.invoice-list .invoice-icons > * {
    flex-shrink: 0;

    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.keys-list .key-info,
.cabinet-list .cabinet-info,
.location-list .location-info,
.bookings-list .access-info,
.reservation-list .reservation-info,
.coupon-list .coupon-info,
.permission-list .permission-info,
.group-list .group-info,
.group-membership-list .group-membership-info,
.user-list .user-info,
.property-list .property-info,
.key-profile-list .key-profile-info,
.timewindow-list .timewindow-info,
.alert-list .alert-info,
.user-type-list .user-type-info {
    flex: 1 1 auto;
    min-width: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.keys-list .key-info span,
.cabinet-list .cabinet-info span,
.location-list .location-info span,
.bookings-list .access-info span,
.reservation-list .reservation-info span,
.coupon-list .coupon-info span,
.group-membership-list .group-membership-info span,
.property-list .property-info span,
.user-type-list .user-type-info span {
    display: block;
}

.keys-list .key-more,
.cabinet-list .cabinet-more,
.location-list .location-more,
.bookings-list .access-more,
.group-list .group-more,
.user-list .user-more,
.timewindow-list .timewindow-more,
.user-type-list .user-type-more {
    font-size: 1.2em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 0 0 30px;

    -webkit-flex: 0 0 30px;
    -ms-flex: 0 0 30px;
}

.keys-list .key-more i,
.cabinet-list .cabinet-more i,
.location-list .location-more i,
.bookings-list .access-more i,
.group-list .group-more i,
.user-list .user-more i,
.timewindow-list .timewindow-more i,
.user-type-list .user-type-more i {
    font-size: 1.5em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 1;

    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.cabinet-list .cabinet-more {
    flex-flow: column;

    -webkit-flex-flow: column;
    -ms-flex-flow: column;
}

.bin-list .bin-action,
.invoice-list .invoice-icons,
.reservation-list .reservation-action,
.permission-list .permission-action,
.group-membership-list .group-membership-action,
.key-profile-list .key-profile-action,
.property-list .property-action,
.alert-list .alert-action {
    display: flex;
    flex: 0 0 30px;
    cursor: pointer;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex: 0 0 30px;
    -ms-flex: 0 0 30px;
}

.bin-list .bin-action .fas,
.bin-list .bin-action .far,
.bin-list .bin-action .fab,
.cabinet-list .cabinet-more .cabinet-link .fas,
.cabinet-list .cabinet-more .cabinet-link .far,
.cabinet-list .cabinet-more .cabinet-link .fab,
.invoice-list .invoice-icons .fas,
.invoice-list .invoice-icons .far,
.invoice-list .invoice-icons .fab,
.group-membership-list .group-membership-action .fas,
.group-membership-list .group-membership-action .far,
.group-membership-list .group-membership-action .fab,
.alert-list .alert-action .fas,
.alert-list .alert-action .far,
.alert-list .alert-action .fab,
.video-list .cloud-video-buttons .fas,
.video-list .cloud-video-buttons .far,
.video-list .cloud-video-buttons .fab {
    font-size: 1.2rem;
    padding-left: 8px;
    padding-right: 8px;
}

.bin-list .bin-action .fas:hover,
.bin-list .bin-action .far:hover,
.bin-list .bin-action .fab:hover,
.cabinet-list .cabinet-more .cabinet-link .fas:hover,
.cabinet-list .cabinet-more .cabinet-link .far:hover,
.cabinet-list .cabinet-more .cabinet-link .fab:hover,
.invoice-list .invoice-icons .fas:hover,
.invoice-list .invoice-icons .far:hover,
.invoice-list .invoice-icons .fab:hover,
.reservation-list .reservation-action .fas:hover,
.reservation-list .reservation-action .far:hover,
.reservation-list .reservation-action .fab:hover,
.permission-list .permission-action .fas:hover,
.permission-list .permission-action .far:hover,
.permission-list .permission-action .fab:hover,
.group-membership-list .group-membership-action .fas:hover,
.group-membership-list .group-membership-action .far:hover,
.group-membership-list .group-membership-action .fab:hover,
.property-list .property-action .fas:hover,
.property-list .property-action .far:hover,
.property-list .property-action .fab:hover,
.key-profile-list .key-profile-action .fas:hover,
.key-profile-list .key-profile-action .far:hover,
.key-profile-list .key-profile-action .fab:hover,
.alert-list .alert-action .fas:hover,
.alert-list .alert-action .far:hover,
.alert-list .alert-action .fab:hover,
.video-list .cloud-video-buttons .fas:hover,
.video-list .cloud-video-buttons .far:hover,
.video-list .cloud-video-buttons .fab:hover {
    color: #00a8e0;
}

.bin-list .bin-action .active {
    color: #00a8e0;
}

.bin-list .bin-action .active:hover {
    cursor: default;
}

.bin-list .bin-action .disallow {
    opacity: 0.3;
    cursor: not-allowed;
}

.bin-list .bin-action .disallow:hover {
    opacity: 0.3;
    cursor: not-allowed;
}

.invoice-list .invoice-icons .invoice-pay-now,
.invoice-list .invoice-paid {
    border: 2px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
    padding: 0.4rem;
    cursor: pointer;

    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-weight: 300;
    line-height: 1.15;

    vertical-align: middle;
}

.invoice-list .invoice-icons .invoice-pay-now {
    color: #fff;
    background-color: #7D8D9C;
}

.invoice-list .invoice-icons .invoice-pay-now:hover {
    color: #fff;
    background-color: #0A3848;
}

.invoice-list .invoice-paid {
    color: #2A652C;
    background-color: #B1D467;
    border: 2px solid #2A652C;
}

.invoice-list .invoice-paid-icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}


.keys-list .key-detail,
.cabinet-list .cabinet-detail,
.location-list .location-detail,
.bookings-list .access-detail,
.group-list .group-detail,
.user-list .user-detail {
    margin-bottom: 1rem;
}

.keys-list .key-name,
.cabinet-list .cabinet-name,
.location-list .location-name,
.bookings-list .access-detail-title,
.reservation-list .reservation-property,
.reservation-list .reservation-dates,
.coupon-list .coupon-name,
.permission-list .permission-user,
.permission-list .permission-name,
.group-list .group-name,
.user-list .user-name,
.property-list .property-name,
.key-profile-list .key-name,
.alert-list .alert-name,
.user-type-list .name {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
}

.keys-list .key-description,
.keys-list .key-status,
.cabinet-list .cabinet-location,
.location-list .location-address,
.bookings-list .access-detail-subtitle,
.bookings-list .access-status,
.cabinet-list .cabinet-status,
.reservation-list .reservation-guests,
.coupon-list .coupon-status,
.permission-list .permission-role,
.permission-list .permission-group,
.group-list .group-status,
.group-membership-list .group-membership-address,
.property-list .property-nickname,
.user-list .user-status,
.user-type-list .description {
    font-size: 0.9rem;
}

.keys-list .key-status .fab,
.keys-list .key-status .far,
.keys-list .key-status .fas,
.location-list .location-status .fab,
.location-list .location-status .far,
.location-list .location-status .fas,
.bookings-list .access-status .fab,
.bookings-list .access-status .far,
.bookings-list .access-status .fas,
.cabinet-list .cabinet-status .fab,
.cabinet-list .cabinet-status .far,
.cabinet-list .cabinet-status .fas,
.coupon-list .coupon-status .fab,
.coupon-list .coupon-status .far,
.coupon-list .coupon-status .fas,
.group-list .group-status .fab,
.group-list .group-status .far,
.group-list .group-status .fas,
.permission-list .permission-group .fab,
.permission-list .permission-group .far,
.permission-list .permission-group .fas,
.permission-list .permission-name .fab,
.permission-list .permission-name .far,
.permission-list .permission-name .fas,
.user-list .user-status .fab,
.user-list .user-status .far,
.user-list .user-status .fas {
    font-size: 1.1rem;
    width: 25px;
    text-align: center;
}

.bookings-list .access-status .reservation {
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 5px 0;
    padding-left: 29px;
}

.bookings-list .access-status .reservation.airbnb {
    background-image: url("yDSxEfnAHTxFtyEBnMadgEhFdIx7EjLsI4q28lJxKaI.png");
}

.bookings-list .access-status .reservation.guesty {
    background-image: url("w8YaYQ2WGuKF9ccTKftDAYshs1FXotG9qRaUnnUJVBB.png");
}

.bookings-list .access-status .reservation.fleetio {
    background-image: url("XOckYzGZbqMwQVP6bESlG66BKyYwhq9zhc8PhMmBFr7.png");
}

.keys-list .key-name-only {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.keys-list .key-more .fa-link {
    font-size: 1em;
}

.keys-list .key-more .fa-link:hover {
    color: #00a8e0;
}

.keys-list .key-priority .fas {
    font-size: 1.2rem;
    padding-right: 10px;
    padding-bottom: 5px;
}

.video-list .cloud-video {
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

.video-list .cloud-video-row {
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 10px;
    gap: 1rem;
}

/**
 * Bin Release
 * -------------------------------------------------- */

.release-details {
    margin: 10px 0 20px;
    padding: 15px 20px;
    border-radius: 5px;
    background-color: #ebebeb;
    text-align: center;
}

.release-instructions {
    margin-bottom: 30px;
}

.release-instructions .touch-particle {
    background-image: url('pVg5Px5yRWVAr7AdwyC7nfW08JAmdK9UbmItFAdASj2.gif');
}

.release-instructions .touch-ms5 {
    background-image: url("tOM6sX5t1dgSqUlAavDn8Da2Ah2s0idWbEGWoHFzrCi.jpg");
}

.bin-action .btn-cancel {
    margin-top: 10px;
}

/**
 * Key Note
 * -------------------------------------------------- */
.multiple-lines {
    white-space: pre-line;
}

.note {
    font-size: 1.1em;
    display: block;
    width: 100%;
    padding: 15px 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/**
 * Location Details & Map
 * -------------------------------------------------- */
.map {
    position: relative;
}

.map-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.map-control {
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(100,100,100,.3);
    cursor: pointer;
    margin-right: 10px;
    text-align: center;
    width: 40px;
}

.map-control i {
    color: #878787;
    font-size: 16px;
    line-height: 38px;
    padding: 0 5px 0;
    -webkit-transition:color .3s ease-in-out;
    -o-transition:color .3s ease-in-out;
    transition:color .3s ease-in-out;
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);
}

.map-control i:hover {
    color: #00a8e0;
}

.aspect-ratio-7-4 {
    position: relative;
    margin-bottom: 1em;
}

.aspect-ratio-7-4:before {
    display: block;
    width: 100%;
    padding-top: 57.14286%;
    content: "";
}

.aspect-ratio-7-4-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@media (min-width: 992px) {
    .aspect-ratio-7-4:before {
        padding-top: 45%;
    }
}

.aspect-ratio-7-4 ul[rn-carousel] {
    height: 100%;
}

.center-cropped {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.fix-height {
    height: 170px;
}

.map-full-screen {
    flex: 1;

    -webkit-flex: 1;
    -ms-flex: 1;
}

address {
    font-style: normal;
    color: #00a8e0;
}

.timings .day {
    display: inline-block;
    width: 45px;
}

.map,
address,
.timings,
.capacity,
.directions,
.directionsButton {
    margin-bottom: 1rem;
}

.map-full-screen .location-details .si-content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
}

.map-full-screen .location-details .location-name {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    padding-right: 15px;
    padding-left: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.map-full-screen .location-details .location-link {
    font-size: 28px;
    padding: 6px 17px;
    color: #fff;
    border-radius: unset;
    background: #1595d8;
}

.carousel-indicator {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: -40px;
}

.margin-top-reset {
    margin-top: 0;
}

.reserve-message {
    margin: 0 0 8px;
    padding: 15px 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/**
* Phone Numbers List
* -------------------------------------------------- */
.phone-list {
    font-family: "MuseoSans-100", Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    color: #111;
}

.phone-list,
.phone-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.phone-list li {
    width: 100%;
    margin: 0 0 6px;
    text-align: left;
}

.phone-list a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 10px;
    color: #111;
    border-radius: 5px;
    background-color: #ebebeb;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.phone-list a:hover,
.phone-list a:focus,
.phone-list a:active {
    background-color: #d4d4d4;
}

.phone-list .iti__flag-box {
    flex: 0 0 35px;
    margin-right: 20px;
    -webkit-flex: 0 0 35px;
    -ms-flex: 0 0 35px;
}

.phone-list .iti__flag-box .iti__flag {
    box-shadow: none;
}

.phone-list .fab,
.phone-list .fas,
.phone-list .far {
    font-size: 1.5em;
    flex: 0 0 20px;
    text-align: center;
    color: #bbbbc1;
    -webkit-flex: 0 0 20px;
    -ms-flex: 0 0 20px;
}

.phone-list span {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}


/**
 * Icon Center
 * -------------------------------------------------- */
.icon-center {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    margin-bottom: 10px;
}

/**
 * Locales List
 * -------------------------------------------------- */
.locale-list .iti__flag-box {
    flex: 0 0 35px;
    margin-right: 20px;

    -webkit-flex: 0 0 35px;
    -ms-flex: 0 0 35px;
}

.locale-list .iti__flag-box .iti__flag {
    box-shadow: none;
}

.locale-list span {
    flex: 1 1 auto;
    min-width: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.locale-list-scrollable {
    overflow-y: scroll;
}
/**
 * Settings List
 * -------------------------------------------------- */
.settings-list, .resources-list {
    font-size: 1.1rem;
    color: #111;
}

.settings-list, .resources-list,
.settings-list li, .resources-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-list li, .resources-list li {
    width: 100%;
    margin: 0 0 6px;
}

.settings-list a, .resources-list a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 4px 12px 8px;
    color: #111;
    border-radius: 5px;
    background-color: #ebebeb;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.settings-list a:hover,
.settings-list a:focus,
.settings-list a:active {
    background-color: #d4d4d4;
}

.resources-list a:hover,
.resources-list a:focus,
.resources-list a:active {
    background-color: #d4d4d4;
    color: #00a7e0;
}

.resources-list span {
    flex: 1;
    min-width: 0;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.resources-list .kc-external-icon-svg {
    background: url("yJof85NbP3nOyp91mJosMHa59dkg88QENNlZN7QO4M.svg") no-repeat center;
    height: 20px;
    background-size: contain;
    margin-left: auto;
    flex: 0 0 20px;
    -webkit-flex: 0 0 20px;
    -ms-flex: 0 0 20px;
    margin-right: 2%;
}

.resources-list a:hover .kc-external-icon-svg,
.resources-list a:focus .kc-external-icon-svg,
.resources-list a:active .kc-external-icon-svg {
    background: url("JRgJo30quNdwj1LbCJLQ0pP8aLndBbT6yzSC5ZvRd8z.svg") no-repeat center;
}

.settings-list .fa-angle-right {
    font-size: 1.4em;
    flex: 0 0 15px;
    margin-right: 0;
    color: #bbbbc1;

    -webkit-flex: 0 0 15px;
    -ms-flex: 0 0 15px;
}

.settings-list span {
    flex: 1 1 auto;
    min-width: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.setting-box {
    margin: 0 0 8px;
    padding: 15px 20px;
    border-radius: 5px;
    background-color: #ebebeb;
}

.setting-box .title {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}

.setting-box hr {
    margin: 20px 0;
    color: #e1e1e1;
}

.onboarding .carousel-slide .setting-box {
    margin: 0 0 5px;
    padding: 5px 15px;
}

.setting-box h3 {
    margin-right: 5px;
}

.setting-box label {
    color: #3a3a3a;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.setting-box .orange {
    color: #dd5906;
}

.setting-box-small {
    margin: 0 0 4px;
    padding: 0 15px;
    border-radius: 5px;
    background-color: #ebebeb;
}

.setting-box .highlighted{
    color: #fff;
    background-color: #3a3a3a;
    border-radius: 5px;
    padding: 1px 6px;
    display: inline-block;
}

/**
 * Alert Boxes
 * -------------------------------------------------- */
.overlay {
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: rgba(0, 0, 0, 0.45);

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.overlay,
.overlay:before,
.overlay:after,
.overlay *,
.overlay *:before,
.overlay *:after {
    box-sizing: border-box;
}

.overlay .popup {
    font-size: 1rem;
    line-height: 1.4;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 84%;
    max-width: 600px;
    max-height: 95%;
    text-align: center;
    overflow: hidden;
    color: #111;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.02);

    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.overlay .popup-body {
    font-family: "MuseoSans-100", Arial, Helvetica, sans-serif;
    padding: 20px 15px 16px;
    overflow-y: scroll;
    scrollbar-width: none;
}

.overlay .popup-body h3 {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.17em;
}

.overlay .popup-body strong {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-weight: 500;
}

.overlay .popup-body::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.overlay .popup-footer {
    font-size: 1.1rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-top: 1px solid rgba(196, 196, 201, 0.4);

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.overlay .popup-footer a {
    display: block;
    flex: 1;
    padding: 10px 5px;
    color: #00a8e0;
    cursor: pointer;

    -webkit-flex: 1;
    -ms-flex: 1;
}

.overlay .popup-footer a:nth-child(2) {
    border-left: 1px solid rgba(196, 196, 201, 0.4);
}

.overlay .popup-footer a.disabled {
    color: #6c757d;
    pointer-events: none;
}

.overlay .alert-title {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.3;
}

.overlay .alert-msg {
    line-height: 1.3;
}

.overlay .alert-icon {
    width: 100%;
    height: 40px;
    padding: 0;
    margin-bottom: 15px;
}

.alert-icon.keycafe-icon {
    background: url(r2pAk8uasEYv7kA6UvHJHNLNV9uDdzDxbGhf5TF9eLa.png) no-repeat 50% 50%;
    background-size: contain;
}

.overlay.spinner-overlay {
    z-index: 20;
}

.overlay .popup.spinner {
    width: 75px;
}

.overlay .close {
    float: right;
    cursor: pointer;
    opacity: 0.5;
}

.overlay .close:hover {
    opacity: 0.75;
}

.overlay .popup-body .popup-buttons {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0 -15px -16px;
    border-top: 1px solid rgba(196, 196, 201, 0.4);
    display: -ms-flexbox;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
}

.overlay .popup-body .popup-buttons .input-group {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    flex: 1;
    margin: 0;
    background: none;
    display: -ms-flexbox;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.overlay .popup-body .popup-buttons .btn-link {
    -webkit-box-flex: 1;
    flex: 1;
    padding: 15px 5px;
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    border-radius: unset;

    -webkit-flex: 1;
    -ms-flex: 1;
}

.overlay .popup-body .popup-buttons .btn-link:nth-child(2) {
    border-left: 1px solid rgba(196, 196, 201, 0.4);
}

/**
 * Legal
 * -------------------------------------------------- */
.legal .content {
    width: 100%;
    height: 100%;
    padding: 0;

    -webkit-overflow-scrolling: touch;
}

.legal .content iframe {
    width: 100%;
    height: 99%;
    border: none;
}

/**
 * Transition Animations
 * -------------------------------------------------- */
@-webkit-keyframes slideForwardEnter {
    from {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slideForwardEnter {
    from {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes slideForwardLeave {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@keyframes slideForwardLeave {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@-webkit-keyframes slideBackEnter {
    from {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideBackEnter {
    from {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes slideBackLeave {
    from {
        z-index: 9999;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        z-index: 9999;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@keyframes slideBackLeave {
    from {
        z-index: 9999;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        z-index: 9999;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@-webkit-keyframes carouselNextEnter {
    from {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes carouselNextEnter {
    from {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes carouselNextLeave {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes carouselNextLeave {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-webkit-keyframes carouselPreviousEnter {
    from {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes carouselPreviousEnter {
    from {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes carouselPreviousLeave {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@keyframes carouselPreviousLeave {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
}

.slide-forward.ng-enter {
    -webkit-animation: slideForwardEnter 0.4s ease;
    animation: slideForwardEnter 0.4s ease;
}

.slide-forward-out {
    -webkit-animation: slideForwardLeave 0.4s ease;
    animation: slideForwardLeave 0.4s ease;
}

.slide-back.ng-enter {
    -webkit-animation: slideBackEnter 0.4s ease;
    animation: slideBackEnter 0.4s ease;
}

.slide-back-out {
    -webkit-animation: slideBackLeave 0.4s ease;
    animation: slideBackLeave 0.4s ease;
}

/**
 * Onboarding Screens
 * -------------------------------------------------- */
.page > div.onboarding-container {
    overflow-y: auto;
}

.onboarding {
    font-size: 15px;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow-x: hidden;
    min-height: 400px;
    padding: 0 25px;
}

.onboarding .progress {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transition: all ease-in-out 0.2s;
    background-color: #f1f1f1;
}

.onboarding .progress div {
    width: 0;
    height: 3px;
    transition: all ease-in-out 0.2s;
    background: #00a8e0;
}

.onboarding .logo {
    width: 100%;
    height: 200px;
    margin-bottom: 2em;
    background: url(RRPewtS9L2q49wFP8Kskdc63c3Ni3DuzhzSXOOBjOEs.png) no-repeat center;
    background-size: contain;
}

.onboarding .guest {
    width: 100%;
    height: 90px;
    margin-bottom: 1.5em;
    background: url(paF57FU8SypZiEzCtNen0IhMRhqOGeVYwo0B2OROZXe.png) no-repeat center;
    background-size: contain;
}

.onboarding .email {
    width: 100%;
    height: 90px;
    margin-bottom: 1.5em;
    background: url(b5eWIfFbSYFJ4gMm3YBoZHq1eNg5BJkLMxRJhbtdmfC.png) no-repeat center;
    background-size: contain;
}

.onboarding .credit {
    max-width: 300px;
    margin: 0 auto 1.5em;
}

@media (max-width: 480px) {
    .onboarding .credit {
        height: 180px;
    }
}

.onboarding .credit svg {
    height: 100%;
    display: block;
    margin: auto;
}

.onboarding .credit svg .trophy,
.onboarding .credit svg .credit-text {
   fill: #0f4b60;
}
.onboarding .credit svg .ribbon {
   fill: #bad2de;
}
.onboarding .credit svg .ribbon-shadow {
   fill: #3a7ca5;
}
.onboarding .credit svg .credit-text {
   font-size: 111.63px;
   font-family: MuseoSans-700, Museo Sans;
   font-weight: 700;
}

.onboarding .credit svg .trophy-success {
   fill: #FAA734;
}
.onboarding .credit svg .ribbon-success {
   fill: #C1D730;
}
.onboarding .credit svg .ribbon-shadow-success {
   fill: #3A7CA5;
}

.onboarding h1 {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    margin: 0.5em 0 1.5em;
}

.onboarding h2 {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    line-height: 1.5;
    margin: 0 0 1.5em;
}

.onboarding .btn-container {
    width: 100%;
    /* max-width: 260px; */
    margin: 0 auto 15px;
}

.onboarding .btn-container:last-child {
    margin-bottom: 0;
}

.onboarding .btn {
    font-size: 1.125rem;
    line-height: 1.2;
    padding: 0.75rem 0.6rem;
}

.onboarding .btn.btn-selected {
    color: #fff;
    border-color: #fc6608;
    background-color: #fc6608;
}

/* Derived from Microsoft's branding guidelines:
 * https://learn.microsoft.com/en-us/entra/identity-platform/howto-add-branding-in-apps#pictogram-and-sign-in-with-microsoft
 */
@font-face {
    font-family: "Segoe UI";
    font-weight: normal;
    font-style: normal;
    
    src: url("ngMK6tBL9re3cSMZl22ISTFUoI04qkyiflLVzSEcjrO.ttf")
}

.onboarding .btn-oauth-microsoft {
    width: 100%;
    height: 41px;
    padding: 0 12px;

    display: flex;
    align-items: center;
    gap: 12px;

    /* Font: Segoe UI Regular 15px */
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px; /* Reduced from recommended 15 to match Google */
    font-weight: 600;
    font-color: #5E5E5E;
    background-color: #FFFFFF;
    border: 1px solid #8C8C8C;
}

.onboarding .btn-oauth-microsoft:hover {
    background-color: #F2F2F2;
}

.onboarding .btn-oauth-microsoft > * {
    margin: 0;
}

.onboarding .btn-oauth-microsoft img {
    width: 21px;
    height: 21px;
}

.onboarding .btn-oauth-microsoft span {
    flex: 1;
}

.onboarding .small-text {
    font-size: 14px;
    line-height: 22px;
    margin-top: 30px;
}

.onboarding .carousel-slide {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-bottom: 50px;

    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.onboarding .carousel-slide .fa-lock {
    padding: 0 5px 0 2px;
}

.onboarding .carousel-slide-01 {
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
}

.onboarding .carousel-slide.ng-animate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-right: 25px;
    padding-left: 25px;
}

.onboarding .carousel.next .carousel-slide.ng-enter {
    -webkit-animation: carouselNextEnter 0.4s ease;
    animation: carouselNextEnter 0.4s ease;
}

.onboarding .carousel.next .carousel-slide.ng-leave {
    -webkit-animation: carouselNextLeave 0.4s ease;
    animation: carouselNextLeave 0.4s ease;
}

.onboarding .carousel.previous .carousel-slide.ng-enter {
    -webkit-animation: carouselPreviousEnter 0.4s ease;
    animation: carouselPreviousEnter 0.4s ease;
}

.onboarding .carousel.previous .carousel-slide.ng-leave {
    -webkit-animation: carouselPreviousLeave 0.4s ease;
    animation: carouselPreviousLeave 0.4s ease;
}

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

.onboarding .form-group + .btn-container {
    margin-top: -15px;
}

.onboarding .form-group label {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    top: 13px;
    left: 0;
    transition: all 0.3s linear;
    opacity: 0;
    color: gray;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.onboarding .form-group:not(.checkbox) label,
.onboarding .form-group:not(.toggle) label {
    z-index: -1;
}

.onboarding .form-group label.on {
    color: #00a8e0;
}

.onboarding .form-group label.show {
    top: -25px;
    opacity: 1;
    z-index: auto;
}

.onboarding .form-group input {
    transition: all 0.3s linear;
    outline: none;
    box-shadow: none;
}

.onboarding .form-group .small-text {
    margin-top: 10px;
}

.onboarding .form-group .cb,
.onboarding .form-group .rb {
    display: none;
}

.onboarding .form-group .cb:checked ~ label .fab,
.onboarding .form-group .rb:checked ~ label .fab,
.onboarding .form-group .cb:checked ~ label .far,
.onboarding .form-group .rb:checked ~ label .far,
.onboarding .form-group .cb:checked ~ label .fas,
.onboarding .form-group .rb:checked ~ label .fas {
    opacity: 1;
}

.onboarding .form-group.checkbox label,
.onboarding .form-group.radio label {
    cursor: pointer;
}

.onboarding .form-group.toggle {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.onboarding .form-group.toggle .switch {
    margin-left: 15px;

    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

.onboarding .form-group.toggle .switch.align-right {
    margin-left: auto;

    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

.onboarding .form-group.toggle label {
    font-size: 14px;
    font-weight: normal;
    line-height: 21px;
    position: relative;
    top: auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 1;
    padding: 0;
    opacity: 1;
    color: #3a3a3a;

    -webkit-flex: 1;
    -ms-flex: 1;
}

.onboarding .form-group.toggle .slider {
    background-color: #e6e6e6;
}

.onboarding .form-group.toggle input:checked + .slider {
    background-color: #00a8e0;
}

.onboarding input:focus,
.onboarding input:hover,
.onboarding input:active {
    border: 1px solid #00a8e0;
    outline: none;
}

.onboarding .tb {
    border: 1px solid #d9d9d9;
    border-radius: 7px;
}

.onboarding .tb-reveal-pwd {
    padding-right: 35px;
}

.onboarding .carousel {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 1;

    -webkit-flex: 1;
    -ms-flex: 1;
}

.onboarding .owl-nav {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 15px;
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 25px;
    left: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    transition: all 0.3s linear;
    text-align: center;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.onboarding .owl-nav .owl-prev,
.onboarding .owl-nav .owl-next {
    line-height: 45px;
    display: inline-block;
    width: 45px;
    height: 45px;
    margin: 0 30px;
    cursor: pointer;
    text-align: center;
    border-radius: 100%;
    background-color: #00a8e0;
}

.onboarding .owl-nav .owl-prev.disabled,
.onboarding .owl-nav .owl-next.disabled {
    background-color: #e6e6e6;
}

.onboarding .owl-nav .owl-prev,
.onboarding .owl-nav .owl-prev:hover,
.onboarding .owl-nav .owl-prev:focus,
.onboarding .owl-nav .owl-prev:active,
.onboarding .owl-nav .owl-next,
.onboarding .owl-nav .owl-next:hover,
.onboarding .owl-nav .owl-next:focus,
.onboarding .owl-nav .owl-next:active {
    color: #fff;
    outline: none;
}

.onboarding .owl-nav .owl-prev .fab,
.onboarding .owl-nav .owl-next .fab,
.onboarding .owl-nav .owl-prev .far,
.onboarding .owl-nav .owl-next .far,
.onboarding .owl-nav .owl-prev .fas,
.onboarding .owl-nav .owl-next .fas {
    line-height: 45px;
    position: relative;
}

.onboarding .owl-nav .owl-prev .fas:hover,
.onboarding .owl-nav .owl-prev .fas:focus,
.onboarding .owl-nav .owl-prev .fas:active,
.onboarding .owl-nav .owl-next .fas:hover,
.onboarding .owl-nav .owl-next .fas:focus,
.onboarding .owl-nav .owl-next .fas:active,
.onboarding .owl-nav .owl-prev .far:hover,
.onboarding .owl-nav .owl-prev .far:focus,
.onboarding .owl-nav .owl-prev .far:active,
.onboarding .owl-nav .owl-next .far:hover,
.onboarding .owl-nav .owl-next .far:focus,
.onboarding .owl-nav .owl-next .far:active,
.onboarding .owl-nav .owl-prev .fab:hover,
.onboarding .owl-nav .owl-prev .fab:focus,
.onboarding .owl-nav .owl-prev .fab:active,
.onboarding .owl-nav .owl-next .fab:hover,
.onboarding .owl-nav .owl-next .fab:focus,
.onboarding .owl-nav .owl-next .fab:active {
    outline: none;
}

.onboarding .owl-nav .owl-prev .fas,
.onboarding .owl-nav .owl-prev .far,
.onboarding .owl-nav .owl-prev .fab {
    left: -1px;
}

.onboarding .owl-nav .owl-next .fas,
.onboarding .owl-nav .owl-next .far,
.onboarding .owl-nav .owl-next .fab {
    left: 1px;
}

.onboarding .owl-nav a,
.onboarding .owl-nav a:hover,
.onboarding .owl-nav a:focus {
    display: block;
    color: #3a3a3a;
}

.onboarding .owl-nav .btn {
    padding: 0.75rem 1.5rem;
}

.onboarding .onboarding-map {
    width: 100%;
    min-height: 60vh;
    border: 1px solid rgba(0,0,0,0.05);

    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    margin: 0;
    padding: 0;
    -ms-flex-flow: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
}

@media (max-width: 400px) {
    .onboarding .onboarding-map {
        min-height: 50vh;
    }
}

.educate-onboarding .carousel-slide-no-nav {
    padding-bottom: 20px;
}

.educate-onboarding .form-group.toggle .switch {
    margin-left: 0;
    margin-right: 15px;

    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
}

.educate-onboarding p {
    text-align: center;
}

.educate-onboarding h1,
.educate-onboarding .educate-description,
.educate-onboarding .form-group.toggle label {
    font-weight: bold;
    color: #0f4b60;
    font-size: 1.1em;
}

.educate-onboarding .form-group.toggle label {
    font-size: 1em;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.educate-onboarding .title {
    margin-bottom: 10px;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.educate-onboarding h1 {
    text-align: center;
    font-weight: bolder;
    font-size: 1.6em;
    margin-bottom: auto;
}

.educate-onboarding input:disabled {
    color: #606060;
}

.educate-onboarding .educate-image {
    width: 100%;
    height: 60%;
}

.educate-onboarding .credit {
    margin: 0 auto;
}

.educate-onboarding .educate-image.educate-image-exchange {
    background: url(pI7Zr1k2B9YhNEeFblbNq6eM6yPii8ZGU8WHQUOJLji.png) no-repeat center;
    background-size: contain;
}

.setting-box .educate-image.educate-image-friends {
    min-height: 200px;
    height: 25vh;

    background: url(KKJI4TgwgtuOr3KMTmBEFbrbVkOddNcy3mCaHR6ChR4.png) no-repeat center;
    background-size: contain;
}

.educate-onboarding .educate-description {
    height: 20%;
}

.educate-onboarding .btn-container-full {
    max-width: 100%;
}

.educate-onboarding .btn-container:last-child {
    margin-bottom: 10px;
}

.educate-onboarding .carousel,
.educate-onboarding .carousel .carousel-slide {
    width: 100%;
}

.educate-onboarding .carousel .carousel-slide .spinner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    margin-bottom: 1em;
}

.educate-onboarding .carousel .carousel-slide .setting-box.referral-preview {
    margin: 0 0 1em;
    padding: 2em;
}

.educate-onboarding .carousel .carousel-slide .setting-box.referral-preview p {
    margin: 0.5em 0;
}

.iti-mobile .intl-tel-input .country-list {
    width: 87% !important;
}

.animated {
    -webkit-animation-duration: 500ms !important;
    animation-duration: 500ms !important;
}

.btn-show-password {
    font-size: 1.2em;
    position: absolute;
    top: 12px;
    right: 10px;
    padding: 2px;
    cursor: pointer;
    color: gray;
    border: none;
    outline: none;
    background: transparent;
}

.onboarding .logged-in {
    text-align: center;
    margin-top: 30px;
}

.onboarding .logged-in h2 {
    font-size: 18px;
}

.onboarding .logging-in {
    text-align: center;
}

.onboarding .logging-in h2 {
    font-size: 18px;
    margin-bottom: 100px;
}

.onboarding .btn-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 16px 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #fff;
    background: transparent;
    color: #3a3a3a;
}

.onboarding .btn-card:hover,
.onboarding .btn-card:focus {
    border: 1px solid #07a7e0;
    background: transparent;
    color: #3a3a3a;
}

.onboarding .btn-card-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70px;
    flex: 0 0 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 70px;
    margin: 0 18px 0 0;
    background-color: #fff;
    border-radius: 50%;
}

.onboarding .btn-card-img .hover {
    display: none;
}

.onboarding .btn-card:hover .btn-card-img .regular,
.onboarding .btn-card:focus .btn-card-img .regular {
    display: none;
}

.onboarding .btn-card:hover .btn-card-img .hover,
.onboarding .btn-card:focus .btn-card-img .hover {
    display: block;
}

@media (max-width: 350px) {
    .onboarding .btn-card-img {
        display: none;
    }
}

.onboarding .btn-card h3 {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 0;
    text-align: left;
}

.onboarding .btn-card:hover h3,
.onboarding .btn-card:focus h3 {
    color: #07a7e0;
}

.onboarding .btn-card p {
    text-align: left;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
}

.onboarding-banner {
    border-radius: 8px;
    margin-bottom: 25px;
    overflow: hidden;
}

.onboarding-banner img {
    width: 100%;
}

.onboarding-banner + h2 {
    margin-bottom: 25px;
}

.onboarding-banner + h2 + p {
    margin-top: -10px;
}

.onboarding .skip {
    color: #bab4b7 !important;
    text-decoration: underline;
}

.onboarding .skip:hover,
.onboarding .skip:focus {
    text-decoration: none;
}

.onboarding .input-group-cc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    border: 1px solid #d9d9d9;
    border-radius: 7px;
}

.onboarding .input-group-cc:focus,
.onboarding .input-group-cc:hover,
.onboarding .input-group-cc:active {
    border: 1px solid #00a8e0;
}

.onboarding .input-group-cc .tb {
    border: 0;
}

.onboarding .input-group-cc input:focus,
.onboarding .input-group-cc input:hover,
.onboarding .input-group-cc input:active {
    border: 0;
}

.onboarding .input-group-cc #card-number {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.onboarding .input-group-cc #card-expiry {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75px;
    flex: 0 0 75px;
}

.onboarding .input-group-cc #card-cvc {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 55px;
    flex: 0 0 55px;
}

.onboarding .form-group .range {
    width: 100%;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.onboarding .form-group .range input {
    width: 100%;
    position: relative;
    top: -1px;
    margin: 15px 0;
    -webkit-appearance: none;
}

.onboarding .form-group .range input:hover,
.onboarding .form-group .range input:focus,
.onboarding .form-group .range input:active {
    border: 0;
}

.onboarding .form-group .range input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: -8px 0 0;
    border-radius: 50%;
    border: 2px solid #07a7e0 !important;
    background: #fff;
    cursor: pointer;
}

.onboarding .form-group .range input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    margin: -8px 0 0;
    border-radius: 50%;
    border: 2px solid #07a7e0 !important;
    background: #fff;
    cursor: pointer;
}

.onboarding .form-group .range input::-ms-thumb {
    width: 18px;
    height: 18px;
    margin: -8px 0 0;
    border-radius: 50%;
    border: 2px solid #07a7e0 !important;
    background: #fff;
    cursor: pointer;
}

.onboarding .form-group .range input::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #a4bab7;
}

.onboarding .form-group .range input::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #a4bab7;
}

.onboarding .form-group .range input::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #a4bab7;
}

.onboarding .form-group .range input:focus {
    background: none;
    outline: none;
}

.onboarding .form-group .range .range-tick,
.onboarding .form-group .range:before,
.onboarding .form-group .range:after {
    font-family: MuseoSans-700, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #0d4b60;
}

.onboarding .form-group .range:before,
.onboarding .form-group .range:after {
    font-family: MuseoSans-700, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #a4bab7;
    position: absolute;
    bottom: 0;
    display: inline-block;
}

.onboarding .form-group .range:before {
    left: 0;
    content: attr(data-min);
}

.onboarding .form-group .range:after {
    right: 0;
    content: attr(data-max);
}

/**
 * Font for Google Signin Button
 */
@font-face {
    font-family: "Roboto";
    font-weight: normal;
    font-style: normal;
    
    src: url("dswIbN5x3yMaFJJ0DEvNiGr4qFw4ghl4mKhizfUdRXq.ttf")
}

/**
 * Google Signin Button.
 *
 * CSS copied from Google's branding guidelines, do not change.
 *
 * Slightly modified to remove the 400px max width. This seems to be permitted
 * by the guidelines.
 * -------------------------------------------------- */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

/**
 * CTA Bottom Fixed
 * -------------------------------------------------- */
.cta-btm-fixed {
    font-size: 13px;
    line-height: 1.3;
    position: fixed;
    right: 0;
    bottom: 50px;
    left: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 25px 10px 10px;
    color: #6d6e70;
    background-color: #c7d51f;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.cta-btm-fixed > div {
    margin: 0 5px;
}

.cta-btm-fixed .store-badge {
    line-height: 0;
    flex: 0 0 120px;

    -webkit-flex: 0 0 120px;
    -ms-flex: 0 0 120px;
}

.store-badge > .android {
    width: 120px;
    height: 40px;
    background: url("ASfHoEkbLChmFM2EPCdqUw5bphUPJYJNTTdVof7zQCc.png") no-repeat center;
    background-size: contain;
}

.store-badge > .apple {
    width: 120px;
    height: 40px;
    background: url("OZBgIfoisrzileJNVxiLPAUXJYjKCtcSHvPYWDkISh3.svg") no-repeat center;
    background-size: contain;
}

.cta-btm-fixed h5 {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 0;
    color: #424043;
}

.cta-btm-fixed p {
    margin: 0;
}

.cta-btm-fixed .cta-close {
    font-size: 1.2em;
    position: absolute;
    top: 10px;
    right: 10px;
}

.cta-btm-fixed .fa-times {
    color: #fff;
}

.cta-btm-fixed.ng-hide {
    transform: translateX(100%);

}

.cta-btm-fixed.ng-hide-add,
.cta-btm-fixed.ng-hide-remove {
    transition: transform 0.4s;
}

/**
 * Exchange
 * -------------------------------------------------- */
.content-exchange {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
}

.exchange-container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex: 1;

    -webkit-flex: 1;
    -ms-flex: 1;
}

.exchange {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 1;

    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.exchange > .btn-group {
    margin-top: auto;
}

.exchange > .btn-group > .btn-block-wrap {
    margin: 1rem;
}

.exchange .instructions {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.exchange .instructions .title {
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
}

.exchange .instructions input {
    text-transform: uppercase;
    text-align: center;
}

.exchange .instructions .important {
    color: #7f1e21;
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;;
}

.exchange .img.available {
    background-image: url("ecy29SHgIR8aaVju2Bqh87E7uG17ABYTFUVEg0igb7r.png");
    background-size: contain;
}

.exchange .img.close {
    background-image: url("sdp5MoeG35GqXhqS71fkIjV0nsms4nrp4NLtdU4PWeQ.jpg");
}

.exchange .img.scan {
    background-image: url("7P1g9kvDoishfmaVzHpnYqE6Kkt1nVCGB3BuLbBUlGh.jpg");
}

.exchange .img.scan-particle {
    background-image: url("OWcqNdUB8APl0bQcy2cOqwN5gN6D6kTs7QYo9dK4mWZ.jpg");
}

.exchange .img.scan-waypoint {
    background-image: url("VUCoDs6thKIod1O5HkIUF9JPVTgnpTtQUmyIJXATosE.png");
}

.exchange .img.scan-ms5 {
    background-image: url("MbSj6rU868gnLZNfWbdupUi1Jl0rt1iDYBfzBTy6DI0.jpg");
}

.exchange .img.take {
    background-image: url("84q4aiuYJ8wMy02HSPEBau3eO77oBAN0dfomWH0K5QR.jpg");
}

.exchange .img.touch {
    background-image: url("jrgyS0EwdqmFElhgLJOXitxGTvux4BxoQkkv8vCP44P.jpg");
}

.exchange .img.ms5-enter-code {
    background-image: url("bELKL67LFZkPeGBrfUoDXRwRY7LDJNkQG3D59W1hJLI.jpg");
}

.exchange .img.touch-particle {
    background-image: url("pVg5Px5yRWVAr7AdwyC7nfW08JAmdK9UbmItFAdASj2.gif");
}

.exchange .img.touch-waypoint {
    background-image: url("4Ttr925Zba3ynHiDiXzLyCFm3EONIzzdu2RbddjD5aY.png");
}

.exchange .img.touch-ms5 {
    background-image: url("tOM6sX5t1dgSqUlAavDn8Da2Ah2s0idWbEGWoHFzrCi.jpg");
}

.exchange .img.fob {
    background-image: url("fCzSiw60XkgVqG4WmnE91Td5gwLrgulzHbPjWx2TQW6.jpg");
}

.exchange .img.attach {
    background-image: url("5Fm2VkcqdcKgJFzAjdnbpSLuVKQV2DIJztez645LN7P.jpg");
}

.exchange-error {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.exchange-error .img {
    height: 100px;
    margin: 25px 0 35px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("SwWBKk54BLOTc1OrDhMWYJmD8TvmOkm4YA7Bm88ynSe.png");
}

.exchange-error .instructions {
    font-size: 1.05em;
}

/**
 * Export
 * -------------------------------------------------- */

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

.export-form .btn {
    margin-top: 20px;
}

/**
 * Import
 * -------------------------------------------------- */

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

.import-form .btn {
    margin-top: 20px;
}

.import-form .import-file {
    font-size: 1rem;
}

/*
 * Communication Slides
 * -------------------------------------------------- */
.communication {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: calc(100vh - 134px);

    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.communication > .btn-group {
    margin-top: auto;
}

.communication .instructions {
    font-size: 1.05em;
    margin-bottom: 10px;
}

.communication .instructions.smaller-text {
    font-size: 0.9em;
}

.communication .instructions .title {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-size: 1.2em;
}

.communication .instructions .important {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    color: #bf1e2e;
}

.communication .instructions p {
    margin-top: 0;
}

.communication .instructions p:last-child,
.communication .instructions ul:last-child {
    margin-bottom: 0;
}

.communication .img {
    height: 100px;
    margin: 25px 0 35px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.communication .img.support {
    background-image: url("OjIRWRrdBJSRhxzsI0RnPsBRgXDUzR5b98oyaZc0WCc.png");
}

.communication .btn {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 0;
}

.communication .btn-block-wrap {
    margin: 1rem;
}

/**
 * Verification Slides
 * -------------------------------------------------- */
.verification {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: calc(100vh - 134px);

    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.verification > .btn-group {
    margin-top: auto;
}

.verification .instructions {
    font-size: 1.05em;
    margin-bottom: 10px;
}

.verification .instructions .title {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-size: 1.2em;
}

.verification .instructions .important {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    color: #bf1e2e;
}

.verification .instructions .comment {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
}

.verification .instructions p {
    margin-top: 0;
}

.verification .instructions p:last-child,
.verification .instructions ul:last-child {
    margin-bottom: 0;
}

.verification .img {
    height: 100px;
    margin: 25px 0 35px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.verification .img.steps {
    background-image: url("JEcY9YiByFYob3uEZOU5SakIumWDvqmlMyrNpdYyTjE.png");
}

.verification .img.center-cropped {
    height: 100%;
    margin: 0;
}

@media (max-width: 599px) {
    .verification .img.center-cropped {
        background-size: cover;
    }
}

.verification .btn {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
}

.verification .btn-block-wrap {
    margin: 1rem;
}

.security .carousel-slide.ng-animate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px 10px;
    overflow-y: hidden;
}

.security .carousel.next .carousel-slide.ng-enter {
    -webkit-animation: carouselNextEnter 0.4s ease;
    animation: carouselNextEnter 0.4s ease;
}

.security .carousel.next .carousel-slide.ng-leave {
    -webkit-animation: carouselNextLeave 0.4s ease;
    animation: carouselNextLeave 0.4s ease;
}

.security .carousel.previous .carousel-slide.ng-enter {
    -webkit-animation: carouselPreviousEnter 0.4s ease;
    animation: carouselPreviousEnter 0.4s ease;
}

.security .carousel.previous .carousel-slide.ng-leave {
    -webkit-animation: carouselPreviousLeave 0.4s ease;
    animation: carouselPreviousLeave 0.4s ease;
}

/*
 * Checklist
 * -------------------------------------------------- */
.checklist {
    margin: 0 0 0 0.5em;
    padding: 0;
    list-style: none;
    text-align: left;
    display: inline-block;
}

.checklist li {
    line-height: 1.6;
    position: relative;
    margin: 0;
    padding: 0 0 0.25em 1.75em;
}

.checklist li::before {
    font-family: 'Font Awesome 5 Free';
    font-size: 1.2em;

    position: absolute;
    top: -5px;
    left: 0;
    content: "\f111";
    color: rgba(163, 163, 163, 0.3);
}

.checklist li::after {
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 9px;
    width: 1px;
    height: calc(100% - 18px);
    content: "";
    background-color: #00a8e0;
}

.checklist li.finished::before {
    content: "\f058";
}

.checklist li.finished::before,
.checklist li.current::before,
.checklist li.skipped::before {
    color: #00a8e0;
}

.checklist li:last-child::after,
.checklist li.current::after,
.checklist li.current ~ li::after {
    display: none;
}

.checklist li a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.access-list .fa-angle-right,
.bookings-list .fa-angle-right,
.keys-list .fa-angle-right,
.settings-list .fa-angle-right,
.phone-list .fa-angle-right,
.bin-list .fa-angle-right,
.cabinet-list .fa-angle-right,
.location-list .fa-angle-right,
.integration-list .fa-angle-right,
.reservation-list .fa-angle-right,
.group-list .fa-angle-right,
.user-list .fa-angle-right,
.property-list .fa-angle-right,
.timewindow-list .fa-angle-right,
.user-type-list .fa-angle-right {
    -webkit-text-stroke: 2px #ebebeb;
}

.access-list .fa-link {
    font-size: 1em;
}

.access-list .fa-link:hover {
    color: #00a8e0;
}

.owl-next .fa-angle-right {
    -webkit-text-stroke: 2px #00a8e0;
}

.owl-next.disabled .fa-angle-right {
    -webkit-text-stroke: 2px #e6e6e6;
}

.owl-prev .fa-angle-left {
    -webkit-text-stroke: 2px #00a8e0;
}

.owl-prev.disabled .fa-angle-left {
    -webkit-text-stroke: 2px #e6e6e6;
}

.header .nav-left .fa-angle-left {
    -webkit-text-stroke: 2px #f9f9f9;
}

/**
 * API Settings
 * -------------------------------------------------- */

.api-btn button:nth-child(n+2) {
    margin-top: 5px;
}

/**
 * Dropoff Survey
 */
.survey .survey-question h2 {
    text-align: center;
}

/* Cabinet settings */
.setting-box #supportText {
    width: 100%;
}

/**
 * Stripe
 */

#payment-element.input-group {
    padding: 12px 10px;
}

/*
 * Access Success
 * -------------------------------------------------- */

.access-success .input-section-btns {
    margin-top: 10px;
}

.btn.btn-copy {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    border-color: #d9d9d9;
    background-color: #ebebeb;
    color: #3a3a3a;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.btn.btn-copy:hover {
    color: #3a3a3a;
    border-color: #3a3a3a;
    background-color: #d1d1d1;
}

.btn.btn-copy > span {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.btn.btn-copy > i {
    font-size: 1.2em;
    opacity: 1;
}

.btn.btn-copy .iti__flag-box,
.btn.btn-copy .iti__country-name {
    margin-right: 0;
}

.access-success .iti__flag-box {
    flex: 0 0 35px;
    -webkit-flex: 0 0 35px;
    -ms-flex: 0 0 35px;
}

.access-success .iti__flag-box .iti__flag {
    box-shadow: none;
}

.onboarding.guest-onboarding {
    font-size: 16px;
}

.onboarding.guest-onboarding .carousel-slide {
    padding-bottom: 60px;
}

.onboarding.guest-onboarding .carousel-slide.carousel-slide-04 {
    padding-bottom: 10px;
}

.onboarding.guest-onboarding .instructions {
    font-size: 1.1em;
}

.onboarding.guest-onboarding .guest-instructions {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.onboarding.guest-onboarding .guest-instructions .title {
    display: flex;
    flex: 2;
    flex-direction: column;
    justify-content: center;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex: 2;
    -ms-flex: 2;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
}

.onboarding.guest-onboarding .guest-instructions .title > h2 {
    margin: 0;
}

.onboarding.guest-onboarding .guest-instructions .instructions {
    display: flex;
    flex: 4;
    flex-direction: column;
    justify-content: center;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex: 4;
    -ms-flex: 4;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
}

.onboarding.guest-onboarding .slide-img {
    flex: 8;
    -webkit-flex: 8;
    -ms-flex: 8;
}

.onboarding.guest-onboarding .slide-img.slide-1 {
    background: url(4GG2q4bUsuEE8dSoJZv5vmBUjJOno16qKXFvxrn2aY5.png) no-repeat center;
    background-size: contain;
    width: 100%;
}

.onboarding.guest-onboarding .slide-img.slide-2 {
    background: url(fZTAZ1ajxjiq8Z3cs8grCBlzSxtguG3ayq643RDQDHY.png) no-repeat center;
    background-size: contain;
    width: 70%;
}

.onboarding.guest-onboarding .slide-img.slide-3 {
    background: url(xRLjLu5d4t7v6GYPEEERH6WtUO55gFyK3BAwuoLMfM5.png) no-repeat center;
    background-size: contain;
    width: 80%;
}

.onboarding.guest-onboarding .slide-4 {
    background: url(AXa9zeFVgu4wvEjHAKDkHMskRClIm8jZ71LmecEUrJ1.png) no-repeat center;
    background-size: contain;
    margin-top: 1em;
    margin-bottom: 2em;
    height: 80px;
    min-height: 30px;
}

/*
 * Billing
 * -------------------------------------------------- */

.input-section.billing-payment-method label .fas,
.input-section.billing-payment-method label .fab,
.input-section.billing-payment-method label .far {
    font-size: 1.4em;
}

.input-section.billing-payment-method .input-group .action-icons {
    display: inline-flex;
    float: right;
}

.input-section.billing-payment-method .input-group .action-icons .fas,
.input-section.billing-payment-method .input-group .action-icons .fab,
.input-section.billing-payment-method .input-group .action-icons .far {
    opacity: 1;
    font-size: 1.4em;
    color: #5a5a5a;
    margin-left: 10px;
    cursor: pointer;
}

.input-section.billing-payment-method .input-group .action-icons .fas:hover,
.input-section.billing-payment-method .input-group .action-icons .fab:hover,
.input-section.billing-payment-method .input-group .action-icons .far:hover {
    color: #000000;
}

.input-section.credit-purchase .input-group .action-icons .fas:hover {
    color: #000000;
}

.input-section.credit-purchase label .fas {
    font-size: 1.4em;
}

.input-section.credit-purchase .input-group .action-icons {
    display: inline-flex;
    float: right;
}

.input-section.credit-purchase .input-group .action-icons .fas {
    opacity: 1;
    font-size: 1.4em;
    color: #5a5a5a;
    margin-left: 10px;
    cursor: pointer;
}

.action-icons .disabled {
    pointer-events: none;
    color: #a3a3a3 !important;
}

.billing-conversion-title {
    font-size: 1.4em;
    font-weight: bold;
    color: #0d4b60;
    text-align: center;
}

.billing-conversion-image {
    background-image: url("9vqRXprOybWO6d12KG4qJMyc4SB7uIGJjVCG7b2eJwl.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 70%;
}

.billing-conversion-pricing-message {
    font-size: 0.85em;
    text-align: center;
}

.billing-conversion-credit {
    font-size: 1.4em;
    font-weight: bold;
    color: #0d4b60;
    text-align: center;
    margin-top: 20px;
}

.input-section.billing-hint {
    margin-top: 20px;
    margin-bottom: 30px;
}

.input-section.billing-hint > a:hover,
.input-section.billing-hint > a:focus,
.input-section.billing-hint > a:active {
    color: #00a8e0;
}

/**
 * Cabinet Link
 * -------------------------------------------------- */

.cabinet-serial-number {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.cabinet-serial-number .input-group {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.cabinet-serial-number .fas {
    font-size: 1.1em;
    padding-left: 7px;
    padding-right: 7px;
}

/**
 * Key Upgrade
 * -------------------------------------------------- */

.setting-box .key-upgrade-price {
    text-align: right;
    color: #dd5906;
    margin-bottom: 1em;
}

.setting-box .key-upgrade-price h1 {
    font-weight: bold;
    margin: 0;
}

.setting-box .key-upgrade-price h3 {
    margin: 0;
}

.setting-box .key-upgrade-price p {
    margin: 0;
}

.setting-box .key-upgrade-price.left {
    text-align: left;
}


/**
 * Key Setup
 * -------------------------------------------------- */

.setting-box .key-setup-smartbox {
    height: 200px;
    background-image: url(bxlObWBNCtznOLomiv8PwFqBpkvoBWcSe567cvZbevo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/**
 * Billing Settings
 * -------------------------------------------------- */

.vat-status-icon {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: inline-block;
}

.vat-status-icon.VERIFIED {
    background-color: #C1D730;
}

.vat-status-icon.PENDING {
    background-color: #FAA734;
}

.vat-status-icon.UNVERIFIED,
.vat-status.icon.UNAVAILABLE {
    background-color: #E84855;
}

/**
 * Trophy credit svg
 * -------------------------------------------------- */
.credit {
    max-width: 300px;
    margin: 0 auto 1.5em;
}

@media (max-width: 480px) {
    .credit {
        height: 180px;
    }
}

.credit svg {
    height: 100%;
    display: block;
    margin: auto;
}

.credit svg .trophy,
.credit svg .credit-text {
   fill: #0f4b60;
}
.credit svg .ribbon {
   fill: #bad2de;
}
.credit svg .ribbon-shadow {
   fill: #3a7ca5;
}
.credit svg .credit-text {
   font-size: 111.63px;
   font-family: MuseoSans-700, Museo Sans;
   font-weight: 700;
}

.credit svg .trophy-success {
   fill: #FAA734;
}
.credit svg .ribbon-success {
   fill: #C1D730;
}
.credit svg .ribbon-shadow-success {
   fill: #3A7CA5;
}

/**
 * Coupon list
 * -------------------------------------------------- */
.coupon-list .coupon-info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.coupon-list .coupon-detail {
    width: 80%
}

.coupon-list .coupon-status {
    width: 20%;
}

.coupon-list .coupon-status > span {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    width: 100%;
    height: 100%;
}

.coupon-list .coupon-status .fas,
.coupon-list .coupon-status .far,
.coupon-list .coupon-status .fab {
    width: auto;
    font-size: 3.5em;
}

.coupon-list .coupon-status .fa-times {
    color: #999999;
}

.coupon-list .coupon-icon {
    width: 20px;
    height: 20px;
    background-image: url("Jc6n8rGXakzS3M2MoKp9CuswFMFOxucUU2EUznv2IWc.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    display: inline-block;
    float: left;
}

.coupon-list .coupon-discount-check {
    width: 100%;
    max-width: 50px;
    height: 100%;
    max-height: 50px;

    background-image: url("5YavafLSwvtZs1fuWGvsiYOdxcXBF0ZXGEPyt2FlBDn.png");
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-position: center;
}

/**
 * Keycafe Admin Mobile
 * -------------------------------------------------- */

.setting-box .scanned-smartbox {
    text-align: center;
}

.setting-box .scanned-smartbox i {
    padding-right: 5px;
}

/**
 * Autocomplete
 * -------------------------------------------------- */

.autocomplete-items .autocomplete-item {
    border-top: 1px solid #d9d9d9;
}

/**
 * Dropdowns
 * -------------------------------------------------- */

.dropdown {
    position: relative;
}

.dropdown > .dropdown-menu {
    display: none;
}

.dropdown.open > .dropdown-menu {
    display: block;
}

.dropdown-menu {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 160px;
    padding: 0;
    margin: 2px 0 0;
    text-align: left;
    list-style: none;
    background-color: #ffffff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #cccccc;
    border-radius: 7px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.dropdown-menu > li:first-of-type {
    border: none;
}

.dropdown-menu > li {
    font-size: 1.1em;
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: none;
    background: transparent;
    border-top: 1px solid #d9d9d9;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

[uib-typeahead-popup].dropdown-menu > li.uib-typeahead-match {
    display: block;
    width: 100%;
    padding: 12px 10px;
}

.dropdown-item {
    display: block !important;
    width: 100%;
    color: #000000;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #000000;
    text-decoration: none;
}

.dropdown-icon {
    font-size: 1em !important;
}

[uib-typeahead-popup].dropdown-menu > .uib-typeahead-match strong {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
}

[uib-typeahead-popup].dropdown-menu > .uib-typeahead-match > span {
    display: block;
    cursor: pointer;
}

[uib-typeahead-popup].dropdown-menu > .uib-typeahead-match > span.details {
    font-size: 0.9rem;
}

/**
 * Subscription plans
 * -------------------------------------------------- */

.subscription-plan-pricing-table {
    width: 100%;
    text-align: left;
}

/* Page - Purchase
 * -------------------------------------------------- */

.table-full-width {
    table-layout: fixed;
    width: 100%;
}

@media (max-width: 992px) {
    .table-full-width tr td {
        display: block;
    }
}

.source-options {
    margin: 20px 0 30px 0;
    padding: 0;
    font-size: 1.1rem;
    color: #111;
}

.source-options li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.source-options a {
    display: flex;
    align-items: center;
    color: #111;
    cursor: pointer;
    margin: 0 0 10px;
    padding: 13px 15px;
    text-align: left;
    border-radius: 5px;
    background-color: #ebebeb;
    outline: none;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.source-options a:hover,
.source-options a:focus,
.source-options a:active,
.source-options .selected {
    background-color: #d4d4d4;
}

.source-options span {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 50px;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.source-options .fa-check {
    font-size: 1.4em;
    flex: 0 0 15px;
    margin-right: 0;

    -webkit-flex: 0 0 15px;
    -ms-flex: 0 0 15px;
}

.source-options .option .card-option-expiry {
    text-align: right;
    padding-right: 8px;
}

.source-options .option i.chosen-option-icon {
    width: 25px;
}

.source-options .option .fab:not(.fa-check),
.source-options .option .fas:not(.fa-check),
.source-options .option .far:not(.fa-check) {
    font-size: 1.4em;
}

.table-full-width td.shaded {
    margin: 0 0 8px;
    padding: 15px 20px;
    border-radius: 5px;
    background-color: #ebebeb;
    min-height: 400px;
    vertical-align: top;
}

.purchase-box h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

.purchase-box .select {
    position: relative;
    display: inline-block;
}

.purchase-box .select:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -1.5px;
    right: 10px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #000000;
    z-index: 1;
}

.purchase-box .select select {
    color: #000000;
    display: inline-block;
    position: relative;
    box-shadow: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 5px 20px 5px 20px;
    border: 1px solid #dedede;
    border-radius: 5px;
}

.purchase-box .select.disabled select {
    pointer-events: none;
    background-color: #dedede;
}

.purchase-box .select select::-ms-expand {
    display: none;
}

.purchase-box .select select:focus {
    outline: transparent;
}

.purchase-box .select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

.page-purchase .pane-full-screen {
    margin: 10px;
}

@media (min-width: 768px) {
    .page-purchase {
        background-position: 50% -40px;
    }
}

@media (min-width: 1920px) {
    .page-purchase {
        background-position: 50% 0;
        background-size: 100% auto;
    }
}

.purchase-items {
    font-size: 15px;
}

@media (min-width: 768px) {
    .purchase-items {
        font-size: 16px;
    }
}

.purchase-items h2,
.purchase-items .total {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-weight: 500;
    color: #0d4b60;
}

.purchase-items h2,
.purchase-items .price {
    font-size: 1.25em;
    line-height: 1.5;
    margin: 3px 0;
}

.purchase-items .total {
    font-size: 1.4em;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 767px) {
    .purchase-items .total {
        margin-top: 10px;
    }
}

.purchase-item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px;
    padding: 30px 15px;
    border: 1px solid #c1dcea;
    border-radius: 5px;

    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

@media (min-width: 768px) {
    .purchase-item {
        padding: 30px 45px;

        -webkit-flex-flow: row;
        -ms-flex-flow: row;
        flex-flow: row;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.purchase-item-img-container {
    float: left;
    width: 33%;
}

.purchase-item-img {
    text-align: left;
    padding-top: 50px;
    max-height: 300px;
}

.purchase-item-data-container {
    display: flex;
    justify-content: flex-start;
    width: 66%;
    float: left;
    padding-left: 25px;
}

.purchase-item-data {
    padding-top: 50px;
}

.purchase-item-data p {
    font-size: 0.9em;
    margin: 0;
    height: 100px;
}

.purchase-item-data .purchase-item-stock {
    padding: 15px 0 15px 0;
}

.purchase-item-data .purchase-item-stock .in-stock {
    color: green;
}

.purchase-item-data .purchase-item-stock * {
    padding-top: 10px;
}

@media screen and (max-width: 1300px) {
    .purchase-item-img-container {
        display: block;
        width: 100%;
        height: auto;
        float: none;
        text-align: center;
    }
    .purchase-item-data-container {
        display: block;
        width: 100%;
        height: auto;
        float: none;
        text-align: center;
    }
    .purchase-item-img {
        display: block;
        padding-top: initial;
        width: 100%;
        max-height: initial;
        height: auto;
        float: none;
        text-align: center;
    }
    .purchase-item-data {
        display: block;
        width: 100%;
        height: auto;
        float: none;
        text-align: center;
        margin: 15px auto 0px auto;
        max-width: 90%;
        padding-top: 15px;
    }
}

.purchase-item-qty {
    flex: auto;
    max-width: 200px;
    margin: 0 auto;
    text-align: center;

    -webkit-flex: auto;
    -ms-flex: auto;
}

@media (min-width: 768px) {
    .purchase-item-qty {
        flex: 0 1 150px;
        max-width: none;

        -webkit-flex: 0 1 150px;
        -ms-flex: 0 1 150px;
    }
}

.purchase-item-desc {
    flex: 1;
    text-align: center;

    -webkit-flex: 1;
    -ms-flex: 1;
}

@media (min-width: 768px) {
    .purchase-item-desc {
        padding: 0 50px;
        text-align: left;
    }
}

.purchase-item-desc.pl0 {
    padding-left: 0;
}

.purchase-form-modal .onboarding {
    min-height: 100px;
}

.order-overview .purchase-item {
    padding: 0;
    border: none;
}

.order-overview .purchase-items .purchase-item-desc {
    padding-right: 0;
    padding-left: 0;
}

.purchase-form-modal .popup-body {
    scrollbar-width: unset;
}

/**
 * Toast Notifications
 * -------------------------------------------------- */

.toast-notification {
    margin-top: 10px;
}

.toast-notification:first-of-type {
    margin-top: 30px;
}

.alert {
    padding: 15px;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
    text-align: left;
}

.alert .title {
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
}

/**
 * Cabinet codes
 * -------------------------------------------------- */
.cabinet-codes {
    color: #111;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;

    margin: 0 0 10px;
    padding: 13px 15px;
    text-align: left;
    border-radius: 5px;
    background-color: #ebebeb;
}

.cabinet-codes a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.cabinet-codes .bin-number {
    color: #000000;
    width: 35px;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.cabinet-codes .cabinet-codes-content {
    color: #000000;

    flex: auto;
    -webkit-flex: auto;
    -ms-flex: auto;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
}

.cabinet-codes .cabinet-codes-action {
    display: flex;
    flex: 0 0 30px;
    cursor: pointer;

    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-flex: 0 0 30px;
    -ms-flex: 0 0 30px;
}

.cabinet-codes ul,
.cabinet-codes .no-codes,
.cabinet-codes .spinner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    padding: 10px 0;
    list-style: none;
}

.cabinet-codes .spinner i {
    padding: 0;
}

.cabinet-codes .fas,
.cabinet-codes .far,
.cabinet-codes .fab {
    font-size: 2em;
    padding-left: 8px;
    padding-right: 8px;
}

.cabinet-codes .fas:hover,
.cabinet-codes .far:hover,
.cabinet-codes .fab:hover {
    color: #00a8e0;
}

.cabinet-codes .lock-codes {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 35px;
    padding-right: 35px;
}

.cabinet-codes .lock-code {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.cabinet-codes .lock-code label{
    padding: 0;
}


/**
 * Property List
 * -------------------------------------------------- */
.property-list .property-info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    flex-flow: column;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;

    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
}

/**
 * Key Profile
 * -------------------------------------------------- */
.key-profile-list .key-profile-info {
    align-self: center;
}

.key-suggestion-input {
    position: relative;
    margin-bottom: 20px;
}

.key-mapping-form .locale-selector {
    cursor: pointer;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-left: 12px;
    padding-right: 12px;
}

.key-mapping-form .locale-selector .language-label,
.key-mapping-form .locale-selector .actions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.key-mapping-form .locale-selector label {
    padding-left: 5px;
    cursor: pointer;
}

.key-mapping-form .locale-selector .fas {
    opacity: 1;
    font-size: 24px;
    -webkit-text-stroke: 2px #ebebeb;
}

.key-mapping-form .locale-selector .far {
    opacity: 1;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.key-mapping-form .add-language {
    padding-top: 5px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}

/**
 * Airbnb Messaging Modal
 * -------------------------------------------------- */

.airbnb-messaging .alert-msg {
    text-align: left;
}

/**
 * BLE connect page
 * -------------------------------------------------- */
.wifi-password-group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.wifi-password-group .input-group {
    margin-top: 0;
    flex-grow: 6;
}

.wifi-password-group .visibility-toggle {
    margin: 10px;
}

.ble .img.scan-box {
    background: url(483iDwZABbwWBmGZzfjUxzT00KjriyRQS8YJVtpSS6U.png) no-repeat center;
    background-size: contain;
    height: 400px;
}

/**
 * Invoice List
 * -------------------------------------------------- */

.payment-form .source-options {
    font-size: 14px;
    margin: 0;
}

.payment-form .source-options span {
    margin-left: 0;
}

.payment-form .btn-pay {
    margin-top: 20px;
}

.payment-form .source-options .option .card-option-data {
    padding-left: 10px;
}

.payment-form .source-options .fa-check {
    -webkit-flex: 0 0 20px;
}

.payment-form .source-options .option i.chosen-option-icon {
    width: 20px;
}

/**
 * Time Window
 * -------------------------------------------------- */

.timewindow-list a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 10px;
    padding: 13px 15px;
    text-align: left;
    border-radius: 5px;
    color: #111111;
    background-color: #ebebeb;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.timewindow-form .timewindow-period {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
}

.timewindow-form .timewindow-period .period-group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
}

.timewindow-form .timewindow-period .period-group .period-hour {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    border-left: 1px solid rgb(217, 217, 217);
}

.period-hour.next-day {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom: 5px;
}

.next-day .next-day-hint {
    text-align: center;
    font-size: 0.8em;
    line-height: 1;
    padding-top: 2px;
}

.timewindow-form .timewindow-period .period-group .period-hour input {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.timewindow-form .timewindow-period .period-group .period-hour.next-day input {
    padding-bottom: 0;
}

.timewindow-form .timewindow-period .period-group .period-day {
    position: relative;
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
}

.timewindow-form .timewindow-period .period-group .period-day select {
    padding-right: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timewindow-form .timewindow-period .period-group .period-day .fa-angle-down {
    font-size: 24px;
    color: #4a4a4a;
    opacity: 1;
    position: absolute;
    top: 15px;
    right: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.timewindow-form .add-hours {
    padding-top: 5px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}

.timewindow-form .remove-hours {
    -webkit-flex-basis: 30px;
    -ms-flex-preferred-size: 30px;
    flex-basis: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.no-hours {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/**
 * Key Alerts
 * -------------------------------------------------- */

.key-alert-form .input-group {
    flex-grow: 1;
    margin-top: 0;
}

.key-alert-form .input-group h3 {
    margin: 15px;
}

.key-alert-form .input-group .checkbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-justify-content: space-evenly;
    -ms-flex-pack: justify;
    justify-content: space-evenly;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;

    margin: 0 0 12px 10px;
}

.key-alert-form .input-group .checkbox label {
    padding: 12px 0 0 0;
}

.key-alert-form .input-section .trigger {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.key-alert-form .input-section .trigger > :first-child {
    margin-right: 10px;
}

.key-alert-form .input-group .checkbox .custom-user-holder {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.key-alert-form .input-group .checkbox .custom-user-holder > .permission-input {
    padding: 12px 0 0 0;
}

.key-alert-form .input-group .switch {
    margin-right: 8px;
}

.key-alert-form .input-group .custom-recipients {
    margin: 0 0 12px 12px;
}

.key-alert-form .key-alert-item,
.key-alert-form .input-group .custom-recipients .custom-recipient {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
}

.key-alert-form .key-alert-item .key-alert-item-details {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0;
    padding: 12px 10px;
    font-size: 1.1em;
}

.key-alert-form .key-alert-item > .input-group .checkbox input {
    padding: 4px 8px;
}

.key-alert-form .key-alert-item > .input-group .notification-text > .notification-buttons {
    margin: 0 12px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.key-alert-form .key-alert-item > .input-group .notification-text > .notification-buttons select {
    width: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    padding: 0;
    cursor: pointer;
    color: #00a8e0;
}

.key-alert-form .key-alert-item > .input-group .notification-text .notification-variables {
    color: #5a5a5a;
    margin: 12px;
}

.key-alert-form .key-alert-item > .input-group .notification-text .notification-variables i {
    font-size: 1em;
    opacity: 1;
}

.key-alert-form .key-alert-item > .remove-key-alert-item {
    -webkit-flex-basis: 30px;
    -ms-flex-preferred-size: 30px;
    flex-basis: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.key-alert-form .key-alert-item > .remove-key-alert-item > i {
    font-size: 1em;
    opacity: 1;
}

.key-alert-form .add-notification {
    margin: 0 0 18px 10px;
}

/**
 * Keycafe Team Control Modal
 * -------------------------------------------------- */

.cabinet-control-popup .info {
    text-align: left;
    margin-bottom: 0;
}

/**
 * Failsafe setup
 * -------------------------------------------------- */
.failsafe-flash-step {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.failsafe-progress {
    border-radius: 5px;
    background-color: #f1f1f1;
    margin: 8px 0 14px 0;
}

.failsafe-progress > div {
    height: 12px;
    border-radius: 5px;
    transition: all ease-in-out 0.2s;
    background: #00a8e0;
}

/**
 * Key Success
 * -------------------------------------------------- */

.setup-key-title {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
}

/**
 * User Type List
 * -------------------------------------------------- */

.user-type-list .user-type-info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.user-type-list .user-type-info .name {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.user-type-list .user-type-info .description {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.1rem;
    -webkit-flex-basis: 50px;
    -ms-flex-preferred-size: 50px;
    flex-basis: 50px;
    height: 20px;
    color: #999999;
}

.user-type-list .user-type-info .description:hover {
    color: #00a8e0;
}

.user-type-list .user-type-info img {
    -webkit-flex-basis: 25px;
    -ms-flex-preferred-size: 25px;
    flex-basis: 25px;

    height: 24px;
    width: 24px;
    margin-right: 10px;
}

.user-type-list .setting-box {
    font-size: 1rem;
}

.translate-cloak {
    opacity: 0;
}

/**
 * Manufacturing cycle test counter
 * -------------------------------------------------- */

.cycle-counter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.cycle-counter {
    display: flex;
    align-items: center;
    gap: 1em;
}

.cycle-counter > h2 {
    min-width: 30px;
    text-align: center;
}

/**
 * CookieYes Button
 * -------------------------------------------------- */
.cky-btn-revisit-wrapper {
    display: none !important;
}

/**
 * Zendesk Chat Button
 * -------------------------------------------------- */

.zendesk-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

@media (min-width: 992px) {
    .zendesk-container.zendesk-checkout{
        margin-right: 450px;
    }
}

@media (max-width: 992px) {
    .zendesk-container.zendesk-checkout{
        margin-right: 0px;
    }
}

.zendesk-button {
    background-color: #0d4b60 !important;
    color: #fffafa !important;
    fill: #fffafa !important;
    padding: 0.92857rem 1.57143rem;
    border-radius: 999rem;
    bottom: 0;
    font-size: 1.07143rem;
    font-weight: bold;
}

@media (max-width: 992px) {
    .zendesk-text {
        display: none;
    }
}

.key-integration {
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 10px 12px;
    padding-left: 37px;
}

.key-integration.airbnb {
    background-image: url("yDSxEfnAHTxFtyEBnMadgEhFdIx7EjLsI4q28lJxKaI.png");
}

.key-integration.fleetio {
    background-image: url("XOckYzGZbqMwQVP6bESlG66BKyYwhq9zhc8PhMmBFr7.png");
}

.key-integration.guesty {
    background-image: url("w8YaYQ2WGuKF9ccTKftDAYshs1FXotG9qRaUnnUJVBB.png");
}

/* Page - One Time Payment
 * -------------------------------------------------- */

.payment-wrapper {
    min-height: 100vh;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}

.payment-wrapper > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

@media (min-width: 992px) {
    .payment-wrapper {
        -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .payment-wrapper > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .payment-wrapper > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
}

.payment-wrapper-right {
    background: linear-gradient(135deg, #0f4b60 0%, #06436d 100%);
}

.payment-left,
.payment-right {
    margin: auto;
    padding: 4rem;
}

.payment-left,
.payment-right {
    margin: auto;
    padding: 4rem 2rem;
}

@media (min-width: 600px) {
    .payment-left,
    .payment-right {
        padding: 4rem;
    }
}

@media (min-width: 768px) {
    .payment-left {
        padding-top: 6rem;
    }

    .payment-right {
        padding-top: 13rem;
    }

    .payment-left,
    .payment-right {
        max-width: 600px;
    }
}

@media (min-width: 1600px) {
    .payment-left {
        margin: 0 0 0 auto;
        padding: 6rem 50px 0 50px;
    }

    .payment-right {
        margin: 0;
        padding: 13rem 50px 0 50px;
    }

    .payment-wrapper-left,
    .payment-wrapper-right {
        padding-bottom: 4rem;
    }
}

.page-payment .logo {
    text-align: left;
    line-height: 0;
    margin-bottom: 3rem;
}

.page-payment h1 {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.3;
    color: #3a3a3a;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .page-payment h1 {
        font-size: 1.875rem;
    }
}

.page-payment h1 strong {
    display: block;
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.4666em;
    color: #0f4b60;
}

.page-payment h2 {
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.5625rem;
    margin: 0 0 2rem;
}

.page-payment h3 {
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0 0 0.625rem;
    color: #3a3a3a;
}

.page-payment .content {
    padding: 0;
}

.payment-invoice-notes {
    white-space: pre-wrap;
}

.payment-methods-wrapper {
    padding: 2rem;
    border-radius: 20px;
    background: #fff;
}

.payment-methods-wrapper p,
.payment-methods-wrapper ul {
    font-size: 0.9375rem;
}

.payment-methods-wrapper-paid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.payment-methods-wrapper-paid .payment-methods-paid-head {
    color: #0D4B60;
    text-align: center;
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
    font-size: 1.60475rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

    margin: 0.33333rem 0;
}

.payment-methods-wrapper-paid .payment-methods-paid-message {
    color: #3A3A3A;
    text-align: center;
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 0.91688rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.payment-methods-wrapper-paid .payment-methods-paid-icon {
    margin: 1rem 0;
}

.payment-attributes,
.payment-methods {
    margin: 0;
    padding: 0;
    list-style: none;
}

.payment-methods {
    margin-bottom: 0 !important;
}

.payment-attributes li,
.payment-methods li {
    padding: 0;
    margin: 0 0 1.625rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.payment-methods > * {
    width: 100%;
}

.payment-methods li {
    padding: 1.25rem;
    margin-bottom: 0;
    font-size: 0.9375rem;
    border-radius: 1rem;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.payment-methods li:hover {
    background: #f7f7f9;
}

.payment-methods li:hover .payment-method-icon {
    background: #fff;
}

.payment-attributes li strong,
.payment-methods li strong {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    color: #0f4b60;
    margin: 0 0 0.3rem;
    display: inline-block;
}

.payment-attribute-icon,
.payment-method-icon {
    width: 70px;
    height: 70px;
    margin-right: 1rem;
    border-radius: 100%;
    background: #f7f7f9;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 449px) {
    .payment-attributes li {
        font-size: 1rem;
    }

    .payment-methods li {
        font-size: 1rem;
        padding: 1rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    .payment-methods .payment-method-icon {
        margin: 0 0 1rem;
    }

    .payment-methods li > :last-child {
        text-align: center;
    }
}

.payment-method-icon-prev {
    width: 35px;
    height: 35px;
    margin: 0 0 1rem;
    font-size: 1.375rem;
    color: #00a7e0;
    cursor: pointer;
    border: none;
}

.payment-method-icon-prev:hover,
.payment-method-icon-prev:focus {
    color: #fff;
    background: #00a7e0;
}

.payment-bank-options,
.payment-bank-options li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.payment-bank-options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.payment-bank-options li {
    font-size: 0.875rem;
    padding: 0.4em 1em;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}

.payment-bank-options li.active {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #ededed;
}

.payment-instructions {
    font-family: "MuseoSans-700", Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #0f4b60;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.payment-instructions p {
    margin-bottom: 1em;
}

.payment-instructions i {
    margin-right: 0.5rem;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.payment-method-details,
.payment-method-detail {
    padding: 0;
    margin: 0;
    list-style: none;
}

.payment-method-details {
    padding: 1.5rem;
    background: #f7f7f9;
    border-radius: 1rem;
    font-size: 0.875rem;
    margin-bottom: 0 !important;
}

.payment-method-detail {
    word-wrap: break-word;
    word-break: break-word;
    -ms-word-break: break-all;
    overflow-wrap: break-word;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.payment-method-detail:not(:last-child) {
    margin-bottom: 1rem;
}

.payment-method-detail > :last-child {
    padding-left: 1em;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    color: #0f4b60;
}

.payment-method-detail i {
    color: #a4bab7;
    cursor: pointer;
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.clipboard-button {
    cursor: pointer;
}

.clipboard-button:hover,
.clipboard-button:focus {
    color: #00a7e0;
}

.payment-method-detail strong {
    color: #0f4b60;
    display: block;
}

[data-payment-method-content] .form-container {
    margin-top: 2rem;
}

.page-payment .form-response {
    text-align: center;
}

.page-payment .form-response .logo {
    margin-bottom: 1rem;
}

.page-payment .form-response h2 {
    margin-bottom: 0.3125rem;
    line-height: 1.3;
}

.payment-message {
    font-size: 1rem;
    padding: 1em;
    margin-bottom: 1.625rem;
    border-radius: 0.5rem;
    background: #f7f7f9;
}

@media (min-width: 768px) {
    .payment-message {
        font-size: 1.0625rem;
    }
}

.payment-message span {
    color: #0f4b60;
}

.payment-cta {
    margin-bottom: 1.625rem;
    padding-bottom: 1.625rem;
    border-bottom: 1px solid #ededed;
}

.payment-disclaimer,
.payment-disclaimer p,
.payment-credentials {
    font-size: 0.9375rem;
}

.payment-credentials {
    color: #0f4b60;
    margin: 3.5rem 0;
}

.payment-translator form {
    width: fit-content;
}

.payment-translator .select-wrapper {
    position: relative;
    font-size: 0.875rem;
}

.payment-translator .select-wrapper .fa-angle-down,
.payment-translator .select-wrapper .fa-globe-americas {
    position: absolute;
    top: 9px;
    pointer-events: none;
}

.payment-translator .select-wrapper .fa-angle-down {
    font-size: 1.5em;
    right: 0;
}

.payment-translator .select-wrapper .fa-globe-americas {
    font-size: 1.4em;
    left: 0;
}

.payment-translator select.tb {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.7857;
    max-width: 100%;
    height: 34px;
    margin: 0;
    padding: 0.375em 23px 0.375em 27px;
    cursor: pointer;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    color: #3a3a3a;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.payment-translator select.tb:focus {
    box-shadow: none;
}

.text-list-small li {
    margin: 2px;
}

/**
 * Location Customization
 * -------------------------------------------------- */

.location-customize .input-group {
    margin-top: 10px;
}

.location-customize .setting-box .input-group {
    background-color: #fff;
}

.colour-picker-table-row {
    margin-bottom: 10px;
}

.colour-picker-table-row > div {
    display: flex;
    align-items: center;
    gap: 1em;
}

.colour-picker {
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(118, 118, 118);
    border-radius: 5px;
    overflow: hidden;
}

.colour-picker .colour-indicator {
    height: 1.5em;
    border-bottom: 1px solid rgb(118, 118, 118);
}

.colour-picker input {
    width: 10ch;
    border: none;
    outline: none;
}

.led-colour-box {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 0.5em;
}

.led-colour-box > .select-box {
    margin: 0;
    flex: 1;
}

/**
 * Banner
 * -------------------------------------------------- */

.banner {
    position: fixed;
    top: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 40px;
    text-align: center;
    z-index: 1000;
    font-size: 15px;
    padding: 10px;
    box-sizing: border-box;
}

.banner .fas {
    margin-right: 8px;
    margin-bottom: 2px;
}

.banner.warning {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
}

.banner.danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

body.has-banner > .page {
    top: 40px;
    min-height: calc(100vh - 40px);
    height: calc(100vh - 40px);
}

@media (max-width: 1600px) {
    .banner {
        height: 60px;
    }

    body.has-banner > .page {
        top: 60px;
        min-height: calc(100vh - 60px);
        height: calc(100vh - 60px);
    }
}

@media (max-width: 1260px) {
    .banner {
        height: 80px;
    }

    body.has-banner > .page {
        top: 80px;
        min-height: calc(100vh - 80px);
        height: calc(100vh - 80px);
    }
}

@media (max-width: 768px) {
    .banner {
        height: 110px;
    }

    body.has-banner > .page {
        top: 110px;
        min-height: calc(100vh - 110px);
        height: calc(100vh - 110px);
    }
}

/**
 * SmartBox Authentication popup
 * -------------------------------------------------- */

.smartbox-auth .popup-body {
    text-align: left;
}

.smartbox-auth .popup-body > * {
    margin: 1em;
}

.smartbox-auth .smartbox-auth-header {
    display: flex;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.smartbox-auth .smartbox-auth-header > .smartbox-auth-close {
    color: #000000;
}

.smartbox-auth #qr-code {
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.smartbox-auth .smartbox-auth-code-row {
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    gap: 0.5em;
}

.smartbox-auth .smartbox-auth-code-row > img {
    filter: brightness(0);
}

.smartbox-auth .smartbox-auth-code-row > .smartbox-auth-code {
    border: 1px solid lightgrey;
    border-radius: 0.25rem;
    padding: 0.1em 0.4em;
}

.smartbox-auth .smartbox-auth-header > .smartbox-auth-title,
.smartbox-auth .smartbox-auth-code-row > .smartbox-auth-code {
    font-family: "MuseoSans-500", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.17em;
}