html {
    width: 100%;
    height: 100vh;
    /*needed to ensure IOS footer doesn't bounce up because inset is not always working correctly */
    overflow-x: hidden;
    font-size: 18px;
    padding-bottom: 1px;
}

body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

#app {
    height: 100% !important;
}

.container {
    overflow-x: hidden;
}

#wrap {
    height: 100% !important;
}

.wrap {
    padding-top: 70px;
    padding-bottom: 50px;
}

/* Avoid zoom on phone */
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
    font-size: 16px;
}

select {
    font-size: 16px !important;
}

form label {
    font-weight: bold;
}

.max-height {
    height: 100%;
}

.max-width {
    width: 100%;
}

.padding-top-container {
    padding-top: 2.5rem;
}

.form-rounded {
    border-radius: .5rem;
}

.login-links {
    padding-left: .3rem;
    color: black;
    cursor: pointer;

}

.login-logo {
    width: 75px;
    height: 75px;
}

.register-links {
    color: black;
    cursor: pointer;
}

.changepassword-card,
.deleteaccount-card,
.banaccount-card,
.emailforgotpw-ver-card,
.forgotpassword-card,
.rpt-user-card,
.resend-email-card,
.logout-card {
    padding-right: 1.25rem;
    padding-left: 1.25rem;

}

.register-card {

    border-radius: 10px;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.login-card {

    border-radius: 10px;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
}


.standard-margin {
    margin-right: 1rem;
    margin-left: 1rem;
}

.userprofile-card {
    padding-right: .75rem;
    padding-left: .75rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-top: .25rem;
    margin-bottom: .25rem;
}

.userprofile-card-title {
    font-weight: bold;
}

.userprofile-geolocation-dropdown-ul {
    border-style: solid !important;
    border: thin;
    height: 200px;
    overflow: hidden;
    overflow-y: scroll;
    list-style: none;
    color: black !important;
    background-color: white;
    padding-left: 0px;
}

.userprofile-geolocation-dropdown-li {
    border-bottom: 1px solid lightgrey;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    background-color: white;
}

.userprofile-geolocation-dropdown-li-selected {
    border-bottom: 1px solid lightgrey;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: lightgrey;
}

.userprofile-geolocation-search-box-container {
    background-color: white;
}

.userprofile-geolocation-search-box {
    width: 90%;
    border: 1px solid white !important;
    box-shadow: none !important;
}

.userprofile-geolocation-search-icon {
    width: 10%;
    color: grey;
}


.userprofile-ul,
.register-ul,
.email-forgotpw-ul,
.chgpw-ul {
    list-style-position: inside;
}

.userprofile-failed-fields,
.register-failed-fields,
.chgpw-failed-fields,
.email-forgotpw-failed-fields {
    color: red;
    background-color: lightgrey;
    margin-right: 1.25rem;
    margin-left: 1.25rem;
}

#userprofile-cnt-info-popover,
#userprofile-sng-des-popover {
    cursor: grab;
    padding-left: .5rem;
    outline: 0px !important;
}

.userprofile-right-img-col {
    padding-left: 0px !important;
    margin-left: -25px !important;
}

.friends-label {
    font-weight: 500;
}

.friends-value {
    font-weight: 300;
}

.friends-label-hr {
    margin-bottom: .25rem !important;
    margin-top: .25rem !important;
}

.friends-rpt-btn {
    color: gray;
    cursor: pointer;
}

.friends-askpat-btn {
    top: 65%;
    border-width: medium !important;
    color: black !important;
    font-weight: bold !important;
    background-color: lightgray !important;
}

.friends-askpat-btn-emoji {
    margin-left: .3rem !important;
}

.friends-ad-options-header {
    color: red;
    font-weight: bold;
}

.friends-howdoichat-header {
    color: red;
    font-weight: bold;
}

.friends-howdoichat-btn {
    top: 65%;
    border-width: medium !important;
    color: black !important;
    font-weight: bold !important;
    background-color: lightgray !important;
}

.friends-hr {
    height: 4px;
    background-color: #C0C0C0;
}

.friends-col-container:focus {
    outline: none !important;
}

.load-more-friends-btn {
    width: 80%
}

.settings-links {
    color: black;
    cursor: pointer;
}

