/**
 * General
 * -------------------------------------------------- */

.page > div.sticky-container {
    display: block;
}

.page > div.sticky-container > div {
    display: flex;
    flex-flow: column;
    overflow: hidden;
    height: 100%;

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

.modal-text p, .modal-text h1, .modal-text h2, .modal-text h3, .modal-text h4, .modal-text h5, .modal-text h6 {
    padding: 0 10px 0 10px;
}

.locale-list-container {
    z-index: 15 !important;
}

.pane-full-screen {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 79px);
    -ms-flex-flow: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
}

.popup .loading {
    overflow: hidden;
    width: 50%;
    height: 20%;
    margin: auto;
    text-align: center;
}

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

.overlay .popup.add-main-popup {
    max-width: 500px;
}

.overlay .popup.bin-action-popup {
    max-width: 400px;
    overflow: visible;
}

.overlay .popup.bin-action-popup .popup-body {
    overflow: visible;
}

.overlay .popup.integration-type-popup {
    max-width: 400px;
}

.overlay .popup.permission-edit-popup {
    max-width: 400px;
}

.overlay .popup.property-key-edit-popup {
    max-width: 450px;
}

.overlay .popup.cabinet-control-popup {
    max-width: 400px;
}

.overlay .popup.property-key-edit-popup .settings {
    margin-top: 40px;
}

.overlay .popup.property-key-edit-popup .popup-buttons {
    margin-top: 20px;
}

.overlay .popup-body .popup-list {
    max-height: 500px;
    overflow-y: auto;
}

.input-group.date-group time-picker,
.input-group.date-group .time {
    width: 30% !important;
}

