@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Template Name amarmatch HTML5 Template
    Author: DeshiSmash
    Support:
    Description:
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

    01. THEME DEFAULT CSS
    02. SIGNIN PAGE CSS

**********************************************/

/*----------------------------------------*/
/*  01. THEME DEFAULT CSS START
/*----------------------------------------*/

/* Inter Font  */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /**
        @color declaration
    */
    --am-white: #fff;
    --am-black: #000;
    --am-dark-1: #09102C;
    --am-dark-2: #58585D;
    --am-dark-3: #565656;
    --am-linner-left: #DF4795;
    --am-linner-right: #C004FA;
    --am-theme-primary: #CC1ED3;
    --am-theme-man: #446AFF;
    --am-theme-man-opicity: #4469ffa1;
    --am-theme-woman: #CC1ED3;
    --am-theme-woman-opicity: #cd1ed39a;
    --am-online: #02FC88;

    /**
        @font weight declaration
    */
    --am-fw-normal: normal;
    --am-fw-light: 300;
    --am-fw-regular: 400;
    --am-fw-medium: 500;
    --am-fw-sbold: 600;
    --am-fw-bold: 700;
    --am-fw-ebold: 800;
    --am-fw-black: 900;
    /**
        @font size declaration
    */
    --am-fs-p: 18px;
    --am-fs-h1: 48px;
    --am-fs-h2: 36px;
    --am-fs-h3: 24px;
    --am-fs-h4: 20px;
    --am-fs-h5: 16px;
    --am-fs-h6: 14px;
}

.px-150 {
    padding: 0 150px;
}

.px-100 {
    padding: 0 100px;
}

.px-80 {
    padding: 0 80px;
}

.bg-gray {
    background-color: #F5F5F5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*---------------------------------
	typography css start 
---------------------------------*/
body {
    font-family: 'Inter', sans-serif !important;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--am-heading-primary);
    margin-top: 0px;
    font-weight: 600;
    line-height: 1.2;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

h1 {
    font-size: var(--am-fs-h1);
    font-weight: var(--am-fw-sbold);
    color: var(--am-dark-1);
}

h2 {
    font-size: var(--am-fs-h2);
}

h3 {
    font-size: var(--am-fs-h3);
}

h4 {
    font-size: var(--am-fs-h4);
}

h5 {
    font-size: var(--am-fs-h5);
}

h6 {
    font-size: var(--am-fs-h6);
}

ul {
    margin: 0px;
    padding: 0px;
}

p {
    font-size: var(--am-fs-p);
    font-weight: var(--am-fw-normal);
    color: var(--am-text-body);
    margin-bottom: 15px;
    line-height: 26px;
}

a,
button,
p,
input,
select,
textarea,
li,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    color: inherit;
    text-decoration: none;
}

a,
button {
    color: inherit;
    outline: none;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

input {
    outline: none;
}

input[type=color] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 50%;
}

/*----------------------------------------*/
/*  02. SIGNIN PAGE CSS
/*----------------------------------------*/

/* 
.auth-wrap {
    height: 100vh;
} */

.auth-img img {
    width: 100%;
    height: 100% !important;
}


.auth-content h1 {
    color: var(--am-dark-1);
    font-weight: var(--am-fw-sbold);
    font-size: var(--am-fs-h1);
}

.auth-content p {
    color: var(--am-dark-3);
    font-weight: var(--am-fw-regular);
    font-size: var(--am-fs-p);
}

.auth-content p a {
    color: var(--am-theme-primary);
}

.theme-btn {
    background-image: linear-gradient(to right, var(--am-linner-left), var(--am-linner-right));
    color: var(--am-white);
}

.theme-btn:hover {
    background-image: linear-gradient(to right, var(--am-linner-right), var(--am-linner-left));
    color: var(--am-white);
}

.signInWithGoogle {
    border: 1px solid #ced4da;
}

.signInWithGoogle:hover {
    border: 1px solid var(--am-theme-primary);
}

