.body {
    overflow: hidden;
}
.btn {
    border-radius: 5px !important;
}
.btn-floorfy {
    border: 2px solid var(--primary-color);
    background: rgba(248,118,21,0.9);
    color: #fff;
    border-radius: 100px;
    font-size: 17px;
    line-height: 20px;
    padding: 13px 26px;
    height: 50px;
}
.btn-floorfy:hover {
    color: #fff;
    background-color: var(--primary-color) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.btn-primary-live {
    background: #303AB2;
    border: 1px solid #303AB2 !important;
    color: #fff !important;
    text-transform: initial;
    font-weight: 600;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    border-radius: 5px !important;
}
.btn-primary-live-outline {
    background: none !important;
    border: 1px solid transparent !important;
    text-decoration: underline !important;
}
.link-live {
    color:var(--primary-color) !important;
    text-decoration: underline;
}
#div-invitation-link{
    position: absolute;
    margin-top: 15px;
    left: 43%;
}
.title-instructions {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 40px;
    font-weight: bold;
}

.instructions-content {
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 350px;
}
.drop-down-link{
    color: var(--primary-color);
    text-decoration: underline;
}
.drop-down-link:hover{
    cursor: pointer;
}
.instructions-content > svg{
    margin: 5px 30px 20px 30px;
}
/* Popup container */
.popup-oh {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup-oh .popuptext-oh {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    margin-bottom: -10px;
}

/* Popup arrow */
.popup-oh .popuptext-oh::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup-oh .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

#freeMinutesReached .modal-content,
#ohUserNameModal .modal-content,
#requestPermissions .modal-content {
    background: #f7f7f7;
    border-radius: 10px;
}

#requestPermissions .modal-content {
    font-weight: 500;
}

#ohUserNameModal .form-control,
#freeMinutesReached .form-control,
#setAgentPhone .form-control ,
#requestPermissions .form-control {
    border-radius: 0.5em !important;
    background: #fff !important;
    -webkit-box-shadow: 0 12px 48px 0 rgba(84,93,120,.2) !important;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1) !important;
    box-shadow: 0 12px 48px 0 rgba(84,93,120,.2) !important;
    border: 0 !important;
    line-height: 2 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height:auto;
}
#setAgentPhone .form-control {
    border-radius: 3px !important;
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
    height:auto;
    border: 1px solid var(--gray-200) !important;
}
#setAgentPhone .btn ,
#ohUserNameModal .btn ,
#requestPermissions .btn {
    -webkit-border-radius:3em;
    -moz-border-radius:3em;
    border-radius: 0.5em;
    text-transform: initial;
    font-size: 1em;
    background:var(--primary-color);
    color:#fff;
    box-shadow: none;
}

#ohFinished a {
    color: var(--primary-color);
    text-decoration: underline;
}

.oh-agent-navbar {
    display: flex;
    align-items: center;
    gap: .625rem;
    background: var(--blue-gray-900) !important;
    padding: .75rem 1.25rem;
    z-index: 99;
}

.oh-agent-navbar .nav-link {
    color:#fff !important;
}

.oh-agent-navbar .counter span {
    text-transform: initial;
}

.oh-agent-navbar .counter-value {
    font-size: 1.125rem;
    line-height: 1.2;
}

.oh-agent-navbar .counter-text {
    font-size: .75rem;
    font-weight:500;
}

.navbar-col-left {
    display: flex;
    justify-content: flex-start;
}

.navbar-col-right {
    flex: 1;
    display: flex;
    gap: .625rem;
    justify-content: flex-end;
    align-items: center;
}

.navbar-col-center {
    align-items: stretch;
    flex: 0;
}

.navbar-col-center .navbar-nav {
    gap: 0.625rem;
}

