body {
    margin: 105px 0 55px, 0px;
    padding: 0;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}



/*------ CSS Use Case Example START ------*/

/* import font ROBOTO */
import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');

body {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    margin: 0 15px;
}

.background-0 {
    background: #C87D26;
}

.background-1 {
    background: #569D99;
}

.background-2 {
    background: #740039;
}

.background-3 {
    background: #839FC5;
}

.background-4 {
    background: #6A4F76;
}

.background-5 {
    background: #57636D;
}

.background-6 {
    background: #6D5242;
}

.background-7 {
    background: #4F5051;
}

.background-0,
.background-1,
.background-2,
.background-3,
.background-4,
.background-5,
.background-6,
.background-7 {
    transition: all 400ms ease;
}

/* class created only for a better preview*/
.stage {
    position: absolute;
    opacity: 1;
    max-width: 600px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .stage.hidden {
        opacity: 0;
        transition: all 400ms ease;
    }

media screen and (max-width: 600px) {
    .stage

{
    max-width: 100%;
}

}

h1, h2, h3 {
    margin: 0;
}

h1 {
    font-size: 32px;
    font-weight: 400;
}

h2 {
    font-size: 24px;
    font-weight: 100;
    color: #FFF;
    text-align: center;
}

h3 {
    font-size: 18px;
    font-weight: 300;
    color: #BFBFBE;
    margin-top: 10px;
}

.title {
    width: 100%;
    padding-bottom: 30px;
    text-align: center;
    font-weight: 400;
    font-size: 22px;
    color: #fff;
}

.card-content {
    position: relative;
    color: #fff;
    padding: 5px;
}

.card-image {
    width: 100%;
    height: 100%;
}

    .card-image img {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%;
        min-height: 330px;
    }

.card-titles {
    position: absolute;
    bottom: 0;
    padding: 40px 30px;
}

.card-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 25px 35px;
}

.popular-destinations-text {
    font-size: 16px;
    font-weight: 400;
    color: #8E9AA4;
    width: 100%;
    min-width: 110px;
}

.popular-destinations-images {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: 100%;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    margin-left: 8px;
}

    .circle img {
        border-radius: 50%
    }

/* global actions buttons*/
.global-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 30px;
    min-width: 200px;
}

.top-action,
.right-action,
.left-action {
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #fff;
    -webkit-box-shadow: 0 3px 4px 0px rgba(0,0,0,0.5);
    box-shadow: 0 3px 4px 0px rgba(0,0,0,0.5);
}

.right-action,
.left-action {
    width: 60px;
    height: 60px;
}

.top-action {
    width: 40px;
    height: 40px;
    margin: 0 20px;
}

.final-state.active {
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: all 400ms ease;
}

.final-state.hidden {
    opacity: 0;
}


/*------ CSS Use Case Example END ------*/

/*----- Stacked Cards component css START -----*/
body {
    overflow-x: hidden;
}

.no-transition {
    -webkit-transition: none !important;
    transition: none !important;
}

.stackedcards-overflow {
    overflow-y: hidden !important;
}

.stackedcards.init {
    opacity: 0; /* set the opacity to 0 if you want a fade-in effect to stacked cards on page load */
}

.stackedcards {
    position: relative;
}

    .stackedcards * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