.forgotPws {
    color: var(--am-theme-primary);
}

.mb-3.showPassword {
    position: relative;
}

.mb-3.showPassword i {
    position: absolute;
    top: 53px;
    right: 17px;
    cursor: pointer;
    color: var(--am-theme-primary);
}

.form-label {
    color: var(--am-dark-1);
    font-weight: var(--am-fw-regular);
    font-size: var(--am-fs-p);
}

.form-control:focus {
    box-shadow: none !important;
    border-color: var(--am-theme-primary) !important;
}

.form-check-input:checked {
    background-color: var(--am-theme-primary) !important;
    border-color: var(--am-theme-primary) !important;
}

.form-check-input:focus {
    box-shadow: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.select2-container--default .select2-selection--single:focus {
    box-shadow: none !important;
    border-color: var(--am-theme-primary) !important;
}

.form-select:focus-visible {
    color: transparent;
    text-shadow: none !important;
    border: 0 !important;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 1rem;
    display: inline-table;
    width: 100%;


    /* display: block; */
    width: 100%;
    /* padding: .375rem 2.25rem .375rem .75rem; */
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* checkbox btn  */

.select-wrap {
    margin-top: -5px;
}

article {
    position: relative;
    margin: 5px;
    float: left;
    box-sizing: border-box;
}

article div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    transition: .5s ease;
}

article input {
    position: absolute;
    top: 6px !important;
    left: 0;
    width: 140px;
    height: 100px;
    opacity: 0;
    border: 0 !important;
    cursor: pointer;
    margin-top: 0px !important;
    display: block;
}

/* .p-3.form-control.man {
    border: 0;
} */

.man {
    background-color: var(--am-theme-man-opicity);
    color: var(--am-white);
    border: 0;
}

.woman {
    background-color: var(--am-theme-woman-opicity);
    color: var(--am-white);
    border: 0;
}

input[type=checkbox]:checked~.man {
    background-color: var(--am-theme-man);
    /* border: 1px solid var(--am-black); */
}

input[type=checkbox]:checked~.woman {
    background-color: var(--am-theme-woman);
}

.capta {
    position: absolute;
    top: 50px;
    height: 30px;
    right: 30px;
}


.custom-radio-button__container input[type="radio"] {
    display: none;
}

.custom-radio-button__container input[type="radio"]:checked+.custom-radio-button.man {
    background-color: var(--am-theme-man);
    cursor: pointer;
}

.custom-radio-button__container input[type="radio"]:checked+.custom-radio-button.woman {
    background-color: var(--am-theme-woman);
    cursor: pointer;
}

.custom-radio-button.man {
    padding: 1rem;
    background-color: var(--am-theme-man-opicity);
    color: var(--am-white);
    border: 0;
    border-radius: 5px;
}

.custom-radio-button.woman {
    padding: 1rem;
    background-color: var(--am-theme-woman-opicity);
    color: var(--am-white);
    border: 0;
    border-radius: 5px;
}

.select-gender-title {
    position: absolute;
    top: -15px;
}

.select-wrap.margin {
    margin-top: 15px;
}

/*----------------------------------------*/
/*  03. Setup Account PAGE CSS
/*----------------------------------------*/

/* .account-wrap {
    padding: 100px 0;
} */
.vh-100 {
    height: 100vh;
}

.item-1 {
    background: #f7f7f7;
    padding: 80px;
    cursor: pointer;
    border-radius: 10px;
}

.wd-equal {
    width: 250px;
}

/* # Range Slider CSS  */

.range-slider {
    --range-slider-value-low-fallback: calc(var(--range-slider-value-low, 0) * 1%);
    --range-slider-value-high-fallback: calc(var(--range-slider-value-high, 100) * 1%);
    --range-slider-thumb-size: 24px;
    --range-slider-thumb-radius: calc(var(--range-slider-thumb-size) / 2);
    position: relative;
    width: 100%;
    height: 24px;
}

@media (max-width: 500px) {
    .range-slider {
        --range-slider-thumb-size: 36px;
    }
}

.range-slider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 8px;
    margin-top: -3px;
    border-radius: 100vmax;
    background-color: #ebebeb;
    background-image: linear-gradient(to right, transparent var(--range-slider-value-low-fallback), var(--am-linner-left) var(--range-slider-value-low-fallback), var(--am-linner-right) var(--range-slider-value-high-fallback), transparent var(--range-slider-value-high-fallback));
    pointer-events: none;
}