.like-btn,
.unlike-btn {
    cursor: grab;
    max-height: 48px;
    max-width: 48px;
}

.primary-btn-cust-active,
.primary-btn-cust-active:active,
.primary-btn-cust-active:hover {
    color: white !important;
    background: black !important;
    border-color: black !important;
    box-shadow: none !important;
}


.primary-btn-cust-inactive,
.primary-btn-cust-inactive:active,
.primary-btn-cust-inactive:hover,
.primary-btn-cust-inactive:focus {
    color: black;
    background-color: lightgray;
}

.page-item {
    margin-left: .5rem;
    margin-right: .5rem;
    cursor: grab;
}

.page-link {
    border-radius: .5rem;
    color: red;
}



.page-item.active .page-link {
    color: white !important;
    background: radial-gradient(#FF0000, #93291E) !important;
    border-color: red;
    cursor: grab;
    z-index: 0;

}

.previous-btn,
.next-btn .previous-btn:active,
.previous-btn:hover .previous-btn:focus,
.next-btn:active,
.next-btn:hover,
.next-btn:focus {
    color: red !important;
    background-color: white !important;
    border-color: lightgray !important;
    cursor: grab;
    z-index: 0 !important;
}

.footer-btn-active {
    color: #de0d09 !important;
    z-index: 2 !important;
}

.footer-btn-inactive {
    color: black !important;
    z-index: 2 !important;
}

.footer-notf-badge {
    position: absolute;
    top: 5px;
    border-radius: 1rem;
    z-index: 2 !important;
}

#footer .nav-item {

    width: 20%;

}

.registration-success,
.forgotpw-email-sent,
.rsnd-email-verf-sent,
.userprofile-saved,
.rpt-success,
.email-verf-success,
.chgpw-success,
.email-forgotpw-success,
.email-opt-saved,
.phn-push-opt-saved,
.userpreferences-saved {
    color: green;
    font-weight: bold;
}

.registration-failed,
.forgotpw-email-not-sent,
.rsnd-email-verf-not-sent,
.email-verf-failed,
.login-failed,
.chgpw-failed,
.email-forgotpw-failed,
.userprofile-failed,
.email-opt-failed,
.phn-push-opt-failed,
.userpreferences-failed,
.delete-user-failed,
.ban-user-failed,
.rpt-failed {
    color: red;
    font-weight: bold;
}

.img-wrap {
    position: relative;
    display: inline-block;
    font-size: 0;
    margin-bottom: .5rem;
}

.img-wrap .close {
    position: absolute;
    top: -8px;
    right: -8px;
    opacity: 1;
    font-size: 0px !important;
}

.img-wrap .open {
    position: absolute;
    top: -8px;
    right: -8px;
    opacity: 1;
    line-height: 1;
    cursor: pointer;
}

.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
    opacity: 1;
}

input[type="file"] {
    display: none;
}

.carousel-indicators li {
    background-color: #adb5bd !important;
    z-index: 0 !important;
}

.carousel-indicators {
    bottom: unset !important;
    z-index: 0 !important;
    margin-top: -25px !important;
}

.carousel-control-prev {
    width: 50% !important;
    justify-content: left !important;
    padding: 1rem !important;
}

.carousel-control-next {
    width: 50% !important;
    justify-content: right !important;
    padding: 1rem !important;
}

/* Image Preload .gif */
.carousel-item img {
    background: url(../../static/frontend/images/loading.webp) no-repeat;
    max-height: 65vh;
    max-width: 100%;
}

.db-load-img {
    max-height: 65vh;
    max-width: 100%;
}

/* map pin */
.fa-map-marker-alt {
    font-size: 20px;
    color: red;
}

/* Contact Us */

#contactus-help-container:focus {

    outline: none !important;

}

.contactus-links {
    color: black;
    cursor: pointer;

}


/* Landing Page */

