@import
url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
--mainColor: #fc6f03;
--mainColor2: #f7c297;
--mainLightColor: #ecaa74;
--mainDashBg: #f5f7f6;
--white: #fff;
--secColor: #f3904f;
--secColor2: #ffddc7;
--secDarkColor: #c98b5e;
}

::-webkit-scrollbar {
width: 8px;
height: 5px;
}

::-webkit-scrollbar-track {
background: var(--mainColor2);
}

::-webkit-scrollbar-thumb {
background: var(--secColor2);
}

::-webkit-scrollbar-thumb:hover {
background: var(--secColor);
}

::-webkit-scrollbar-corner {
background: var(--mainColor);
}

.ck-editor__editable {
min-height: 200px !important;
max-height: 300px !important;
}

.messageViewer {
cursor: pointer;
}

table td,
table th {
text-wrap: nowrap !important;
}

.apnaBtn {
background: var(--mainColor2) !important;
color: var(--mainColor) !important;
border-color: var(--mainColor) !important;
border-width: 1px;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}

.apnaBtn:hover {
background: var(--mainColor) !important;
color: var(--white) !important;
border-color: var(--mainColor) !important;
}

#ui-datepicker-div {
background: var(--white);
border: 1px solid var(--mainColor);
border-radius: .25rem;
display: none;
}

#ui-datepicker-div .ui-datepicker-header {
background: var(--mainLightColor);
}

.ui-datepicker-calendar thead th {
padding: 0.25rem 0;
text-align: center;
font-size: 0.75rem;
font-weight: 400;
color: var(--secColor);
}

.ui-datepicker-calendar tbody td {
width: 2rem;
height: 2rem;
text-align: center;
padding: 0;
}

.ui-datepicker-calendar tbody td a {
display: block;
border-radius: 0.25rem;
line-height: 2rem;
transition: 0.3s all;
color: var(--secColor);
font-size: 0.875rem;
text-decoration: none;
}

.ui-datepicker-calendar tbody td a:hover {
background-color: var(--mainColor2);
}

.ui-datepicker-calendar tbody td a.ui-state-active {
background-color: var(--mainColor);
color: white;
}

.ui-datepicker-header a.ui-corner-all {
cursor: pointer;
position: absolute;
top: .25rem;
width: 1.75rem;
height: 1.75rem;
border-radius: 0.25rem;
transition: 0.3s all;
}

.ui-datepicker-header a.ui-corner-all:hover {
background-color: var(--mainColor2);
}

.ui-datepicker-header a.ui-datepicker-prev {
left: .25rem;
background:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-size: 0.5rem;
background-position: 50%;
transform: rotate(180deg);
}

.ui-datepicker-header a.ui-datepicker-next {
right: .25rem;
background:
url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
background-repeat: no-repeat;
background-size: 10px;
background-position: 50%;
}

.ui-datepicker-header a>span {
display: none;
}

.ui-datepicker-title {
text-align: center;
line-height: 2rem;
font-size: 0.875rem;
font-weight: 500;
padding-bottom: 0.25rem;
}

.ui-datepicker-week-col {
color: var(--secColor);
font-weight: 400;
font-size: 0.75rem;
}

.ui-datepicker-calendar {
padding: .25rem;
}

.select2-container--default .select2-selection--single {
background: var(--secColor2);
border: 1px solid var(--secDarkColor);
color: var(--secDarkColor);
padding: .1rem .25rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--secDarkColor);
font-size: .95rem;
line-height: 1.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--secDarkColor) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent var(--secDarkColor) transparent;
border-width: 0 4px 5px 4px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: var(--mainColor);
}

.apnaDataTable .nameWithImg {
display: flex;
align-items: center;
gap: .5rem;
}

.apnaDataTable .nameWithImg img {
width: 2rem;
height: 2rem;
object-fit: cover;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}

table.dataTable thead th,
table.dataTable thead td {
padding: 2px 20px;
padding-left: 10px;
border-bottom: 1px solid var(--secColor);
font-size: .85rem;
}

table.dataTable tbody th,
table.dataTable tbody td {
padding: 2px 10px;
border-bottom: 1px solid var(--secColor2);
font-size: .85rem;
max-height: 1rem !important;
}

.tableActionBtns {
display: flex;
align-items: center;
gap: .5rem;
}