.range-slider__display {
    pointer-events: none;
}

.range-slider__display::before,
.range-slider__display::after {
    content: attr(data-span);
    position: absolute;
    color: #000;
    font-size: 1.5rem;
    font-family: sans-serif;
    white-space: nowrap;
    transform: translateX(-50%) translateX(calc(var(--range-slider-thumb-radius) * calc(-0.02 * var(--pos) + 1)));
    z-index: -1;
}

.range-slider__display::before {
    --pos: var(--range-slider-value-low);
    content: attr(data-low);
    bottom: 100%;
    margin-bottom: calc(var(--range-slider-thumb-size) / 4);
    left: var(--range-slider-value-low-fallback);
}

.range-slider__display::after {
    --pos: var(--range-slider-value-high);
    content: attr(data-high);
    bottom: 100%;
    margin-bottom: calc(var(--range-slider-thumb-size) / 4);
    left: var(--range-slider-value-high-fallback);
}

.range-slider__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    background-color: transparent;
    pointer-events: none;
}

@supports selector(:focus-visible) {
    .range-slider__input:focus-visible {
        outline: none;
    }

    .range-slider__input:focus-visible::-webkit-slider-thumb {
        outline: 2px solid blue;
        outline-offset: 2px;
    }

    .range-slider__input:focus-visible::-moz-range-thumb {
        outline: 2px solid blue;
        outline-offset: 2px;
    }
}

@supports not selector(:focus-visible) {
    .range-slider__input:focus {
        outline: none;
    }

    .range-slider__input:focus::-webkit-slider-thumb {
        outline: 2px solid blue;
        outline-offset: 2px;
    }

    .range-slider__input:focus::-moz-range-thumb {
        outline: 2px solid blue;
        outline-offset: 2px;
    }
}

.range-slider__input:active::-webkit-slider-thumb {
    transform: scale(1.3);
    cursor: grabbing;
}

.range-slider__input:active::-moz-range-thumb {
    transform: scale(1.3);
    cursor: grabbing;
}

.range-slider__input::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border-radius: 0;
}

.range-slider__input::-moz-range-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border-radius: 0;
}

.range-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: all;
    position: relative;
    width: var(--range-slider-thumb-size);
    height: var(--range-slider-thumb-size);
    background-color: #000;
    border-radius: 50%;
    border: none;
    box-shadow: none;
    cursor: grab;
    transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

.range-slider__input::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: all;
    position: relative;
    width: var(--range-slider-thumb-size);
    height: var(--range-slider-thumb-size);
    background-image: linear-gradient(to right, var(--am-linner-left), var(--am-linner-right));
    border-radius: 50%;
    border: none;
    box-shadow: none;
    cursor: grab;
    transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

.slider-title h6 {
    font-size: var(--am-fs-p);
    font-weight: var(--am-fw-medium);
    color: var(--am-dark-1);
}

.account-content h1 {
    color: var(--am-dark-1);
    font-weight: var(--am-fw-sbold);
    font-size: var(--am-fs-h1);
}

.account-content p {
    color: var(--am-dark-3);
    font-weight: var(--am-fw-regular);
    font-size: var(--am-fs-p);
}

/* File Upload  */


#profile {
    border-radius: 100%;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    cursor: pointer !important;
    background: #f4f4f4;
    display: table;
    background-size: cover;
    background-position: center center;
}

#mediaFile {
    display: none;
}


#profile.hasImage .dashes,
#profile.hasImage label {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}