.stackedcards--animatable {
    -webkit-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.stackedcards .stackedcards-container > *,
.stackedcards-overlay {
    position: absolute;
    width: 100%; /* set 100% */
    height: 100%; /* set 100% */
    will-change: transform, opacity;
    top: 0;
    border-radius: 10px;
    min-width: 265px;
}

    .stackedcards-overlay.left > div,
    .stackedcards-overlay.right > div,
    .stackedcards-overlay.top > div {
        width: 100%;
        height: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .stackedcards-overlay.left,
    .stackedcards-overlay.right,
    .stackedcards-overlay.top {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        left: 0;
        opacity: 0;
        top: 0;
        height: 100%;
    }

    .stackedcards-overlay.top,
    .stackedcards-overlay.right,
    .stackedcards-overlay.left {
        background: #fff;
    }

        .stackedcards-overlay.left:empty,
        .stackedcards-overlay.right:empty,
        .stackedcards-overlay.top:empty {
            display: none !important;
        }

.stackedcards-overlay-hidden {
    display: none;
}

.stackedcards-origin-bottom {
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}

.stackedcards-origin-top {
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
}

.stackedcards-bottom,
.stackedcards-top,
.stackedcards-none {
    background: #fff; /* set card background background */
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.30);
    height: 100%;
}

.stackedcards .stackedcards-container > :nth-child(1) {
    position: relative;
    display: block;
}

/*----- Stacked Cards component css END -----*/


/*Top Navigation*/

.nav-icons-image {
    max-width: 22px;
    max-height: 22px;
}

.tab-pane {
    margin: 45px 0px 55px 0px;
}

.nav-container {
    height: 55px;
    background-color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
}

    .nav-container .logo {
        max-height: 200px;
        padding: 0px 10px;
        overflow: hidden;
    }

        .nav-container .logo a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: center;
            -ms-flex-align: center;
            height: 60px;
        }

            .nav-container .logo a img {
                max-width: 100%;
                max-height: 60px;
            }

    .nav-container .navbar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 0 10px;
    }

        .nav-container .navbar ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .nav-container .navbar ul li a {
                text-decoration: none;
                color: #999999;
                font-size: 14px;
                text-transform: uppercase;
                display: block;
                height: 60px;
                line-height: 60px;
                cursor: pointer;
                padding: 0 10px;
            }

                .nav-container .navbar ul li a:hover {
                    color: #ffffff;
                    background-color: rgba(23, 23, 23, 0.9);
                }

            .nav-container .navbar ul .close {
                display: none;
                text-align: right;
                padding: 10px;
            }

                .nav-container .navbar ul .close span {
                    font-size: 40px;
                    display: inline-block;
                    border: 1px solid #cccccc;
                    padding: 0 10px;
                    cursor: pointer;
                }

        .nav-container .navbar .icon-bar {
            padding: 18px 8px;
            width: 50px;
            height: 60px;
            display: none;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            cursor: pointer;
        }

            .nav-container .navbar .icon-bar i {
                background-color: #ffffff;
                height: 2px;
            }

@media only screen and (max-width: 650px) {
    .nav-container {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

        .nav-container .logo {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        .nav-container .navbar {
            -webkit-box-flex: 0;
            -ms-flex: 0;
            flex: 0;
        }

            .nav-container .navbar ul {
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                position: fixed;
                left: 100%;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                background: #ffffff;
                width: 100%;
                height: 100%;
                overflow: auto;
                -webkit-transition: left .3s;
                -o-transition: left .3s;
                transition: left .3s;
            }

                .nav-container .navbar ul li a {
                    padding: 10px;
                    font-size: 16px;
                    height: auto;
                    line-height: normal;
                    color: #555555;
                }

                .nav-container .navbar ul .close {
                    display: block;
                }

            .nav-container .navbar .icon-bar {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }

            .nav-container .navbar ._Menus-show {
                left: 0;
            }
}
/*Top Navigation*/



/*Profile Display*/
[class*='fas fa-circle'] {
    width: auto;
    height: auto;
    color: green;
}

.profile-image {
    width: 100%;
    margin: 0px;
    max-width: 100%;
    z-index: 1;
}

.profile-container {
    margin: 0px 0px;
    padding: 0px 0px;
}

.profile-box-image-container {
    width: 100%;
    border: 1px solid #ffffff;
    position: relative;
    bottom: 2px;
}


.profile-box-username {
    font-weight: 500;
    width: auto;
    font-size-adjust: inherit;
    font-stretch: initial;
    color: black;
    font-size: 15px;
}

.profile-box-name-container {
    position: absolute;
    z-index: 2;
    bottom: -3px;
    left: 20px;
    width: auto;
    max-width: inherit;
}

.profile-box-container {
    padding-left: 5px;
}

.profile-isonline-container {
    position: absolute;
    z-index: 2;
    bottom: -3px;
    left: 2px;
    width: 100%;
}

/*Main Profile Search Display Ad - No results*/
.profile-noresults-container {
    width: 100%;
    height: 100%;
    text-align: center;
}

.profile-noresult-message-text-container {
    padding: 20px 0px;
}

.profile-noresult-text {
}

.profile-noresult-button-container {
    margin-bottom: 15px;
}

.profile-noresult-ad-container {
    width: inherit;
    height: inherit;
    text-align: center;
}

.profile-button {
    width: 100%;
    min-height: 45px;
}
/*Main Profile Search Display Ad - No results*/





/*Profile Display*/


/*Main bottom nav*/
.vital-count-bottom-nav {
}

#match_count {
    position: absolute;
    top: 12px;
    right: 5px;
    background-color: lightblue;
    border: 1px solid black;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    z-index: -1;
}

#mail_count {
    position: relative;
    top: 12px;
    right: 5px;
    background-color: lightblue;
    border: 1px solid black;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

#dateyou_count {
    position: absolute;
    top: 12px;
    right: 5px;
    background-color: lightblue;
    border: 1px solid black;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

/*Main bottom nav*/
.nav__text {
}

.nav__icon {
}

.nav__bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
    z-index: 2;
    transition: transform 300ms;
}

