@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
        url('../fonts/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Light.woff2') format('woff2'),
        url('../fonts/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Thin.woff2') format('woff2'),
        url('../fonts/Poppins-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	min-height: 100%;
    
}

body {
	font-family: 'Poppins';
	color: #111111;
    font-weight: normal;
    font-style: normal;
	font-size: 17px;
	background-color: #f6f8fc;
}

a, a:link, a:visited {
    outline: none;
	text-decoration: none;	
	-moz-tap-highlight-color: transparent; 
	-webkit-tap-highlight-color: transparent; 
}

img {
	border: none;
	margin: 0px;
	max-width: 100%;
    display: block;
}


h1 {
	font-family: 'Poppins';
    font-weight: normal;
	margin: 0px;
	padding: 0px;	
}

h2 {
	font-family: 'Poppins';
	font-weight: 600;
	font-size: 30px;
	margin: 0px;
	padding: 0px;
}

h3, h4, h5, h6 {
	font-family: 'Poppins';
    font-weight: 500;
	font-size: 20px;
	margin: 0px;
	padding: 0px;	
}
form, p {
	margin: 0px;
	padding: 0;
}
input, select, textarea, button {
	margin: 0px;
	padding: 0;
    outline: none;
    border: none;
    box-shadow: none;
    background-color: transparent;
    font-family: 'Poppins';
    -webkit-appearance: none;
    font-family: 'Poppins';
}

textarea {
	resize: none;
}

input:focus, textarea:focus {
	outline: none;
}

input::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section, time {  
	display: block; 
	margin: 0px;
	padding: 0; 
} 

.customClear {
	clear: both;
	font-size: 0em;
	line-height: 0px;
	height: 0px;
	margin: 0px;
	padding: 0px;
}

/*IE below 9*/
#ieWrapper {
	background: #000;
	position: fixed;
	z-index: 100;
	top: 0;	left: 0;
	width: 100%;
	height: 100%;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.ieHolder {
	position: relative; 
	width: 555px;
	padding: 20px;
	margin: 200px auto 0 auto;
	background: #FFF;
	border: 7px solid #2b2927;
}

.btnIeUpdate {
	background: url(../images/btnIeUpdate.jpg) 0 0 no-repeat;
	width: 144px;
	height: 37px;
	position: absolute;
	right: 20px;
	bottom: 20px;
	color: #fff;
	line-height: 37px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
}

.ieLogo {
	float: left;
	width: 134px;
	height: 139px;
	background: url(../images/ieLogo.jpg) no-repeat 0 0;
}

.ieContent {
	float: right;
	margin: 0;
	padding: 0;
	width: 350px;
	color: #666;
	font-size: 15px;
	line-height: 18px;
}

.ieContent strong {
	margin: 0 0 15px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px dashed #cccccc;
	display: block;
	font-size: 18px;
	color: #333;
	font-weight: normal;
}
/*End IE below 9*/