/*----------------------------------------*/
/*  04. Dashboard PAGE CSS
/*----------------------------------------*/
/* latest Photos slider  */
.section-title {
    font-weight: var(--am-fw-sbold);
    font-size: var(--am-fs-h3);
    color: var(--am-dark-1);
}

.slick-prev.slick-arrow {
    position: absolute;
    z-index: 9;
    top: 50%;
    background: #fff;
    padding: 10px 15px;
    left: 10px;
    border-radius: 50%;
    font-weight: bold;
}

.slick-next.slick-arrow {
    position: absolute;
    z-index: 9;
    top: 50%;
    background: #fff;
    padding: 10px 15px;
    right: 40px;
    border-radius: 50%;
    font-weight: bold;
}



.sidebar {
    margin: 0;
    padding: 0;
    width: 70px;
    background-color: var(--am-white);
    position: fixed;
    height: 100%;
    overflow: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 3px 0px 6px rgba(0, 0, 5, 0.05);
}

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

.sidebar a {
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
}

.sidebar a.active {
    position: relative;
}

.sidebar a.active::after {
    background-image: linear-gradient(to right, var(--am-linner-left), var(--am-linner-right));
    height: 40px;
    width: 6px;
    position: absolute;
    top: 10px;
    left: 10px;
    content: '';
    border-radius: 10px;
}

.content {
    margin-left: 70px;
    padding: 20px 20px;
}

/* # Latest item  */
.latest-item {
    position: relative;
    width: 300px !important;
}

/* .latest-item img {
    width: 300px;
} */

.latest-item-btn-wrap {
    position: absolute;
    bottom: 0;
    transition: .5s ease;
    opacity: 0;
    padding: 50px 0px;
    text-align: center;
    width: 100%;
}

.latest-item:hover .latest-item-btn-wrap {
    opacity: 1;
}

.latest-item-btn {
    background: var(--am-white);
    padding: 7px 30px;
    border-radius: 50px;
    border: 0;
}

.latest-item-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 30px;
}

.section-subtitle {
    font-size: var(--am-fs-h4);
    font-weight: var(--am-fw-sbold);
    color: var(--am-dark-1);
}

.section-subtitle small {
    font-weight: var(--am-fw-normal);
}

.onlinenow::after {
    background: var(--am-online);
    height: 10px;
    width: 10px;
    position: absolute;
    content: '';
    border-radius: 50px;
    margin-left: 10px;
    margin-top: 8px;
}

.people-item {
    position: relative;
    width: 300px !important;
}

.people-item-btn-wrap {
    position: absolute;
    bottom: 0;
    transition: .5s ease;
    opacity: 1;
    padding: 30px 20px;
    width: 100%;
    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0.0));
    border-radius: 0 0 35px 35px;
    z-index: 999;
}

.people-item::after {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .2);
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    /* border-radius: 40px; */
    border-radius: var(--bs-border-radius-2xl);
}

.people-item-btn-wrap h6 {
    font-size: var(--am-fs-h4);
    font-weight: var(--am-fw-medium);
    color: var(--am-white);
}

.people-item-btn-wrap p {
    font-size: var(--am-fs-h5);
    font-weight: var(--am-fw-medium);
    color: var(--am-theme-primary);
}

/* .people-item:hover .people-item-btn-wrap {
    opacity: 1;
} */

.people-item-btn {
    background: var(--am-white);
    padding: 7px 40px;
    border-radius: 50px;
    border: 0;
}

.people-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* grid-template-rows: repeat(3, 1fr); */
    row-gap: 15px;
}


/*----------------------------------------*/
/*  05. SEARCH PAGE CSS
/*----------------------------------------*/

.header-sort h4 {
    color: var(--am-dark-3);
    font-size: var(--am-fs-p);
    font-weight: var(--am-fw-regular);
}

.lastSeen,
.distance,
.age {
    color: var(--am-dark-3);
    border-radius: 50px;
    width: 150px;
    text-align: center;
}