.tableActionBtns .badge {
margin: 0;
padding: .35rem .75rem;
cursor: pointer;
}

.apnaResTable {
max-width: 100%;
overflow: auto;
}

.apnaCard {
width: 100%;
box-shadow: 2px 2px 15px #efefef;
background: var(--white);
border-radius: .5rem;
-webkit-border-radius: .5rem;
-moz-border-radius: .5rem;
-ms-border-radius: .5rem;
-o-border-radius: .5rem;
}

.apnaCard .cardHead {
padding: .5rem .75rem;
border-bottom: 1px solid var(--secColor);
display: flex;
align-items: center;
justify-content: space-between;
}

.apnaPageTitle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

.apnaTitle {
color: var(--secDarkColor);
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}

.apnaTitle span {
position: relative;
}

.apnaTitle span::before {
position: absolute;
left: 0;
bottom: -.2rem;
content: '';
background: var(--mainColor);
height: 2.5px;
width: 40%;
border-radius: .5rem 0 .5rem 0;
-webkit-border-radius: .5rem 0 .5rem 0;
-moz-border-radius: .5rem 0 .5rem 0;
-ms-border-radius: .5rem 0 .5rem 0;
-o-border-radius: .5rem 0 .5rem 0;
}

.exportBtn {
margin-top: -.1rem;
width: fit-content;
}

.exportBtn .dt-buttons button {
padding: .3rem .75rem;
font-size: .65rem;
letter-spacing: 1px;
border: 1px solid var(--secDarkColor);
background: var(--secColor2);
color: var(--secDarkColor);
transition: .3s all;
-webkit-transition: .3s all;
-moz-transition: .3s all;
-ms-transition: .3s all;
-o-transition: .3s all;
}

.exportBtn .dt-buttons button:hover {
background: var(--mainColor) !important;
border-color: var(--mainColor) !important;
color: var(--white) !important;
}



.apnaCard .cardBody {
padding: .5rem .75rem;
}

.apnaCard .cardBody .message-list {
overflow-y: auto;
height: auto;
display: flex;
flex-direction: column;
gap: .5rem;
}

.apnaCard .cardBody .message-list .message-item {
border: 1px solid var(--secColor);
border-radius: .5rem;
-webkit-border-radius: .5rem;
-moz-border-radius: .5rem;
-ms-border-radius: .5rem;
-o-border-radius: .5rem;
}

.apnaCard .cardBody .message-list .message-item .message-link {
padding: .35rem .5rem;
}

.apnaCard .cardBody .message-list .message-item .message-text h6 {
font-size: .75rem;
}

.apnaCard .cardBody .message-list .message-item .message-text p {
font-size: .65rem;
}

.apnaCard .cardBody .tableActions {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border-bottom: 1px solid var(--secColor2);
}

.apnaCard .cardBody .tableActions .apnaSearchBox label,
.apnaCard .cardBody .tableActions .apnaLimitChanger label {
display: flex;
flex-direction: column;
padding-bottom: .75rem;
}

.apnaCard .cardBody .tableActions .apnaLimitChanger label select {
padding: 0 1rem;
}

.apnaCard .cardBody .tableActions .apnaSearchBox label input {
background: var(--secColor2);
border: 1px solid var(--secColor);
border-radius: .25rem;
padding: 0 .5rem;
font-size: .75rem;
-webkit-border-radius: .25rem;
-moz-border-radius: .25rem;
-ms-border-radius: .25rem;
-o-border-radius: .25rem;
}

.apnaCard .cardBody .tableActions .apnaSearchBox label input::placeholder {
color: var(--secDarkColor);
font-size: .75rem;
}

.apnaCard .cardBody .tableFooterActions {
display: flex;
justify-content: space-between;
padding: .25rem 0;
align-items: center;
}

.apnaCard .cardBody .tableFooterActions .apnaTableInfo .dataTables_info {
font-size: .75rem;
}


.apnaCard .cardBody .tableFooterActions .apnaTablePage {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
}

.apnaCard .cardBody .tableFooterActions .apnaTablePage .dataTables_paginate,
.apnaCard .cardBody .tableFooterActions .apnaTablePage .dataTables_paginate span {
display: flex;
gap: .5rem;
}