*{box-sizing: border-box;}
/* .............LOGIN........ ........*/
.login-outer-wrapper{
    background-image: url(../images/background.png);
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.login-inner-wrapper{
    max-width: 540px;
    width: 100%;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
}

.login-container{
    border-radius: 40px;
    color: #fff;
    padding: 0 90px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}


.login-container .logo{
    margin: auto;
}
.login-container .logo img{
    display: block;
}
.login-container h2{
    font-size: 26px;
    padding: 34px 0 30px;
    font-weight: 500;
}
.login-form{
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    align-items: center;
}
.form-div{
    max-width: 360px;
    width: 100%;
    height: 58px;
    border-radius: 15px;
    margin-bottom: 12px ;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.form-div input{
    font-size: 15px;
    color: #313056;
    font-weight: normal;
    width: 100%;
    height: 100%;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    padding-left: 66px;
}
.form-div.phone::before{
    content: " ";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/icon-phone.png) no-repeat left center;
    width: 23px;
    height: 23px;
    margin-left: 30px;
    flex-shrink: 0;
    background-size: contain;
}
.form-div.pass::before{
    content: " ";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: url('../images/icon-lock.png') no-repeat left center;
    width: 20px;
    height: 25px;
    margin-left: 30px;
    flex-shrink: 0;
    background-size: contain;
}
.form-div.login-btn{
    margin-top: 25px;
    background-color: #524eb7; 
    display: flex;
    justify-content: center;
}
.form-div.login-btn input, .form-div.login-btn button{
    font-size: 20px;
    text-transform: capitalize;
    color: #fff;
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
}
.forget-pass{
    color: #313056;
    font-size: 17px;
    font-weight: normal;
    margin-top: 25px;
}
.register{
    padding-top: 20px;
    color: #313056;
    text-align: center;
    font-size: 17px;
    font-weight: 300;
    font-weight: 300;
}
.register a{
    color: #9d7dc7;
    font-weight: 500;
}
/* .............END LOGIN........ ........*/

/* ..........HOME......... */
.outer-wrapper{
    display: flex;
    position: relative;
}
.left-container{
    max-width: 346px;
    width: 100%;
    min-height: 100vh;
    background-color: #524eb7;
    padding: 18px 27px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    box-sizing: border-box;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.left-menu-section{
    display: flex;
    flex-direction: column;
}
.leftmenu-top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.leftmenu-top .logo {
    width: 205px;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.leftmenu-top .logo img {
    object-fit: cover;
    display: block;
}
.leftmenu-top .hamburger{
    width: 26px;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.leftmenu-top .hamburger.mobile-icon {
    display: none;
}

.profile{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 52px 0 42px;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.profile > img{
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    width: 93px;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.profile h3{
    font-size: 22px;
    padding-top: 15px;
    font-weight: normal;
    text-align: center;
}
.profile h3 span{
    font-weight: 600;
}
.profile p{
    font-weight: 300;
    font-size: 17px;
    text-align: center;
    word-break: break-word;
}
.left-menu{
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.left-menu ul{
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    font-size: 18px;
    font-weight: normal;
    padding: 0 0 30px;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.left-menu ul li {
    margin-bottom: 20px;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.left-menu ul li a{
    height: 64px;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 0 30px 0 30px;
    border-radius: 40px;
    color: #fff;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}


.left-menu ul li a.active, .left-menu ul li a:hover{
    background-color: #fff;
    box-shadow: 3px 2px 12px -1px rgb(63 148 66 / 96%);
}


.left-menu ul li a.active, .left-menu ul li a:hover{
    color: #313056;
}

.left-menu ul li a .menu-icon{
    margin-right: 25px;
    background: no-repeat center;
    background-size: contain;
    flex-shrink: 0;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.left-menu ul li a span{
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.left-menu ul li a .menu-icon img{
    max-width: 23px;
}

.left-menu ul li a:hover .menu-icon img,
.left-menu ul li a.active .menu-icon img{
    filter: invert(1);
}

.copyright{
    padding-bottom: 5.5%;
    font-size: 15px;
    font-weight: 500;
    color: #666666;
}

.right-container{
    flex-grow: 1;
    position: relative;
    width: calc(100% - 346px);
}
.copyright span{
    font-weight: normal;
}

.topmenu-wrapper{
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 26px 40px;
}

.search-area{
    max-width: 418px;
    width: 100%;
    padding: 18px 0 18px 15px;
    border-radius: 40px;
    background: #f0f2f6;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
    transition: all 2s cubic-bezier(0.25, 1, 0.5, 1);
}
.search-area input{
    width: 80%;
    padding-right: 6px;
    font-size: 17px;
    color: #494949;
    font-weight: 300;
}

.search-area .search{
    width: 25px;
    height: 26px;
    display: block;
    background-size: contain;
    margin-right: 24px;
    flex-shrink: 0;
}

.top-menu{
    flex-grow: 1;
}
.top-menu ul{
    list-style: none;
    display: flex;
    font-weight: normal;
    font-size: 18px;
    color: #111111;
    justify-content: flex-end;
    padding: 0;
}

.top-menu ul li{
    padding-right: 46px;
}

.top-menu ul li a{
    color: #111111;
    transition: all .3s ease-in-out;
}

.top-menu ul li a:hover, .top-menu ul li a.active{
    color: #9d7dc7;
}

.nav-buttons{
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 18px;
    padding-left: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cirle-grey{
    width:62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f2f6;
    border-radius: 50%;
}

.notification{
    position: relative;
    color: #111111;
}

.notification img{
    width: 25px;
}
 .settings img{
    width: 29px;
}

.notification span{
    position: absolute;
    border-radius: 50%;
    background-color: #524eb7;
    border:3px solid #fff ;
    width: 32px;
    height: 32px;
    top: -8px;
    right: -10px;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #fff;
}
.purple-btn{
    background-color: #524eb7;
    border: 2px solid #524eb7;
    color: #fff;
    border-radius: 8px;
    padding: 4px 6px;
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
    min-width: 138px;
}
.black-btn{
    background-color: #282a35;
    border: 2px solid #282a35;
    color: #fff;
    border-radius: 8px;
    padding: 4px 6px;
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
    min-width: 138px;
}
.logout{
    padding: 14px  31px;
    /* background-color: #9d7dc7;
    border: 2px solid #9d7dc7; */
    border-radius: 40px;
    font-size: 18px;
    font-weight: 600;
    /* color: #111111;
    transition: all 0.4s ease-in-out;
    box-sizing: border-box; */
}
.submit-btn {
    font-size: 18px;
    font-weight: 600;
    display: inline-flex;
    border-radius: 40px;
    padding: 0 30px 0 30px;
    min-height: 55px;
    min-width: 220px !important;
    margin-top: 30px;
    margin-bottom: 30px;
    box-shadow: 3px 2px 12px -1px rgb(63 148 66 / 96%);
    align-items: center;
    justify-content: center;
    background: #524eb7;
    color: #fff;
}
.purple-btn:hover{
    background-color: transparent;
    color: #68b86e;
}
.content-outer-wrapper{
    padding: 40px 60px 60px 46px;
}

.titlebar{
    display: flex;
    justify-content: space-between;
    margin-bottom: 48px;
    align-items: center;
}

.titlebar span{
    font-weight: normal;
    font-size: 17px;
}

.content-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.content-left{
    display: flex;
    flex-direction: column;
    /* max-width: 966px; */
    margin-right: 20px;
    flex-grow: 1;
    justify-content: space-between;
}

.content-right{
    max-width: 558px;
    width: 100%;
    padding: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.content-bottom {
    display: flex;
    flex-direction: row;
}
.content-top{
    display: flex;
    flex-direction: row;
    gap:28px;
}

.white-roundbox{
    background-color: #fff;
    border-radius: 16px;
}

.white-wrapper{
    background-color: #fff;
    border-radius: 16px;
    padding: 50px;
}

.content-left-bottom{
    display: flex;
    flex-direction: column;
    padding: 60px 48px;
    margin-top: 25px;
    flex-grow: 1;
}
.content-right{
    margin-top: 25px;
}
.content-report-bar{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.report-ellipsis {
    display: flex;
    flex-direction: column;
  }
 .report-menu, .check-report-iocns{
     list-style: none;
     display: flex;
     padding: 0;
     margin: 0 0 20px 0;
 }

 .report-menu li{
    padding-right: 22px;
    font-size: 22px;
    font-weight: 600;
    position: relative;
 }
 .report-menu li:last-child{
     padding-right: 0;
 }
 .report-menu li a{
     position: relative;
 }
 .report-menu li:hover a::after, .report-menu li.active a::after{
     content: "";
     position: absolute;
     bottom: -10px;
     left: 0;
     height: 2px;
     width: 50%;
     background-color: #524eb7;
 }
 .report-menu li a{
    color: #a9adb5;
 }

 .report-menu li:hover a, .report-menu li.active a{
    color: #111111;
 }

 .check-report-iocns li{
    padding-right: 40px;
    display: flex;
    column-gap: 2px;
    font-size: 17px;
    font-weight: normal;
    margin-top: 4px;
 }
 .radio-check{
     position: relative;
     display: flex;
     padding-left: 35px;
 }
 .radio-check input{
     position: absolute;
     top: 0;
 }

 .radio-check .checkmark{
    width: 27px;
    height: 26px;
    background: url("../images/icon-untick.png") no-repeat ;
    position: absolute;
    left: 0;
    top: 0;
    background-size: contain !important;
 }

.radio-check input:checked ~ .checkmark{
    background: url("../images/icon-tick.png") no-repeat;
 }

 .check-report-iocns li:last-child{
     padding-right: 0;
     flex-shrink: 0;
 }

 .report-daigram-bar{
     display: flex;
     justify-content: space-between;
     flex-direction: row;
 }


 .graph-block{
    flex: 1;
    display: flex;
    flex-direction: column;
 }
 .report-info-box, .report-daigram{
    margin-top: 60px;
 }
 .report-daigram{
     display: flex;
     flex-direction: column;
 }
 .report-info-box{
     padding: 30px 20px;
     border: 1px solid #e2e4e9;
     border-radius: 12px;
     max-width: 252px;
     width: 100%;
     margin-right: 50px;
     box-sizing: border-box;
     display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
 }


.report-info-box::after {
    content: " ";
    height: 7px;
    background-color: #f6f8fc;
    position: absolute;
    bottom: -8px;
    z-index: 0;
    width: 80%;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

 .indicators{
     list-style: none;
     margin: 0;
     padding: 80px 0 0 5px;
 }

 .indicators li span{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 16px;
 }

 .orange-indicator{
     background-color: #ff8847;
 }
 .blue-indicator{
     background-color: #38ced4;
 }

 .report-daigram-bar .earnings-content{
     padding-left: 0;
     padding-right: 0;
 }


 .recent-transaction{
     display: flex;
     align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
 }
 .recent-transaction h3{
     font-size: 21px !important;
     font-weight: 600;
 }

.transaction-list{
    display: flex;
    flex-direction: column;
}

.transaction-detail{
    display: flex;
    flex-direction: row;
    margin-bottom: 38px;
    align-items: flex-start;
}

.transaction-detail .name{
    flex-grow: 1;
}

.transaction-detail .name h5{
    font-size: 20px;
    font-weight: 500;
}

.transaction-detail .name p{
    font-weight:300
}

.transaction-detail .amount{
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.transaction-detail .amount h6{
    font-size: 18px;
    font-weight: 500;
}

.transaction-detail .amount.credit h6{
    color: #49be4f;
}

.transaction-detail .amount.debit h6{
    color: #f53c3d;
}

.transaction-detail .amount .time{
    font-size: 16px;
    font-weight: normal;
}

.transaction-detail figure{
    padding: 5px;
    margin: 0 16px 0 0;
    border: 1px solid #ddf7dd;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.transaction-detail figure img{
    border-radius: 100px;
}
.statement{
    align-self: center;
    padding: 0 75px;
}
.mobile-dropdown-icon{
    display: none;
    filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    width: 5px;
    padding: 8px;
}
.mobile-dropdown-icon img{
    border-radius: 0;
    object-fit: cover;
}
.topmenu-wrapper {
    padding: 22px 20px;
}
.section-title{
    padding: 32px 0 4px;
    display: none;
}
.outer.recent-transaction{
    margin: 24px 0 12px;
    font-size: 24px;
    display: none;
}
.balance-leftblock{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;
}
.transaction-data{
    display: flex;
    flex-grow: 1;
    align-items: center;
}
.earning-graph-top{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}
.earning-graph-top .graph-title{
    font-size: 20px;
    font-weight: 600;
}
.earning-graph-top .graph-date{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 15px;
    font-weight: normal;
    column-gap: 6px;
}
.earning-graph-top .graph-date input{
    padding: 18px 8px;
    border: 1px solid #e3e5ea;
    box-sizing: border-box;
    max-width: 146px;
    width: 100%;
    border-radius:8px;
    font-size: 15px;
    font-weight: normal;
}.earnings-content .note img{
    width: 15px;
    margin-top: -2px;
}

footer{
    display: none;
}

footer .copyright{
    font-size: 15px;
    color: #aeaeae;
    padding:15px 0 45px;
}
footer .copyright p{
    text-align: center;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    /* //display: none; */
    /* //-webkit-appearance: none; */
    width: 15px;
    padding: 0px;
    margin: 2px 0 0 5px;
    /* margin-top: 2px; */
}

.purple-btn-shadow{
    box-shadow: 1px 0px 14px 0px rgb(255 201 60 / 50%);
    -webkit-box-shadow: 1px 0px 14px 0px rgb(255 201 60 / 50%);
    -moz-box-shadow: 1px 0px 14px 0px rgb(255 201 60 / 50%);
}
/* ............POPUP Styles............ */

.popup-overlay{
    position: fixed;
    width: 100%;
    height:100%;
    background: rgba(14, 14, 14, 0.6);
    z-index: 1000;
    top:0;
    left:0;
    display: none;
}
.popup{
    display: none;
    max-width: 786px;
    max-height: 538px;
    height: 100%;
    width:100%;
    position: absolute;
    padding:34px;
    background:#fff;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius: 10px;
    /* background: url("../images/popup-bg-top.png") no-repeat top, url("../images/popup-bg-bottom.png") no-repeat bottom left, #fff; */
    /* background-size: 100% 40%, 30% 20%; */
    box-sizing: border-box;
    z-index: 1001;
    box-shadow: 3px 3px 14px rgb(0 0 0 / 25%);
    margin-top: 20px;
}
.popup::after {
    content: " ";
    height: 15px;
    background-color: #f6f8fc;
    position: absolute;
    bottom: -14px;
    z-index: 0;
    width: 85%;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0px 4px 5px inset rgb(116 110 110 / 25%);
}
.popup-container{
    display: flex;
    height: 100%;
    align-items: center;
}
.popup-close{
    position: fixed;
    right:34px;
    top:34px;
    cursor: pointer;
    width: 22px;
    z-index: 10001;
}
.popup-content{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

.popup-content .form-block{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 22px;
}
.popup-content .popup-form-div{
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
    align-items: center;
}
.popup-content .popup-form-div input.fullwidth{
    font-size: 18px;
    font-weight: normal;
    max-width: 384px;
    max-height: 58px;
    padding: 10px 20px;
    box-sizing: border-box;
    border: 1px solid #e7ecee;
    border-radius: 50px;
    background-color: #ffffff;
    width: 100%;
    color: #555555;
    text-align: center;
}
.popup-submit-btn, .form-btn{
    font-size: 20px;
    font-weight:500;
    max-width: 384px;
    max-height: 58px;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 1px 0px 14px 0px rgb(255 201 60 / 50%);
    -webkit-box-shadow: 1px 0px 14px 0px rgb(255 201 60 / 50%);
    -moz-box-shadow: 1px 0px 14px 0px rgb(255 201 60 / 50%);
}
.popup-content h3{
    font-size: 30px;
    color: #2b2a28;
    font-weight:600;
}
.popup-form-div .four-column{
    display: flex;
    flex-direction: row;
    column-gap: 30px;
}
.popup-form-div .four-column input{
    width: 62px;
    height: 60px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e7ecee;
    font-size: 40px;
    border-radius: 7px;
    text-align: center;
}
.popup-content .confirm-otp{
    text-align: center;
    padding: 0 0 30px;
    color: #111;
    font-size: 17px;
    font-weight: normal;
}

.movemoney-popup .otp-block{
    display: none;
}
.popup .confirm-otp a {
    color: #9d7dc7;
}
.movemoney-popup form{
    width: 100%;
}
.qrcode-popup .form-block{
    margin: 30px 0 0 !important;
}
.qrcode-popup .popup-content figure.qrcode{
    width: 227px;
    text-align: center;
}
/* ............Ends POPUP Styles...........  */
.form-outer-wrapper{
    max-width: 960px;
    width: 100%;
    padding: 80px 155px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16px;
    -webkit-box-shadow: 5px 5px 38px 0px rgb(29 33 57 / 4%);
    -moz-box-shadow:    5px 5px 38px 0px rgb(29 33 57 / 4%);
    box-shadow:         5px 5px 38px 0px rgb(29 33 57 / 4%);
}
.form-wrapper{
    display: flex;
    flex-direction: column;
    padding: 50px 0;
}

.form-element-group input{
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: normal;
    color: #909090;
    padding: 5px 10px;
    width: 100%;
}
.form-btn{
    margin-top: 55px;
}
p.grey-text{
    color: #909090;
}
.form-element-group label{
    font-size: 16px;
    color: #333333;
    font-weight: normal;
    /* padding:0 0 15px; */
}

.yellow-round-btn{
    background-color: #9d7dc7;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid #fff;
    box-sizing: border-box;
    padding: 5px;
    box-shadow: 1px 0px 14px 0px rgb(255 201 60 / 50%);
    -webkit-box-shadow: 1px 0px 14px 0px rgb(255 201 60 / 50%);
    -moz-box-shadow: 1px 0px 14px 0px rgb(255 201 60 / 50%);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.yellow-round-btn:hover{
    background-color: transparent;
    border: 1px solid #9d7dc7;
}

.form-edit-icons{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    column-gap: 30px;
}
.yellow-round-btn{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* left menu  */
.left-menu .dropdown-menu li a{
    height: auto;
    color: #c9c1c1;
    font-size: 13px;
    font-weight: 300;

}
.left-menu .dropdown-menu li a::before{
    content: "-";
    color: #9d7dc7;
    padding: 2px 20px 2px 4px;
    font-size: 20px;
    transition: all .3s ease-in-out;
}
.left-menu .dropdown-menu li a:hover::before{
    margin-right: 0 !important;
}

.left-menu .dropdown-menu li {
    margin-bottom: 5px;
}

.left-menu ul.dropdown-menu li a:hover{
   background-color: transparent;
   color: #9d7dc7;
}
.left-menu ul li.dropdown > a::after {
    content: "+";
    color: #9d7dc7;
    position: absolute;
    top: 10px;
    right: 30px;
    font-size: 20px;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.left-menu ul li.dropdown.open > a::after, .left-menu ul li.dropdown.open > a:hover::after{
    content: "-";
    color: #111;
}
.left-menu ul li.dropdown > a:hover::after{
    content: "+";
    color: #111;
}
.left-menu ul li.dropdown .dropdown-menu{
    height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.left-menu ul li.dropdown.open .dropdown-menu{
    height: auto;
    opacity: 1;
    margin-top: 10px;
}
.left-menu ul li.dropdown .dropdown-menu li.menu-title{
    display: none;
    align-self: flex-start;
    padding: 10px 14px;
    font-weight: 500;
    margin-bottom: 0;
}

.purple-box{
    background-color: #9a78c8;
    border-radius: 20px;
    box-shadow: 0 5px 38px rgb(29 33 57 / 4%);
    -ms-box-shadow: 0 5px 38px rgb(29 33 57 / 4%);
    -webkit-box-shadow: 0 5px 38px rgb(29 33 57 / 4%);
    background: #fff;
    background-position: top center;
    background-size: contain;
    padding: 30px;
    z-index: 1;
    max-width: 270px;
    min-height: 170px;    
    position: relative;
    width: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: left;
    overflow: hidden;
}
.purple-box:nth-child(odd)::after{
    content: '';
    position: absolute;
    top: -60px;
    left:35%;
    transform: translateX(-50%);
    /*background: url(../images/gift-wrap-img.png) no-repeat;*/
    background-size: contain;
    width: 210px;
    height: 120px;
}
.purple-box:nth-child(even)::after{
    content: '';
    position: absolute;
    top: -60px;
    left:35%;
    transform: translateX(-50%);
    /*background: url(../images/gift-wrap-img.png) no-repeat;*/
    background-size: contain;
    width: 210px;
    height: 120px;
}
.boxcontent{
    text-align: left;
    position: relative;
    z-index: 2;
}
.boxcontent h3{
    font-size: 17px;
    font-weight: 500;
    color: #282a35;
    padding-bottom: 10px;
}
.count{
    font-size: 30px;
    font-weight:500;
    line-height: 30px;
    color: #68b86e;
}
.report-daigram{
    display: none;
}
.report-daigram.active{
    display: block;
}
.white-btn {
    border-radius: 8px;
    background-color: #f9fcf9;
    border: 1px solid #524eb7;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #524eb7;
    font-weight: 500;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.5s ease-in-out;
}
.view{
    flex-shrink: 0;
}
.order-view{
    width: 44px;
    margin-left: 20px;
}
.mobile-nav, .mobile-logout{ display: none;}

.search-list-wrapper{
	display: flex;
	flex-direction: row;
	font-size: 15px;
	color: #111;
	font-weight: normal;
	padding: 0 0 20px;
	align-items: center;
	column-gap: 15px;
}
.search-list-wrapper.align-right{
    justify-content: flex-end;
}

.search-list-wrapper input{
    max-width: 410px;
    width: 100%;
    border-radius: 8px !important;
}

.form-control {
    font-size: 15px;
    color: #6c758d;
    background-color: #f9fcf9;
    border: 1px solid #524eb7;
    border-radius: 8px;
    border-radius: 22px;
    height: 47px;
	background-clip: padding-box;
	padding: 2px 18px ;
}
select.form-control {
    background: url('../images/select-arrow.png') no-repeat,#fff;
    background-size: 10px 6px;
    background-position: right 10px center;
    display: block;
    padding-right: 25px;
    max-width: 410px;
    width: 100%;
}
select.form-field{
    background: url('../images/select-arrow.png') no-repeat,#fff;
    background-size: 10px 6px;
    background-position: right 10px center;
    display: block;
    padding-right: 25px;
}
.search-list-wrapper .show-item{
	display: flex;
	align-items: center;
	column-gap: 10px;
}
.search-item-group{
	display: flex;
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	max-width: 410px;
	height: 47px;
	width: 100%;
}
.search-item-group input{
	max-width: 342px;
	width: 100%;
	padding: 5px 15px;
    background: #fff;
}
.search-append{
	display: flex;
	max-width: 68px;
	width: 100%;
}
.search-append button{
	padding: 10px 15px;
}

button:disabled, input:disabled{
	cursor: default;
    background: #ccc4c4;
    border: 1px solid #ccc4c4;
}
button:disabled:hover, input:disabled:hover{
	color: #fff !important;
	background-color: #ccc4c4;
}
button:focus { outline: 1px dotted; outline: 0; }

.search-list-wrapper .red-button{
	max-width: 180px;
}


/* pagination */
nav .pagination {
    display: flex;
    justify-content: flex-end;
	align-items: center;
	list-style: none;
    margin: 0;
    padding: 0;
	font-size: 15px;
	font-weight: 500;
    flex-wrap: wrap;
}

.pagination li {
    margin: 0 1px;
}

.pagination li a{
	color: #111;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: transparent;
	transition: all .3s ease-in-out;
	box-shadow: none;
	display: flex;
    align-items: center;
    justify-content: center;
}

.pagination li a:hover, .pagination li.current a{
	color: #fff;
    background: linear-gradient(90deg, #524eb7 0%, #22912a 100%);
	box-shadow: 16px 0px 32px 0px rgb(0 0 0 /3%);
	-webkit-box-shadow: 16px 0px 32px 0px rgb(0 0 0 /3%);
	-moz-box-shadow: 16px 0px 32px 0px rgb(0 0 0 /3%);
}

.pagination li.disabled a {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
}

.table-responsive{
    overflow-x: auto;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.float-right{ float: right;}

/* forms  */
.form-wrapper{
	background-color: #fff;
	padding: 3.75rem;
	border-radius: 15px;
}

.forms-group {
    margin-bottom: 1.375rem;
}

.forms-control {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #111;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #b0b3b8;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.forms-control:focus {
    background-color: #fff;
    border-color: #1d2139;
    outline: 0;
    box-shadow: 0 0 0 0.05rem rgba(240, 75, 66, 0.158);
}
.table .forms-control{
	max-width: 208px;
	height: 40px;
	border-radius: 8px;
	color: #3f3e3e;
	font-size: 0.938rem;
}
.text-right{
	text-align: right;
}

.table td { vertical-align: text-top;}

.table.img-table td {
     vertical-align: middle;
     padding-top: 5px !important;
}

.table td:first-child, .table td:last-child {
    width: 10px;
    border-bottom: none;
}

.form-wrapper .table td{
	vertical-align: middle;
	height: 80px;
}
.form-wrapper table{ box-shadow: none; }

.form-wrapper table tr:last-child td{ padding-bottom: 1rem;}


.img-preview-wrapper{
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 ;
	gap: 20px;
}
.img-preview{
	max-width: 225px;
	width: auto;
	height: auto;
	border-radius: 0.25rem;
	position: relative;
}
span.close{
	width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    position: absolute;
    font-size: 12px;
    font-weight: 600;
    right: -11px;
    top: -11px;
    background-color: #1d2139;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}
.img-preview img{
	object-fit: cover;
	border-radius: 0.25rem;
}
.file-upload .file{
	position: absolute;
    opacity: 0;
    cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	height: 46px;
}
.file-upload > label{
	display: block;
}
.file-upload .file+label {
    font-size: 16px;
    color: #111;
	width: 200px;
    height: 46px;
    text-transform: capitalize;
    background-color: #fff;
    text-align: center;
    vertical-align: text-top;
    padding: 11px 10px 0 48px;
    transition: 0.2s all;
    border-radius: 30px;
    border: solid 1px #f1efeb;
    background-image: url('../images/icon-camera.png');
    background-repeat: no-repeat;
    background-position: 4% center;
	cursor: pointer;
}
.form-actions{
	display: flex;
	gap: 8px;
}
.titlebar .form-actions {
	align-self: flex-start;
}
.titlebar .form-actions a {
	flex-shrink: 0;
}
.titlebar .form-actions a img{
	width: 30px;
}
.titlebar h1{
	line-height: 26px;
    text-transform: uppercase;
}

button{
	border: none;
	background:  #524eb7 ;
	color: #fff;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	cursor: pointer;
}

.text-center{ text-align: center;}
.valign-center { vertical-align: middle;}
table{
	border-collapse: collapse;
	font-size: 14px;
	color: #3f3e3e;
	text-align: left;
	font-weight: normal;
	background-color: #fff;
	background: linear-gradient(90deg, #fff 0%, #fff 100%);
	box-shadow: 0 5px 38px #1d2139;
	-webkit-box-shadow: 5px 0px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 5px 0px 5px 0px rgba(0,0,0,0.1);
	border-spacing: 0;
}
.table{
	width: 100%;
	max-width: 100%;
    background-color: transparent;
}
.table thead{
    background: #524eb7;
	color: #fff;
}

.table th, .table td{
	padding: 4px 12px;
	font-weight: normal;
	height: 68px;
    border-top: none;
}

.table thead th {
    border-bottom: none;
    vertical-align: middle;
}


.table th:last-child{
	margin-right: 1.5rem;
}

.table td{
	border-bottom: 1px solid #f2f2f2;
    white-space: nowrap;
}

.table tr:last-child td{
	border-bottom: none;
}

.table .action{
	/* display: flex; */
	column-gap: 10px;
	align-items: center;
	justify-content: center;
}

.table .action a{
	display: inline-flex;
	flex-shrink: 0;
    max-width: 24px;
    margin-right: 5px;
}

.table .action a:last-child{
    margin-right: 0;
}

.forms-input input, .forms-input button{
	appearance: none;
	-webkit-appearance:none;
	background: transparent;
	border: none;
	font-size: 19px;
	font-weight: normal;
	width: 100%;
	height: 100%;
	padding: 5px 15px;
	text-align: left;
}

.form-wrapper .table-responsive{
	margin-top: 1.625rem;
}

td.image figure{
    border-radius: 50%;
    width: 60px;
    height: 60px;
    overflow: hidden;
}
td.image figure img{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.forms-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
}
.form-element-group {
    margin-bottom: 3rem;
    position: relative;
}
.half-col {
    flex-basis: calc(50% - 20px);
    max-width: calc(50% - 20px);
}
.one-col {
    flex-basis: calc(20% - 30px);
    max-width: calc(20% - 30px);
}
.two-col {
    flex-basis: calc(40% - 30px);
    max-width: calc(40% - 30px);
}
.three-col {
    flex-basis: calc(60% - 30px);
    max-width: calc(60% - 30px);
}
.four-col {
    flex-basis: calc(80% - 30px);
    max-width: calc(80% - 30px);
}

.onethird-col {
    flex-basis: calc(33.33% - 30px);
    max-width: calc(33.33% - 30px);
}
.oneforth-col {
    flex-basis: calc(25% - 30px);
    max-width: calc(25% - 30px);
}
.wrap{ flex-wrap: wrap;}

label {
    display: block;
    /* padding-bottom: 8px; */
}
.form-field {
    font-size: 15px;
    color: #777c87;
    background-color: #fff;
    border: 1px solid #e4e7eb;
    border-radius: 4px;
    height: 48px;
    background-clip: padding-box;
    padding: 5px 18px;
    max-width: 380px;
    width: 100%;
    position: relative;
}

.md-table{
    max-width: 1300px;
    width: 100%;
}

.round-img{
    width: 106px;
    height: 106px;
    overflow: hidden;
    border-radius: 50%;
    border: 6px solid #d9eddb;
}
.round-img img{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}
input.datepicker {
    background: url(../images/icon-calendar.png) no-repeat right center, #fff;
    background-size: 24px;
    background-position: right 15px center;
    cursor: pointer;
}

.ui-widget-header .ui-icon {
    background-image: url(../images/ui-icons_444444_256x240.png);
}

.ui-icon, .ui-widget-content .ui-icon {
    background-image: url(../images/ui-icons_444444_256x240.png);
}
.form-control:focus{
    box-shadow: none;
    border: none;
}
select.status{
    width: 130px;
}

.status-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px;
    border-bottom: 1px solid #5cb85c3d;
    margin-bottom: 10px;
}
.status-btn{
    height: 48px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 17px;
}
.violet-box {
    color: #68b86e;
    border-radius: 4px;
    border: 1px solid #524eb7;
    background-color: rgb(238 248 238);
}
.green-box{
    color: #5cb85c;
    border-radius: 4px;
    border: 1px solid #5cb85c;
    background-color: rgb(92 184 92 / 10%);
    display: inline-flex;
}
td input.form-field{
    width: 90px;
    padding: 5px 10px;
}

.productgallery{
    max-width: 475px;
    width: 100%;
    margin-bottom: 40px;
}
.productgallery > figure{
    display: flex;
    width: 100%;
    max-height: 360px;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.productgallery > figure img{
    max-height: 350px;
}
.productgallery > figure img, .productgallery .thumbnails-wrapper ul li img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f1f5f8;
}
.productgallery .thumbnails-wrapper{
    display: flex;
    max-width: 475px;
    overflow-x: hidden;
}
.productgallery .thumbnails-wrapper ul{
    display: flex;
    margin: 12px 0 0 ;
    padding: 0;
}
.productgallery .thumbnails-wrapper ul li{
    border-radius: 5px;
    overflow: hidden;
    margin-right: 12px;
    width: 110px;
    height: 108px;
    cursor: pointer;
}
.productgallery .thumbnails-wrapper ul li:last-child{
    margin-right: 0;
}
.product-details {
    max-width: 600px;
    width: 100%;
}
.size-box{
    margin-top: 15px;
}
.size-box ul li.active {
    background-color: #dddddd;
    background-color: #ebf6ec;
    border: 1px solid #524eb7;
}
.size-box ul li:nth-child(n+2) {
    margin-left: 9px;
}
.size-box h5{
    font-size: 19px;
    margin-bottom: 12px;
}
.size-box ul{
    padding: 0;
    list-style: none;
    display: flex;
}
.size-box ul li {
    width: calc(40px + (45 - 40) * ((100vw - 320px) / (1920 - 320)));
    height: calc(30px + (35 - 30) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #dddddd;
    text-align: center;
}
.size-box ul li a {
    color: #444444;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
}
.product-details h3{
    font-weight: 600;
    line-height: 1.2em;
    color: #333333;
    margin-bottom: 15px;
    text-transform: capitalize;
    font-size: 28px;
}
.product-details h4{
color: #68b86e;
font-size: 21px;
margin-top: 8px;
margin-bottom: 10px;
}
.product-details span{
    color: #444;
    background: #524eb7;
    padding: 5px 15px 5px 15px;
    border-radius: 4px;
    font-size: 17px;
    border: 1px solid #524eb7;
    margin-left: 2px;
}
.product-details p{
color: #333;
font-size: 16px;
margin-top: 20px;
border-bottom: 1px solid #f1f1f1;
padding-bottom: 15px;
}
.gap-50{
    display: flex;
    grid-gap: 50px;
}
.color-selector ul {
    line-height: 1;
    padding: 0;
    margin-top: 12px;
}
.color-selector.inline ul li {
    display: inline-block;
}
.color-selector ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    color: #777777;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 2px;    
}
.color-selector.inline ul li > div {
    margin-right: unset;
}
.color-selector ul li .color-1 {
    background-color: #ffffff;
}
.color-selector ul li .color-3 {
    background-color: red;
}
.color-selector ul li .color-4 {
    background-color: purple;
}
.color-selector ul li .color-5 {
    background-color: teal;
}
.color-selector ul li .color-6 {
    background-color: pink;
}
.color-selector ul li .color-7 {
    background-color: coral;
}
.color-selector ul li > div {
    margin-right: 5px;
}
.color-selector ul li > div {
    height: 30px;
    width: 30px;
    position: relative;
    border-radius: 50px;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid #dddddd;
}
.color-selector ul li .color-2 {
    background-color: brown;
}
.color-selector ul li:nth-child(n+2) > div.active:after {
    -webkit-filter: invert(1);
    filter: invert(1);
}
.color-selector ul li > div.active:after {
    content: "";
    background-image: url(../images/tick.svg);
    top: 8px;
    right: 4px;
    height: 15px;
    width: 15px;
    background-size: 70%;
    background-repeat: no-repeat;
    position: absolute;
}
.box-card{
    position: relative;
    border-bottom: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    transition: .5s;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 1px 20px 0 rgb(69 90 100 / 8%);
}
.cover_image {
    height: 350px;
    width: 100%;
    border-radius: 5px;
    position: relative;
    object-fit: cover;
}
.hover-primary {
    color: #68b86e;
    margin-bottom: 8px;
    display: block;
    margin-top: 10px;
}
.upload-file{
    position: absolute;
    top: 87px;
    left: 85px;
}
.upload-file .file-upload {
    height: 50px;
    width: 50px;
    border-radius: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #FFFFFF;
    overflow: hidden;
    background-image: linear-gradient(to bottom, #68b86e 50%, #effef0 50%);
    background-size: 100% 200%;
    transition: all 1s;
    color: #FFFFFF;
    box-shadow: 0px 0px 5px 0px #68b86e;
    font-size: 100px;
      }
      .upload-file .file-upload input[type=file] {
        height: 200px;
        width: 200px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
      }
      .upload-file .file-upload:hover {
        background-position: 0 -100%;
        color: #2590EB;
      }
      .mt-30{
        margin-top: -30px;
      }
      .upload-file2{
        position: absolute;
        top: 30px;
        right: 30px;
        }
    .upload-file2 .file-upload {
        height: 50px;
        width: 50px;
        border-radius: 100px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 4px solid #FFFFFF;
        overflow: hidden;
        background-image: linear-gradient(to bottom, #68b86e 50%, #effef0 50%);
        background-size: 100% 200%;
        transition: all 1s;
        color: #FFFFFF;
        box-shadow: 0px 0px 5px 0px #01171a69;
        font-size: 100px;
          }
          .upload-file2 .file-upload input[type=file] {
            height: 200px;
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
          }
          .upload-file2 .file-upload:hover {
            background-position: 0 -100%;
            color: #2590EB;
          }
    
.avatar{
    position: relative;
    margin-top: -50px;
    margin-left: 50px;
}
.avatar img{
    border-radius: 100%;
    border: 5px solid #fff;
    margin: 0;
}
.dropdown-btn {
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  justify-content: flex-start;
  cursor: pointer;
  outline: none!important;
  position: relative;
  padding: 0 15px;
}
.dropdown-icon {
    background: url(../images/down.png)  top right no-repeat;
    position: absolute;
    top: 37%;
    right: 20px;
    background-size: 18px;
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);

}
.left-menu ul li .dropdown-btn.active, .left-menu ul li .dropdown-btn:hover {
    background: #fff;
    color: #313056;

}

.dropdown-container a.active, .dropdown-container a:hover {
    margin-bottom:44px!important;
    margin-left: 30px;
    text-align: center;
}

.dropdown-container a {
margin-left:30px;
}
.left-menu ul li .dropdown-btn.active .dropdown-icon{
    filter: brightness(1) invert(0);
}

.dropdown-container {
  display: none;
  padding-left: 8px;
  padding-top: 20px;
}
.contact_us {
  max-width: 100% !important;
}
.shipping-status{
   background: url(../images/select-arrow.png) no-repeat,#fff;
    background-size: 10px 6px;
    background-position: right 3px center;
    display: block;
    padding-right: 25px;

}

.shipping-btn {
border-radius: 24px;
}

.color-edit{
    display: flex;
    align-items: center;
    padding-top: 10px;
}

.color-edit a {
    display: inline!important;
}
/* ..................media query ................ */
@media screen and (max-width: 1976px) {
    .content-outer-wrapper {
        padding: 40px 46px 60px 46px;
    }

    .content-right {
        max-width: 545px;
        padding: 32px 25px;
    }
    .report-menu li {
        font-size: 21px;
    }
    .earnings-icon{
        width: 80px;
        height: 80px;
    }
    .recent-transaction h3 {
        font-size: 1.215vw;
    }
    .recent-transaction {
        margin-bottom: 2.024vw;
    }
    .transaction-detail {
        margin-bottom: 1.923vw;
    }
    .earning-graph-top .graph-date input {
        padding: 0.911vw 0.405vw;
        max-width: 7.895vw;
    }
    .white-btn {
        padding: 10px 16px;
        font-size: 15px;
    }
    .order-view{
        width: 34px;
    }
}

 @media screen and (max-width: 1762px) {
    .top-menu ul, .logout {
        font-size: 17px;
    }
    .left-container {
        max-width: 19.637vw;
        padding: 18px 26px;
    }
    .right-container {
        width: calc(100% - 19.637vw );
    }
    .profile {
        padding: 3.994vw 0 2.384vw;
    }
    .profile h3 {
        font-size: 21px;
    }
    .profile p {
        font-size: 16px;
    }
    .left-menu ul {
        font-size: 17px;
    }
    .left-menu ul li a{
        height: 56px;
        padding: 0 20px;
    }
    .left-menu ul li a.menu-icon {
        margin-right: 15px;
    }
    .left-menu ul li a.menu-icon img {
        width: 26px;
        height: 28px;
    }
    .topmenu-wrapper {
        padding: 26px 1.270vw;
    }
    .search-area {
        max-width: 18.723vw;
        padding: 1.022vw 0 1.022vw 0.851vw;
    }
    .top-menu ul li {
        padding-right: 2.011vw;
    }
    .nav-buttons {
        padding-left: 0.795vw;
    }
    .logout {
        padding: 0.8vw   1.986vw;
    }

    .cirle-grey {
        width: 3.519vw;
        height: 3.519vw;
    }
    .notification span {
        width: 1.816vw;
        height: 1.816vw;
        top: -0.454vw;
        right: -0.568vw;
        font-size: 0.851vw;
        border: 0.17vw solid #fff;
    }
    .notification img{
        width: 1.419vw;
    }
    .settings img{
        width: 1.646vw;
    }
    .content-outer-wrapper {
        padding: 40px 2vw;
    }

    .transaction-detail figure {
        padding: 4px;
        margin: 0 0.568vw 0 0;
        width: 50px;
        height: 50px;
    }

    .statement {
        padding: 0 55px;
    }
    .report-menu li {
        font-size: 1.192vw;
        padding-right: 1.249vw;
    }
    .report-ellipsis img{
        width: 5px;
    }
    .content-left-bottom {
        padding: 25px 20px;
    }
    .radio-check .checkmark {
        width: 1.542vw;
        height: 1.476vw;
    }
    .check-report-iocns li {
        padding-right: 2.27vw;
        font-size: 0.965vw;
    }
    .radio-check {
        padding-left: 1.986vw;
        align-items: center;
    }

    .transaction-detail .name h5 {
        font-size: 1.135vw;
    }
    .transaction-detail .name p {
        font-size: 0.965vw;
    }
    .transaction-detail .amount h6 {
        font-size: 1.022vw;
    }
    .transaction-detail .amount .time {
        font-size: 0.908vw;
    }
    .content-right {
        max-width: 30.931vw;
        padding: 1.816vw 1.419vw;
    }
    .earnings-bar .red-btn {
        padding: 0px 18px;
    }
    .indicators {
        font-size: 0.965vw;
    }
    .report-info-box, .report-daigram {
        margin-top: 3.405vw;
    }
    .earning-graph-top .graph-title {
        font-size: 1.135vw;
    }
    .earning-graph-top .graph-date input {

        max-width: 124px;
        font-size: 0.851vw;
    }
    .white-btn {
        padding: 6px 10px;
        font-size: 14px;
    }

    /* ............popup........... */
    .popup {
        max-width: 44.608vw;
        max-height: 30.533vw;
        padding: 1.93vw;
    }
    .popup-content .popup-form-div input.fullwidth {
        font-size: 1.022vw;
        max-width: 21.793vw;
        max-height: 3.292vw;
        padding: 0.568vw 1.135vw;
        box-sizing: border-box;
        border: 1px solid #e7ecee;
        border-radius: 2.838vw;
    }
    .popup-submit-btn{
        font-size: 1.135vw;
        max-width: 21.793vw;
        max-height: 3.292vw;
        padding: 0.568vw 1.135vw;
        border-radius: 2.838vw;
    }
    .popup-content .popup-form-div {
        margin-bottom: 2.27vw;
    }
    .popup-content img{
        width: 11.407vw;
    }
    .popup-close {
        right: 1.93vw;
        top: 1.93vw;
        width: 1.249vw;
    }

    .popup-content h3 {
        font-size: 1.703vw;
    }
    .popup-form-div .four-column {
        column-gap: 1.703vw;
    }
    .popup-form-div .four-column input {
        width: 3.519vw;
        height: 3.405vw;
        font-size: 1.70vw;
        padding: 0.568vw;
    }
    .popup-content .confirm-otp {
        padding: 0 0 1.703vw;
    }
    .popup-content .form-block {
        margin-top: 1.249vw;
    }
    .leftmenu-top .logo {
        width: 180px;
    }
    .content-top {
        gap: 15px;
    }
    .count {
        font-size: 32px;
        line-height: 29px;
    }
    .purple-box {
        padding: 15px;
        padding: 18px;
        min-height: 130px;
        border-radius: 15px;    
    }
    .purple-box:nth-child(even)::after {
        content: '';
        position: absolute;
        top: 90px;
    }
    h2 {
        font-size: 26px;
    }
    .titlebar span {
        font-size: 15px;
    }
    .search-list-wrapper {
		padding: 0 0 18px;
	}

	/* form  */
	.form-wrapper {
		padding: 2.333vw;
	}
}

@media screen and (max-width: 1700px) {
    .login-container .logo {
        width: 14.353vw;
    }
    .login-form {
        padding-top: 3.059vw;
    }
    .two-col {
        flex-basis: calc(40% - 1.765vw);
        max-width: calc(40% - 1.765vw);
    }
    .forms-row {
        column-gap: 1.765vw;
    }
}

@media screen and (max-width: 1440px){
    .search-item-group input {
        max-width: 300px;
        padding: 5px 12px;
    }
    .search-item-group input {
        max-width: 300px;
        padding: 5px 12px;
    }
    .search-item-group {
        max-width: 355px;
    }
    .form-control, .search-item-group, .add-item {
        height: 45px;
    }
    .white-wrapper{
        padding: 30px;
    }
    input.datepicker {
        background-size: 20px;
    }
}

@media screen and (max-width: 1400px) {

    .profile h3 {
        padding-top: 1.071vw;
        font-size: 18px;
    }
    .profile p {
        font-size: 15px;
    }
    .left-container {
        padding: 18px 18px;
    }
    .purple-box:nth-child(odd)::after {
        content: '';
        position: absolute;
        left: 30%;
    }
    .left-menu ul li a{
        padding: 0 20px;
        height: 45px;
    }
    .left-menu ul li a .menu-icon {
        margin-right: 12px;
    }
    .left-menu ul li a .menu-icon img {
        width: 20px;
    }
    .search-area {
        max-width: 17.723vw;
        padding: 0.7vw 0 0.7vw 0.851vw;
    }
    .top-menu ul li {
        padding-right: 1.61vw;
    }
    .notification img, .settings img{
        width: 21px;
    }

    .top-menu ul, .logout {
        font-size: 15px;
    }

    .copyright {
        font-size: 1.071vw;
    }

    .content-right {
        max-width: 28.269vw;
    }

    .check-report-iocns li {
        padding-right: 1.27vw;
    }
    .left-menu ul {
        font-size: 15px;
    }
    .report-info-box {
        max-width: 210px;
    }
    .statement {
        padding: 0 45px;
    }
    .white-btn {
        padding: 2px 8px;
    }
    .report-ellipsis img {
        width: 3px;
    }
    .profile img {
        width: 85px;
    }
    .content-left-bottom,.content-right {
        margin-top: 16px;
    }
    .earning-graph-top .graph-date input {
        max-width: 135px;
        font-size: 12px;
    }
    .white-btn {
        padding: 2px 8px;
    }
     /* .......popup.... */
     .popup-content .confirm-otp {
        font-size: 1.214vw;
     }
     .search-area input {
        font-size: 1.214vw;
        padding-right: 0.429vw;
     }
     .search-area .search {
        width: 21px;
        height: 22px;
        margin-right: 1.714vw;
     }
     .leftmenu-top .logo {
        width: 150px;
     }
     .boxcontent h3 {
        font-size: 15px;
        padding-bottom: 6px;
    }
    .count {
        font-size: 26px;
        line-height: 24px;
    }
    .purple-box::after {
        top: 108px;
        width: 42px;
        height: 20px;
    }
    .cirle-grey {
        width: 45px;
        height: 45px;
    }
    .order-view {
        width: 30px;
    }
    .form-div {
        height: 54px;
    }
    .form-div.login-btn {
        margin-top: 20px;
    }
    .forget-pass {
        margin-top: 18px;
    }.register {
        padding-top: 17px;
    }
    .search-list-wrapper {
		font-size: 14px;
        padding: 0 0 18px;
	}
    .search-list-wrapper input{
		font-size: 14px;
	}


}

@media screen and (max-width: 1182px) and (min-width: 1131px) {
    .left-menu ul li a {
        padding: 0 14px;
    }
}

@media screen and (max-width: 1130px) {
    h2 {
        font-size: 28px;
    }
    .titlebar span {
        font-size: 15px;
    }
    .content-outer-wrapper {
        padding:40px 22.6px;
    }
    .statement {
        padding: 0 30px;
    }
    .profile img {
        width: 80px;
    }
    .left-container {
        padding: 18px 10px;
    }
    .left-menu ul {
        font-size: 14px;
    }

    .report-info-box {
        max-width: 180px;
    }
    .transaction-detail figure {
        width: 45px;
        height: 45px;
    }
    .left-menu ul li a {
        padding: 0 16px;
    }
    .left-menu ul li {
        margin-bottom: 1.77vw;
    }

    .white-btn {
        font-size: 12px;
        padding: 2px 6px;
    }

    /* bank details  */
    .form-outer-wrapper {
        padding: 7.08vw 13.717vw;
    }
    .boxcontent h3 {
        font-size: 14px;
        padding-bottom: 6px;
    }
    .count {
        font-size: 22px;
        line-height: 22px;
    }
    .purple-box {
        padding: 10px;
    }
    .login-container .logo {
        width: 160px;
    }
    .login-form {
        padding-top: 35px;
    }
}


@media screen and (max-width: 1024px) {
    .leftmenu-top .logo {
        margin-left: 0;
        width: 115px;
    }
    .leftmenu-top .hamburger {
        padding-right: 0;
        width: 23px;
    }
    .profile h3 {
        font-size: 17px;
    }
    .profile p {
        font-size: 13px;
    }
    .topmenu-wrapper {
        padding: 26px 12px;
    }
    .content-outer-wrapper {
        padding: 40px 15px;
    }
    .top-menu ul {
        justify-content: center;
    }
    .nav-buttons {
        column-gap: 1.158vw;
        padding-left: 6px;
    }
    .earnings-icon {
        width: 37px;
        height: 37px;
    }
    .earnings-icon img {
        width: 16px;
    }
    .earnings-content {
        padding-left: 12px;
    }
    .earnings-content .title {
        font-size: 12px;
    }
    .earnings-bar .red-btn {
        padding: 0px 10px;
        height: 31px;
        font-size: 12px;
    }
    .recent-transaction .white-btn {
        font-size: 11px;
    }
    .statement {
        padding: 0 25px;
    }
    .earning-graph-top .graph-date input {
        font-size: 10px;
        max-width: 102px;
    }
    .earning-graph-top .graph-date {
        column-gap: 5px;
    }

    .search-area input {
        font-size: 12px;
    }

    .recent-transaction .white-btn {
        font-size: 11px;
    }
    .boxcontent h3 {
        font-size: 18px;
        padding-bottom: 10px;
    }
    .count {
        font-size: 25px;
        line-height: 20px;
    }

     /* ............popup........... */
    .popup-content .popup-form-div input.fullwidth {
        font-size: 1.222vw;
        max-width: 24.793vw;
        max-height: 3.592vw;
        padding: 1.135vw 1.135vw;
    }
    .popup-submit-btn {
        font-size: 1.335vw;
        max-width: 24.793vw;
        max-height: 3.592vw;
        padding: 1.135vw 1.135vw;
    }

    .white-wrapper{
        padding: 25px;
    }
    .onethird-col, .oneforth-col {
        flex-basis: calc(50% - 30px);
        max-width: calc(50% - 30px);
    }
    .form-element-group {
        margin-bottom: 2rem;
    }
    .status-btn {
        font-size: 15px;
    }
}

@media screen and (max-width: 900px) {
    footer{
     display: block;
    }
    .outer-wrapper {
        flex-direction: column;
    }
    .topmenu-wrapper{
        display: none;
    }
    .left-container{
        flex-direction: row;
        max-width: 100%;
        width: 100%;
        padding: 18px 20px 20px;
        min-height: auto;
    }
    .right-container {
        width: 100%;
    }
   .left-container .copyright, .topmenu-wrapper .top-menu{
       display: none;
   }
    .content-outer-wrapper {
        padding: 40px 15px 20px;
    }
    .left-menu-section {
        flex-direction: row;
        justify-content: space-between;
        flex-grow: 1;
        align-items: center;
    }
    .leftmenu-top .hamburger.icon{
        display: none;
    }
    .leftmenu-top .hamburger.mobile-icon{
        display: flex;
        width: 26px;
        align-self: center;
    }
    .leftmenu-top .hamburger.mobile-icon .menu-close{
        display: none;
    }
    .leftmenu-top .hamburger.mobile-icon.open .menu-close{
        display: block;
    }
    .leftmenu-top .hamburger.mobile-icon.open .menu-open{
        display: none;
    }
    .profile h3, .profile p{
        display: none;
    }
    nav.left-menu{
        height: 0;
        opacity: 0;
        display: none;
    }
    .left-container.mobile-toggle nav.left-menu {
        position: absolute;
        width: 100%;
        left: 0;
        background: #ae8fd6;
        top: 82px;
        padding: 20px 20px 0;
        box-sizing: border-box;
        z-index: 3;
        display: block;
        height: auto;
        opacity: 1;
    }
    .left-container.mobile-toggle nav.left-menu ul li {
        margin-bottom: 20px;
    }
    .left-container.mobile-toggle nav.left-menu.left-menu .dropdown-menu li{
        margin-bottom: 6px;
    }
    .profile {
        padding: 0;
        flex-direction: row;
        align-items: center;
        column-gap: 10px;
    }
    .leftmenu-top {
        column-gap: 28px;
    }
    .leftmenu-top .logo {
        order: 2;
    }
    .leftmenu-top .hamburger {
        order: 1;
    }
    .profile img {
        width: 45px;
    }
    .leftmenu-top .logo {
        width: 120px;
    }
    .mobile-dropdown-icon{
        display: inline-flex;
        border-radius: 0;
    }
    .topmenu-wrapper.topmenu-open {
        padding: 22px;
        display: flex;
    }

    .search-area {
       width: 0;
        background: transparent;
        padding: 0;
        /* padding: 6px 10px; */
    }
    .search-area input{
        width: 0;
        border-bottom: 1px solid #fff;
        padding-right: 0;
        transition: all 0.3s ease-in-out;
    }
    .search-area::after{
        display: none;
    }
     .search-area .search {
        margin-right: 0;
    }
    .search-area.open {
        width: max-content;
        background: transparent;
        padding-right: 6px;
    }
    .search-area.open input{
        width: 120px;
        border-bottom: 1px solid rgb(17 17 17 / 35%);
        padding-right: 6px;
    }

    .cirle-grey {
        width: 37px;
        height: 37px;
    }
    .notification img, .settings img {
        width: 16px;
    }
    .notification span {
        width: 22px;
        height: 22px;
        top: -10px;
        right: -6px;
        font-size: 10px;
        border: 3px solid #fff;
    }
    .logout {
        padding: 14px 16px;
        width: 90px;
        height: 38px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 13px;
        justify-content: center;
    }

    .titlebar span {
        display: none;
    }
    .content-wrapper {
        flex-direction: column;
    }
    .content-left {
        margin-right: 0;
    }
    h2 {
        font-size: 24px;
    }

    .section-title{
        display: block;
    }
    .content-right {
        max-width: 100%;
        padding: 36px 18px 24px;
        margin-bottom: 28px;
    }
    .recent-transaction .white-btn, .white-btn {
        font-size: 14px;
        padding: 8px 12px;
    }
    .content-right .recent-transaction{
        display: none;
    }
    .outer.recent-transaction h3{
        font-size: 24px;
    }
    .transaction-detail figure {
        width: 56px;
        height: 56px;
    }
    .transaction-detail .name h5 {
        font-size: 17px;
    }
    .transaction-detail .name p {
        font-size: 15px;
    }
    .transaction-detail .amount h6 {
        font-size: 14px;
    }
    .transaction-detail .amount .time {
        font-size: 13px;
    }
    .transaction-detail {
        margin-bottom: 30px;
    }
    .transaction-detail figure {
        margin: 0 14px 0 0;
    }
    .statement{
        display: none;
    }
    .content-left-bottom {
        padding: 30px 20px;
    }
    .report-menu li {
        font-size: 17px;
        padding-right: 18px;
    }

    .earnings-content .title {
        font-size: 13px;
    }
    .check-report-iocns li {
        padding-right: 12px;
        font-size: 14px;
    }
    .radio-check {
        padding-left: 30px;
    }
    .radio-check .checkmark {
        width: 20px;
        height: 19px;
    }
    .report-info-box {
        max-width: 242px;
    }
    .indicators {
        font-size: 14px;
    }
    .outer.recent-transaction{
        display: flex;
    }
    .earning-graph-top .graph-title{
        font-size: 14px;
        padding-right: 20px;
    }
    .earning-graph-top {
        justify-content: flex-end;
    }
    .earning-graph-top .graph-date input {
        font-size: 13px;
        padding: 10px 3px;
        max-width: 120px;
    }
    .earning-graph-top .graph-date {
        column-gap: 10px;
    }

    .recent-transaction .white-btn, .white-btn {
        font-size: 14px;
        padding: 8px 12px;
    }

    .content-bottom {
        flex-direction: column;
    }

    /* ............popup......... */
    .popup-content .form-block {
        margin-top: 20px;
    }
    .popup-content h3 {
        font-size: 22px;
    }
    .popup-form-div .four-column {
        column-gap: 18px;
    }
    .popup-form-div .four-column input {
        width: 42px;
        height: 40px;
        font-size: 22px;
        padding: 8px;
    }
    .popup-content .confirm-otp {
        font-size: 12px;
    }
    .report-ellipsis{
        display: none;
    }

    /* bank detais  */
    .form-element-group input {
        font-size: 15px;
    }
    .form-btn {
        font-size: 18px;
        max-width: 354px;
    }
    .form-element-group label {
        font-size: 15px;
    }
    .mobile-logout{ display: block;}
    .mobile-nav {
        display: flex;
        column-gap: 15px;
    }
}

@media screen and (max-width: 768px) {

    .register {
        font-size: 16px;
    }

    .forget-pass {
        font-size: 16px;
    }
    .content-top {
        /* flex-direction: column; */
        flex-wrap: wrap;
    }
    .purple-box {
        flex-basis: calc(50% - 8px);
        max-width: 50%;
        margin-bottom: 15px;
    }

    .report-menu li {
        font-size: 15px;
    }
    .check-report-iocns li {
        font-size: 13px;
    }
    .radio-check {
        padding-left: 25px;
    }
    .content-report-bar {
        flex-direction: column;
    }
    .graph-block {
        align-items: flex-start;
        margin-top: 10px;
    }

    .earnings-content .title {
        font-size: 15px;
        margin-bottom: 4px;
    }
    .earnings-content .number {
        font-size: 37px;
    }
    .earnings-bar .red-btn {
        padding: 8px 26px;
        font-size: 16px;
    }
    .indicators {
        font-size: 16px;
    }
    .report-info-box {
        max-width: 280px;
        margin-right: 0;
    }
    .earning-graph-top {
        justify-content: flex-start;
    }

    .report-menu {
        margin: 0 0 30px 0;
    }
    .earnings-content .note {
        margin-top: 6px;
    }

     /* ............popup........... */
    .popup {
        max-width: 360px;
        max-height: max-content;
        height: max-content;
        padding: 18px;
    }
    .popup-close {
        right: 13px;
        top: 7px;
        width: 12px;
    }
    .popup-content img {
        width: 110px;
    }

    .popup-content .popup-form-div {
        margin-bottom: 18px;
    }
    .popup-content .popup-form-div input.fullwidth {
        font-size: 13px;
        max-width: 260px;
        max-height: 34px;
        padding: 10px;
        border-radius: 50px;
    }
    .popup-submit-btn  {
        font-size: 13px;
        max-width: 260px;
        max-height: 34px;
        padding: 10px;
        border-radius: 50px;
    }
    .popup-content .confirm-otp {
        font-size: 11px;
    }
    .report-daigram-bar {
        flex-direction: column;
    }
    h2 {
        font-size: 22px;
    }
    .outer.recent-transaction h3 {
        font-size: 22px;
    }
    .outer.recent-transaction {
        margin: 25px 0 5px;
    }
    .recent-transaction .white-btn, .white-btn {
        padding: 4px 12px;
    }
    .transaction-detail .name h5 {
        font-size: 16px;
    }
    .transaction-detail .name p {
        font-size: 14px;
    }
    .transaction-detail figure {
        margin: 0 5px 0 0;
    }
    .login-container .logo {
        width: 140px;
    }
    .login-form {
        padding-top: 30px;
    }
    .form-div {
        height: 54px;
    }
    .form-div.login-btn {
        margin-top: 18px;
    }
    .forget-pass {
        margin-top: 15px;
    }
    .register {
        padding-top: 15px;
    }


	.search-list-wrapper .show-item {
		order: 2;
		margin-top: 5px;
		flex-grow: 1;
	}
	.search-list-wrapper .show-item select{
		width:100%;
	}
    .search-item-group {
        max-width: 296px;
    }
    .search-item-group input {
        max-width: 230px;
    }
    .search-append button img {
        width: 20px;
    }
    .search-append {
        max-width: 56px;
    }
    .table .action a {
        max-width: 20px;
    }
    .search-item-group, .search-list-wrapper input, select.form-control {
        max-width: 100%;
    }
    .search-item-group input {
        max-width: 100%;
    }
    .search-list-wrapper {
        flex-direction: column;
        row-gap: 10px;
    }
    .search-append {
        max-width: 56px;
    }

    .half-col, .one-col, .two-col , .three-col ,.four-col, .onethird-col, .oneforth-col {
		flex-basis: 100%;
		max-width: 100%;
	}
    .form-field {
		height: 42px;
	}
    .forms-row{
		column-gap: 2.5rem;
	}

	.form-wrapper {
		padding: 18px;
	}
    .form-element-group {
		margin-bottom: 1.5rem;
	}
    .white-wrapper{
        padding: 20px;
    }
    .form-field{
        max-width: 100%;
    }
    .status-btn {
        font-size: 14px;
    }
    .productgallery, .productgallery .thumbnails-wrapper{
        max-width: 396px;
    }
    .productgallery .thumbnails-wrapper ul {
        margin: 10px 0 0;
    }
    .productgallery .thumbnails-wrapper ul li {
        margin-right: 10px;
        width: 90px;
        height: 88px;
    }
    .productgallery > figure, .productgallery > figure img {
        max-height: 300px;
    }
}

@media screen and (max-width: 520px) {
    .earnings-bar:last-child{
        flex-direction: column;
        align-items: stretch;
    }
    .balance-leftblock {
        margin-bottom: 28px;
    }
    .transaction-data{
        flex-direction: column;
    }

    .transaction-detail .amount {
        text-align: left;
        flex-direction: row;
        column-gap: 14px;
        align-items: center;
    }
    .transaction-detail .amount .time {
        padding-top: 2px;
    }
    .purple-box {
        flex-basis: 100%;
        max-width: 100%;
    }
    .earning-graph-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .earning-graph-top .graph-title {
        padding-bottom: 12px;
        font-size: 13px;
        padding-right: 0;
    }
    h2 {
        font-size: 20px;
    }
    .outer.recent-transaction h3 {
        font-size: 18px;
    }
    .transaction-detail .name p {
        font-size: 13px;
    }
    .transaction-detail .amount h6 {
        font-size: 13px;
    }
    .transaction-detail .amount .time {
        font-size: 12px;
    }
    .transaction-data {
        align-items: flex-start;
    }
    .left-container {
        padding: 13px 10px 13px;
    }
    .leftmenu-top .logo {
        width: 110px;
    }
    .leftmenu-top {
        column-gap: 15px;
    }
    .left-container.mobile-toggle nav.left-menu {
        top: 70px;
    }
    .login-container {
        padding: 5px 20px;
    }
    .status-btn {
        font-size: 13px;
        margin-bottom: 10px;
        width: 100%;
    }
    .status-btn:last-child {
        margin-bottom: 0;
    }

    .status-bar{
        flex-direction: column;
    }

}

@media screen and (max-width: 420px) {


    .forget-pass, .register{
        font-size: 15px;
    }
    .login-container {
        padding: 5px 0;
    }
    .form-div.phone::before,.form-div.pass::before  {
        margin-left: 20px;
    }
    .form-div {
        height: 50px;
    }
    .form-div input {
        padding-left: 56px;
    }
    .form-div input {
        font-size: 15px;
    }
    .form-div.login-btn input, .form-div.login-btn button {
        font-size: 18px;
    }

    .topmenu-wrapper.topmenu-open {
        padding: 22px 14px;
    }
    .report-menu li {
        font-size: 14px;
        flex-grow: 1;
        padding-right: 12px;
    }

    .radio-check {
        padding-left: 27px;
    }

    .transaction-detail .amount h6 {
        font-size: 13px;
    }
    .transaction-detail .amount .time {
        font-size: 12px;
    }
    .transaction-detail .name h5 {
        line-height: 20px;
        font-size: 15px;
    }
    .indicators {
        font-size: 14px;
    }
    .top-menu ul {
        font-size: 13px;
    }

    .search-area.open input {
        width: 85px;
    }
    .order-view {
        width: 28px;
    }
    .leftmenu-top .hamburger.mobile-icon {
        width: 23px;
    }
    .profile > img {
        width: 40px;
    }
    .cirle-grey {
        width: 30px;
        height: 30px;
    }
    .notification span {
        width: 18px;
        height: 18px;
        top: -8px;
        right: -5px;
        font-size: 9px;
        border: 2px solid #fff;
    }

     /* ............popup........... */
    .popup {
        max-width: 270px;
    }
    .popup-content .popup-form-div input.fullwidth {
        font-size: 11px;
        max-width: 251px;
        max-height: 31px;
    }
    .popup-submit-btn{
        font-size: 12px;
        max-width: 251px;
        max-height: 31px;
    }

    .productgallery .thumbnails-wrapper ul {
        margin: 6px 0 0;
    }
    .productgallery .thumbnails-wrapper ul li {
        margin-right: 6px;
        width: 83px;
        height: 81px;
    }

}

/* .................. ENDS media query ................ */


.left-container.open{
    width: 110px;
    max-width: 127px;
    padding-top: 40px;
    position: relative;
    z-index: 5;
    padding: 20px 10px;
}
/* .left-container.open .logo{
    width: 60px;
} */
.left-container.open .leftmenu-top{
    position: relative;
}
.left-container.open .hamburger{
    position: absolute;
    right:-5vw;
    /* top: 5px; */
    filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
}
.left-container.open .profile img{
    width: 60px;
}

.left-container.open .profile h3, .left-container.open .profile p{
    display: none;
}
.left-container.open .left-menu ul{
    align-items: center;
}
.left-container.open .left-menu ul li{
    position: relative;
    height: 64px;
}
.left-container.open .left-menu ul li a .menu-icon{
    margin-right: 10px;
}

.left-container.open .left-menu ul li a .menu-icon img{
    width: 28px;   
}
.left-container.open .left-menu ul li a span.menu-txt{
    width: 0;
    /* opacity: 0; */
    display: none;
}
.left-container.open .left-menu ul li a {
    height: 60px;
    width: 60px;
    box-sizing: border-box;
    position: absolute;
    left: -32px;
    padding: 0 18px 0 18px;
    z-index: 1;
}
.left-container.open .left-menu ul li a:hover::before{
    margin-right: 16px;
}

.left-container.open .left-menu ul li a:hover span{
    width: auto;
    /* opacity: 1; */
    display: inline-block;
}
.left-container.open .left-menu ul li a:hover {
    width: max-content;
    min-width: 135px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 11%);
}
.left-container.open  .copyright{
    display: none;
}
.left-container.open .profile {
    padding: 35px 0 59px;
}
.left-container.open .leftmenu-top {
    justify-content: center;
}
.right-container.open .search-area{
    transform: translateX(5vw);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.left-container.open .left-menu ul li.dropdown a:hover span.menu-txt {
    padding-right: 25px;
}

.left-container.open .left-menu ul li.dropdown > a.active::after{
    content: none;
}
.left-container.open .left-menu ul li.dropdown > a::after{
    left: 55px;
    top: 20px;
}
.left-container.open .left-menu ul li.dropdown > a:hover::after{
    right: 16px;
    left: auto;
}
.left-container.open .left-menu ul li.dropdown.open .dropdown-menu {
    position: absolute;
    background: #fff;
    z-index: 2;
    width: 230px;
    top: 0px;
    left: 50px;
    border-radius: 5px;
    box-shadow: 4px 4px 9px 0px rgb(70 68 61 / 23%);
}
.left-container.open .left-menu ul li.dropdown.open .dropdown-menu  li {
    width: 100%;
    height: auto;   
}
.left-container.open .left-menu ul li.dropdown.open .dropdown-menu  li a {
    width: 100%;
    height: auto;
    left: 0;
    position: relative;
    color: #111;
    transition: all .3s ease-in-out;
}
.left-container.open .left-menu ul li.dropdown.open .dropdown-menu  li a:hover{
    color: #9d7dc7;
}
.left-container.open .left-menu ul li.dropdown.open .dropdown-menu  li a:hover::before{
    color: rgb(17 17 17 / 65%);
}
.left-container.open .left-menu ul li.dropdown.open .dropdown-menu li.menu-title{
    color: #111;
    display: block;
}
/* .................. seller view cms 22-11-22 ................ */


form.sellers {          //give this class name 'sellers' in form
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
}

select.form-control.sellers{     // give both these classnames 'form-control' and 'sellers' in select box
    max-width: 245px!important;
}
.preview {
    position: absolute;
    bottom: 0;
    text-align: center;
    background-color: #68b86e;
    width: 100%;
    max-width: 300px;
    color: white;
    padding: 5px;
}
img.seller-img-preview {  // give this 'seller-img-preview' class name in img tag
    max-width: 300px;
    width: 100%;
    max-height: 218px;
    object-fit: cover;
}
a.image-link {
    color: white;
}
.size-box ul .active {
    background-color:#68b86e;
}