input[type=checkbox]:checked~.lastSeen {
    border: 1px solid var(--am-theme-primary);
    color: var(--am-theme-primary);
}

input[type=checkbox]:checked~.distance {
    border: 1px solid var(--am-theme-primary);
    color: var(--am-theme-primary);
}

input[type=checkbox]:checked~.age {
    border: 1px solid var(--am-theme-primary);
    color: var(--am-theme-primary);
}

.nav-link {
    color: var(--am-dark-3) !important;
    font-weight: var(--am-fw-regular);
    font-size: var(--am-fs-h3);
    --bs-nav-link-padding-y: 0.0rem !important;
    margin-bottom: 0.5rem !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--am-theme-primary) !important;
    background-color: #fff;
    border-left: 3px solid;
    border-radius: 0;
    font-weight: var(--am-fw-medium);
    font-size: var(--am-fs-h3);
}

.header-wrap {
    padding-bottom: 20px;
    box-shadow: 0px 2px 0px rgba(0, 0, 5, 0.05);
}


.inner-page-main {
    display: flex;
    justify-content: space-between;
}

.inner-page-right {
    width: 270px;
    box-shadow: -2px 0 0px rgba(0, 0, 5, 0.05);
    padding: 0 10px;
}

.people-wrap.innerPageItemWrap {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    display: grid;
    row-gap: 30px;
    column-gap: 30px;
}

.innerPageItem {
    width: 300px !important;
}







/*----------------------------------------*/
/*  05. SETTING PAGE CSS
/*----------------------------------------*/

.toggleContainer {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: fit-content;
    border: 3px solid #343434;
    border-radius: 20px;
    background: #343434;
    font-weight: bold;
    color: #343434;
    cursor: pointer;
}

.toggleContainer::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0%;
    border-radius: 20px;
    background-image: linear-gradient(to right, var(--am-linner-left), var(--am-linner-right));
    transition: all 0.3s;
}

.toggleCheckbox:checked+.toggleContainer::before {
    left: 50%;
}

.toggleContainer div {
    padding: 10px 30px;
    text-align: center;
    z-index: 1;
}

.toggleCheckbox {
    display: none;
}

.toggleCheckbox:checked+.toggleContainer div:first-child {
    color: white;
    transition: color 0.3s;
}

.toggleCheckbox:checked+.toggleContainer div:last-child {
    color: #fff;
    transition: color 0.3s;
}

.toggleCheckbox+.toggleContainer div:first-child {
    color: white;
    transition: color 0.3s;
}

.toggleCheckbox+.toggleContainer div:last-child {
    color: white;
    transition: color 0.3s;
}

.inner-page-privacy h3 {
    color: var(--am-theme-primary);
}

.inner-page-privacy {
    height: 400px;
}

/*----------------------------------------*/
/*  06. PROFILE PAGE CSS
/*----------------------------------------*/

.dpActiveBorder {
    border: 1px solid var(--am-theme-primary);
    padding: 3px;
    border-radius: 50%;
}

.profile-cover {
    background-image: url(../images/banner.png);
    height: 36vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 50px 50px;
}

.user-profile-cover {
    background-image: url(../images/banner-2.png);
    height: 36vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 50px 50px;
}


.profile-dp {
    display: flex;
    align-items: center;
    margin-left: 40px;
    margin-top: -80px;
}

.profile-dp img {
    border: 7px solid var(--am-white);
}

.mt-50 {
    margin-top: 50px !important;
}

.profile-dp h5 {
    color: var(--am-dark-1);
    font-size: var(--am-fs-h3);
    margin: 0;
    padding: 0;
}

.profile-dp p {
    color: var(--am-theme-primary);
    font-size: var(--am-fs-p);
    margin: 0;
    padding: 0;
}

.ri-pencil-line {
    position: absolute;
    top: 120px;
    right: 0px;
    background: #fff;
    border-radius: 50px;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    color: var(--am-online);
}

@media (min-width: 768px) {
    .row-cols-md-2>* {
        flex: 0 0 auto;
        width: 30%;
    }
}