.nav__top {
    position: fixed;
    width: 100%;
    top: 50px;
    height: 44px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
    z-index: 999;
    border-bottom: 0px solid transparent;
}

.nav__header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    display: flex;
    background-color: #e6ebf7;
}

.nav__link {
    min-width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    font-size: 15px;
    color: #707070;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
    border: #fcf9f9 1px solid;
}

    .nav__link:hover {
        text-decoration: none;
        color: #ffffff;
    }

.nav__bottom .nav__link:hover {
    background-color: #9DC7F1;
}

.nav__top .nav__link:hover {
    background-color: #67A3E1;
}

.nav__link--active {
    color: #166CBA;
    border-bottom: 3px solid #67A3E1;
    font-weight: 600;
}



/*Login*/ /*------------------------------------------------*/



/*SignUp*/ /*------------------------------------------------*/



/*SignUpProfile*/ /*------------------------------------------------*/




/*SignupLocation*/ /*------------------------------------------------*/


/*SignupImage*/ /*------------------------------------------------*/


/*ChangePassword*/ /*------------------------------------------------*/
#chagepassword.banner-ad-wide {
    text-align: center;
    height: 200px;
    width: 100%;
}
#id-changepassword-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#id-changepassword-error-alert, #id-changepassword-success-alert {
    border-radius: 0;
    height: 45px;
}
/*ChangePassword*/


/*EditPassword*/ /*------------------------------------------------*/


#id-editpassword-button, id-editpassword-button2 {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#id-editpassword-error-alert, #id-editpassword-success-alert {
    border-radius: 0;
    height: 45px;
}
/*EditPassword*/








/*GetPassword*/ /*------------------------------------------------*/
#getpassword.banner-ad-wide {
    text-align: center;
    height: 200px;
    width: 100%;
}


/*PasswordSentSuccess*/ /*------------------------------------------------*/



/*PasswordChangedSuccess*/ /*------------------------------------------------*/



/*MoreSites*/ /*------------------------------------------------*/



/*NotFound*/ /*------------------------------------------------*/




/*Main*/ /*------------------------------------------------*/




/*Settings*/
.setting-buttons {
    padding: 8px 8px 8px 8px;
    background-color: #007bff;
    border-radius: 5px;
    color: white;
    text-align: center
}

#id-settings-back-button {
    padding: 3px 10px 3px 10px;
    background-color: white;
    border-radius: 7px;
}

.status-membersince{

    font-weight:600;

}
.info-heading {
    padding-bottom: 10px;
    margin-top: 15px;
    font-weight: bold;
}

.info-subheading {
    font-weight: bold;
}
#id-settings-logout-button {
    background-color: white;
    color: blue;
    border: 0px;
    font-size: 16px;
    padding: 0px
}
/*Settings*/
/*Floating ad*/
/*@media only screen and (min-width: 310px) and (max-width:500px) {*/
.adBottom {
    position: fixed;
    text-align: center;
    bottom: 55px;
    width: 100%;
    z-index: 999;
    height: 50px;
}

.adBottomVFW {
    position: fixed;
    text-align: center;
    bottom: 0px;
    width: 100%;
    z-index: 999;
    height: 50px;
}

.ad320x50 {
    height: 50px;
    width: 320px;
    width: 100%;
}
/*}*/
/*Login*/
#login-bannerad, #usernamesearch-bannerad {
    width: inherit;
    height: inherit;
    text-align: center;
}

#id-login-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#login-alert-validation-message {
    border-radius: 5px;
    height: 50px;
}

#login-textbox-username {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#login-textbox-password {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}
/*Login*/