.apnaCard .cardBody .tableFooterActions .apnaTablePage .paginate_button {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 0 .75rem;
border-radius: .25rem;
cursor: pointer;
color: #333;
font-size: .65rem;
text-decoration: none;
-webkit-border-radius: .25rem;
-moz-border-radius: .25rem;
-ms-border-radius: .25rem;
-o-border-radius: .25rem;
}

.apnaCard .cardBody .tableFooterActions .apnaTablePage .paginate_button.current {
background-color: var(--mainColor);
color: var(--white) !important;
border-color: var(--mainColor);
font-weight: bold;
}

.apnaCard .cardBody .tableFooterActions .apnaTablePage .paginate_button:hover {
background-color: var(--secDarkColor);
color: var(--white);
}

.apnaCard .cardBody .tableFooterActions .apnaTablePage .paginate_button.current:hover {
background: var(--mainColor);
color: var(--white);
}

.apnaCard .cardBody .tableFooterActions .apnaTablePage .paginate_button.disabled {
opacity: 0.5;
pointer-events: none;
}




#apnaDashboard *:not(i) {
font-family: "Poppins", sans-serif;
}

#apnaDashboard {
display: flex;
width: 100%;
}

#apnaDashboard .sideBar {
width: 250px;
min-width: 250px;
background: var(--white);
border-radius: .75rem 0 0 .75rem;
-webkit-border-radius: .75rem 0 0 .75rem;
-moz-border-radius: .75rem 0 0 .75rem;
-ms-border-radius: .75rem 0 0 .75rem;
-o-border-radius: .75rem 0 0 .75rem;
}

#apnaDashboard .sideBar .sidebarHead {
display: flex;
gap: .75rem;
align-items: center;
padding: .75rem;
border-bottom: 1px solid var(--secColor);
}

#apnaDashboard .sideBar .sidebarHead .img {
width: 3rem;
min-width: 3rem;
height: 3rem;
overflow: hidden;
border-radius: 50%;
border: 1px solid var(--mainColor);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}

#apnaDashboard .sideBar .sidebarHead .img img {
width: 100%;
height: 100%;
object-fit: cover;
}

#apnaDashboard .sideBar .sidebarHead h5 {
font-size: 1.1rem;
line-height: 1.25rem;
}

#apnaDashboard .sideBar .sidebarHead p {
color: var(--secColor);
font-size: .9rem;
line-height: 1.25rem;
}

#apnaDashboard .sideBar .memuLists {
height: calc(100% - 5.5rem);
margin-top: .5rem;
overflow-y: auto;
}

#apnaDashboard .sideBar .memuLists ul {
display: flex;
flex-direction: column;
gap: .5rem
}

#apnaDashboard .sideBar .memuLists li a {
display: flex;
align-items: center;
gap: .75rem;
height: 2.25rem;
padding: 0 .75rem;
border-radius: 0;
transition: .3s all;
clip-path: polygon(0% 0%, 97% 0%, 100% 50%, 97% 100%, 0% 100%);
background: transparent;
border-left: 3px solid transparent;
color: var(--secDarkColor);
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
-webkit-transition: .3s all;
-moz-transition: .3s all;
-ms-transition: .3s all;
-o-transition: .3s all;
}

#apnaDashboard .sideBar .memuLists li a.active {
border-left-color: var(--secDarkColor);
border-radius: .5rem 0 0 .5rem;
background: var(--secColor2);
-webkit-border-radius: .5rem 0 0 .5rem;
-moz-border-radius: .5rem 0 0 .5rem;
-ms-border-radius: .5rem 0 0 .5rem;
-o-border-radius: .5rem 0 0 .5rem;
}

#apnaDashboard .sideBar .memuLists li a .submenu-arrow {
position: absolute;
right: 1rem;
transition: .3s all;
-webkit-transition: .3s all;
-moz-transition: .3s all;
-ms-transition: .3s all;
-o-transition: .3s all;
}

#apnaDashboard .sideBar .memuLists li a.active .submenu-arrow {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}

#apnaDashboard .sideBar .memuLists li .submenu {
display: none;
}

#apnaDashboard .sideBar .memuLists li .submenu.show {
display: block;
padding-top: .5rem;
padding-left: 1rem;
border-left: 1.5px solid var(--secColor);
border-radius: .5rem;
-webkit-border-radius: .5rem;
-moz-border-radius: .5rem;
-ms-border-radius: .5rem;
-o-border-radius: .5rem;
}