.profile-bio {
    background-color: var(--am-white);
    border-radius: 10px;
}

.profile-info {
    background-color: var(--am-white);
    border-radius: 10px;
}

.profile-info select {
    background-color: var(--am-white) !important;
}

.whitesmoke {
    background-color: whitesmoke;
}

.person-location i {
    margin-right: 6px;
}

.short-slider img {
    height: 535px;
    width: 535px;
    border-radius: 50px;
}

.short-slider {
    background: var(--am-dark-1);
    border-radius: 50px;
    width: 535px;
}

.short-slider-content {
    text-align: left;
    padding: 20px 40px;
}

.sort-user-online {
    background: var(--am-online);
    height: 8px;
    width: 8px;
    position: absolute;
    content: '';
    border-radius: 50px;
    right: 142px;
    margin-top: -24px;
}

.short-slider-content h6 {
    font-size: var(--am-fs-h4);
    font-weight: var(--am-fw-medium);
    color: var(--am-white);
}

.short-slider-content p {
    font-size: var(--am-fs-h5);
    font-weight: var(--am-fw-medium);
    color: var(--am-theme-primary);
}

.latest-item-btn.heart-btn.sort-heart {
    padding: 15px 20px;
}

.latest-item-btn.me-2.cross-btn.sort-cross {
    padding: 15px 20px;
}

.short-title {
    color: var(--am-theme-primary);
    font-size: var(--am-fs-p);
}

.cross-btn img,
.heart-btn img {
    width: 20px !important;
    height: 20px !important;
}

.cross-btn {
    position: absolute;
    top: 50%;
    left: 0;
    border-radius: 0 20px 20px 0;
    padding: 7px 10px;
}

.heart-btn {
    position: absolute;
    top: 50%;
    right: 0;
    border-radius: 20px 0px 0px 20px;
    padding: 7px 10px;
}

/*----------------------------------------*/
/*  06. CHAT PAGE CSS
/*----------------------------------------*/
.chat-more {
    margin-top: 20px !important;
    margin-right: 20px !important;
    border-color: #f6f6f6;
}

.chat-user-name {
    margin: 0;
    font-size: var(--am-fs-h4);
    font-weight: var(--am-fw-medium);
    color: var(--am-dark-1);
}

.chat-user-message-preview {
    margin: 0;
    font-size: var(--am-fs-h5);
    font-weight: var(--am-fw-regular);
    color: var(--am-dark-2);
}

.chat-time {
    margin: 0;
    font-size: var(--am-fs-p);
    font-weight: var(--am-fw-regular);
    color: var(--am-dark-1);
}

.chat-persona-active {
    position: absolute;
    height: 10px;
    width: 10px;
    background: var(--am-online);
    bottom: 0;
    right: 10px;
    border-radius: 50px;
}

.no-active.active {
    border: 0 !important;
}

.nav-link.no-active.active {
    background: #FAFAFA;
    border-radius: 10px;
}

.chat-search {
    cursor: pointer;
}

.chat-left-sidebar-header-wrap {
    box-shadow: 0px 2px 0px rgba(0, 0, 5, 0.05);
    padding-bottom: 20px;
}


.right-shadow {
    box-shadow: 2px 0px 0px rgba(0, 0, 5, 0.05);
    height: 100vh;
}

.chat-user-online {
    background: var(--am-online);
    height: 8px;
    width: 8px;
    position: absolute;
    content: '';
    border-radius: 50px;
    margin-left: 70px;
    margin-top: -13px;
}

.unread-msg {
    font-weight: var(--am-fw-bold);
}

.smile-icon {
    position: absolute;
    top: 16px;
    margin-left: 20px;
    cursor: pointer;
}

/* Message view text  */


.chat-messages {
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    flex: 1;
}

.message-box-holder {
    width: 100%;
    margin: 0 0 15px;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}

.message-sender {
    font-size: 12px;
    margin: 0 0 15px;
    color: var(--am-dark-2);
    align-self: flex-start;
}