.oh-agent-navbar .navbar-col-center .counter {
    padding: .5rem 1rem;
    height: 100%;
    min-height: 2.625rem;
    background: var(--blue-gray-800);
    border-radius: 8px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.oh-agent-navbar .counter-text {
    width: max-content;
}

.oh-agent-navbar .time-session-counter-value {
    width: 8ch;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.oh-agent-navbar .users-counter-value {
    display: flex;
}

.button--primary.button--primary--light-blue {
    --background-color: var(--blue-500);
    /*--hover-box-shadow: not-defined;*/
    --hover-background-color: var(--blue-400);
    --focus-background-color: var(--blue-400);
    /*--active-box-shadow: not-defined;*/
    --active-background-color: var(--blue-400);
}

.button--primary.button--primary--light-blue img {
    filter: none;
}

.oh-agent-navbar .send-invitiation-button img {
    width: 20px;
    height: 20px;
    filter: var(--filter-white);
}

.col-right-button {
    height: 100%;
    min-height: 2.625rem;
    padding: .625rem;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    gap: .625rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--blue-gray-800);
    border-radius: .3125rem;
    border: none;
    cursor: pointer;
}

.start-broadcast-button {
    background: #F93942 !important;
    border: 1px solid #F93942 !important;
    color: #FFFFFF;
}

@media (max-width: 767px) {
    .oh-agent-navbar {
        padding: .3125rem;
    }

    .navbar-col-center .navbar-nav {
        gap: 0;
    }

    .oh-agent-navbar .navbar-col-center .counter {
        min-height: 2rem;
    }

    .oh-agent-navbar .navbar-col-center .time-session-counter {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .oh-agent-navbar .navbar-col-center .users-counter {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        box-shadow: -.75rem 0 0 -.625rem var(--blue-gray-500);
    }

    .col-right-button {
        min-height: 2rem;
        padding: .3125rem;
    }
}

.live-content {
    flex: 1;
    overflow: hidden;
}

.col-oh-left {
    max-width: 18% !important;
    background: #fff;
    z-index: 99;
}

.skeleton-row .right-col {
    position: relative;
    z-index: 99;
    background: #fff;
}

.col-oh-center {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.col-oh-right {
   background: #fff;
   z-index: 99;
   max-width: 18% !important;
}
.content-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.action-buttons-modal-container.modal-content {
    padding: 0 .4375rem 0 0;
}
.action-buttons-grid-container {
    max-height: 80vh;
    overflow: auto;
    padding: 1em .5em 1em 1em;
}
.action-buttons-grid.modal-body {
    padding: 0 .25rem .9735rem 0;
    display: grid;
    gap: .9375rem;
    grid-template-columns: repeat(auto-fill, minmax(7.1875rem, 1fr));
    grid-auto-rows: 7.5rem;
}
.action-button {
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 6px rgba(3, 14, 99, 0.2);
    padding: 1em 0.75em;
    border-radius: 5px;
    color: #030E63;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.375rem;
}

#setAgentPhone .modal-dialog,
#requestPermissions .modal-dialog {
    -webkit-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    margin: 0 auto;
}

#liveShowMap .modal-dialog {
    display: block;
    margin: 0 auto !important;
}
@media (min-width:320px)  {
    #freeMinutesReached .modal-dialog,
    #ohUserNameModal .modal-dialog,
    #setAgentPhone .modal-dialog,
    #requestPermissions .modal-dialog {
        width: 100%;
        height: initial;
        margin: 0;
        padding: 0;
    }

    #freeMinutesReached .modal-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1em;
    }
    #ohUserNameModal .modal-content ,
    #setAgentPhone .modal-content {
        height: auto;
        border-radius: 0 !important;
        bottom: 0 !important;
        position: absolute;
        width: 100%;
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }
    #videoCallsVisitorOffer .modal-content,
    #videoCallsVisitorContact .modal-content,
    #videoCallsVisitorSchedule .modal-content {
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }
    #container {
        bottom: 0 !important;
        height: 100% !important;
    }
    #propertyInfo .modal-content,
    #videoCallsVisitorActionButtons .modal-content,
    #videoCallsAgentChatMobile .modal-content,
    #ohContact .modal-content,
    #inviteUserVideocalls .modal-content,
    #addActionButtons .modal-content {
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }
    .tutorial-popup {
        display: none !important;
    }
    .action-button .switch {
        transform: scale(0.75);
    }
    .col-action-switch {
        top: 0.75em;
    }
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    .circle-request-permissions ,
    .circle-request-permissions video{
        width: 10em;
        height: 10em;
    }

    #fotocasaWatermark {
        width: 10em;
    }

    #setAgentPhone .modal-dialog {
        top: initial;
    }

    #liveShowMap .modal-dialog {
        transform: none !important;
        top: initial !important;
        bottom: 0 !important;
    }
    #liveShowMap .modal-content {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    #sendLocationBtn {
        width: 100%;
    }
    #ohChangeTour {
        z-index: 90;
    }
}
@media (min-width:415px)  {
    #ohUserNameModal .modal-content  {
        height: auto;
        min-height: 80%;
        bottom: 0 !important;
        position: absolute;
        width: 100%;
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }
    .circle-request-permissions,
    .circle-request-permissions video{
        width: 10em;
        height: 10em;
    }

    #fotocasaWatermark {
        width: 10em;
    }

    #setAgentPhone .modal-dialog {
        top: 50%;
        margin: 0 auto !important;
    }

}
@media (min-width: 576px) {
    #container {
        bottom: 12em !important;
        height: auto !important;
    }
    #propertyInfo .modal-content ,
    #videoCallsVisitorActionButtons .modal-content ,
    #ohContact .modal-content {
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }
    #inviteUserVideocalls .modal-content {
        border-radius: 0.5em;
    }

    .tutorial-popup {
        display: none !important;
    }

    #ohUserNameModal .modal-content,
    #setAgentPhone .modal-content,
    #freeMinutesReached .modal-content,
    #requestPermissions .modal-content {
        height: auto;
        max-height: initial;
        min-height: initial;
        border-radius: initial;
        position: relative;
    }

    .col-action-switch {
        top: 0.25em;
    }
    #freeMinutesReached .modal-dialog {
        max-width: 650px;
    }
    .col-action-switch {
        position: absolute;
        right: 0.5em;
    }
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    .circle-request-permissions,
    .circle-request-permissions video {
        width: 12em;
        height: 12em;
    }
    #fotocasaWatermark {
        width: 10em;
    }
    #liveShowMap .modal-dialog {
        -webkit-transform: translate(0,-50%) !important;
        -o-transform: translate(0,-50%) !important;
        transform: translate(0,-50%) !important;
        top: 50% !important;
        position: relative !important;
    }
    #liveShowMap .modal-content {
        border-radius: 5px;
    }
    #sendLocationBtn {
        width: initial;
    }
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    #ohUserNameModal:before,
    #freeMinutesReached:before,
    #setAgentPhone:before,
    #requestPermissions:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: auto;
    }

    #ohUserNameModal .modal-dialog,
    #setAgentPhone .modal-dialog,
    #freeMinutesReached .modal-dialog,
    #requestPermissions .modal-dialog {
        width: 100%;
        height: initial;
        margin: 0;
        padding: 0;
    }

    #ohUserNameModal .modal-content,
    #setAgentPhone .modal-content,
    #freeMinutesReached .modal-content,
    #requestPermissions .modal-content {
        height: auto;
        min-height: auto;
        border-radius: 0 !important;
    }

    .col-permissions-button {
        bottom: 0;
        left: 0;
    }
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    #fotocasaWatermark {
        width: 100%;
    }
}
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape)  {
    #ohUserNameModal:before,
    #freeMinutesReached:before,
    #setAgentPhone:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }

    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    #fotocasaWatermark {
        width: 16em;
    }
}
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) /*and (-webkit-min-device-pixel-ratio : 2)*/ {
    #ohUserNameModal:before,
    #freeMinutesReached:before,
    #setAgentPhone:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }

    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    #fotocasaWatermark {
        width: 20em;
    }
}
@media (min-width: 736px) {
    #ohUserNameModal .modal-dialog,
    #setAgentPhone .modal-dialog ,
    #freeMinutesReached .modal-dialog ,
    #requestPermissions .modal-dialog {
        width: 36em;
    }
    #requestPermissions .modal-dialog {
        max-width: 400px;
    }
    .circle-btn-openhouse {
        background: rgba(0,0,0,0.7);
        -webkit-border-radius:3em;
        -moz-border-radius:3em;
        border-radius: 3em;
        margin: 0.75em;
        display: inline-table;
        opacity: 0.8;
        cursor: pointer;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        transition: all 0.1s ease-out 0s;
    }
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 15em !important;
    }
    #setAgentPhone .modal-dialog {
        width: 30em;
    }
}
@media (max-width: 736px) {
    #ohUserNameModal .modal-content,
    #setAgentPhone .modal-content ,
    #freeMinutesReached .modal-content ,
    #requestPermissions .modal-content {
        border-radius:0;
    }
    .circle-btn-openhouse {
        background: rgba(0,0,0,0.5);
        -webkit-border-radius:3em;
        -moz-border-radius:3em;
        border-radius: 3em;
        margin: 0.75em;
        display: inline-table;
        opacity: 0.8;
        cursor: pointer;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        transition: all 0.2s ease-out 0s;
    }
    .circle-btn-openhouse div{
        cursor: pointer;
    }
    #liveShowMap .modal-dialog  {
        margin: 0;
        width: 100%;
        bottom: 0;
        position: absolute;
    }
    #ohUserNameModal .modal-dialog ,
    #freeMinutesReached .modal-dialog ,
    #inviteUserLivetour .modal-dialog ,
    #setAgentPhone .modal-dialog ,
    #ohChangeTour .modal-dialog {
        margin: 0;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    #ohUserNameModal .modal-content ,
    #ohChangeTour .modal-content ,
    #inviteUserLivetour .modal-content ,
    #setAgentPhone .modal-content ,
    #freeMinutesReached .modal-content ,
    #requestPermissions .modal-content ,
    #ohUserNameModal .modal-content {
        border-radius:0;
    }
    .consume-popup {
        width: 27.75em;
        min-width: 28.25em;
        max-width: 27.75em;
        right: 1em;
        top: 4.5em;
    }
    .consume-popup:after {
        left: calc(87% - 10px);
    }
    .snackbar-top {
        bottom: 22em !important;
    }
    #fotocasaWatermark {
        width: 10em;
    }
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    .circle-request-permissions ,
    .circle-request-permissions video {
        width: 12em;
        height: 12em;
    }
    #fotocasaWatermark {
        width: 100%;
    }
}
@media (min-width: 992px) {
    #fotocasaWatermark {
        width: 16em;
    }
}
@media (min-width: 1200px) {
    #ohUserNameModal .modal-dialog,
    #freeMinutesReached .modal-dialog ,
    #setAgentPhone .modal-dialog ,
    #requestPermissions .modal-dialog {
        width: 100%;
        height: initial;
        margin: 0;
        padding: 0;
    }
    #ohUserNameModal .modal-content,
    #freeMinutesReached .modal-content ,
    #setAgentPhone .modal-content ,
    #requestPermissions .modal-content {
        height: initial;
        min-height: initial;
        border-radius: 0.5em !important;
    }
    .col-permissions-button {
        position: relative;
    }
    .request-permissions-1 {
        padding-top: 2em !important;
    }
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    #fotocasaWatermark {
        width: 20em;
    }
}