#apnaDashboard .sideBar .memuLists li .submenu a {
height: 1.75rem;
}

#apnaDashboard .sideBar .memuLists li.has-submenu {
position: relative;
}

#apnaDashboard .sideBar .memuLists li .submenu li {
position: relative;
}

#apnaDashboard .sideBar .memuLists li .submenu li::before {
content: "";
height: 1px;
width: 1rem;
background: var(--secColor);
position: absolute;
left: -1rem;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}

#apnaDashboard .sideBar .memuLists li a.logout {
border-left-color: var(--mainColor);
border-radius: .5rem 0 0 .5rem;
background: var(--mainColor2);
color: var(--mainColor);
}

#apnaDashboard .sideBar .memuLists li a span {
font-weight: 500;
font-size: .9rem;
}

#apnaDashboard .main {
width: calc(100% - 250px);
background: var(--mainDashBg);
}

#apnaDashboard .main .mainHead {
display: flex;
justify-content: space-between;
align-items: center;
height: 3.5rem;
padding: .65rem 1rem;
gap: 1rem;
border-bottom: 1px solid var(--white);
}

#apnaDashboard .main .mainHead .searchBox {
flex: 1;
background: var(--white);
height: 100%;
max-width: 400px;
position: relative;
overflow: hidden;
border-radius: .5rem;
box-shadow: 2px 2px 15px #efefef;
-webkit-border-radius: .5rem;
-moz-border-radius: .5rem;
-ms-border-radius: .5rem;
-o-border-radius: .5rem;
}

#apnaDashboard .main .mainHead .searchBox input {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: .5rem 1rem;
caret-color: var(--mainColor);
color: var(--mainColor);
font-size: .85rem;
}

#apnaDashboard .main .mainHead .searchBox input::placeholder {
color: var(--secDarkColor);
font-size: .85rem;
letter-spacing: 1px;
}

#apnaDashboard .main .mainHead .userActions {
display: flex;
gap: .5rem;
height: 100%;
}

#apnaDashboard .main .mainHead .userActions .icon {
width: calc(3rem - .8rem);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: var(--white);
border-radius: .25rem;
box-shadow: 2px 2px 15px #efefef;
overflow: hidden;
cursor: pointer;
-webkit-border-radius: .25rem;
-moz-border-radius: .25rem;
-ms-border-radius: .25rem;
-o-border-radius: .25rem;
}

#apnaDashboard .main .mainHead .userActions .icon.logoutBtn {
width: fit-content;
padding: 0 .75rem;
gap: .5rem;
background: var(--mainColor);
color: var(--white);
}

#apnaDashboard .main .mainHead .userActions .icon i {
font-size: 1rem;
color: #000;
}

#apnaDashboard .main .mainHead .userActions .icon.logoutBtn i {
color: var(--white);
}

#apnaDashboard .main .mainHead .userActions .icon span {
font-size: .95rem;
}

#apnaDashboard .main .mainHead .userActions .icon img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

#apnaDashboard .main .mainContent {
height: calc(100% - 3.5rem);
overflow-y: auto;
padding: .5rem 1rem;
width: 100%;
overflow-x: hidden;
}

#apnaDashboard .main .mainContent .welcometext h3 {
font-size: 1.1rem;
line-height: 1rem;
font-weight: 500;
}

#apnaDashboard .main .mainContent .welcometext h3 span {
color: var(--mainColor);
}

#apnaDashboard .main .mainContent .welcometext p {
font-size: .85rem;
}

#apnaDashboard .main .mainContent .counterBoxs {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: .5rem;
}

#apnaDashboard .main .mainContent .counterBoxs .countBox {
position: relative;
padding: .5rem 1rem;
height: 4.5rem;
width: calc((100% / 6) - (5rem / 6));
overflow: hidden;
background: transparent;
border: 1px solid var(--mainColor);
border-top-color: var(--secDarkColor);
border-left-color: var(--secDarkColor);
border-radius: .5rem;
-webkit-border-radius: .5rem;
-moz-border-radius: .5rem;
-ms-border-radius: .5rem;
-o-border-radius: .5rem;
}

