@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
@import url("fontawesome-5.8.0/css/font-awesome-all.css");
@import url("bootstrap-icons%401.11.3/font/bootstrap-icons.min.css");

body { font-family: 'Open Sans', sans-serif!important; }
.login { background: #ffe9e9 url(../images/login-bg.jpg) center center no-repeat; background-size: cover; }

.ripple-background{ z-index: 0!important; position: absolute; opacity: 0.5; }
.ripple-background .circle{
    position: absolute;
    border-radius: 50%;
    animation: ripple 15s infinite;
}
.ripple-background .small{
    width: 200px;
    height: 200px;
    left: -100px;
    top: -100px;
    z-index: -999;
}
.ripple-background .medium{
    width: 400px;
    height: 400px;
    left: -200px;
    bottom: -200px;
    z-index: -999;
}
.ripple-background .large{
    width: 600px;
    height: 600px;
    left: -300px;
    top: -300px;
    z-index: -999;
}
.ripple-background .xlarge{
    width: 800px;
    height: 800px;
    left: -400px;
    top: -400px;
    z-index: -999;
}

.ripple-background .xxlarge{
    width: 1000px;
    height: 1000px;
    left: -500px;
    top: -500px;
    z-index: -999;
}

.ripple-background .shade1{
    background: #ffffff5c;
}

.ripple-background .shade2{
    background: #ffffff5c;
}

.ripple-background .shade3{
    background: #ffffff5c;
}

.ripple-background .shade4{
    background: #ffffff5c;
}

.ripple-background .shade5{
    background: #ffffff5c;
}

@keyframes ripple{
    0%{
        transform: scale(0.8);
    }

    50%{
        transform: scale(1);
    }

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


.login_content form input[type="text"], 
.login_content form input[type="email"], 
.login_content form input[type="password"]{ border:0; box-shadow: none; font-size: 14px; height: 40px; margin-bottom: 15px; }
.login_content.logincont { padding: 25px 60px 15px 60px; text-shadow: 0 1px 0 transparent; text-align: center;
    min-width: 471px; background: #bf32720a;
    box-shadow: rgb(17 17 26 / 0%) 0px 0px 16px; }
.login_content.logincont h1 { font-size: 25px; }

.login_content.logincont form div a { margin: 0px; }
.loginbtn { font-family: 'Open Sans', sans-serif;
    font-size: 14px; text-transform: uppercase;
    color: #fff;
    background: #bf3272;
    border: 2px solid #bf3272;
    display: block;
    margin: 0px 0px 20px 0px;
    padding: 5px 25px;
    border-radius: 5px;
    transition: all 0.5s ease-in-out; }
.loginbtn:hover { background: #871749; color: #fff; }

.sitebtn { font-family: 'Open Sans', sans-serif;
    font-size: 14px; text-transform: uppercase;
    color: #fff;
    background: #bf3272;
    border: 2px solid #bf3272;
    display: block;
    margin: 0px 0px 20px 0px;
    padding: 3px 25px;
    border-radius: 5px;
    transition: all 0.5s ease-in-out; }
.sitebtn:hover { background: #871749; color: #fff; }
.nav_menu { /*background: #fff;*/ }
.overview-box { width: 100%; margin: 20px 0 0 0; font-family: 'Open Sans', sans-serif!important;
/* background-color: #fff; box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15); */ }
.overview-box h2 { font-size: 14px; margin: 0px; padding: 0px; color: #bf3272; font-weight: 600!important; font-family: 'Open Sans', sans-serif!important; }
.overview-box img { margin-right: 10px; }
.overview-box .count { font-size: 21px; color: #3e3e3e; font-weight: 600!important; font-family: 'Open Sans', sans-serif!important; }
.dashboard-stat { position: relative; background: rgba(255, 255, 255, 0.7); border-radius: 60px; 
    margin: 15px 0 0 0; padding: 0px; box-shadow: rgb(0 0 0 / 7%) 0px 2px 7px 2px; }
.dashboard-statbox { padding: 5px 6px; font-size: 13px; line-height: 1.2 }
.dashboard-statbox span { display: block; font-size: 15px; font-weight: 700; color: #3c3c3c; }
.dashboard-statbox img { margin-right: 10px; }
.statdevider { background: #fff; width: 10px; height: 104px; position: absolute; right: -15px; top: -12px; }
.nolengthtable .dataTables_length, .nolengthtable .dataTables_filter { display: none; }
.mytable { background: #fff!important; border:0;  border-right: 1px solid #fbc3dc!important; border-bottom: 1px solid #fbc3dc!important; }
.mytable th { background: #ffc2dd; vertical-align: top; font-size: 14px; border-width: 1px;
 border-top: 1px solid #ed95bc !important; border-left: 0px solid #ed95bc !important; border-bottom: 0!important; border-right: 0; font-size: 12px; padding: 10px 5px 10px 8px; }
.mytable td { font-size: 12px; border-top: 1px solid #fbc3dc!important; border-left: 0px solid #fbc3dc!important;
border-bottom: 0; border-right: 0; padding: 10px 5px 10px 8px; }
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.5)!important;
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(250,241,224,0.5)!important;
}
.dashtbl { background: transparent; border: 0!important; border-radius: 15px; }
.dashtbl th { font-size: 15px; font-weight: 600; line-height: 1.5; border-top: 0!important; }
.dashtbl th:first-child { border-radius: 15px 0 0 0; }
.dashtbl th:last-child { border-radius: 0 15px 0 0; }
.dashtbl td { border-top: 1px solid #e9e9e9!important; }

.dashtbl tr:last-child>td { border-radius: 0 0 0 15px; }
.dashtbl tr:last-child td:last-child { border-radius: 0 0 15px 0; }

.mytable td select { border: 1px solid #ccc; padding: 5px; font-size: 11px; }
.mytable td a { color: #bf3272; text-decoration: underline; }
.mytable td a:hover { color: #000; text-decoration: none; }
.filtercont { margin: 0px 0px 20px 0px; }
.filtercont select, .filtercont input { border: 1px solid #ccc; padding: 5px; font-size: 11px; border-radius: 5px; }
.statusprogress, .statusactive, .statuscancel { background: #f3d771; padding: 1px 8px; border-radius: 15px; color: #000; font-size: 11px; }
.filtercont .sitebtn { margin-bottom: 0 }
.statusactive { background: #108908; color: #fff; }
.statuscancel { background: #ff0000; color: #fff; }
.actionlist { margin: 10px; padding:0px; list-style: none; }
.actionlist li { float: left; margin: 0px 0px 0px 3px; padding:0px; list-style: none; }
.actionlist li a { padding: 5px 5px 0px 5px; display: block; height: 22px; line-height: 10px; color: #0ac19f; background: #e6fffa; border-radius: 100%; }
.actionlist li a:hover { color: #e6fffa; background: #0ac19f; }

.actionlist li:nth-child(2) a { background: #ffe6dd; color: #df2e00; }
.actionlist li:nth-child(2) a:hover { background: #df2e00; color: #fbf2ef; }

.actionlist li:nth-child(3) a{ background: #d3efff; color: #3eadef; }
.actionlist li:nth-child(3) a:hover { background: #3eadef; color:#d3efff; }
.profileview-pop .close { position: absolute; right: 5px; top: 5px; }
.profileview-pop .modal-content { border-radius: 20px; }
.profileview-pop .modal-body { background: #efefef; padding-top: 70px; border-radius: 20px; }
.profilepop-inr { background: #fff; padding: 20px; box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px; }
.profilepop-head { position: relative; margin-top: -70px; }
.profilepop-pic { width: 160px; height: 160px; overflow: hidden; display: flex; justify-content: center; align-content: center; border-radius: 100%; }
.profilepop-pic img { max-width: 100%; }
.profilepop-right { padding-top: 20px; }
.profilepop-right h2 { margin: 0px 0px 8px 0px; padding: 0px; font-weight: 600; }
.profilepop-circle { width: 70px; height: 70px; background: #bf3272; color: #fff; text-align: center; z-index: 2;
    margin: -20px auto 0 auto; position: relative; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1.5; }
.totalvisit { color: #bf3272; margin: 5px 0 0 0; display: block; }    
.lastlogin { background: #efefef; border-radius: 15px; text-align: center; font-size: 11px; font-weight: 600; }
.profilepop-row { margin: 8px 0px 0px 0px; color: #000; }
.profilepop-row i { margin: 0px 5px 0px 0px; color: #bf3272; }
.profilepop-table {
    display: grid;
    grid-template-columns: 1fr 50%; 
}
.profilepop-table2 { grid-template-columns: 1fr 3fr 0%; }
.profilepop-table > div {
    margin: 4px 0px;
    background: #ffeaf4;
    padding: 5px 10px;
    border-radius: 15px 0 0 15px;
    color: #bf3272;
    font-weight: 600;
}

.profilepop-table > div:nth-child(3n+2) {
    background: #efefef; color: #000;
    border-radius: 0px 15px 15px 0;
    font-weight: 400;
}
.det-profile-pic { border: 1px solid #efefef; width: 100%; min-height: 330px;  }
.det-profile-pic .carousel button { background: transparent; border: 0; }
.editproflink { float: right; color: #bf3272; font-size: 13px; }
.editproflink:hover { color: #000; }
.det-proflist, .detpro-list { margin: 0px; padding: 0px; list-style: none; }
.det-proflist li, .detpro-list li { float: left; margin: 10px 15px 0px 0px; padding: 0px; }
.det-proflist li span { font-weight: 600; }

.detpro-list li { margin: 10px 5px 0px 0px; }
.detpro-list li a.det-popbtn { font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    background: #bf3272;
    display: block;
    margin: 0px 0px 20px 0px;
    padding: 6px 8px;
    border-radius: 5px;
    transition: all 0.5s ease-in-out; }
.detpro-list li a.det-popbtn:hover { background: #dd8f00 }
.detpro-list li a.det-popbtn2 { background: #ff3591; }
.detpro-list li a.det-popbtn2:hover { background: #bf3272; }
.whitebox { background: #fff; padding: 20px; margin: 0px 0 20px 0 }
.whitebox h6 { font-weight: 600; color: #000; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #efefef; }

/* status button start */
 .checkbox-wrapper-8 .tgl {
    display: none;
  }
  .checkbox-wrapper-8 .tgl,
  .checkbox-wrapper-8 .tgl:after,
  .checkbox-wrapper-8 .tgl:before,
  .checkbox-wrapper-8 .tgl *,
  .checkbox-wrapper-8 .tgl *:after,
  .checkbox-wrapper-8 .tgl *:before,
  .checkbox-wrapper-8 .tgl + .tgl-btn {
    box-sizing: border-box;
  }
  .checkbox-wrapper-8 .tgl::-moz-selection,
  .checkbox-wrapper-8 .tgl:after::-moz-selection,
  .checkbox-wrapper-8 .tgl:before::-moz-selection,
  .checkbox-wrapper-8 .tgl *::-moz-selection,
  .checkbox-wrapper-8 .tgl *:after::-moz-selection,
  .checkbox-wrapper-8 .tgl *:before::-moz-selection,
  .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-8 .tgl::selection,
  .checkbox-wrapper-8 .tgl:after::selection,
  .checkbox-wrapper-8 .tgl:before::selection,
  .checkbox-wrapper-8 .tgl *::selection,
  .checkbox-wrapper-8 .tgl *:after::selection,
  .checkbox-wrapper-8 .tgl *:before::selection,
  .checkbox-wrapper-8 .tgl + .tgl-btn::selection {
    background: none;
  }
  .checkbox-wrapper-8 .tgl + .tgl-btn {
    outline: 0;
    display: block; font-size: 11px;
    width: 6em; height: 1.7em; border-radius: 5px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .checkbox-wrapper-8 .tgl + .tgl-btn:after,
  .checkbox-wrapper-8 .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
  }
  .checkbox-wrapper-8 .tgl + .tgl-btn:after {
    left: 0;
  }
  .checkbox-wrapper-8 .tgl + .tgl-btn:before {
    display: none;
  }
  .checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {
    left: 50%;
  }

  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn { margin-bottom: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition: all 0.2s ease;
    font-family: sans-serif;
    background: #f11010;
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
    
    display: inline-block;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 1.7em;
    color: #fff;
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {
    left: 100%;
    content: attr(data-tg-on);
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
    left: 0;
    content: attr(data-tg-off);
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {
    background: #888;
  }
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
    left: -10%;
  }
  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
    background: #509b23;
  }
  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {
    left: -100%;
  }
  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {
    left: 0;
  }
  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {
    left: 10%;
  }
 /* status button end */

.card.custom-card {
    color: #212b37!important;
    border: 0;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; transition: all 0.3s ease-in-out;
}
.card.custom-card:hover { transform: scale(1.02); }


.main-content-card:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/linebg.png) center center repeat;
    z-index: 0;
    background-size: cover;
}
.card.custom-card .card-body {
    padding: 0.5rem 1rem 0rem 1rem;
    color: #212b37;
    position: relative;
    z-index: 1;
}
.card.custom-card .text-muted { color: #6e829f !important; }
.card.custom-card .lh-1 {
    line-height: 1 !important;
}
.card.custom-card .avatar.avatar-md {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1rem;
    border-radius: 100%;
    color: #fff;
    background: #ffd4e3;
    background: linear-gradient(90deg, rgb(191 50 114) 0%, #9C27B0 100%);
}
.staticon2 { background: #497fa8; background: linear-gradient(90deg, #3a99e5 0%, #676765 100%) !important; }
.staticon3 { background: #497fa8; background: linear-gradient(90deg, #0d1d74 0%, #3F51B5 100%)!important; }
.staticon4 { background: #497fa8; background: linear-gradient(90deg, #225785 0%, #dd636e 100%) !important; }

.card.custom-card .card-body h4 { font-size: 1.3rem; }
.userdet { display: flex; flex-direction: column; }
.userdet strong { color: #bf3272; }
.userdet i { font-size: 12px; color: #bf3272; width: 15px; margin-right: 0px; vertical-align: middle; }
.userdet i.fa-envelope { font-size: 10px; margin-top: 2px; }
.userdet i.fa-mobile { font-size: 16px; }
.userdet div { display: flex; }
.card.custom-card.main-dashboard-banner {
    z-index: 1;
    box-shadow: none;
    border: 0;
}
.card.custom-card.main-dashboard-banner:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right top, #ff9794, #fd8dac, #e58cc6, #bf7cdc, #6f78f4);
    z-index: -1;
}

.card.custom-card.main-dashboard-banner2:before {
    background-image: linear-gradient(to right top, #bf7cdc, #6f78f4, #6f78f4, #6f78f4, #6f78f4);
}

.card.custom-card.main-dashboard-banner:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/leafbg.png);
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    z-index: 0;
    opacity: 0.1;
}

/*harpreet css start*/
.desk-package { margin: 5px 0px 10px 0px; border-bottom: 1px solid #ffffff42; padding: 0px 0px 12px 0px; }
.desk-package:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.packicon span { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: #fff; border-radius: 100%;
color: #1375c5; font-size: 20px; }
.packicon i.fa-crown { display: block; color: #ff419b; }

.packdet { font-size: 14px; display: block; color: #fff; flex-grow: 1; }
.packdet span { font-size: 20px; font-weight: 600; display: block; color: #fff; }
.packdet a { font-size: 11px; font-weight: 600; color: #fff; float: right; }
.packprc { font-size: 12px; font-style: normal; }
.packprc em { font-style: normal; }

.topselling-plan { border-radius: 20px; position: relative; border: 0; min-height: 113px; background: #fff; }
.topselling-plan:after { content: ''; background: url(../images/cornor-design.png) right top no-repeat; position: absolute; right: 0; top: 0;
 width: 59px; height: 81px; }

.pending-app { border-radius: 20px; position: relative; border: 0; min-height: 120px; background: #fff; padding-right: 50px; }
.pending-app:after { content: ''; background: url(../images/cornor-design2.png) right top no-repeat; position: absolute; right: 0; top: 0;
 width: 59px; height: 81px; border-radius: 0 15px 0 0;}
.pending-app h4 { margin: 10px 0 15px 0; font-size: 1rem; font-weight: 600; }
.pending-app h5 { margin: 0px 0 0 0; font-size: 1.5rem; font-weight: 500; border-radius: 0 20px 0 0; }
.pending-app img { transition: all 0.3s ease-in-out }
.pending-app a:hover img { transform: rotate(45deg); }


.filterbtn { color: #000; background: #ffe7b2; font-size: 13px; padding: 7px 15px; border-radius: 7px; margin: 5px 0 0 0; }
.filterbtn:hover { color: #000; background: #fcf8ef; }
.filter-cont2 { padding: 5px 10px 0px 10px; border-radius: 5px; margin-bottom: 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background: #e1eef7; border: 1px solid #fff;
    position: absolute;
    right: 10px;
    width: 100%; }
.filter-cont2 h6 { font-size: 13px; }


.filter { position: relative; display: block; }
.filter-btn { width: 100%; text-align: left; display: flex; justify-content: space-between;
    padding: 5px 14px; font-size: 12px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 6px;
}

.filter-dropdown {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    width: 150px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    z-index: 10;
}

.filter-dropdown label {
    display: block; font-size: 11px;
    cursor: pointer; margin: 0;
    padding: 4px 0 0px 0;
}
.filter-dropdown label input { vertical-align: middle; margin-right: 5px; }
.loginhistory { font-size: 11px; color: #000!important; text-decoration: none!important; margin: 5px 0px!important; display: block; color: #2b7200 !important }
.userdet i { color: #bf3272; font-size: 12px; margin-right: 5px; }
.userdet i.fa-envelope { font-size: 13px; }
.userdet i.fa-mobile { font-size: 13px; }
.userdet i.fa-mars, .userdet i.fa-venus { font-size: 14px; }
.form-select { min-height: 33px; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; }


/*matchmaking score start*/
.detail-partners-pro{ margin-top: 20px; }
.hed-proher-ex h4{ font-weight:600; font-size: 16px; position: relative; }
.hed-proher-ex h4::after{ content: ""; height: 3px; width: 30px; background-color: #E4189F;
    position: absolute; bottom: -15px; left: 0px; }
.mat-pro-2{ text-align: right; }
.mat-pro-2 h4{ font-weight:600; font-size: 16px; position: relative; }
.mat-pro-2 h4::after{
    content: "";
    height: 3px;
    width: 30px;
    background-color: #E4189F;
    position: absolute;
    bottom: -15px;
    right: 0px;
}

.opd-pp-lists { margin: 0px; padding: 0px; list-style: none; }
.opd-pp-lists>li { padding: 5px 0px; border-radius: 8px; font-size: 13px; line-height: 1.3; color: #444; display: flex; position: relative; }
.opd-pp-lists .opd-pp-lbl {
    padding-right: 5px;
    box-sizing: border-box;
    color: #999;
    font-weight: 600;
    font-size: 13px;
}
.bg-pro-con-ic { background-color: #FFECCE; padding: 0px 0px 0px 15px; border-radius: 10px 0px 0px 10px; border: 1px solid #fff; min-height: 50px; display: flex; align-items: center; justify-content: flex-start; }
.bg-pro-con-ic.rht { padding: 0px 15px 0px 0px; border-radius: 0px 10px 10px 0px; justify-content: flex-end; text-align: right; }
.partner-preficon { background: #FFDFF2; border: 1px solid #fff; min-height: 50px; display: flex; align-items: center; justify-content: center; }

/*matchmaking score end*/


/*chat start*/
.chat-container {
    width: 90%;
    background: #fff;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: auto;
}

.chat-header {
    background: #bf3272;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-header img {
    border-radius: 50%;
}

.chat-header h4 {
    margin: 0;
    font-size: 14px;
}

.chat-header span {
    font-size: 11px;
    opacity: .8;
}

.chat-body {
    flex: 1;
    padding: 10px;
    background: #dbe9f4;
    overflow-y: auto;
    max-height: 400px;
}

.message {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    position: relative;
    margin-bottom: 33px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.message span {
    font-size: 12px;
    display: block!important;
    position: absolute;
    bottom: -20px;
}
.message span i {
    font-size: 10px;
}
.message.received {
    background: #fff;
    align-self: flex-start;
}
.message.sent {
    background: #ffd0e6;
    align-self: flex-end;
    margin-left: auto;
}
.message.sent span { right: 20px; } 
.chat-footer { display: flex; padding: 8px; background: #f0f0f0; }
.chat-footer input { flex: 1; padding: 8px 10px; border: none; border-radius: 20px; outline: none; }
.chat-footer button { background: #075e54; color: #fff; border: none; margin-left: 8px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
/*chat end*/

/*toggle button start*/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-wrapper-14 input[type=checkbox] {
      --active: #509b23;
      --active-inner: #fff;
      --focus: 2px rgba(39, 94, 254, .3);
      --border: #BBC1E1;
      --border-hover: #509b23;
      --background: #fff;
      --disabled: #F6F8FF;
      --disabled-inner: #E1E6F9;
      -webkit-appearance: none;
      -moz-appearance: none;
      height: 21px;
      outline: none;
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0;
      cursor: pointer;
      border: 1px solid var(--bc, var(--border));
      background: var(--b, var(--background));
      transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    .checkbox-wrapper-14 input[type=checkbox]:after {
      content: "";
      display: block;
      left: 0;
      top: 0;
      position: absolute;
      transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    .checkbox-wrapper-14 input[type=checkbox]:checked {
      --b: var(--active);
      --bc: var(--active);
      --d-o: .3s;
      --d-t: .6s;
      --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }
    .checkbox-wrapper-14 input[type=checkbox]:disabled {
      --b: var(--disabled);
      cursor: not-allowed;
      opacity: 0.9;
    }
    .checkbox-wrapper-14 input[type=checkbox]:disabled:checked {
      --b: var(--disabled-inner);
      --bc: var(--border);
    }
    .checkbox-wrapper-14 input[type=checkbox]:disabled + label {
      cursor: not-allowed;
    }
    .checkbox-wrapper-14 input[type=checkbox]:hover:not(:checked):not(:disabled) {
      --bc: var(--border-hover);
    }
    .checkbox-wrapper-14 input[type=checkbox]:focus {
      box-shadow: 0 0 0 var(--focus);
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
      width: 21px;
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
      opacity: var(--o, 0);
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
      --o: 1;
    }
    .checkbox-wrapper-14 input[type=checkbox] + label {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      margin-left: 4px;
    }

    .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
      border-radius: 7px;
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
      width: 5px;
      height: 9px;
      border: 2px solid var(--active-inner);
      border-top: 0;
      border-left: 0;
      left: 7px;
      top: 4px;
      transform: rotate(var(--r, 20deg));
    }
    .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
      --r: 43deg;
    }
    .checkbox-wrapper-14 input[type=checkbox].switch {
      width: 38px;
      border-radius: 11px;
    }
    .checkbox-wrapper-14 input[type=checkbox].switch:after {
      left: 2px;
      top: 2px;
      border-radius: 50%;
      width: 16px;
      height: 15px;
      background: var(--ab, var(--border));
      transform: translateX(var(--x, 0));
    }
    .checkbox-wrapper-14 input[type=checkbox].switch:checked {
      --ab: var(--active-inner);
      --x: 17px;
    }
    .checkbox-wrapper-14 input[type=checkbox].switch:disabled:not(:checked):after {
      opacity: 0.6;
    }
  }

  .checkbox-wrapper-14 * {
    box-sizing: inherit;
  }
  .checkbox-wrapper-14 *:before,
  .checkbox-wrapper-14 *:after {
    box-sizing: inherit;
  }
/*toggle button end*/

.onlineusers { display: flex; align-items: center; justify-content: flex-start; line-height: 1.2; border-radius: 10px;
    padding: 10px; margin: 0px 15px 0px 0px; font-size: 15px; background: linear-gradient(90deg, rgba(255, 212, 227, 1) 0%, rgba(255, 252, 237, 1) 100%) }
.onlineusers span { font-size: 25px; font-weight: 700; display: block; }
.onlineusers i { font-size: 35px; margin-right: 10px; color: #bf3272; }

/*login css start*/
.login_wrapper { background: #fff; padding: 15px; border-radius: 20px; 
    max-width: 600px; margin: 50px auto; z-index: 2; position: relative; }

/*login css end*/


/*harpreet css end*/


/*harpreet responsive start*/
@media (max-width: 991px){
   .profilepop-pic { width: 100%; height: 130px; border-radius: 15px; }
   .profilepop-pic img { border-radius: 15px; }
}

@media (max-width: 480px){
   .page-title .title_left { width: 100%; }
   .filtercont select, .filtercont input { margin: 0px 0px 10px 0px; }
   .mytable th { white-space: nowrap; }
   .mytable tr th:last-child { border: 1px solid #ff0000 }
   .profilepop-pic { margin: 0 auto; }
   .profilepop-right h2 { text-align: center; }
   .detpro-list li a.det-popbtn { margin: 0px; }
   .login { padding: 0px; }
   .login_wrapper { padding: 5px; }
   .login_content.logincont { min-width: 100%; padding: 20px; }
   .login_content.logincont img { max-width: 100%; }
   .ripple-background { width: 100%; height: 100%; overflow: hidden; left:0; top:0; }
   .ripple-background .xxlarge { width: 100%; height: 100%; }
   body { padding: 10px; }

}