/* DESKTOPS AND LAPTOPS */
@media only screen and (min-width : 1224px) {
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 29em !important;
    }
    #fotocasaWatermark {
        width: 20em;
    }
}
/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    #fotocasaWatermark {
        width: 20em;
    }

}
@media screen and (min-width: 1400px) {
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 39em !important;
    }
    #fotocasaWatermark {
        width: 20em;
    }
}
@media screen and (min-width: 1600px) {
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 47em !important;
    }
    #fotocasaWatermark {
        width: 20em;
    }
}
/* LARGE SCREENS */
@media only screen and (min-width : 1824px) {
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    #fotocasaWatermark {
        width: 20em;
    }
}
#freeMinutesReached .modal-dialog,
#ohUserNameModal .modal-dialog,
#requestPermissions .modal-dialog {
    -webkit-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 50%;
    margin: 0 auto;
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    .call-animation {
        width: 8em;
        height: 8em;
    }
    .call-action{
        font-size: 18px;
        margin:2em 0;
    }
    #freeMinutesReached:before,
    #inviteUserLivetour:before,
    #setAgentPhone:before,
    #ohUserNameModal:before,
    #ohFinished:before,
    #ohChangeTour:before,
    #modal_call:before ,
    #cam_mic_instructions_modal:before,
    #incoming_call:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
}
/* IPAD 1,2,3 (landscape) */
/*
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) !*and (-webkit-min-device-pixel-ratio : 2)*! {
*/
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape)  {
    .call-animation {
        width: 8em;
        height: 8em;
    }
    .call-action{
        font-size: 18px;
        margin:2em 0;
    }
    #ohUserNameModal:before,
    #freeMinutesReached:before,
    #inviteUserLivetour:before,
    #ohUserNameModal:before,
    #ohFinished:before,
    #ohChangeTour:before,
    #modal_call:before ,
    #cam_mic_instructions_modal:before,
    #incoming_call:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
    #videoCallsVisitorContact .modal-dialog {
        top: 50% !important;
    }
    #videoCallsVisitorActionButtons .modal-dialog {
        top: 34% !important;
    }
    #videoCallsVisitorSchedule .modal-dialog {
        top: 42% !important;
    }
    .empty-state-chat i {
        font-size: 3em !important;
    }
    #frame .content .message-input {
        bottom: 3.65em !important;
    }
    #frame .content .message-input .wrap input {
        padding: 13px 42px 13px 8px !important;
    }
    #frame .content .message-input .wrap .attachment {
        top: 1.25em !important;
    }
    .private-chat-empty, .public-chat-empty {
        height: 42vh !important;
    }
    #ohUserNameModal .modal-content {
        max-height: 96% !important;
        border-radius: 10px !important;
    }
    #signInBtn {
        margin-top: 1em !important;
    }
    #ohUserNameModal .modal-subtitle {
        margin-bottom: 0;
    }
    .daterangepicker.drop-up {
        margin-left: 10.5em !important;
        margin-top: 5.75em !important;
        padding: 0.5em !important;
    }
}

/* IPAD 1,2,3 (portrait) */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    .call-animation {
        width: 8em;
        height: 8em;
    }
    .call-action{
        font-size: 18px;
        margin:2em 0;
    }
    #ohUserNameModal:before,
    #freeMinutesReached:before,
    #inviteUserLivetour:before,
    #setAgentPhone:before,
    #ohUserNameModal:before,
    #ohFinished:before,
    #ohChangeTour:before,
    #modal_call:before ,
    #cam_mic_instructions_modal:before,
    #incoming_call:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
    .consume-popup {
        width: 48em;
        min-width: 48em;
        max-width: 48em;
        right: 1em;
        top: 5em;
    }
    .consume-popup:after {
        left: calc(92% - 10px);
    }
    .snackbar-top {
        bottom: 54em !important;
    }
}

#ohUserNameModal,
#freeMinutesReached,
#setAgentPhone,
#requestPermissions {
    z-index: 99999;
}

#ohUserNameModal .modal-title,
#freeMinutesReached .modal-title,
#setAgentPhone .modal-title,
#requestPermissions .modal-title {
    font-size: 24px;
}
#setAgentPhone input:focus ,
#ohUserNameModal input:focus ,
#freeMinutesReached input:focus ,
#requestPermissions input:focus {
    color: #495057;
    background-color: #fff;
    border-color: #fbb34b;
    outline: 0;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(251,179,75, 0.25) !important;
    box-shadow: 0 0 0 0.2rem rgba(251,179,75, 0.25) !important;
}
#controls_containers {
    position: fixed;
    bottom:0;
    left:0;
    z-index: 90;
    width: 100%;
    display: grid;
    gap: var(--grid-row-gap) var(--grid-column-gap);
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
    padding: .77em;
    background: var(--blue-gray-900);
    pointer-events: none;
}
.live-buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75em;
    grid-column: 2;
}



#setAgentPhone .modal-title ,
#ohUserNameModal .modal-title ,
#freeMinutesReached .modal-title ,
#requestPermissions .modal-title {
    font-size: 1.5em;
    font-weight: bold;
}
.circle-request-permissions video {
    background: #000;
    border-radius: 100%;
    border: 4px solid #fff;
    filter: drop-shadow(0px 2px 10px rgba(42, 53, 107, 0.2));
    object-fit: cover;
}
.sound-items {
    justify-content: center;
}
.mic-cam-switch {
    width: 4em;
    height: 4em;
    background: #565C71;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}
.config-mic-audio-btn {
    background: none !important;
    position: relative;
    right: 0.5em;
    bottom: 1.75em;
}
.mic-switch.disabled ,
.cam-switch.disabled {
    background: #F93942 !important;
    -webkit-transition: .2s;
    transition: .2s;
}
.mic-switch {
    background-image: linear-gradient(to bottom, transparent 0%, transparent 100%, var(--primary-color-dark) 0%, var(--primary-color-dark) 0%, var(--primary-color) 0%);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dropdown-request-config {
    display: none;
}
.dropdown-request-btn {
    border: 2px solid #DFE3E7 !important;
    background: none !important;
    color: initial !important;
    text-align: left;
    font-size: 1.2em;
    line-height: 1.5;
}
.dropdown-request-btn:after {
    position: absolute;
    right: 0.75em;
    top: 0.85em;
}
.dropdown-request-btn:focus {
    border-color:var(--primary-color) !important;
}
.dropdown-request-menu {
    width: 100%;
}
#ohUserNameModal video ,
#freeMinutesReached video ,
#requestPermissions video {
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}
@media (max-width : 768px) {
    .snackbar-col {
        position: absolute;
        bottom: 7em;
        left: 0;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (min-width : 768px) {
    .snackbar-col {
        position: absolute;
        bottom: 7em;
        left: 0;
        width: 75%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbarCustom {
    display: none; /* Hidden by default. Visible on click */
    background-color: rgba(0,0,0,0.6); /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 5px; /* Rounded borders */
    padding: 12px 42px; /* Padding */
    position: relative; /* Sit on top of the screen */
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.25));
    max-width: max-content;
    z-index: 99;
}
.snackbar-title {
    font-weight: 600;
    font-size: 16px;
}
.snackbar-container {
    font-family: 'Red Hat Display';
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 5px;
    justify-content: center;
    pointer-events: none;
}
.success-snackbar {
    background: #D4EDDA !important;
    color:#155724 !important;
    border: 1px solid #abe7ba;
    border-radius: 5px;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.25));
    justify-content: center;
    pointer-events: none;
}
.warning-snackbar {
    background: #FFF3C4 !important;
    color:#856404 !important;
    border: 1px solid #FFEEBA;
    border-radius: 5px;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.25));
    justify-content: center;
    pointer-events: none;
}
.danger-snackbar {
    background: #f8d7da !important;
    border: 1px solid #f5c6cb;
    color:#721c24 !important;
    border-radius: 5px;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.25));
    justify-content: center;
    pointer-events: none;
}