/*Auth*/
.auth-heading {
    font-weight: 600;
    font-size: 23px;
    margin: 5px 5px 5px 5px;
}
/*Auth*/

/*Password*/
#password-textbox-email {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#password-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#password-alert-validation-message {
    border-radius: 5px;
    height: 50px;
}
/*Password*/

/*Signup*/

#signup-username {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signup-dob {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signup-password {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signup-email {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signup-gender {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signup-seeking {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signup-container {
    margin-bottom: 200px;
}

#signup-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#signup-alert-validation-message {
    border-radius: 5px;
    height: 50px;
}
/*Signup*/

/*Signup Location*/
#location-country {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#location-state {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#location-city {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signuplocation-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#location-zip {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}
/*Signup Location*/

/*Signup Profile*/
#signupprofile-height {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-greeting {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-gender {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-seeking {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-seekingfrom {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-seekingto {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-lookingfor {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-personality {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-bodytype {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-relationships {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-eyes {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-drinking {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-hairstyle {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-smoking {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-ethnicity {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-income {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-eyecatch {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-living {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-exercise {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-children {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-religion {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-politics {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-education {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-orientation {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-profession {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-about {
    border-radius: 2px;
    height: 85px;
    /*font-size: larger;*/
}

#signupprofile-aboutother {
    border-radius: 2px;
    height: 85px;
    /*font-size: larger;*/
}

#signupprofile-firstdate {
    border-radius: 2px;
    height: 85px;
    /*font-size: larger;*/
}

#signupprofile-lifegoals {
    border-radius: 2px;
    height: 85px;
    /*font-size: larger;*/
}

#signupprofile-interests {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

#signupprofile-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}
/*Signup Profile*/

/*Signup Image*/
#signupimage-skip-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
    width: 150px;
    margin: 50px 0px 0px 0px;
}

/*Signup Image*/

.dateolicious-logo {
    max-width: 190px;
    width: auto;
    margin-left: -25px;
}

.navbar {
    height: 50px;
}

.logo-container {
    border-bottom: solid 2px #ececec;
}

#logo-login {
    padding: 3px 10px 3px 10px;
    background-color: white;
    border-radius: 7px;
}

.logo-container-main {
    position: fixed;
    width: 100%;
    top: 0px;
    height: 51px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
    z-index: 1;
    border-bottom: solid 2px #ececec;
}

.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

.badge-notify {
    background: red;
    position: absolute;
    top: -5px;
    left: 29px;
}

.badge-notify-wink {
    background: red;
    position: absolute;
    top: -5px;
    left: 29px;
}

.badge-chat {
    background: red;
    position: absolute;
    top: -5px;
    left: 29px;
}

.vfwheading {
    font-weight: 600;
    margin: 2px 5px 2px 2px;
}
/*SEARCH*/
.searchbuttons {
    width: 90%;
    margin: 5px 0px 0px 20px;
}

.usersearchbuttons {
    width: 90%;
    margin: 5px 20px 0px 0px;
}

.searchbtncontainer {
    position: fixed;
    top: 94px;
    width: 100%;
    background-color: white;
    height: 50px;
    padding: 5px 21px 0px 0px;
}

.search-container {
    margin-top: 100px;
}
/*SEARCH*/


/*Username Search*/

#username-search-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#username-search-textbox {
    border-radius: 2px;
    /*height: 45px;*/
    /*font-size: larger;*/
}

.username-search-container {
    margin-top: 50px;
}
/*Username Search*/


/*Advance Search*/

.advance-search-container {
    margin-top: 20px;
    margin-bottom: 45px;
}

#advancesearch-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}
/*Advance Search*/


/*Chemistry*/
.chem-buttons {
    width: 150px;
}


.chemistry-startchemistry-container {
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #E6EBF7;
    height: 270px;
    font-weight: 500
}

/*Chemistry*/

/*Country State City*/
.spiner-csc {
    text-align: center;
    width: 100%;
}

#id_profile_image {
    width: 100%;
    height: 100%;
}
/*Country State City*/
.notification-badge {
    font-weight: 600;
    color: #1881ed;
}

/*Edit Profile*/
#editprofile-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}


/*.editprofile-border {
    border-radius: 0px;
}

.editprofile-width {
    border-radius: 0px;
    width: 145px;
}
*/