#apnaDashboard .main .mainContent .counterBoxs .countBox .effect {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
left: 0;
}

#apnaDashboard .main .mainContent .counterBoxs .countBox .effect::before {
position: absolute;
top: -1rem;
left: -1rem;
content: '';
width: 3rem;
height: 3rem;
background: var(--secDarkColor);
opacity: 0.25;
}

#apnaDashboard .main .mainContent .counterBoxs .countBox .effect::after {
position: absolute;
bottom: -1rem;
right: -1rem;
content: '';
width: 3rem;
height: 3rem;
z-index: 1;
opacity: 0.25;
background: var(--mainColor);
}

#apnaDashboard .main .mainContent .counterBoxs .countBox .info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(25px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

#apnaDashboard .main .mainContent .counterBoxs .countBox .info .count {
font-size: 1.25rem;
}

#apnaDashboard .main .mainContent .counterBoxs .countBox .info .text {
font-size: .85rem;
}

#apnaDashboard .main .mainContent .mainData {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
width: 100%;
}


#apnaDashboard .main .mainContent.profile .mainData {
margin-top: 0;
}

#apnaDashboard .main .mainContent .mainData .leftSec {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: calc(100% - 300px);
width: calc(100% - 300px);
}

#apnaDashboard .main .mainContent .mainData .leftSec canvas {
max-height: 16.2rem;
}

#apnaDashboard .main .mainContent .mainData .rightSec {
width: calc(300px - 1rem);
display: flex;
flex-direction: column;
gap: 1rem;
}

#apnaDashboard .main .mainContent.products {
padding: 0;
position: relative;
overflow: hidden;
}

#apnaDashboard .main .mainContent.products::before {
position: absolute;
top: -3rem;
left: -3rem;
content: '';
width: 10rem;
height: 10rem;
background: var(--secDarkColor);
opacity: 0.2;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}

#apnaDashboard .main .mainContent.products::after {
position: absolute;
top: -3rem;
right: -3rem;
content: '';
width: 10rem;
height: 10rem;
z-index: 1;
opacity: 0.2;
background: var(--mainColor);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}

#apnaDashboard .main .mainContent .productsContainer {
width: 100%;
position: relative;
padding: 1rem;
z-index: 2;
padding-top: 0;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductLists {
gap: 1rem;
display: flex;
flex-wrap: wrap;
margin-top: .75rem;
}

