/* open_sans font css start  */
@font-face {
    font-family: regular;
    src: url(../font/open_sans/OpenSans-Regular.ttf);
}

@font-face {
    font-family: bold;
    src: url(../font/open_sans/OpenSans-Bold.ttf);
}

@font-face {
    font-family: extrabold;
    src: url(../font/open_sans/OpenSans-ExtraBold.ttf);
}

@font-face {
    font-family: medium;
    src: url(../font/open_sans/OpenSans-Medium.ttf);
}

@font-face {
    font-family: semibold;
    src: url(../font/open_sans/OpenSans-SemiBold.ttf);
}

@font-face {
    font-family: light;
    src: url(../font/open_sans/OpenSans-Light.ttf);
}

/* open_sans font css end  */



/* color variable  */
:root {
    --theme-primary: #06006B ;
    --theme-secondary: #9690FF;
    --white: rgb(255, 255, 255);
    --black: rgb(0, 0, 0);  
    --border-color: #d3d3d3;
}

/* color variable  */



/* font css start  */
.bold {
    font-family: bold;
}

.extrabold {
    font-family: extrabold;
}

.medium {
    font-family: medium;
}

.semibold {
    font-family: semibold;
}

.light {
    font-family: light;
}

/* font css end  */


/* comman css start  */
*{
    box-sizing: border-box;
}
body {
    font-family: regular !important;
    color: #000000;
    margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    margin: 0px;
}

a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}
/* common  css end  */




/* this app comman css start  */
.page_layout {
    display: flex;   
    padding: 15px;
}
.page_layout .sidebar {
    width: 20%;
    height: 100vh;
    position: fixed;
    overflow-y: auto;
}
.main_page {
    width: 80%;
    margin-left: auto;
    padding-left: 30px;
}
.pg_title {
    font-size: 22px;
    font-family: semibold;
    margin: 15px 0px 25px 0px;
}
.sidebar_inner {
    background: #DADADA;
    border-radius: 32px;
    padding: 22px 32px;
    color: white;
    height: 100%;
    position: relative;
}
.humburger_toggle span {
    position: absolute;
    top: 18px;
    right: 18px;
    cursor: pointer;
    color: black;
}
.table-responsive {
    width: 100%;
    overflow-y: auto;
}
.theme_btn{
    background: transparent radial-gradient(closest-side at 50% 50%,var(--theme-secondary) 0%,var(--theme-primary) 100%) 0% 0% no-repeat padding-box;
    padding: 6px 20px;
    width: fit-content;
    font-size: 14px;
    color: var(--white);
}
/* this app comman css start  */