.msg-send-time {
    font-size: 12px;
    margin: 0 0 15px;
    color: var(--am-dark-2);
    align-self: flex-end;
}

.message-sender a,
.message-sender a:link,
.message-sender a:visited,
.chat-partner-name a,
.chat-partner-name a:link,
.chat-partner-name a:visited {
    color: var(--am-dark-2);
    text-decoration: none;
}

.message-box {
    padding: 10px 15px;
    border-radius: 0px 15px 15px 15px;
    position: relative;
    background-image: linear-gradient(to right, var(--am-linner-left), var(--am-linner-right));
    color: var(--am-white);
    font-size: 15px;
}

.message-partner {
    background: #f5f5f5;
    align-self: flex-start;
    color: var(--am-dark-1);
}

.margin-bottom-50 {
    margin-bottom: 80px;
}

/* Message input Holder  */
.chat-input-holder.position-relative {
    position: fixed !important;
    bottom: 0px;
    width: 70%;
    margin: 0 auto;
    background-color: #fff;
    padding-bottom: 50px;
}

.chat-input-holder textarea {
    width: 50%;
    background: #F5F5F5;
    border: 0;
    border-radius: 50px;
}

.message-send::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.chat-input {
    resize: none;
    padding: 16px 60px;
    height: 60px;
    font-size: 16px;
    color: #000;
}

.chat-input:focus,
.message-send:focus {
    outline: none;
}

.send-message {
    position: absolute;
    right: 26%;
    top: 5px;
}

.send-message img {
    width: 50px;
}

.chat-input-holder {
    text-align: center;
}



/* Upload image  */

.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.box {
    display: block;
    min-width: 100%;
    height: 220px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}




/* 
.upload-options {
    position: relative;
    height: 75px;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    transition: background-color ease-in-out 150ms;
    background-image: linear-gradient(to right, var(--am-linner-left), var(--am-linner-right));
    color: var(--am-white);
} */

/* .upload-options {
    position: relative;
    height: 75px;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    transition: background-color ease-in-out 150ms;
    background-image: linear-gradient(to right, var(--am-linner-left), var(--am-linner-right));
    color: var(--am-white);
    margin-top: -140px;
} */

.upload-options {
    /* position: relative; */
    /* height: 75px; */
    cursor: pointer;
    /* overflow: hidden; */
    /* text-align: center; */
    /* transition: background-color ease-in-out 150ms; */
    /* background-image: linear-gradient(to right, var(--am-linner-left), var(--am-linner-right)); */
    /* color: var(--am-white); */
    /* margin-top: -140px; */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}

/* .upload-options:hover {
    background-color: #7fb1b3;
} */

.upload-options input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.upload-options label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
}

.upload-options label::after {
    content: 'Browser';
    position: absolute;
    color: #565656;
    top: 115px;
    left: 115px;
    z-index: 0;
    text-align: center;
}

.upload-options label span {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
}

.js--image-preview {
    height: 225px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-image: url('');
    background-color: #f5f5f5;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.js--image-preview::after {
    /* content: "photo_size_select_actual"; */
    /* font-family: 'Material Icons'; */
    /* position: relative; */
    /* font-size: 4.5em; */
    /* color: #e6e6e6; */
    top: calc(50% - 3rem);
    left: calc(50% - 2.25rem);
    z-index: 0;
}

.js--image-preview.js--no-default::after {
    display: none;
}

.js--image-preview:nth-child(2) {
    background-image: url('http://bastianandre.at/giphy.gif');
}

i.material-icons {
    transition: color 100ms ease-in-out;
    font-size: 2.25em;
    line-height: 55px;
    color: white;
    display: block;
}

.drop {
    display: block;
    position: absolute;
    background: rgba(95, 158, 160, 0.2);
    border-radius: 100%;
    transform: scale(0);
}

.animate {
    animation: ripple 0.4s linear;
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

.theme-btn.w-25.p-3.rounded-2.d-block {
    margin: 0 auto;
}