.nav-back {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    padding: 0;
    border: none;

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

.nav-back .fas {
    -webkit-text-stroke: 3px #fff;
    font-size: 2em;
    margin-right: 5px;
}

.nav-bar {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    margin-bottom: 15px;

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

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

.nav-bar .nav-back,
.nav-bar .nav-forward {
    margin-bottom: 0;

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

.nav-bar .nav-title {
    font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    text-align: center;
    margin-top: 4px;

    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

.header .search.search-query {
    text-align: left;
    max-width: 240px;
    margin-left: 5px;
}

.header .filter {
    margin-left: 20px;
}

.header .filter .filter-icon {
    top: 0;
    font-size: 1.4em;
    color: #999999;
}

.header .filter.open .filter-icon,
.header .filter .filter-icon:hover,
.header .filter .filter-icon:focus,
.header .filter .filter-icon:active {
    color: #00a8e0;
}

.header .org-dropdown {
    margin-right: 10px;
}

.header .org-dropdown .dropdown-menu {
    min-width: 250px;
    max-height: 500px;
    overflow-y: auto;
    right: -10%;
    left: auto;
    top: 120%;
}

.header .org-dropdown .dropdown-menu .fa-spinner {
    font-size: 1em;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.header .org-dropdown > a.org-current {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.header .org-dropdown > a.org-current > span {
    margin-right: 10px;
}

.header .org-dropdown > a.org-current > span,
.header .org-dropdown > .dropdown-menu .dropdown-item {
    max-width: 250px;
}

.header .org-dropdown > a.org-current > i.fas.fa-angle-down {
    font-size: 1.1em;
    margin-left: 7px;
}

/**
 * Add Options
 * -------------------------------------------------- */

.add-options {
    margin: 20px 0 30px 0;
    padding: 0;
    font-size: 1.1rem;
    color: #111;
}

.add-options li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.add-options a {
    display: flex;
    align-items: stretch;
    color: #111;
    cursor: pointer;
    margin: 0 0 10px;
    padding: 13px 15px;
    text-align: left;
    border-radius: 5px;
    background-color: #ebebeb;

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

.add-options a:hover,
.add-options a:focus,
.add-options a:active {
    background-color: #d4d4d4;
}

.add-options span {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 105px;
    font-weight: bold;

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

.add-options .fa-angle-right {
    font-size: 1.4em;
    flex: 0 0 15px;
    margin-right: 0;

    -webkit-text-stroke: 2px #ebebeb;
    -webkit-flex: 0 0 15px;
    -ms-flex: 0 0 15px;
}

.add-options .add-option {
    background-repeat: no-repeat;
    background-position: 10px 8px;
    background-size: 34px;
}

.add-options .add-option.add-access {
    background-image: url(fCZs1HbKCyvk4FPaAzyGYPITHGIvTwgxBN9uBgEORd7.png);
}

.add-options .add-option.add-key {
    background-image: url(Dcsz5EKH9GcwvI25oUHdJnZRY5JEEZFJuLw4BFn6mSN.png);
}

.add-options .add-option.add-location {
    background-image: url(wJQTHFNIiRKq0ddVGVVrq9GXu9gD4ERQBFprOvyeDDH.png);
}

.add-options .add-option.add-cabinet {
    background-image: url(AyUNreWBAGdDIAFznBkWLMYdB02hPpv2ve1bnE6eYZy.png);
}

.add-options .add-option.add-integration {
    background-image: url(bTYaL32TF8WYKuvMkjenwmQq670zcRCAiIt3lvMopda.png);
}

.add-options .add-option.add-group {
    background-image: url(ca2Hw2JHtpcpMZq4mZOksRcAaO7qIN03Vnm2gfuajIJ.png);
}

.add-options .add-option.add-user {
    background-image: url(OOUgiV9JqqYy0ZKkVHPyUsL4pIrNxJ1V1iBCjsyJFoG.png);
}

.add-options .add-option.add-alert {
    background-image: url(of5mRz0bqtLo26dh8MWHqCO5HNYtxbV0XhOblCArLbb.svg);
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

@media (min-width: 992px) {
    html,
    body,
    body > .page,
    body > .page > div,
    body > .page > div.sticky-container > div {
        height: 100%;
        min-height: 100%;
    }

    .page > div.sticky-container > div {
        overflow: auto;
        -ms-flex-flow: row wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-flow: row wrap;
        -ms-flex-line-pack: start;
        align-content: flex-start;
    }

    .header {
        position: fixed;
        right: 0px;
        z-index: 9;
        -webkit-box-flex: 1;
        flex: 1 1 100%;
        width: calc(100vw - 156px);
        /*margin-left: 100px;*/
        padding: 11px 20px;

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

    .header .nav-left,
    .header .nav-right {
        font-family: "MuseoSans-300", Arial, Helvetica, sans-serif;
        font-size: 16px;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .header .nav-left {
        -ms-flex-pack: start;
        -webkit-box-pack: start;
        justify-content: flex-start;
    }

    .header .nav-left > a {
        margin-right: 10px;
    }

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

    .header .nav-right > a {
        margin-left: 10px;
    }

    .header .nav-right .un {
        margin-left: 25px;
        max-width: 250px;
    }

    .header .nav-left a,
    .header .nav-right a {
        display: inline-block;
    }

    .header .avatar {
        line-height: 0;
        padding: 0 !important;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        color: #07a7e0;
        background-color: #ebebeb;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

    }

    .header .nav-right a.location,
    .header .nav-right a.purchase {
        display: flex;
        padding: 0 5px 0 5px;

        display: -webkit-flex;
        display: -ms-flexbox;
    }

    .header .nav-right a.location .fas,
    .header .nav-right a.purchase .fas {
        font-size: 1.4em;
        line-height: 30px;
        color: #999999;
        top: 0;
    }

    .header .nav-right a.active .fas,
    .header .nav-right a.location .fas:hover,
    .header .nav-right a.location .fas:focus,
    .header .nav-right a.location .fas:active,
    .header .nav-right a.purchase .fas:hover,
    .header .nav-right a.purchase .fas:focus,
    .header .nav-right a.purchase .fas:active {
        color: #00a8e0;
    }

    .header .nav-right a.purchase .fas.selected {
        color: #00a8e0;
    }

    .footer {
        position: fixed;
        -webkit-box-flex: 0;
        flex: 0 0 85px;
        min-height: 100vh;
        padding: 15px 0;
        border-top: none;
        border-right: 1px solid rgba(163, 163, 163, 0.3);

        -webkit-flex: 0 0 85px;
        -ms-flex: 0 0 85px;
        -ms-flex-order: 1;
        -webkit-box-ordinal-group: 2;
        order: 1;

        /*fixed width for footer to prevent breaking the layout when changing language (word "emplacements" in french version breaks it due to its length)*/
        z-index: 9;
        width: 115px;
        max-height: 100%;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .footer::-webkit-scrollbar {
        display: none;
    }

    .footer ul {
        -ms-flex-flow: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-flow: column;
    }

    .footer li {
        display: block;
        width: 100%;
    }

    .footer a {
        margin-bottom: 20px;
        padding: 35px 10px 0;
    }

    .footer .tab-logo a {
        display: block;
        width: 100%;
        height: 40px;
        padding: 0;
        background: url(r2pAk8uasEYv7kA6UvHJHNLNV9uDdzDxbGhf5TF9eLa.png) no-repeat 50% 50%;
        background-size: contain;
    }

    .content {
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        margin: 59px 0 0 83px;
        padding: 0;
        -ms-flex-order: 2;
        -webkit-box-ordinal-group: 3;
        order: 2;
    }

    .content {
        margin: 0;

        overflow-y: hidden;
        height: 100%;
    }

    .content.full-screen {
        margin: 58px 0 0 83px;
        -ms-flex-flow: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-flow: row;
    }

    .content.x-padding {
        padding: 0;
    }

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

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

    .pane {
        -webkit-box-flex: 1;
        flex: 1;
        max-width: 430px;
        height: auto;
        padding: 10px;
        border-right: 1px solid rgba(163, 163, 163, 0.3);

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

        overflow-y: auto;
    }

    .pane:first-of-type {
        margin-left: 116px;
        margin-top: 59px;
    }

    .pane:nth-of-type(2) {
        margin-top: 59px;
    }

    .pane:empty {
        display: none;
    }

    .pane:last-of-type {
        margin: 0 auto 0 0;
        border-right: none;

        margin-top: 59px;
    }

    .content .loading,
    .content .no-results {
        position: static;
        width: 55%;
        margin-top: 30px;
        margin-bottom: 30px;
        overflow: hidden;
    }

    .pane-keys-list,
    .pane-accesses-list,
    .pane-locations-list,
    .pane-cabinets-list,
    .pane-integrations-list,
    .pane-groups-list,
    .pane-users-list {
        -webkit-box-flex: 0;
        flex: 0 1 320px;
        min-width: 220px;
        border-right: 1px solid rgba(163, 163, 163, 0.3) !important;
        background-color: #f6f6f6;

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

    .pane-key-details {
        -webkit-box-flex: 0;
        flex: 0 1 400px;

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

    .keys-list .selected a,
    .keys-list a:hover,
    .keys-list a:focus,
    .keys-list a:active,
    .bookings-list .selected a,
    .bookings-list a:hover,
    .bookings-list a:focus,
    .bookings-list a:active,
    .settings-list .selected a,
    .location-list .selected a,
    .location-list a:hover,
    .location-list a:focus,
    .location-list a:active,
    .cabinet-list .selected a,
    .cabinet-list a:hover,
    .cabinet-list a:focus,
    .cabinet-list a:active,
    .integration-list .selected a,
    .integration-list a:hover,
    .integration-list a:focus,
    .integration-list a:active,
    .group-list .selected a,
    .group-list a:hover,
    .group-list a:focus,
    .group-list a:active,
    .user-list .selected a,
    .user-list a:hover,
    .user-list a:focus,
    .user-list a:active,
    .user-type-list a:hover,
    .user-type-list a:focus,
    .user-type-list a:active {
        background-color: #d6d6d6;
    }

    .sub-list .selected a {
        background-color: #0f7eba;
    }

    .pane.map-full-screen {
        max-width: none;
        padding: 0;
    }

    .pane-location {
        max-width: 650px;
        padding: 0;
    }

    .pane-location .location-data {
        padding: 0 20px;
    }

    .overlay .alert-title {
        padding-bottom: 20px;
        text-align: center;
    }

    .overlay .alert-msg {
        text-align: left;
    }

    .overlay .popup-footer a {
        padding: 15px 5px;
    }

    .external-reservation-info .section-row {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
    }

    .external-reservation-info .section-row .section-col-1 {
        flex: 1;
        margin-right: 5px;

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

    .external-reservation-info .section-row .section-col-2 {
        flex: 1;
        margin-left: 5px;

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

@media (max-width: 991px) {
    .pane:not(.pane-current) {
        display: none;
    }

}

/*fixes for login, password and register forms for desktop*/
.onboarding .carousel {
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.onboarding .carousel-slide {
    flex: none;
    -webkit-flex: none;
    -ms-flex: none;
    padding-bottom: 0;
}

.content > form,
.carousel-slide > form.carousel-form,
.onboarding .carousel-slide > form {
    margin: 30px auto;
    width: 30%;
    max-width: 350px;
}

.content.onboarding:not(.educate-onboarding) .owl-nav {
    width: 30%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
}

.onboarding .owl-nav .owl-prev,
.onboarding .owl-nav .owl-next {
    margin: 0;
}

.carousel-slide > form > div > h2 {
    text-align: center;
}

@media only screen and (max-width: 1280px) {
    .content > form,
    .carousel-slide > form.carousel-form {
        width: unset;
        max-width: 50%;
    }

    .content.onboarding .owl-nav {
        min-width: 50%;
    }

    .onboarding .carousel-slide > form {
        max-width: 50% !important;
    }
}

@media only screen and (max-width: 767px) {
    .content > form,
    .onboarding .carousel-slide > form {
        min-width: 75%;
    }

    .content.onboarding .owl-nav {
        min-width: 75%;
    }
}

@media only screen and (max-width: 576px) {
    .content > form,
    .onboarding .carousel-slide > form {
        min-width: 100%;
    }

    .content.onboarding .owl-nav {
        min-width: 100%;
    }
}

.popeye-modal-container {
    z-index: 10 !important;
}

.onboarding-background {
    background: url("2B87zjAifKloii4a1Wd7BdiONmXx1eSY8jQ3jrc3OcZ.svg") no-repeat 50% 0;
    background-size: cover;
}

.educate-onboarding .credit {
    width: 200px;
}

/*date time selector input adjustments*/
.input-group.date #start-time,
.input-group.date #end-time {
    width: 100%;
}

/* No result background image adjustments */
@media screen and (min-width: 992px) {
    .content .no-results-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        margin-top: 0;
        margin-bottom: 0;
        background-size: 40%;
    }

    .content .no-results-bg .no-result-img {
        width: 40%;
        height: 40%;
    }

    .content .no-results-bg .no-result-text {
        max-width: 40%;
    }
}

.access-success .input-section,
.access-success .btn-container {
    padding: 0 10px 0 10px;
}

.access-success .input-section input[readonly] {
    font-family: "MuseoSans-100", Arial, Helvetica, sans-serif;
}

@media screen and (min-width: 992px) {
    .access-success .input-section-btns {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        justify-content: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    }

    .access-success .btn-container {
        flex: 1;
        flex-basis: 40%;
        max-width: 50%;

        -webkit-flex: 1;
        -ms-flex: 1;
        -webkit-flex-basis: 40%;
        -ms-flex-preferred-size: 40%;
    }

    .onboarding.guest-onboarding .guest-instructions .title {
        flex: 1;

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

    .onboarding.guest-onboarding .guest-instructions .instructions {
        flex: 1;
        max-width: 40%;

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

    .onboarding.guest-onboarding .slide-img {
        flex: 2;

        -webkit-flex: 2;
        -ms-flex: 2;
    }
}

.onboarding.guest-onboarding .carousel-slide {
    flex: 1;

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

@media (min-width: 992px) {
    .header > input.search {
        width: auto;
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
    }

    .header > .nav-right,
    .header > .nav-left {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
    }

    .header > .nav-left {
        white-space: nowrap;
    }
}