:root {
    --bg-main: radial-gradient(#FF0000, #93291E);
}

.landing-page-container {
    font-family: Mulish !important;
    background-color: #504e4eb4;
    background-image: url('../../static/frontend/images/landing_page_bkground.jpg');
    background-size: cover;
    background-blend-mode: overlay;
    background-position: center;
    height: 100%;
    max-height: -webkit-fill-available;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.vertical-center {
    text-align: center;
    min-height: 100vh;
}

.logo {
    height: 90px;
}

.landing-page-logo {
    font-weight: bold;
    font-size: 80px;
    color: white;
}

.landing-page-links {
    cursor: pointer;
}

.landing-page-arrow-btn {
    color: black;
    background-color: white;
}

.bg-main {
    background: var(--bg-main) !important;
}

.text-main {
    color: var(--bg-main) !important;
}

.btn-main {
    background: var(--bg-main) !important;
    color: white;
    font-weight: 500;
}

.btn-main:hover {
    background: white !important;
}

.btn:focus {
    box-shadow: 0 0 0 0;
}

.bold {
    font-weight: bold;
}

.btn-signin {
    color: white;
    background: none;
    border: 1px solid white;
}

.btn-signin:hover {
    color: black !important;
    background: white !important;
    border: 1px solid white;
}

.account-btns {
    margin-top: 12rem;
}

.account-btns .btn {
    width: 100%;
    margin-bottom: 20px;
}

.d-xs-none {
    display: none;
}

.landing-page-card {
    margin-top: 12rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-right: 1rem;
    margin-left: 1rem;
    border-radius: 10px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
    background: radial-gradient(#FF0000, #93291E);
    color: white;
}

.landing-page-lang-drpdwn {
    width: 15rem;
}

/* Privacy Policy */

.privacy-policy-links {
    color: black;
    cursor: pointer;
}

/* Terms of Service */

.terms-of-service-links {
    color: black;
    cursor: pointer;
}

/* Safety Tips */

.safety-tips-links {
    color: black;
    cursor: pointer;
}

/* How to Delete User Data */

.how-to-delete-user-data-links {
    color: black;
    cursor: pointer;
}


/* Header */

.header {
    background: white;
    height: 50px;
    /* Wrap should correlate to this */
    border-color: grey;
    border-width: 0px 0px .005rem 0px;
}

.header-logo {
    font-weight: bold;
    font-size: 20px;
    color: black;
}

.back-button {
    font-size: 2rem;
    margin-left: 1.5rem;
    margin-right: 2.5rem;
    color: black;
}

/* Chat Room */

.chat-message-friend {
    word-wrap: break-word;
    background: lightgrey;
    text-align: center;
    border-radius: .5rem;
    padding-left: .25rem;
    padding-right: .25rem;
}

.chat-message-self {
    word-wrap: break-word;
    background: #de0d09;
    color: white;
    text-align: center;
    border-radius: .5rem;
    padding-left: .25rem;
    padding-right: .25rem;
}

.chat-message-focus,
.chat-message-focus:focus {
    outline: none !important;
}

.chat-message-self-timestamp {
    text-align: right;
}

.chat-message-friend-timestamp {
    text-align: left;
}

.chat-room-links {
    color: black;
    cursor: pointer;
}

/* Chat lobby */

.chat-lobby-unread-message {
    background: lightgrey;
}


/* Notification Alerts */

.notificationalerts-lang-card {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-right: 1rem;
    margin-left: 1rem;
    border-radius: 10px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
    background: radial-gradient(#FF0000, #93291E);
    color: white;
}

.notificationalerts-arrow-btn {
    color: black;
    background-color: white;
}

/* Advertisements */

.advertisement-click-btn {
    background-color: lightgray;
    border-radius: 5px;
    padding-right: 45px;
    padding-left: 45px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    color: black;
}

.advertisement-menu-btn {
    cursor: pointer;
    font-size: 18px;
    color: black;
}


/* Animations */

/* Circular Loading Animation */
@keyframes ldio-13svb8kc69x {
    0% {
        opacity: 1;
        backface-visibility: hidden;
        transform: translateZ(0) scale(1.5, 1.5);
    }

    100% {
        opacity: 0;
        backface-visibility: hidden;
        transform: translateZ(0) scale(1, 1);
    }
}

.ldio-13svb8kc69x div>div {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff727d;
    animation: ldio-13svb8kc69x 1s linear infinite;
}

.ldio-13svb8kc69x div:nth-child(1)>div {
    left: 74px;
    top: 44px;
    animation-delay: -0.875s;
}

.ldio-13svb8kc69x>div:nth-child(1) {
    transform: rotate(0deg);
    transform-origin: 80px 50px;
}

.ldio-13svb8kc69x div:nth-child(2)>div {
    left: 65px;
    top: 65px;
    animation-delay: -0.75s;
}

.ldio-13svb8kc69x>div:nth-child(2) {
    transform: rotate(45deg);
    transform-origin: 71px 71px;
}

.ldio-13svb8kc69x div:nth-child(3)>div {
    left: 44px;
    top: 74px;
    animation-delay: -0.625s;
}

.ldio-13svb8kc69x>div:nth-child(3) {
    transform: rotate(90deg);
    transform-origin: 50px 80px;
}

.ldio-13svb8kc69x div:nth-child(4)>div {
    left: 23px;
    top: 65px;
    animation-delay: -0.5s;
}

.ldio-13svb8kc69x>div:nth-child(4) {
    transform: rotate(135deg);
    transform-origin: 29px 71px;
}

.ldio-13svb8kc69x div:nth-child(5)>div {
    left: 14px;
    top: 44px;
    animation-delay: -0.375s;
}

.ldio-13svb8kc69x>div:nth-child(5) {
    transform: rotate(180deg);
    transform-origin: 20px 50px;
}

.ldio-13svb8kc69x div:nth-child(6)>div {
    left: 23px;
    top: 23px;
    animation-delay: -0.25s;
}

.ldio-13svb8kc69x>div:nth-child(6) {
    transform: rotate(225deg);
    transform-origin: 29px 29px;
}

.ldio-13svb8kc69x div:nth-child(7)>div {
    left: 44px;
    top: 14px;
    animation-delay: -0.125s;
}

.ldio-13svb8kc69x>div:nth-child(7) {
    transform: rotate(270deg);
    transform-origin: 50px 20px;
}

.ldio-13svb8kc69x div:nth-child(8)>div {
    left: 65px;
    top: 23px;
    animation-delay: 0s;
}

.ldio-13svb8kc69x>div:nth-child(8) {
    transform: rotate(315deg);
    transform-origin: 71px 29px;
}

.login-loading-animation-container,
.register-loading-animation-container,
.forgotpw-loading-animation-container,
.rsnd-email-verf-loading-animation-container,
.chgpw-loading-animation-container,
.rpt-loading-animation-container,
.frds-loading-animation-container,
.userprofile-loading-animation-container,
.email-opt-loading-animation-container,
.phn-push-opt-loading-animation-container,
.delete-user-loading-animation-container,
.ban-user-loading-animation-container,
.logout-loading-animation-container,
.chat-message-loading-animation-container,
.landing-page-loading-animation-container,
.notf-alerts-loading-animation-container {
    width: 18px;
    height: 18px;
    display: inline-block;
    overflow: hidden;
    background: #ffffff;
    border-radius: .5rem;
    vertical-align: middle !important;
    margin-bottom: 2px;
}

.ldio-13svb8kc69x {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(0.18);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.ldio-13svb8kc69x div {
    box-sizing: content-box;
}

/* generated by https://loading.io/ */


/* Heart Loading Animation */

@keyframes loading-heart-animation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(.5)
    }

    100% {
        transform: scale(1);
    }
}

.loading-heart-animation {

    animation: loading-heart-animation 6s linear infinite;

}





/* Extra Small devices (phones, 0px and up) */
@media (min-width: 0px) {

    .header-logo-text-img-xs {
        max-height: 50px;
        max-width: 50px;
        position: absolute;
        left: 50%;
        margin-left: -25px !important;
        /* 50% of your logo width */
        top: 20px;
        display: block;
    }

    .login-container-xs,
    .register-container-xs,
    .friends-container-xs,
    .likes-container-xs,
    .changepassword-container-xs,
    .deleteaccount-container-xs,
    .banaccount-container-xs,
    .userprofile-container-xs,
    .chatlobby-container-xs {
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-bottom: 50px !important;
    }

    .settings-container-xs,
    .contactus-container-xs {
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-bottom: 120px !important;
    }

    .chat-room-container-xs {
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-bottom: 125px !important;
    }

    .login-img-xs,
    .register-img-xs {
        max-height: 150px;
        max-width: 200px;
    }

    .userprofile-img-xs,
    #image_field_1_preview,
    #image_field_2_preview,
    #image_field_3_preview,
    #image_field_4_preview {
        width: 160px;
        height: 130.5px;
        box-shadow: 0px 6px 10px rgb(0 0 0 / 25%);
    }

    .friends-img-xs {
        max-height: 65vh !important;
        max-width: 100% !important;
        background: none !important;
        /* used to remove the loading gif */
    }

    .userprofile-hr-xs,
    .friends-col-hr-xs {
        height: 4px;
        background-color: #C0C0C0;
    }

    .friends-row-hr-xs {
        display: none;
    }

    /* Set the fixed height of the footer here */
    .footer-xs {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255,255,255,0.8);
        border-top-width: .005rem;
        z-index: 2 !important;
    }

    /* Navbar links */
    .nav-cust-xs {
        font-size: 24px;
    }

    img[id^='chat-lobby-img'],
    .chat-lobby-img-xs {
        height: 65px;
        width: 65px;
        background: url(../../static/frontend/images/EmptyPhoto.jpg) no-repeat;
        border-radius: 5rem;
    }

    #chat-room-header-img,
    .chat-room-header-img-xs {
        height: 35px;
        width: 35px;
        background: url(../../static/frontend/images/EmptyPhoto.jpg) no-repeat;
        border-radius: 5rem;
    }

    .contactus-img-xs {
        max-width: 100% !important;
        height: auto !important;
        background-position: center !important;
    }

    .friends-howdoichat-img-xs {
        max-width: 100% !important;
        height: auto !important;
        background-position: center !important;
    }

    .friends-img-col-rm-padding-xs {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .advertisement-yt-video-wh-xs {
        background-position: center !important;
        width: 100% !important;
        aspect-ratio: 16/9;
    }

    .advertisement-custom-video-xs {
        max-height: 65vh;
        max-width: 100% !important;
    }


}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {

    .userprofile-img-sm {
        width: 200px;
        height: 150px;

    }

    .userprofile-img-wh-sm {
        width: 200px;
        height: 150px;

    }

    .userprofile-img-hw-sm {
        width: 150px;
        height: 200px;
    }

    .friends-img-sm {
        max-height: 65vh !important;
        max-width: 100% !important;
        background: none !important;
        /* used to remove the loading gif */
    }

    .contactus-img-sm {
        max-width: 100% !important;
        height: auto !important;
        background-position: center !important;
    }

    .friends-howdoichat-img-sm {
        max-width: 100% !important;
        height: auto !important;
        background-position: center !important;
    }

    .friends-img-col-add-padding-sm {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .advertisement-yt-video-wh-sm {
        background-position: center !important;
        width: 100% !important;
        aspect-ratio: 16/9;
    }

    .advertisement-custom-video-sm {
        max-height: 65vh;
        max-width: 100% !important;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .header-logo-text-img-md {
        max-height: 50px;
        max-width: 50px;
        position: absolute;
        left: 50%;
        top: 20px;
        display: block;
    }

    .login-container-md,
    .register-container-md {
        width: 50%;
        padding-right: 15px;
        padding-left: 15px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .login-img-md,
    .register-img-md {
        max-height: 150px;
        max-width: 200px;
    }

    /* Set the fixed height of the footer here */
    .footer-md {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255,255,255,0.8);
        border-top-width: .005rem;
        margin-right: 1rem;
        z-index: 2 !important;
    }

    /* Navbar links */
    .nav-cust-md {
        font-size: 18px;
    }

    .friends-label-section-md {
        margin-top: 2rem;
    }

    .chat-lobby-img-md {
        height: 125px !important;
        width: 125px !important;
        background: url(../../static/frontend/images/EmptyPhoto.jpg) no-repeat;
        border-radius: 5rem;
    }

    .chat-room-header-img-md {
        height: 35px !important;
        width: 35px !important;
        background: url(../../static/frontend/images/EmptyPhoto.jpg) no-repeat;
        border-radius: 5rem;
    }

}

/* Large devices (desktops, 992px and up) */

/* X-Large devices (large desktops, 1200px and up) */
/* XX-Large devices (larger desktops, 1400px and up) */