#apnaDashboard .main .mainContent .productsContainer::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10rem;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
z-index: -1;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem {
width: calc(100% / 2 - .5rem);
overflow: hidden;
display: flex;
gap: .5rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.35);
border: 1.25px solid var(--mainLightColor);
box-shadow: 2px 2px 15px #efefef;
-webkit-border-radius: 1rem;
-moz-border-radius: 1rem;
-ms-border-radius: 1rem;
-o-border-radius: 1rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .image {
width: 9rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: var(--mainLightColor);
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .image img {
width: 100%;
height: 100%;
object-fit: cover;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail {
display: flex;
flex-direction: column;
gap: .1rem;
width: calc(100% - (8rem + 9rem));
padding: .35rem 0;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail h4 {
font-size: 1.1rem;
line-height: 1.2rem;
font-weight: 600;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail .ratingContainer {
display: flex;
gap: .5rem;
font-size: .5rem;
line-height: .85rem;
align-items: center;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail .ratingContainer .rating {
display: flex;
gap: .15rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail .ratingContainer .rating i {
color: rgb(193, 193, 43);
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail .ratingContainer span {
color: var(--secColor);
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail .productInfo {
font-size: .75rem;
line-height: 1.1rem;
margin-top: .35rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail .productInfo li {
color: var(--secColor);
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo {
border-left: 1.25px solid var(--secColor2);
padding: .25rem .5rem;
display: flex;
gap: .25rem;
flex-direction: column;
justify-content: space-between;
width: 8rem;
max-width: 8rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .price {
color: var(--secDarkColor);
position: relative;
display: inline-block;
font-size: 1.1rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .price::after {
content: '';
position: absolute;
bottom: -.05rem;
right: 0;
background: var(--mainColor);
border-radius: .25rem 0 .25rem 0;
width: 1rem;
height: 2px;
-webkit-border-radius: .25rem 0 .25rem 0;
-moz-border-radius: .25rem 0 .25rem 0;
-ms-border-radius: .25rem 0 .25rem 0;
-o-border-radius: .25rem 0 .25rem 0;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .price span {
color: var(--mainColor);
margin-right: .15rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns {
display: flex;
flex-direction: column;
gap: .25rem;
width: 100%;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns .multiBtn {
display: flex;
gap: .5rem;
width: 100%;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns a {
color: var(--secDarkColor);
border: 1px solid var(--secDarkColor);
display: block;
text-wrap: nowrap;
padding: 0 .25rem;
font-size: .75rem;
transition: .3s;
width: 100%;
text-align: center;
border-radius: .5rem;
-webkit-border-radius: .5rem;
-moz-border-radius: .5rem;
-ms-border-radius: .5rem;
-o-border-radius: .5rem;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns .multiBtn a {
padding: .25rem;
}


#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns a:nth-child(3) {
color: var(--secDarkColor);
background: var(--secColor2);
border: 1px solid var(--secDarkColor);
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns a:hover {
background: var(--mainColor);
color: var(--white);
border-color: var(--mainColor);
}

#apnaDashboard .main .mainContent .productsContainer .apnaPageTitle .pageAction {
display: flex;
align-items: center;
gap: .5rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaPageTitle .pageAction label {
font-size: .75rem;
}

#apnaDashboard .main .mainContent .account-title.apnaTitle {
margin-bottom: 0;
}

#apnaDashboard .main .mainContent .account-title.apnaTitle h3 {
font-size: .85rem !important;
color: var(--secDarkColor);
}

#apnaDashboard .main .mainContent .apnaSubTitle {
font-size: .85rem !important;
margin-top: .5rem;
color: var(--secColor2);
font-weight: 500;
border-left: 2px solid var(--secDarkColor);
padding-left: .25rem;
}

#apnaDashboard .main .mainContent .form-group {
margin-bottom: .5rem;
}

#apnaDashboard .main .mainContent .form-group input.form-control {
height: 2rem;
padding-left: .5rem;
}

#apnaDashboard .main .mainContent .form-group.join .form-control {
padding-left: 3rem;
}

#apnaDashboard .main .mainContent .form-group.currencyInputGroup .form-control {
padding-left: 3.25rem;
}

#apnaDashboard .main .mainContent .btn {
padding: .25rem .75rem;
}

.apnaAvatarBox .apnaDashAvatar {
width: 100%;
height: 5rem;
position: relative;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}

.apnaAvatarBox .apnaDashAvatar .apnaAvatar {
width: 4.5rem;
height: calc(100% - .5rem);
background: var(--white);
padding: .5rem;
position: absolute;
top: .25rem;
left: .25rem;
overflow: hidden;
}

.apnaAvatarBox .apnaDashAvatar .apnaAvatarInput {
position: absolute;
width: calc(100% - 5rem);
height: calc(100% - .5rem);
background: var(--white);
border-left: 2px solid var(--secDarkColor);
padding-left: .5rem;
top: .25rem;
left: 4.75rem;
display: flex;
align-items: center;
}

.apnaAvatarBox .apnaDashAvatar .apnaAvatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}


@media screen and (max-width: 1185px) {
#apnaDashboard .sideBar {
width: 220px;
min-width: 220px;
}

#apnaDashboard .main {
width: calc(100% - 220px);
}

#apnaDashboard .main .mainContent .counterBoxs .countBox .info .text {
font-size: .75rem;
text-align: center;
line-height: 1rem;
}
}

@media screen and (max-width: 1085px) {
#apnaDashboard .main .mainContent .productsContainer .apnaProductItem {
width: 100%;
}
}

@media screen and (max-width: 985px) {
#apnaDashboard .sideBar {
width: 250px;
min-width: 250px;
}

#apnaDashboard .main {
width: calc(100% - 250px);
}

#apnaDashboard .main .mainContent .counterBoxs .countBox {
height: 4.5rem;
width: calc((100% / 4) - (3rem / 4));
}

#apnaDashboard .main .mainContent .mainData .leftSec {
width: 100%;
max-width: 100%;
}

#apnaDashboard .main .mainContent .mainData .rightSec {
width: 100%;
max-width: 100%;
flex-direction: row;
}
}