/* sidebar css start  */
.sidebar_inner .menus {
    display: flex;
    flex-direction: column;
    justify-content: start !important;
    text-align: start;
    gap: 20px;
}
.sidebar_inner .menus a{
    color: #000000;
}
.sidebar_inner .menus a.active{
    font-family: semibold;
}
.sidebar_inner .logo{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
.sidebar_inner .logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* / Login Css start / */
section.pg-login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.login-panel{
    width: 100%;
    max-width: 330px;
    border-radius: 15px;
    background: #DADADA;
    box-shadow: 0px 0px 6px #00000029;
    padding: 0px 35px 40px 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-panel input {
    width: 100%;
    border-radius: 50px;
    background: #ffffff;
    outline: none;
    border: none;
    padding: 11.5px 20px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 19px;
    color: #000000;
}
input::placeholder {
    font-size: 14px;
    line-height: 19px;
    color: #000000;
    opacity:0.6;
}
.userlist td {
    padding: 0 15px;
   
}
.pg-login img {
    height: 113px;
    object-fit: contain;
    margin-top: -56.5px;
    margin-bottom: 16px;
}
.pg-login h4{
    font-family: semibold;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 25px;
}
.pg-login input:placeholder{
    font-size: 14px;
    line-height: 19px;
    color: #ffffff63;
}
input[type="submit"]{
    width: 100%;
    font-size: 16px;
    font-family: semibold;
    line-height: 22px;
    color: #ffffff;
    padding: 7.5px 0px;
    border-radius: 26px;
    background: radial-gradient(closest-side at 50% 50%, #9690FF 0%, #06006B 100%);
    border: none;
    text-align: center;
    margin-top: 16px;
    cursor: pointer;
}

/* / Login css end / */


/* dashboard home page css start  */
.d_card_single h6{
    font-size: 20px;
    font-family: regular;
}
.d_card_single h4{
    font-size: 50px;
    font-family: bold;
    margin-top: 5px;
}
.d_card_single {
    padding-bottom: 12px;
    position: relative;
    min-width: 20%;
    margin-top: 30px;
}
.d_card_single:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 7px;
    left: 0;
    bottom: 0;
    background: #103DC4;

}
.aup_top {
    display: flex;
    gap: 15px;
}
.d_card {
    display: flex;
    gap: 40px;
}
section.about_user_product .oi_single:last-child {
    display: flex;
    align-items: center;
    gap: 5px;
}
section.about_user_product .oi_single:last-child span {
    color: #17117c;
    cursor: pointer;
}
/* usersingle page css start  */
.usersingle .section_top .user_img{
    width: 86px;
    height: 86px;
    border: 1px solid #707070;
border-radius: 7px;
overflow: hidden;
}
.usersingle .section_top .user_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.usersingle .section_top .right .qr_code_container{
    width: 86px;
    height: 86px;

}
.usersingle .section_top .right .qr_code_container img{
    width: 100%;
    height: 100%;object-fit: contain;
}
.usersingle .section_top{
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}
.usersingle .section_top .left{
    display: flex;
    gap: 18px;
    align-items: center;
}

.usersingle .section_mid .user_social_media img {
    width: 40px;
    object-fit: contain;
    margin-right: -8px;
}
.usersingle .oi_single {
    font-size: 14px;
    font-family: 'semibold';
    margin-top: 5px;
}
.usersingle .oi_single span.label{
    font-family: regular;
    margin-right: 4px;
}
section.about_user_company {
    padding: 10px;
    background: #d5d2ff;
}
section.about_user_product {
    background: #D1D1D1;
    padding: 10px;
    margin-top: 12px;
}
.product_img_container {
    width: 100px;  
    height:100px;
}
.product_img_container img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.oi_single.d_v {
    display: flex;
    align-items: center;
    gap: 20px;
}
.user_social_media a {
    background: black;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    padding: 10px;
}
.user_social_media a img {
    width: 100% !important;
    height: 100% !important;
}
.oi_single.d_v .view, .oi_single.d_v .download {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user_payments .up_single{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 6px #00000029;
border-radius: 5px;
padding: 5px;
}
.user_payments .up_single img{
    width: 100%;
    object-fit: contain;
}
.user_payments {
    margin: 15px 0px 20px 0px;
    display: flex;
    gap: 12px;
}













/* userlist page css start  */
.userlist .table-upr-header {
  position:relative;
}

.userlist .table-upr-header button {
    position:absolute;
    top:0;
    right:0;
}

.userlist .table-upr-header {
    display: flex;
    margin-bottom: 16px;
    flex-wrap: wrap;
    row-gap: 15px;
    column-gap: 15px;
}

.userlist .select-cont {
    display: flex;
    gap: 10px;
}
.userlist select {
    font-size: 14px;
    line-height: 19px;
    font-family: regular;
    width: 148px;
    height: 34px;
    padding: 5.5px 19px 5.5px 10px;
    border: 1px solid #707070;
}
.userlist .search {
    width: 100%;
    max-width: 313px;
    position: relative;
    display: flex;
    min-width: 313px;
}
.userlist input.searchTerm::placeholder {
    color: #00000040;
}
.table-responsive td {
    padding: 15px;
}
.userlist .searchTerm {
    width: 100%;
    border: 1px solid #707070;
    height: 32px;
    border-radius: 17px 17px 17px 17px;
    outline: none;
    color: #000000;
    font-size: 14px;
    line-height: 19px;
    font-family: regular;
    padding: 0px 12px 0px 14px;
}
.userlist .searchButton {
    border-left: none !important;
    border: 1px solid #707070;
    border-radius: 0px 17px 17px 0px;
    background: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
}
/***********************Table-css*****************************/
.userlist table.table {
    width: 100%;
    border-spacing: 0;
}
.userlist thead{
    background-color: #CBE2FF;
}
.userlist th {
    text-align: start;
}
.userlist thead th:last-child {
    padding-right: 28px;
}

.userlist thead th:first-child {
    padding-left: 28px;
}
.userlist th {
    padding: 14.5px 0px;
}
.userlist .table img {
    width: 49px;
    height: 49px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid #707070;
}
.userlist tbody{
    background-color: #F5F8FF;
}
.userlist tbody th{
    padding: 10px 0px 10px 28px !important;
}
.userlist tbody td, th {
    border-bottom: 1px solid #CBE2FF;
}
.userlist tbody tr td:last-child{
    padding-right: 28px;
}
.userlist .toggle-control {
    position: relative;
    cursor: pointer;
}
.userlist .toggle-control input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.userlist .toggle-control input:checked ~ .control {
  background-color: #9AC4F9;
}
.userlist .toggle-control input:checked ~ .control:after {
  left: 16px;
  background: transparent linear-gradient(180deg, #0469DD 0%, #2200A1 100%) 0% 0% no-repeat padding-box;
}
.userlist .toggle-control .control {
  position: absolute;
  top: -10px;
  left: 0;
  height: 20px;
  width: 35px;
  border-radius: 1.563rem;
  background-color: #ACACAC;
  transition: background-color 0.15s ease-in;
}
.userlist  .toggle-control .control:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 16px;
  height: 16px;
  border-radius: 1.563rem;
  background: #535151;
  transition: left 0.15s ease-in;
}
.userlist tbody td, .userlist tbody th{
    vertical-align: middle;
}
.userlist tbody td p{
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 19px;
    font-family: regular;
}
.userlist tbody td.name-bld{
    font-family: semibold;
}

.userlist button.searchButton {
    height: 32px;
}



/* userlist page css end  */

/* Modal Css start */

.modal {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000063;
}
.modal-dialog {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 0px 30px 30px 30px;
}
.modal .modal-header img {
    width: 83px;
    height: 83px;
    object-fit: cover;
    border-radius: 1000px;
    margin-top: -41.5px;
    margin-bottom: 25px;
    border: 1px solid #0661d9;
}
.modal .modal-body p{
    font-family: semibold;
    font-size: 14px;
    line-height: 19px;
    color: #000;
    text-align: center;
    margin-bottom: 38px;
}
.modal .modal-footer {
    width: 100%;
    display: flex;
    gap: 10px;
}
.modal .modal-footer .btn{
    width: 50%;
    font-size: 14px;
    line-height: 19px;
    font-family: semibold;
    padding: 7.5px 10px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
}
.modal .btn.btn-secondary{
    background: transparent;
    border: 1px solid #090909;
}
.modal .btn.btn-primary{
    background: transparent linear-gradient(180deg, #0469DD 0%, #2200A1 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    color: #fff;
}
/* Moda Css End */

/* feeback page css start  */
.reaction_single h5 {
    font-size: 18px;
    font-family: regular;
    font-weight: 400;
}
.reaction_single h4 {
    font-size: 25px;
    font-family: bold;
    padding: 6px;
    text-align: center;
    background: #CBE2FF;
    min-width: 86px;
    margin: 4px 0px;
}
.reaction_single h6{
    font-size: 14px;
    font-family: regular;
    font-weight: 400;
}
.reaction_single {
    text-align: center;
}
.reactions {
    display: flex;
    gap: 45px;
}
.feedback_inner {
    min-height: 81vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
hr.divider {
    margin-top: 15px;
    margin-bottom: 10px;
    border-color: #ffffff;
    height: 0px !important;
}
/* new two section css start  */
.btn-themeicon-cont {
    display: flex;  
    margin-top: 14px;
    gap: 20px;
    align-items: center;
}
.open-cv-btn a {
    font-family: regular;
    font-size: 14px;
    line-height: 19px;
    color: #fff;
    background: transparent radial-gradient(closest-side at 50% 50%, #9690FF 0%, #06006B 100%) 0% 0% no-repeat padding-box;
    padding: 8px 15px;
}
.theme-color {
    width: 32px;
    height: 32px;
    border-radius: 50px;
    border: 4px solid #fff;
    box-shadow: 0px 3px 6px #00000029;
}
.bg_DCDCDC.theme-color{
    background-color: #dcdcdc;
}
.bg_797164.theme-color{
    background-color: #797164;
}
.bg_DDC187.theme-color{
    background-color: #DDC187;
}
.bg_EADA84.theme-color{
    background-color: #EADA84;
}
.bg_BAE5EB.theme-color{
    background-color: #BAE5EB;
}
.bg_FFCBA2.theme-color{
    background-color: #FFCBA2;
}
.bg_E6C45E.theme-color{
    background-color: #E6C45E;
}
.bg_049267.theme-color{
    background-color: #049267;
}
.bg_C7B7CD.theme-color{
    background-color: #C7B7CD;
}
/* //////////////////////////////////// */
.payment-gateway-cont {
    margin-bottom: 15px;
}
.gateway-icons {
    display: flex;
    margin-bottom: 12px;
    gap: 20px;
    flex-wrap: wrap;
}
.gateway-icons .gateway-item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.payment-icon {
    width: 40px;
    height: 40px;
    /*background: transparent radial-gradient(closest-side at 50% 50%, #9690FF 0%, #06006B 100%) 0% 0% no-repeat padding-box;*/
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding: 5px;*/
    margin-bottom: 5px;
}
.payment-icon img {
    width: 100%;
}
.payment-no{
    font-family: regular;
    font-size: 14px;
    line-height: 19px;
    color: #000;
}
.payment-details {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.payment-details .pmd_single {
    background: #D1D1D1;
    padding: 10px;
    border-radius: 5px;
    white-space: pre-line;
    line-height: 24px;
    font-size: 14px;
    min-width: 210px;
}
/* new two section css start  */
.alert.alert-danger.alert-dismissible.fade.show {
    color: #FF3D3D;
    margin-bottom: 15px;
    position: relative;
}
.alert.alert-success.alert-dismissible.fade.show {
      color: #008d2a;
    margin-bottom: 15px;
    position: relative;
}

.alert.alert-danger.alert-dismissible.fade.show strong, .alert.alert-success.alert-dismissible.fade.show strong {
    display: block;
}
.alert.alert-danger.alert-dismissible.fade.show button.close {
    position: absolute;
    top: -8px;
    right: 0;
    border-radius: 50%;
    border: none;
    width: 22px;
    height: 22px;
    color: white;
    background: #FF3D3D;
    font-size: 18px;
    display: flex;
    align-items: center;
    cursor:pointer;
    justify-content: center;
}
.alert.alert-success.alert-dismissible.fade.show button{
       position: absolute;
    top: -8px;
    right: 0;
    border-radius: 50%;
    border: none;
    width: 22px;
    height: 22px;
    color: white;
    background: #008d2a;
    font-size: 18px;
    display: flex;
    align-items: center;
    cursor:pointer;
    justify-content: center;
}