.editprofile-mailsetting-label {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 5px 0px 5px 0px;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 17px;
}














/*Edit Profile*/

/*INBOX*/

.inbox-linksbold{
    font-weight:600;
}

.inbox-rec-date {
    position: absolute;
    bottom: 2px;
    right: 2px;
    margin-bottom: -3px;
}

.inbox-new-message {
    border: 1px solid #cccccc;
    padding: 1px 5px 1px 5px;
    background-color: hotpink;
    border-radius: 5px;
    font-size: 10px;
    color: white;
    font-weight: 500;
}
.message-subject {
    padding-left: 5px;
}
.inbox-button-container {
    text-align: right;
    padding-right: 5px;
    padding-top: 5px;
}

.inbox-checkbox-box-container {
    text-align: right;
    padding-right: 5px;
    background-color: white;
    padding-top:8px;
    
}

.profile-image-msg {
    width: 100%;
    margin: 0px;
    max-width: 100%;
    z-index: 1;
    max-height: 100%;
}

.msg-images {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 94px;
    z-index: 500;
}

.swiper-container {
    box-sizing: border-box;
}

.swiper-wrapper {
    max-height: 100%;
}

#id-inbox-messages {
}

.inbox-vitals-box-container{
    padding-left:5px;
}
/*INBOX*/
/*PROFILE PAGE*/
#id-profile-gender,
#id-profile-age,
#id-profile-eyes,
#id-profile-hair,
#id-profile-seeking,
#id-profile-seekingfrom,
#id-profile-seekinglblto,
#id-profile-seekingto,
#id-profile-status-age,
#id-profile-status-relationship,
#id-profile-status-orientation,
#id-profile-status-gender {
    margin: 0px 5px 0px 0px;
}

/*#id-profile-seeking, #id-profile-status-age,
#id-profile-location-city, #id-profile-hair {
    margin-left: 15px;
}*/

#id-profile-location-state {
    margin-left: 3px;
}


#id-profile-ad-container {
    text-align: center;
    padding-top:25px;
}

#id-profile-details {
    font-size: inherit;
}

#id-profile-interest-container {
    margin-bottom: 45px;
}

#id-profile-interest {
    display: inline;
}

#id-interest {
    padding: 3px 3px 3px 3px;
    /* background-color: gainsboro;*/
    border-radius: 7px;
    margin-left: 5px;
}
/*PROFILE PAGE*/


/*UPGRADE*/

#id-button-selection-container {
    height: 60%;
}

#id-swipe-options-container {
    height: 250px;
    /* top: 50px; */
    margin-bottom: 10px;
}
/*UPGRADE*/

/*LAYOUTS*/

.layout-top-div {
    margin-bottom: 100px;
}

/*LAYOUTS*/


/*Upgrade*/

.cardbody {
    height: 250px;
    background-color: #f7f9fc;
}

.cardtitle {
    font-weight: 700;
    font-size: 18px;
}

#id-price-895, #id-price-995, #id-price-995b, #id-price-795 {
    white-space: pre-line;
    width: 100%;
    height: 55px;
    margin-top: 0px;
    font-weight: 600;
    font-size: 15px
}

#id-bestdeal, #id-monthprice, #id-goodprice, #id-mostpopular {
    width: 100%;
    height: 55px;
    margin-top: 0px;
    font-weight: 600;
    font-size: 15px
}

#id-upgrade-bottom-message {
    width: 100%;
    text-align: center
}
/*Upgrade*/


/*Upgrade Payment*/
#id-payment-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#id-payment-button-Gpay {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#id-payment-button-Apay {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#id-payment-button-coin {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

#id-payment-header {
    font-size: 21px;
    font-weight: 700;
    padding-bottom: 25px;
    background-color: #E6EBF7;
    height: 35px;
    margin-bottom: 25px;
}
/*Upgrade Payment*/

/*View Image*/

.viewimage-images-container {
    margin-top: 50px;
}

id-profile-ad-container
/*View Image*/




/*Contact*/
#id-contact-button {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    height: 50px;
}

/*Contact*/

/*Upgrade Success*/

.upgrade-success-title {
    font-weight: 700;
    font-size: 25px;
    color: #67A3E1;
    text-transform: uppercase;
}

/*Upgrade Success*/

/*Quick Date*/
.blur {
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(60px);
}