@media screen and (max-width: 850px) {
#apnaDashboard .sideBar {
width: 220px;
min-width: 220px;
}

#apnaDashboard .main {
width: calc(100% - 220px);
}

#apnaDashboard .main .mainContent .counterBoxs .countBox {
height: 4.5rem;
width: calc((100% / 3) - (2rem / 3));
}
}

@media screen and (max-width: 750px) {
#apnaDashboard .main .mainContent .mainData .rightSec {
flex-direction: column-reverse;
}
}

@media screen and (max-width: 650px) {
#apnaDashboard .main .mainContent .counterBoxs {
gap: .5rem;
}

#apnaDashboard .main .mainContent .counterBoxs .countBox {
padding: .5rem .75rem;
height: 4.5rem;
width: calc((100% / 3) - (1rem / 3));
}

#apnaDashboard .main .mainContent .counterBoxs .countBox .info .text {
font-size: .85rem;
}

#apnaDashboard .main .mainHead .userActions .icon.logoutBtn span {
display: none;
}

#apnaDashboard .sideBar {
position: fixed;
top: 0;
left: -100%;
height: 100vh;
z-index: 1000;
width: 100%;
max-width: 320px;
min-width: auto;
transition: all 0.3s ease-in-out;
background: var(--white);
}

#apnaDashboard .sideBar.open {
left: 0;
z-index: 999 !important;
}

#apnaDashboard .sideBar .memuLists {
padding: 0 1rem;
}

#apnaDashboard .main {
width: 100%;
}
}

@media screen and (max-width: 550px) {
.apnaPageTitle {
flex-direction: column;
gap: .5rem;
align-items: baseline;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem {
flex-wrap: wrap;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail {
width: calc(100% - 10rem);
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo {
flex-direction: row;
gap: .5rem;
width: 100%;
justify-content: space-between;
min-width: 100%;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns {
flex-direction: row;
gap: .5rem;
width: 100%;
justify-content: end;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns a {
width: fit-content;
}
}

@media screen and (max-width: 475px) {
#apnaDashboard .main .mainContent .counterBoxs .countBox {
height: 4.5rem;
width: calc((100% / 2) - (.5rem / 2));
}
}

@media screen and (max-width: 445px) {
#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .image {
width: 7rem;
border-bottom-right-radius: .75rem;
}

#apnaDashboard .main .mainHead,
#apnaDashboard .main .mainContent {
padding-left: 0;
padding-right: 0;
}
}

@media screen and (max-width: 425px) {

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail .productInfo li:nth-child(3),
#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail .productInfo li:nth-child(4) {
display: none;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .midDetail h4 {
font-size: .9rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .price {
font-size: .75rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .price::after {
bottom: -.015rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns {
gap: .25rem;
}

#apnaDashboard .main .mainContent .productsContainer .apnaProductItem .actionInfo .actionBtns a {
font-size: .5rem;
height: 1.25rem;
line-height: 1.15rem;
}

.exportBtn .dt-buttons button {
padding: .2rem .45rem;
font-size: .55rem;
}

.apnaCard .cardBody .tableFooterActions {
flex-direction: column;
gap: .5rem;
}
}

.apnaSecurityTips p {
font-size: .85rem;
}

.apnaSecurityTips li {
margin-top: .35rem;
}

.apnaSidebarBrand {
display: flex;
align-items: center;
gap: .5rem;
border-bottom: 1px solid var(--secColor2);
padding: .5rem;
}

.apnaSidebarBrand.inHead{
border-bottom: none;
display: none;
max-width: 240px;
}

.apnaSidebarBrand img {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}

.apnaSidebarBrand .brandTitle {
color: black;
font-weight: 600;
text-transform: uppercase;
font-size: 1.25rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.apnaSidebarBrand .brandTitle span {
color: var(--mainColor);
}

@media screen and (max-width: 650px) {
#apnaDashboard .mainHead .searchBox{
display: none;
}
.apnaSidebarBrand.inHead{
display: flex;
padding-left: 0;
}
}
@media screen and (max-width: 375px) {
.apnaSidebarBrand.inHead{
max-width: 200px;
}
}

@media screen and (max-width: 335px) {
.apnaSidebarBrand.inHead{
max-width: 180px;
}
}