.tutorial-popup {
    pointer-events: all;
    position: absolute;
    width: 31em;
    min-width: 31em;
    max-width: 31em;
    padding: 1.5em;
    background: var(--blue-gray-900);
    color: #fff !important;
    box-shadow: 0 0 8px rgba(26, 27, 35, 0.1);
    border-radius: 8px;
    z-index: 9999;
    display: none;
    right: 11.5em;
}
#sidebar {
    --sidebar-section-flex-shrink: 1;

    height: 100%;
    background: #fff;
    transition: left .5s ease;
    color: var(--blue-gray-900);
    position: relative;
    z-index: 99;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 2.625rem;
    transition: flex-basis .5s ease;
    flex-basis: auto;
    flex-shrink: 1;
}

.sidebar-section:first-child {
    --flex-shrink: 0;
    flex-shrink: var(--flex-shrink);
    max-height: 100%;
}

.sidebar-section .sidebar-content {
    flex: 1;
    overflow: auto;
}

.sidebar-section .sidebar-info-content {
    display: flex;
    flex-direction: column;
}

.sidebar-section .sidebar-header[aria-expanded=true] {
    background: var(--blue-gray-50);
}

.sidebar-section .sidebar-header[aria-expanded=true] .arrow-icon {
    transform: rotate(180deg);
}

.sidebar-section .sidebar-header[aria-expanded=true] .arrow-icon svg {
    stroke: var(--blue-800);
}

#container {
    background:#fff;

}
#container canvas{
    width:100% !important;
    height: 100% !important;
    position: relative;
}
#container .viewer-canvas{
    width:100% !important;
    height: 100% !important;
}
.sidebar-action-buttons-content,
.sidebar-action-switches-content {
    padding: 0.9375rem 1.25rem;
    display: grid;
    --max-cols: 2;
    --cols-min-width: 5rem;
    --grid-row-gap: .9375rem;
    --grid-column-gap: .9375rem;
    /* Don't change the block below, change the variables above instead */
    gap: var(--grid-row-gap) var(--grid-column-gap);
    grid-template-columns: repeat(auto-fill, minmax(max(calc(100%/(var(--max-cols) + 1) - var(--grid-column-gap)*var(--max-cols)/(var(--max-cols) + 1) + 1px), var(--cols-min-width)), 1fr));
    /* Block end */
}
.action-button:hover {
    opacity:0.9;
}
.action-button.active {
    background: var(--blue-800);
    color: var(--white);
}
.action-button.active path {
    stroke: var(--white) !important;
}
.action-button.active img {
    /* CSS filter generator: https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(327deg) brightness(102%) contrast(103%);
}
.action-button.disabled {
    opacity: 0.4 !important;
    cursor: default;
}
.action-button-icon path {
    stroke:var(--blue-800);
}
.action-button-icon img {
    /* CSS filter generator: https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(8%) sepia(99%) saturate(3455%) hue-rotate(235deg) brightness(84%) contrast(113%);
}
.activity-panel {
    height: 30%;
    background:  var(--white);
    overflow-y: auto;
    overflow-x: hidden;
    z-index:9;
}
.activity-content {
    height: 20%;
    background: var(--white);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9;
}
.activity-header {
    z-index:9;
}

/* Circle button openhouse */
.circle-btn-openhouse {
    display: flex;
    pointer-events: all;
    cursor:pointer !important;
    border-radius:8px;
    background: var(--blue-gray-800) !important;
    color:var(--white);
    font-weight: bold;
    user-select: none;
    margin: 0;
    width: max-content;
    padding: .85em;
}
.circle-btn-openhouse a {
    color:var(--white) !important;
    text-decoration: none;
}
.circle-btn-openhouse:hover {
    background: var(--blue-gray-700) !important;
    opacity:0.7;
}
.circle-btn-openhouse.disabled {
    opacity: 0.25 !important;
    pointer-events: none !important;
}

.circle-finish-call,
.circle-finish-call:hover  {
    background: var(--red-400) !important;
}
.sidebar-info-content {
    padding: 0.5em 1.5em;
    color: var(--gray-600);
}
.sidebar-info-content #map,
#mapMobile {
    border-radius: 5px;
    border: 1px solid var(--gray-100);
}
.sidebar-info-content #map {
    margin: 1em 1em 1em 0;
}
.sidebar-info-content .gmnoprint {
    display: none;
}
.sidebar-title {
    color: var(--gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 1rem;
    font-weight: bold;
    width: 100%;
}
.without-cam-alert {
    border-radius: 5px;
}

.action-button-text {
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    margin: 0;
}
.accept-terms a {
    color:var(--blue-gray-900) !important;
    font-weight: bold;
}
#frame {
    position: relative;
    z-index: 99;
}
.property-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:1; /* number of lines to show */
    -webkit-box-orient: vertical;
    display: flex;
    align-items: center;
    justify-content: left;
}

.edit-property img {
    /* CSS filter generator: https://codepen.io/sosuke/pen/Pjoqqp */
    filter: invert(8%) sepia(99%) saturate(3455%) hue-rotate(235deg) brightness(84%) contrast(113%);
}

#map iframe {
    border-radius: 5px;
}

#mapMobile {
    margin: 1em 0 1em 0;
}

.chat-icon-dot {
    height: 6px;
    width: 6px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    right: 1.5em;
    top: 1.4em;
}
.online-dot {
    background-color:#06C15D;
}
.offline-dot {
    background-color: #F93942;
}
a {
    font-family: "Red Hat Display" !important;
}
.viewer-container {
    position: relative;
    overflow: hidden;
    background-color: var(--blue-gray-900);
}
.back-layer,
.front-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.back-layer {
    z-index: 0;
}

.front-layer {
    display: grid;
    /* Grid rows defined to work with only cams and with .go-back-button + cams */
    grid-template-rows: auto;
    grid-auto-rows: 1fr;
    gap: .625rem;
    padding: .625rem;
    pointer-events: none;
}

.streams-layers-container {
    position: relative;
    grid-column: span 3;
    overflow: hidden;
}

.visit-form-container {
    position: relative; /* To center and constrain blurring from Swals with position absolute */
    grid-column: span 3;
    border-radius: 8px;
    padding-right: 1px;
    max-height: 100%;
    background: white;
    overflow: hidden;
    pointer-events: all;
}

.visit-form-container #visitFormSubmittedSuccessSwal {
    position: absolute;
}

.streams-full-size-container,
.streams-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.streams-container {
    display: flex;
    align-items: flex-start;
    gap: 3.125rem;
    pointer-events: none;
    z-index: 9;
}

.streams-full-size-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.go-back-button-container {
    display: none;
    pointer-events: all;
}

.go-back-button {
    padding: .3125rem .625rem;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
}

.go-back-button-img {
    width: 1.25rem;
}

.go-back-button-text {
    margin-left: .3125rem;
}

.webcams-container {
    position: relative;
    height: 7.8125rem; /* 6.25rem web-container + 1.25rem stream-name-label + .3125rem space-between for webcam-elements */
    overflow: hidden;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    gap: .3125rem;
}

.agent-video {
    flex: 0 0 6.25rem;
 }

.remote-video {
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.show-all {
    display: none;
    place-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 2.74rem;
    height: 2.74rem;
    padding: 0;
    color: white;
    background: var(--gray-800);
    border: none;
    border-radius: 50%;
    z-index: 99;
    font-size: 1.125rem;
    font-weight: bold;
    pointer-events: all;
    cursor: pointer;
}

.webcams-container.space-exceeded {
    padding-right: 1.875rem;
}

.webcams-container.space-exceeded .show-all {
    display: grid;
}

.webcam-elements {
    position: relative;
    width: 6.25rem;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-transition: transform .5s ease, margin .5s ease, width .5s ease, opacity .5s ease, height .5s ease;
    -moz-transition: transform .5s ease, margin .5s ease, width .5s ease, opacity .5s ease, height .5s ease;
    -ms-transition: transform .5s ease, margin .5s ease, width .5s ease, opacity .5s ease, height .5s ease;
    -o-transition: transform .5s ease, margin .5s ease, width .5s ease, opacity .5s ease, height .5s ease;
    transition: transform .5s ease, margin .5s ease, width .5s ease, opacity .5s ease, height .5s ease;
}

.remote-webcam-elements {
    order: 1;
}

.webcam-hidden {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}

.webcam-maximizing-transition {
    -webkit-transition: transform .5s ease, opacity .5s ease;
    -moz-transition: transform .5s ease, opacity .5s ease;
    -ms-transition: transform .5s ease, opacity .5s ease;
    -o-transition: transform .5s ease, opacity .5s ease;
    transition: transform .5s ease, opacity .5s ease;
}

.webcam-transition-node {
    -webkit-transition: margin .5s ease, width .5s ease, flex-basis .5s ease;
    -moz-transition: margin .5s ease, width .5s ease, flex-basis .5s ease;
    -ms-transition: margin .5s ease, width .5s ease, flex-basis .5s ease;
    -o-transition: margin .5s ease, width .5s ease, flex-basis .5s ease;
    transition: margin .5s ease, width .5s ease, flex-basis .5s ease;
}

.webcam-container {
    position: relative;
    overflow: hidden;
    transform: translateZ(0); /* To fix overflow hidden with border-radius on Safari. See https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

.streams-container .webcam-container {
    height: 6.25rem;
    max-width: 100%;
    border: 2px solid white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.streams-full-size-container .webcam-container,
.streams-full-size-container .OT_root {
    height: 100%;
    border-radius: .625rem;
}

.maximize-webcam,
.minimize-webcam {
    display: none;
    position: absolute;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.maximize-webcam {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
}

.streams-container .webcam-container:hover .maximize-webcam {
    display: block;
}

.minimize-webcam {
    width: 2.1875rem;
    height: 2.1875rem;
    bottom: .625rem;
    right: .625rem;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 99;
    cursor: pointer;
}

.streams-full-size-container .minimize-webcam {
    display: block;
}

.webcam-container:hover .minimize-webcam {
    background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 575px) {
    .webcams-container {
        height: 6.5625rem; /* 5rem web-container + 1.25rem stream-name-label + .3125rem space-between for webcam-elements */
    }

    .agent-video {
        flex: 0 0 5rem;
    }

    .webcam-elements {
        width: 5rem;
    }

    .streams-container .webcam-container {
        height: 5rem;
    }
}

.OT_root { /* video root element */
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.stream-name-label {
    width: 100%;
    height: 1.25rem;
    max-width: 100%;
    padding: 0 .3125rem;
    font-size: 0.75rem;
    font-weight: bold;
    text-align: center;
    z-index: 9;
    pointer-events: none;
}

.streams-full-size-container .stream-name-label {
    position: absolute;
    bottom: 3%;
}

.stream-name-label .group-label {
    margin: 0 auto;
    width: fit-content;
    width: -moz-fit-content; /* For Firefox */
    height: 100%;
    max-width: 100%;
    color: white;
    display: flex;
    align-items: center;
    gap: .3125rem;
    padding: .125rem .3125rem;
    overflow: hidden;
    background: var(--gray-800);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    pointer-events: all;
    transition: all 0.5s ease;
}

.stream-name-label .group-label span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.muted-icon {
    display: none;
}

.muted-stream .bars {
    display: none;
}

.muted-stream .muted-icon {
    display: block;
}

.muted-stream .participants__participant__sound {
    padding: 0 1px;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
                                  VOICE WAVES
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.bars {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: .125rem 0;
}

.bar {
    background: var(--blue-300);
    width: 4px;
    min-height: 4px;
    max-height: 100%;
    margin: 0 1px;
    border-radius: 2px;
}

.pictures-container {
    height: calc(100% - 12.5rem - .935rem); /* 100% - margin-top - margin-bottom */
    margin: 12.5rem .935rem .935rem;
    padding: 1.25rem 0;
    background: var(--blue-gray-800);
    color: white;
    border-radius: .935rem;
    display: flex;
    flex-direction: column;
}

@media (orientation: landscape) {
    .pictures-container.full-size {
        height: calc(100% - .9375rem - .9375rem);
        margin-top: .9375rem;
    }

    .streams-container.hide {
        display: none;
    }
}

.floorplans-container.full-size {
    background: white;
}

.pictures-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 0 1.25rem;
    font-size: 1rem;
}

.pictures-container.full-size .pictures-header {
    display: none;
}

.pictures-title {
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.pictures-close-button {
    font-size: 1.3em;
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
}

.pictures-content {
    position: relative;
    height: 100%;
    overflow: hidden;
    display: grid;
    gap: .625rem;
    grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
    grid-auto-rows: 7.375rem;
    padding: 0 1.25rem;
    overflow-y: auto;
}

.pictures-container.full-size .pictures-content {
    overflow: hidden;
}

.pictures-content a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
}

floorplans-content a {
    padding: .3125rem;
}

.images-content a {
    padding: 0;
    overflow: hidden;
}

.pictures-content img {
    border-radius: 2px;
}

.floorplans-content img {
    max-width: 100%;
    max-height: 100%;
}

.images-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pictures-content::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px 5px var(--gray-200);
}

.pictures-content::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px 5px var(--blue-gray-800);
}

/* When images displayed one by one with lightGallery.js */
/* lg container */
.lg-container {
    display: none;
}
.lg-show {
    display: block;
}
.pictures-content .lg-backdrop,
.pictures-content .lg-outer {
    position: absolute;
}
.pictures-content .lg {
    display: flex;
    flex-flow: column-reverse;
    background: var(--blue-gray-800);
}
.floorplans-content .lg {
    background: white;
}
/* Current image top container */
.pictures-content .lg-container .lg-outer .lg-inner {
    position: relative;
    flex: 1;
}
/* Image top container */
.pictures-content .lg-container .lg-outer .lg-inner .lg-item {
    opacity: 1;
}
/* Image direct parent container */
.pictures-content .lg-container .lg-img-wrap {
    padding: 0;
}
/* Image element */
.pictures-content .lg-container .lg-object {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background: var(--blue-gray-800);
}
.floorplans-content .lg-container .lg-object {
    background: white;
}
/* Top bar */
.pictures-content .lg-container .lg-toolbar {
    position: relative;
    margin-bottom: 1.25rem;
    padding: 0 1.25rem;
    background: var(--blue-gray-800);
}
.floorplans-content .lg-container .lg-toolbar {
    background: white;
}
/* Close button (x) and navigation buttons (arrows) color */
.pictures-content .lg-container .lg-icon {
    color: #eee;
}
/* Close button (x) container styles */
.pictures-content .lg-container .lg-close {
    position: static;
    padding: 0;
    height: min-content;
    width: min-content;
    color: white;
    background-color: transparent;
    border: none;
}
.floorplans-content .lg-container .lg-close {
    color: var(--gray-800);
}
.pictures-content .lg-container .lg-close:hover {
    color: white;
}
.floorplans-content .lg-container .lg-close:hover {
    color: var(--gray-800);
}
/* Navigation buttons (arrows) container styles */
.pictures-content .lg-container .lg-prev,
.pictures-content .lg-container .lg-next {
    position: absolute;
    font-size: 1.25rem;
    top: 50%;
    padding-top: 1px;
    padding-bottom: 9px;
    font-weight: 1000;
    background-color: #000;
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.2));
    z-index: 9999;
    cursor: pointer;
}
.pictures-content .lg-container .lg-prev {
    left: 1rem;
    padding-left: 12px;
    padding-right: 13px;
}
.pictures-content .lg-container .lg-next {
    right: 1rem;
    padding-left: 13px;
    padding-right: 12px;
}
/* Previous arrow button content */
.pictures-content .lg-container .lg-prev:after {
    content: '\2039';
}
/* Next arrow button content */
.pictures-content .lg-container .lg-next:before {
    content: '\203A';
}
/* Image number container styles */
.pictures-content .lg-container .lg-sub-html {
    position: absolute;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 500;
    width: min-content;
    margin: auto;
    padding: 7px 15px 7px 50px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.8);
    background-image: url("https://floorfycdn.com/viewer/svg/dollhouse_layers_btn_notfilled.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
}

.interactive-map, .screen-share {
    display: none;
    height: 100%;
}

.input-chat-text {
    font-family: "Red Hat Display", sans-serif !important;
    background: #fff;
    border: 1px solid #A8B0BD !important;
    border-radius: 5px;
}
.input-chat-text:focus {
    border: 1px solid #A8B0BD !important;
}
.send-icon {
    width: 1.25em;
}
#frame .content .message-input .wrap input {
    width: calc(100% - 36px) !important;
    padding: 8px 34px 8px 8px !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.05);
}
.fotocasa-logo {
    padding-bottom: 3px;
}
#frame .content .message-input-chat-agent .wrap .attachment {

}
#frame .content .message-input .wrap .attachment {
    position: absolute;
    z-index: 9999;
    color: #fff;
    cursor: pointer;
    pointer-events: all;
}
#frame .content .message-input .wrap button {
    background: var(--blue-gray-900) !important;
    border:0  !important;
}
#frame .content .message-input .wrap .submit {
    background: #fff !important;
    color:var(--blue-gray-900)  !important;
}
#frame .content .message-input .wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.send-icon {
    margin-right: 0.65em;
}
.consume-popup {
    pointer-events: all;
    position: absolute;
    padding: 1.5em;
    background: #fff;
    color: #fff !important;
    border-radius: 8px;
    z-index: 9999;
    visibility: hidden;
    text-align: center;
}

.consume-popup {
    box-shadow: 0 0 8px rgba(26, 27, 35, 0.1);
}

.consume-popup:after {
    top: -0.5em;
    content: "";
    width: 45px;
    height: 45px;
    transform: rotate(-45deg);
    background: #fff;
    position: absolute;
    z-index: -1;
}
#consumePopup .popup-title {
    color: var(--blue-800);
    font-weight: bold;
}
.consume-container {
    background: #EEF0F2;
    border-radius: 8px;
    color: var(--gray-600);
}
.consumed-minutes {
    color:#06C15D;
    font-size: 16px;
    font-weight: 600;
}
#consumePopup .bottom-text {
    color: var(--gray-500);
}
#freeMinutesReached .modal-title {
    color: var(--blue-800);
}
/* MODALS */
#ohUserNameModal,
#requestPermissions,
#freeMinutesReached {
    background:var(--blue-gray-800);
}
#ohUserNameModal .modal-dialog ,
#freeMinutesReached .modal-dialog ,
#requestPermissions .modal-dialog ,
#inviteUserLivetour .modal-dialog {
    -webkit-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 50%;
    margin: 0 auto;
}
#ohUserNameModal ,
#inviteUserLivetour ,
#freeMinutesReached,
#requestPermissions {
    z-index:9990;
}
#ohUserNameModal .modal-content ,
#freeMinutesReached .modal-content ,
#inviteUserLivetour .modal-content ,
#requestPermissions .modal-content{
    border-radius: 0.5em;
}
#ohUserNameModal .modal-dialog ,
#freeMinutesReached .modal-dialog ,
#inviteUserLivetour .modal-dialog ,
#requestPermissions .modal-dialog ,
#ohUserNameModal .modal-dialog ,
#ohChangeTour .modal-dialog {
    border-radius: 1em;
}
#ohChangeTour .bmd-form-group {
    margin-bottom: 1em;
}
#ohUserNameModal .bmd-form-group ,
#freeMinutesReached .bmd-form-group ,
#inviteUserLivetour .bmd-form-group ,
#requestPermissions .bmd-form-group ,
#ohUserNameModal .bmd-form-group {
    margin-bottom: 0.5em;
}
#ohUserNameModal .bmd-form-group input::placeholder ,
#freeMinutesReached .bmd-form-group input::placeholder ,
#ohChangeTour .bmd-form-group input::placeholder ,
#ohUserNameModal .bmd-form-group input::placeholder ,
#inviteUserLivetour .bmd-form-group input::placeholder ,
#requestPermissions .bmd-form-group input::placeholder {
    line-height: 2;
}
#ohUserNameModal .bmd-form-group .bmd-label-floating,#freeMinutesReached  .bmd-form-group .bmd-label-placeholder ,
#freeMinutesReached .bmd-form-group .bmd-label-floating,#freeMinutesReached  .bmd-form-group .bmd-label-placeholder ,
#ohChangeTour .bmd-form-group .bmd-label-floating,#ohChangeTour  .bmd-form-group .bmd-label-placeholder ,
#inviteUserLivetour .bmd-form-group .bmd-label-floating,#inviteUserLivetour  .bmd-form-group .bmd-label-placeholder ,
#ohUserNameModal .bmd-form-group .bmd-label-floating,#ohUserNameModal .bmd-form-group .bmd-label-placeholder ,
#requestPermissions .bmd-form-group .bmd-label-floating,#requestPermissions  .bmd-form-group .bmd-label-placeholder {
    top: 3.1875rem;
}
#ohUserNameModal .bmd-form-group .bmd-label-static ,
#freeMinutesReached .bmd-form-group .bmd-label-static ,
#ohChangeTour .bmd-form-group .bmd-label-static ,
#inviteUserLivetour .bmd-form-group .bmd-label-static ,
#requestPermissions .bmd-form-group .bmd-label-static ,
#ohUserNameModal .bmd-form-group .bmd-label-static {
    left: 1em;
}
#ohUserNameModal .bmd-form-group .bmd-label-static ,
#freeMinutesReached .bmd-form-group .bmd-label-static ,
#ohChangeTour .bmd-form-group .bmd-label-static ,
#inviteUserLivetour .bmd-form-group .bmd-label-static ,
#requestPermissions .bmd-form-group .bmd-label-static ,
#ohUserNameModal .bmd-form-group .bmd-label-static {
    top: 1.5em;
}

#ohUserNameModal input:focus ,
#freeMinutesReached input:focus ,
#ohChangeTour input:focus ,
#ohUserNameModal input:focus ,
#inviteUserLivetour input:focus ,
#requestPermissions input:focus {
    color: #495057;
    background-color: #fff;
    border-color: #fbb34b;
    outline: 0;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(251, 179, 75, 0.25) !important;
    box-shadow: 0 0 0 0.2rem rgba(251, 179, 75, 0.25) !important;
}
#ohUserNameModal,
#inviteUserLivetour,
#requestPermissions,
#freeMinutesReached,
#ohUserNameModal,
#ohChangeTour,
#modal_call,
#cam_mic_instructions_modal,
#ohFinished {
    text-align: center;
}
#ohUserNameModal .modal-dialog ,
#inviteUserLivetour .modal-dialog ,
#ohUserNameModal .modal-dialog ,
#ohFinished .modal-dialog ,
#ohChangeTour .modal-dialog ,
#modal_call .modal-dialog ,
#cam_mic_instructions_modal .modal-dialog ,
#requestPermissions .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
#ohUserNameModal ,
#inviteUserLivetour ,
#requestPermissions ,
#ohUserNameModal ,
#ohFinished ,
#ohChangeTour {
    color:var(--blue-gray-800);
}
#ohUserNameModal .modal-content {
    padding: 2em;
}
#freeMinutesReached .modal-content,
#inviteUserLivetour .modal-content,
#requestPermissions .modal-content,
#ohChangeTour .modal-content {
    padding: 1em;
}
#ohUserNameModal .modal-body,
#freeMinutesReached .modal-body,
#inviteUserLivetour .modal-body,
#requestPermissions .modal-body,
#ohUserNameModal .modal-body,
#inviteUserLivetour .modal-header,
#ohChangeTour .modal-body,
#ohChangeTour .modal-header {
    padding: 0;
}
#ohUserNameModal .modal-title ,
#freeMinutesReached .modal-title ,
#requestPermissions .modal-title ,
#inviteUserLivetour .modal-title ,
#requestPermissions .modal-title ,
#ohChangeTour .modal-header,
#ohFinished .modal-title {
    font-size: 1.5em;
    font-weight: bold;
}

#ohUserNameModal ::placeholder,
#freeMinutesReached ::placeholder,
#ohChangeTour ::placeholder,
#requestPermissions ::placeholder,
#inviteUserLivetour ::placeholder,
#ohUserNameModal ::placeholder {
    font-size: 1em;
}

#ohUserNameModal .modal-content,
#freeMinutesReached .modal-content,
#ohChangeTour .modal-content,
#inviteUserLivetour .modal-content,
#requestPermissions .modal-content,
#ohUserNameModal .modal-content,
#ohFinished .modal-content {
    background: #f7f7f7;
    border-radius: 10px;
}

#ohUserNameModal .form-control ,
#freeMinutesReached .form-control ,
#ohChangeTour .form-control ,
#inviteUserLivetour .form-control ,
#requestPermissions .form-control {
    border-radius: 0.5em !important;
    background: #fff !important;
    -webkit-box-shadow: 0 12px 48px 0 rgba(84,93,120,.2) !important;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1) !important;
    box-shadow: 0 12px 48px 0 rgba(84,93,120,.2) !important;
    border: 0 !important;
    line-height: 2 !important;
    padding: 0 1em !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height:auto;
}
#ohChangeTour .btn ,
#ohUserNameModal .btn ,
#inviteUserLivetour .btn ,
#ohFinished .btn {
    padding: 5px 10px;
    -webkit-border-radius:3em;
    -moz-border-radius:3em;
    border-radius: 0.5em;
    text-transform: capitalize;
    height: 34px;
    font-size: 1em;
    background:var(--primary-color);
    border-color: var(--primary-color) !important;
    color:#fff;
    box-shadow: none;
}
#freeMinutesReachedAlert {
    font-weight: bold;
    border-radius: 8px;
    text-align: initial;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.activity-row {
    background: var(--blue-gray-50);
    padding:1em;
    border-bottom: 1px solid var(--gray-100);
    margin: 0;
}
.activity-row-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.info-container {
    flex: 1;
    overflow: hidden;
    word-wrap: break-word;
}
.consume-icon {
    pointer-events: none;
}
.link-text {
    color:#303AB2 !important;
    text-decoration: underline !important;
    font-weight: 700;
}
.openhouse-finish-feedback-popup {
    padding-bottom: 0.75em !important;
}
#sub-frame-error,
.openhouse-finish-feedback-container,
.col-oh-center,
.live-finished-summary-container,
.live-expired-swal-container,
.initial-backdrop {
    background: var(--blue-gray-800) !important;
}
.blue-gray-800-backdrop {
    background: var(--blue-gray-800) !important;
}
.live-finished-summary-container .swal2-content{
    color: var(--blue-gray-900) !important;
    font-size: 16px;
    padding-bottom: 0 !important;
    font-weight: 500;
}
.initial-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}
.swal2-popup {
    border-radius: 10px !important;
}
.icon-experience {
    cursor: pointer;
    height:2.5em;
    width:2.5em;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-experience.active {
    background: radial-gradient(50% 50% at 50% 50%, #EEF0F2 66.15%, #DFE3E7 100%);
}
.icon-experience:hover {
    border: 2px solid #EEF0F2;
}

/*  Offer slider (noUISlider) */
.noUi-connect {
    background: var(--primary-color) !important;
}
.noUi-horizontal .noUi-handle {
    height:18px !important;
    width: 18px !important;
}
.noUi-horizontal {
    height: 6px !important;
}
.noUi-handle {
    border-radius: 100% !important;
    outline: none !important;
    cursor:pointer !important;
}
.noUi-handle:before, .noUi-handle:after {
    display:none !important;
}
.noUi-tooltip {
    background: var(--primary-color-dark) !important;
    border-color: var(--primary-color-dark) !important;
    color:#fff !important;
    padding:0.5em 1em;
    font-weight: bold;
}
.noUi-tooltip:after {
    content: '';
    position: absolute;
    left: 17px;
    top: 29px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--primary-color-dark) !important;
    clear: both;
}
.noUi-tooltip:nth-of-type(0) {
    display:none !important;
}
.noUi-horizontal .noUi-tooltip {
    bottom: 150% !important;
}
.noUi-horizontal .noUi-tooltip {
    left:40% !important;
}
.noUi-handle:before, .noUi-handle:after {
    background: transparent;
}
.noUi-target {
    border: none !important;
}
.noUi-value {
    padding-top: 5px;
}
.preview-offer-title {
    background: var(--gray-800);
    color: #fff;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 12px;
    font-weight: bold;
}
.preview-border {
    border: 1px solid #0745F2 !important;
    box-sizing: border-box;
    border-radius: 5px;
}
.slider-offer-container {
    padding: 4em 2.5em !important;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label:before {
    box-shadow: 0 0 0 0.2rem rgba(251,179,75, 0.25) !important;
}
.custom-control-input~.custom-control-indicator{
    background-color: grey !important;
}

.custom-control-input:focus~.custom-control-indicator{
    box-shadow: none !important;
}
.last-offers-value-content {
    background: #EEF0F2;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.last-offers-recently {
    display: flex;
    align-items: center;
    justify-content: left;
}
.last-offers-value {
    color:#F93942 !important;
    font-weight: bold;
    font-size: 14px;
}
.last-offers-value-before {
    text-decoration-line: line-through;
    color: #8B94A7;
}
.last-offers-number {
    color: #8B94A7;
    font-size: 14px;
}
.last-offers-number-value {
    font-weight:bold;
    font-size:16px;
}
.noUi-handle {
    cursor:pointer;
    outline:none !important;
}
.finish-confirm-button {
    background: none !important;
    box-shadow: none !important;
    padding-bottom: 0!important;
}
.finish-actions {
    border-top: 1px solid var(--gray-100);
}
.show-property-details {
    background-color: rgb(48, 58, 178) !important;
    border-left-color: rgb(48, 58, 178) !important;
    border-right-color: rgb(48, 58, 178) !important;
}
.message-input-row {
    position: fixed;
    bottom: 0;
    width: 100%;
}
/* The loading Class */
.loading {
    position: relative;
    background-color: #e2e2e2 !important;
}
/* The moving element */
.loading::after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: -webkit-gradient(linear, left top,
    right top, from(transparent),
    color-stop(rgba(255, 255, 255, 0.2)),
    to(transparent));
    background: linear-gradient(90deg, transparent,
    rgba(255, 255, 255, 0.2), transparent);
    /* Adding animation */
    animation: loading 0.8s infinite;
}
/* Loading Animation */
@keyframes loading {
    100% {
        transform: translateX(100%);
    }
}
.add-more-action-buttons {
    display: flex;
    flex-direction: initial;
    align-items: center;
    justify-content: center;

}
#sidebar .add-more-action-buttons {
    position: relative;
    padding: 0;
    top: inherit;
}
.snackbar-container.snackbar-link-copied {
    bottom:50% !important;
    font-weight: 500;
}
.copy-col {
    cursor: pointer;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
                            Card Skeleton for Loading
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.skeleton-card {
    background-color: #fff;
    height: auto;
    width: auto;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 15px 15px 0 rgba(8, 18, 109, 0.1);
    margin: 1.5em 0;
}
/* Card image loading */
.card__image img {
    width: 100%;
    height: 100%;
}

.card__image.loading {
    height: 10em;
    width: 400px;
}
.card__circle.loading {
    width: 10em;
    height: 10em;
    border-radius: 100%;
    right: 2em;
    top: 2em;
    position: absolute;
    z-index: 9;
}
/* Card title */
.card__title {
    font-size: 22px;
    font-weight: 700;
}
.card__title.loading {
    height: 1.5rem;
    width: 91%;
    margin: 1rem;
    border-radius: 3px;
    margin-bottom: 1.25em;
}
.card__textline {
    font-size: 22px;
}
.card__textline.loading {
    height: 1rem;
    width: 91%;
    margin: 1rem;
    border-radius: 3px;
}
.chat__bubble.right {
    margin-left: auto !important;
}
.chat__bubble.loading {
    height: 3rem;
    width: 50%;
    margin: 1rem;
    border-radius: 3px;
}
.card__lastline{
    font-size: 22px;
}
.card__lastline.loading {
    height: 1rem;
    width: 70%;
    margin: 1rem;
    border-radius: 3px;
}
/* Card description */
.card__btn {
    font-size: 16px;
}
.action__btn.loading {
    height: 8.5em;
    margin: 1rem;
    border-radius: 5px;
    width: 7em;
}
.finish__btn.loading {
    height: 2.5rem;
    width: 100%;
    border-radius: 10px
}
.card__btn.loading {
    height: 2.5rem;
    margin: 1rem;
    border-radius: 3px;
    width: 7em;
    margin-left: 3em;
    margin-top: 2em;
    margin-bottom: 2em;
}

.skeleton-row .message-input {
    background: #fff;
}
.bg_heart {
    position: absolute;
    bottom: 5.5em;
    right: 0;
    width: 45vw;
    height: 65vh;
    background-color: transparent !important;
    z-index: 99999;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    pointer-events: none;
}
#ohChangeTour .modal-title {
    font-size: 1em;
}
#changeTourLive {
    border: 0;
}
.swal2-container {
    z-index: 999999 !important;
}
.swal-warning {
    position: relative !important;
}
.swal-limit-connections {
    transform: inherit !important;
    text-align: initial;
}
.swal-limit-connections-popup .icon-col{
    align-items: initial;
}
.limit-connection-confirm-btn {
    margin: 0 !important;
}
.swal-limit-connections-content {
    padding: 0.5em;
}
#videoCallsAgentChatMobile .modal-body {
    height: 100%;
    overflow-y: auto;
    margin-bottom: 4.5em !important;
}
#fotocasaWatermark {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 3.5em;
    z-index: 1;
}
#liveShowMap {
    z-index: 99;
    pointer-events: none;
}
#liveShowMap .modal-content {
    padding: 1.5em;
    border-radius: 5px;
}
#liveShowMap .modal-title {
    font-size: 1.25em;
    font-weight: bold;
}
#locationMap iframe{
    border-radius: 8px;
    border:0;
    min-height: 32vh;
    outline:none !important;
}
.search-location-label {
    width: 100%;
}
.search-location-label:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 20px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.99961 1C5.29061 1 3.09961 3.191 3.09961 5.9C3.09961 9.575 7.99961 15 7.99961 15C7.99961 15 12.8996 9.575 12.8996 5.9C12.8996 3.191 10.7086 1 7.99961 1ZM7.99961 7.65C7.03361 7.65 6.24961 6.866 6.24961 5.9C6.24961 4.934 7.03361 4.15 7.99961 4.15C8.96561 4.15 9.74961 4.934 9.74961 5.9C9.74961 6.866 8.96561 7.65 7.99961 7.65Z' stroke='%238B94A7' stroke-width='1.4'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}
.gm-fullscreen-control {
    display: none !important;
}
#searchLocation {
    outline:none;
}
.sidebar-header {
    cursor:pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.arrow-icon {
    transform: rotate(0);
}
.arrow-icon svg {
    stroke:#6B748E;
    display: flex;
}
.property-info-btn {
    background:var(--blue-gray-50);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0.25em;
    cursor:pointer;
    padding: 0.5em;
}
.property-info-btn:hover {
    opacity:0.8;
}
.no-image {
    width: 60%;
    display: flex;
    margin: auto;
    padding: 0.5em;
}
.item-col-img {
    display: flex;
    background-color: rgba(0,0,0,0.08);
    border-top-left-radius: 0.75em !important;
    border-bottom-left-radius: 0.75em !important;
}
.card-property-item img {
    border-top-left-radius: 0.75em !important;
    border-bottom-left-radius: 0.75em !important;
}
.card-property-item {
    min-height: 7em;
    box-shadow: 0 10px 30px 0 rgba(21, 10, 82, 0.1);
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    background: #fff;
    cursor:pointer !important;
}

/* Counters */
.live-counters {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.live-counters .counter {
    display: flex;
    align-items: center;
    padding: 0;
    gap: .5em;
}
.live-counters  .counter-text,
.live-counters .counter-value {
    display: flex;
    min-width: fit-content;
}
.live-counters .counter img {
    width: 20px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(24%) hue-rotate(305deg) brightness(109%) contrast(107%);
}
.live-counters .counter .heart-icon-filled {
    filter: brightness(0) saturate(100%) invert(19%) sepia(100%) saturate(1757%) hue-rotate(337deg) brightness(144%) contrast(95%);
}

.controls_mic-p img,
.controls_camera-p img {
    min-width: 24px;
}

#controls_containers .oh-button-start {
    gap: .75em;
}
@media (min-width:320px) {
    #requestPermissions .modal-dialog {
        margin: 0;
        padding: 0;
        transform: inherit;
        top: auto;
        height: auto;
        bottom: 0 !important;
        position: absolute;
        width: 100%;
        left: 0;
    }
    #requestPermissions .modal-content {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }
}
@media only screen and (max-width : 320px) and (orientation : portrait) {
    #requestPermissions .modal-dialog {
        width: 100%;
        height: initial;
        margin: 0;
        padding: 0;
    }
}
@media (min-width: 576px) {
    #requestPermissions .modal-dialog {
        left: inherit;
        position: relative;
        -webkit-transform: translate(0,-50%) !important;
        -o-transform: translate(0,-50%) !important;
        transform: translate(0,-50%) !important;
        top: 50%;

    }
    #requestPermissions .modal-content {
        -webkit-border-radius: inherit;
        -moz-border-radius: inherit;
        border-radius: inherit;
    }
}
@media (min-width: 768px) {
    #requestPermissions .modal-content {
        height: initial;
        min-height: initial;
        -webkit-border-radius: 0.5em !important;
        -moz-border-radius: 0.5em !important;
        border-radius: 0.5em !important;
    }
}
@media(max-width:768px){
    #controls_containers .oh-button-start {
        padding: 0.773em !important;
    }
}
@media (min-width: 992px) {
    #requestPermissions .modal-content {
        height: initial;
        min-height: initial;
        -webkit-border-radius: 0.5em !important;
        -moz-border-radius: 0.5em !important;
        border-radius: 0.5em !important;
    }
}
@media (min-width: 1200px) {
    #requestPermissions .modal-dialog {
        width: 100%;
        height: initial;
        margin: 0;
        padding: 0;
    }
    #requestPermissions .modal-content {
        height: initial;
        min-height: initial;
        -webkit-border-radius: 0.5em !important;
        -moz-border-radius: 0.5em !important;
        border-radius: 0.5em !important;
    }
}
@media (min-width: 481px) and (max-height: 500px) {
    #requestPermissions {
        overflow: auto;
        padding-top: 50%;
    }
}
.modal-divider {
    border: 2px solid #A8B0BD;
    width: 32px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #A8B0BD;
}

.request-permissions-3 img {
    width: 100%;
}

.property-price__title {
    font-weight: 700;
}