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

	html,
	body {
		height: 100%;
		width: 100%;
	}

	/* @keyframes mymove {
		from {
			right: -200px;
		}

		to {
			right: 0px;
		}
	} */
	.MainBody {
		position: sticky;
		width: 100%;
		height: 100%;
		max-height: fit-content;
		margin-bottom: 0px;
	}

	/* Start Left Menu Section */
	.Menu-Left {
		width: var(--Menu-Width);
		overflow-y: auto;
	}

	.Menu-Left ul li a {
		padding: 8px 8px 8px 8px !important;
	}

	.Menu-Left ul li .fa {
		font-size: 16px;
		width: 32px;
		height: 32px;
		line-height: 30px
	}

	.Menu-Profile {
		margin-top: 60px;

	}

	.Menu-Left ul li small {
		padding: 0;
		margin-left: 0;
	}

	/* End Left Menu Section */
	.header {
		border: none;
		background-color: #0063e6;
		z-index: 1;
	}

	.header_logo {
		width: 80px;
		height: 100%;
		float: left;
		margin-left: 0;
	}

	.header_logo img {
		width: auto;
		height: 32px;
	}

	.header_rc {
		width: 60%;
		line-height: var(--header-height);
		text-align: right;
	}

	.header_rc i {
		color: #0063e6;
		background-color: #fff;
		padding: 6px 8px;
		border-radius: 50%;
		margin-right: 6px;
		width: fit-content;
		height: fit-content;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.text-title {
		color: var(--primary-color-light);
		background-color: transparent;
		padding: 0 5px;
		font-size: 10px;
		font-weight: 400;
		margin-top: 0px;
	}

	.WlcmText,
	.WlcmText span {
		font-size: 12px;
		color: #e6e6e6;
		margin-right: 0;
	}

	.PromptSuccess,
	.PromptFail {
		width: 70%;
	}

	/* End Top Header Section */

	.Page-Content {
		margin: 0 0 var(--footer-height) 0;
		overflow: inherit;
		border: 1px solid #fff;
		border-radius: 30px 30px 0 0;
		background-color: #fff;
		margin-top: 80px;
		height: fit-content;
		width: 100%;
		display: inline-block;
	}

	.Popup-content h2 {
		font-size: 14px;
		line-height: 28px;
	}

	.Popup-content select,
	.Popup-content input,
	.Popup-content textarea {
		width: 74%;
		height: 26px;
		font-size: 11px;
	}

	.Popup-content select {
		width: 81%;
	}

	.Popup-content select option {
		font-size: 11px;
		line-height: 28px;
	}

	.Popup-content textarea {
		height: 54px;
		margin: 4px 0 0 0;
		padding: 5px 8px;
	}

	.Popup-content {
		width: 70%;
		height: fit-content;
		text-align: center;
		padding: 10px;
		margin: 10px auto 0 auto;
		color: #fff;
		font-weight: 200;
	}

	.Menu-Left {
		position: fixed;
		z-index: 100;
		width: 70%;
		height: 100vh;
		display: none;
		animation-fill-mode: forwards;
		animation-timing-function: ease-out;
	}

	.Menu-Left h2 {
		font-size: 12px;
		width: 88%;
		float: left;
		line-height: 28px;
		margin-bottom: 20px;
	}

	.Menu-Left h2 {
		font-size: 14px;
		line-height: 28px;
	}

	.Popup-content select,
	.Popup-content input,
	.Popup-content textarea {
		width: 82%;
		height: 26px;
		font-size: 11px;
	}

	.Popup-content select {
		width: 90%;
	}

	.Popup-content select option {
		font-size: 11px;
		line-height: 28px;
	}

	.Popup-content textarea {
		width: 84%;
		height: 54px;
		margin: 4px 0 0 0;
		padding: 5px 8px;
	}

	.Popup-content {
		width: 70%;
		height: fit-content;
		text-align: center;
		padding: 10px 10px 30px 10px;
		margin: 10px auto 0 auto;
		color: #000;
		font-weight: 200;
	}

	.downloadLink a {
		height: 30px;
		line-height: 30px;
		width: fit-content;
		font-size: 8px;
	}

	.Page-Content-left {
		width: 100%;
	}

	/* Start Heading Button Section */
	.Heading-Btn-Container {
		width: 94%;
		/* height: 30px; */
		border: none;
		margin-top: 5px;
		padding: 0 10px;
	}

	.Heading-Btn-Container h2 {
		font-size: 18px;
	}

	.HTitle-Container {
		width: 70%;
		line-height: 28px;
		margin-left: 2px;
		text-align: left;
	}

	.HTitle-Container h2 {
		font-size: 12px;
		text-align: left;
		padding: 0 4px;
		float: left;
	}

	.HTitle-Container h3 {
		color: #fff;
	}

	.HBtn-Container {

		line-height: 26px;
	}

	.Common-Btn,
	.Common-Btn-circle,
	.Common-Btn-Red,
	.Common-Btn-Green,
	.Common-Btn-Orange {
		font-size: 14px;
		font-weight: 400;
		padding: 4px 10px;
		width: fit-content;
		min-width: 30%;
		height: 32px;
	}

	.Common-Btn-circle {
		width: fit-content;
		min-width: 25px;
		height: 24px;
		font-size: 12px;
		padding: 1px 1px;
		border-radius: 4px;
	}

	.Browse-btn-grad {
		width: 88%;
		min-width: 83%;
		height: 20px;
		padding: 6px 8px 0 8px;
		line-height: 16px;
		font-size: 12px;
	}

	.Browse-btn-grad:hover {
		font-size: 13px;
	}

	.Search-Filter-Container {
		width: 96%;
		background-color: #f1f2f7;
		margin: -8px 0 10px 0;
		display: block;
		border-bottom: none;
		border-radius: 20px;
		display: inline-block;
		padding: 4px;
	}

	.Search-FC-Section-left {
		width: 100%;
		line-height: 24px;
		text-align: center;
		color: #00AEEF;
		float: left;
		padding: 8px 0;
	}

	.Search-Filter-Container select,
	.Search-Filter-Container input {
		width: 40%;
		height: 22px;
		font-size: 10px;
		padding: 0 10px;
		background-color: #fff;
		border: 1px solid gray;
		outline: none;
		margin: 0 auto 3px auto;
	}

	.Search-Filter-Container input {
		width: 30%;
		max-width: 178px;
	}

	.Search-Filter-Container input[id="date"] {
		width: 28.5%;
		height: 22px;
	}

	.HideMvers {
		display: none;
	}

	.HideDvers {
		display: block;
	}

	.Lead-table table td p {
		text-align: justify;
		padding-left: 5px;
		font-size: 10px;
	}

	.Lead-table table thead th,
	.Lead-table table td {
		font-size: 14px;
		line-height: 18px;
	}

	.Lead-table table td {
		font-size: 12px;
	}

	.Lead-table table td a {
		text-align: justify;
		font-size: 12px;
	}

	/* End Table Section */

	/* Mobile Resposive Table */
	.Invoice-table table {
		width: 100%;
		margin-bottom: 0;
		background-color: transparent;
	}

	.Invoice-table table td:first-child {
		font-size: 12px;
	}

	.Invoice-table table th,
	.Invoice-table table td {
		border-collapse: separate;
		overflow: hidden;
	}

	.Invoice-table table thead {
		display: none;
	}

	.Invoice-table table tbody {
		display: block;
	}

	.Invoice-table table tbody tr {
		display: block;
		border: 1px solid #000;
		border-radius: 2px;
		margin-bottom: 10px;
	}

	.Invoice-table table tbody tr td {
		background-color: #fff;
		display: block;
		vertical-align: middle;
		text-align: right;
		min-width: 94%;
		margin: 4px;
	}

	.Invoice-table table tbody td[data-title]:before {
		content: attr(data-title);
		float: left;
		font-size: inherit;
		font-weight: 400;
		color: #000;
		font-size: 12px;
	}

	.Invoice-table input,
	.Invoice-table select {
		width: 99%;
		height: 20px;
		font-size: 12px;
		padding-left: 2px;
	}

	.Invoice-table h4 {
		font-size: 14px;
	}

	.Invoice-table h2 {
		font-size: 15px;
		margin-bottom: 5px;
		display: block;
	}

	/* End of mobile resposive table */

	/* Start Note Section */
	.NoteSection {
		display: none;
	}

	/* END Note Section */

	/* start Pagination */

	nav[role="navigation"] {
		text-align: center;
	}

	.cd-pagination {
		width: 100%;
		max-width: 768px;
		margin: 0 auto;
		text-align: center;

	}

	.cd-pagination li {
		/* hide numbers on small devices */
		/* display: none; */

		display: inline-block;

		margin: 0.05em;
	}

	.cd-pagination a {
		padding: 3px 8px;
		text-decoration: none;
		transition: background-color .3s;
		font-size: 10px;

	}

	.currentCount {
		padding: 3px 8px;
		font-size: 10px;
	}

	/* End Pagination */

	.Popup-content {
		width: 85%;
		padding: 0 0 12px 0;
		margin: 62px auto 50px auto;
	}

	.Popup-close-btn {

		width: 28px;
		height: 28px;
		font-size: 18px;
		line-height: 28px;
		top: -10px;
		left: 10px;

	}

	/* Added by PD */
	.progressbar {
		display: none;
	}

	.MView {
		display: block;
	}

	.container {
		margin: 10px auto;
		padding: 0;
	}

	.login__input,
	.login__icon {
		font-size: 15px;
	}

	.login__field {
		width: 100%;
	}

	.CountertRow {
		width: 100%;
		margin: 10px auto 0px auto;
		display: block;
	}

	/* Start Dashboard Section */
	.DashCounter {
		float: left;
		width: 42%;
		height: 84px;
		margin: 4px;
	}

	.CountNum ul li:nth-child(even) {
		font-size: 10px;
	}

	.CountNum ul li:nth-child(odd) {
		font-size: 18px;
	}

	.DashCounter i {
		font-size: 16px;
		width: 2rem;
		height: 30px;
		background-color: #fff;
		line-height: 30px;
	}

	.DashCounter,
	.ChartPanel {
		padding: 8px;
		height: fit-content;
	}

	.ChartRow {
		display: block;
	}

	.ChartPanel {
		width: 88%;
	}

	.panel-heading {
		font-size: 14px;
	}

	.Income-Box,
	.ExpenseBox {
		width: 90%;
	}

	.Income-Box .CountNum,
	.ExpenseBox .CountNum {
		color: #fff;
	}

	.Income-Box .Counticon,
	.ExpenseBox .Counticon {
		display: inline-flex;
		float: none;
		margin-bottom: 5px;
	}

	.Income-Box .CountNum ul li:nth-child(even),
	.ExpenseBox .CountNum ul li:nth-child(even) {
		font-size: 16px;
		font-weight: 600;
	}

	.Income-Box .CountNum ul li:nth-child(odd),
	.ExpenseBox .CountNum ul li:nth-child(odd) {
		font-size: 14px;
		font-weight: 400;
	}

	/* End of Dashboard Section */

	/* Profile Page */
	.Profile-Info hr {
		margin-top: 5px;
		width: 100%;
	}

	.Comp_Logo {
		width: 100px;
		height: 80px;
		margin: 0;
	}

	.Profile-Info p {
		line-height: 28px;
		font-size: 13px;
	}

	.Profile-Info p span {
		width: 100%;
		font-size: 13px;
	}

	.Profile-card input,
	.Profile-card select {
		width: 92%;
		font-size: 13px;
	}

	.Profile-card select {
		width: 97%;
	}

	.Profile-RSec {
		Width: 94%;
		padding: 0;
	}

	.logo_profile {
		width: 22%;
	}

	/* End of Profile Page */

	.options {
		padding-left: 0;
	}

	.screen {
		width: 96%;
	}

	.login__submit {
		width: 95%;
		padding: 6px 16px;
	}

	/* Start OTP Section */
	#Otp-Verify {
		width: 260px;
		margin: 10px auto;
	}

	.Otp-inputs input {
		width: 36px;
	}

	/* End OTP Section */

	.Note-Sec p {
		font-size: 14px;
	}

	.Master-Btn-Container a {
		font-size: 14px;
	}

	/* invoice page */
	.Invoice-Page {
		margin: 20px 0 50px 0;
	}

	.Inv-Table {
		width: fit-content;
	}

	.Invoice-Header-Title h3 {
		font-size: 12px;
	}

	.Invoice-Header-Title {
		Width: 100%;
		padding-top: 8px;
	}

	.Invoice-Logo img {
		Width: 60%;
	}

	.Invoice-Header-Title p {
		font-size: 12px;
	}

	.Inv-cont {
		Width: 100%;
	}

	.Inv-cont p {
		font-size: 10px;
	}

	.Invoice-PerInfo p {
		Width: 100%;
		float: none;
		line-height: 26px;
		font-size: 12px;
	}

	.Invoice-PerInfo p:nth-child(even) {
		text-align: left;
	}

	.Inv-row1,
	.Inv-row2 {
		Width: 100%;
		display: block;
		text-align: Left;
	}

	.Inv-Footer {
		display: block;
		Width: 90%;
		padding: 10px;
	}

	.Inv-Footer p span,
	.Invoice-PerInfo p span {
		font-size: 12px;
		width: 26%;
		font-weight: 500;
		line-height: 16px;
		height: 18px;
	}

	.Inv-row1 input,
	.Inv-row2 input {
		width: 97%;
		font-size: 12px;
	}

	.Lead-table table tfoot tr td,
	.Invoice-table table tr td {
		font-size: 14px;
	}

	/* End of invoice page */

	.confirm-identity {
		display: block;
		align-items: center;
	}

	/* Start of upload photo section */
	.modal-body {
		width: 100%;
	}

	.modal-title {
		font-size: 1.2rem;
	}

	.upload-action-btn {
		padding: 0;
	}

	/* End of upload photo section */

	.Breadcrumb {
		display: none;
	}

	/* Start bottom Menu Section */
	.Menu-bottom {
		clear: both;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: fit-content;
		background-color: #fff;
		border-top: 1px solid #F1F1F1;
		box-shadow: 1px 2px 10px 0px #dbdbdb;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Menu-bottom ul {
		width: 100%;
		margin: 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 10px 10px 10px;
	}

	.Menu-bottom ul li {
		display: inline-block;
		text-align: center;
		list-style-type: none;
		width: 24%;
	}

	.Menu-bottom ul li small {
		color: #999999;
		border-bottom: 0;
		font-size: 12px;
	}

	.Menu-bottom ul li a {
		padding: 1px !important;
		display: inline-flex;
		align-items: center;
	}

	.Menu-bottom ul li .fa {
		font-size: 14px;
		width: 32px;
		height: 26px;
		line-height: 32px;
		border: none;
		color: #999999;

	}

	.Menu-bottom {
		margin-top: 1px;
	}

	/* End of Menu bottom */

	/* Profile Dropdown */
	.header_img {
		width: 46px;
		height: 35px;
		display: flex;
		justify-content: center;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20px;
	}

	.header_img img {
		width: 40px;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f1f1f1;
		min-width: 100px;
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
		z-index: 10;
		margin: 34px 30px 0 0;
		border-top: 4px solid var(--primary-color);
	}

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

	.dropdown-content a:hover {
		background-color: #ddd;
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	.dropdown:hover .dropbtn {
		background-color: #097ee8;
	}

	/* END Profile Dropdown */

	section {
		background-color: #0063E6;
	}

	/* Tab section */
	.chart-cont {
		width: 98%;
		margin-bottom: 0;
		height: 800px;
		margin-top: 0;
	}

	.tabs {
		width: 92%;
		float: none;
		list-style: none;
		position: relative;
		margin: 0 auto;
		text-align: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.tabs li {
		/* float: left; */
		display: block;
		margin: 0;
	}

	.tabs input[type="radio"] {
		position: absolute;
		top: 0;
		left: -9999px;
	}

	.tabs label {
		display: block;
		padding: 4px 20px;
		margin: 2px;
		border-radius: 50px;
		font-size: 14px;
		font-weight: normal;
		background: #075ccc;
		color: #fff;
		cursor: pointer;
		position: relative;
		top: 15px;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		left: 18px;
	}

	.tabs label:hover {
		background: #703688;
	}

	.tabs .tab-content {
		z-index: 2;
		display: none;
		overflow: hidden;
		width: 100%;
		font-size: 17px;
		line-height: 25px;
		position: absolute;
		top: 70px;
		left: 14px;
		background: #ffffff;
		margin: 0 auto;
	}

	.tabs [id^="tab"]:checked+label {
		background: #ffffff;
		color: #0063e6;
	}

	.tabs [id^="tab"]:checked~[id^="tab-content"] {
		display: block;
	}

	p.link {
		clear: both;
		margin: 380px 0 0 15px;
	}

	p.link a {
		text-transform: uppercase;
		text-decoration: none;
		display: inline-block;
		color: #fff;
		padding: 5px 10px;
		margin: 0 5px;
		background-color: #612e76;
		-moz-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
	}

	p.link a:hover {
		background-color: #522764;
	}

	/* End of Tab Section */
	.Heading-Btn-Cont {
		margin-top: -85px;
	}

	.Top-Heading {
		text-align: center;
		background: none;
		padding: 0;
		display: block;
	}

	.Top-Heading h2 {
		color: #fff;
		font-size: 16px;
	}

	.Title-cont {
		margin-bottom: -50px;
	}

	/* Btn-Title section */

	.Btn-Title {
		display: inline-flex;
		width: 99%;
		align-items: center;
		margin-top: 0;
		margin-bottom: -30px;
		box-shadow: none;
	}

	.Left-Sect {
		width: 60%;
		text-align: left;
		line-height: 20px;
	}

	.Left-Sect p {
		font-size: 12px;
	}

	.Left-Sect h2 {
		font-size: 15px;
		color: #fff;
	}

	.Rgt-Sect {
		width: fit-content;
		float: right;
		clear: both;
		margin-right: 8px;
	}

	.Rgt-Sect .Common-Btn-circle {
		background-color: #fff;
		color: #0063e6;
	}

	/* End of Btn-Title Section */

	/* Page content right section */
	.Page-Content-right {
		position: absolute;
		top: -44px;
		z-index: 100;
		width: 100%;
		height: 100vh;
		display: none;
		animation: mymove 0.5s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-out;
		background-color: #0063e6;
		text-align: center;
		padding: 0 0 20px 0;
	}

	.Page-Content-right h2 {
		font-size: 15px;
		width: 88%;
		float: left;
		line-height: 28px;
		margin-bottom: 20px;
		margin-top: 20px;
		color: #fff;
	}

	.Date-Cont {
		text-align: left;
		margin-left: 20px;
		line-height: 30px;
	}

	.Date-Cont input {
		border: 1px solid #b9b9b9;
		height: 30px;
		padding: 5px 10px;
		border-radius: 4px;
	}

	.Page-Content-right h3 {
		font-size: 14px;
	}

	.Popup-content h2 {
		font-size: 14px;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.Page-Content-right .Common-Btn-circle {
		margin-top: 50px;
	}

	.Page-Content-right-Btn-Container {
		width: 99%;
		height: 10%;
		text-align: center;
		position: absolute;
		margin-top: 20px;
	}

	.Page-Content-right form {
		background: #fff;
		height: 100vh;
		border-radius: 20px 20px 0 0;
		margin-top: 22px;
		height: 100%;
	}

	.Page-Content-right label i {
		border: 1px solid #E5E5E5;
		color: #c1c1c1;
		border-radius: 50%;
		padding: 10px;
		width: 18px;
		height: 18px;
		text-align: center;
	}

	.Page-Content-right label p {
		font-size: 11px;
	}

	.Page-Content-right ul {
		list-style-type: none;
	}

	.Page-Content-right li {
		display: inline-block;
	}

	input[type="checkbox"][id^="myCheckbox"] {
		display: none;
	}

	label {
		border: 1px solid #fff;
		display: block;
		position: relative;
		margin: 10px;
		cursor: pointer;
	}

	label:before {
		background-color: white;
		color: white;
		content: " ";
		display: block;
		border-radius: 50%;
		border: 1px solid grey;
		position: absolute;
		top: -5px;
		left: -5px;
		width: 25px;
		height: 25px;
		text-align: center;
		line-height: 28px;
		transition-duration: 0.4s;
		transform: scale(0);
	}

	label img {
		height: 100px;
		width: 100px;
		transition-duration: 0.2s;
		transform-origin: 50% 50%;
	}

	:checked+label i {
		background-color: #FE7A15;
		color: #fff;
		border: none;
	}

	:checked+label img {
		transform: scale(0.9);
		z-index: -1;
	}

	/* End of page content right */

	/* Entries Container */
	.Income-Cont {
		width: 100%;
		box-shadow: none;
		margin-top: 40px;
		padding: 0;
	}

	.Entries-Edit {
		font-size: 14px;
	}

	/* End of Entries Container */

	.Sign-div input[type="radio"] {
		left: -92px;
	}

	.pad {
		width: 90%;
	}

	.Admin-Profile-Container,
	.APC-left {
		display: block;
		max-width: none;
		width: 100%;
	}

	.APC-Profile-ImgBox {
		float: none;
	}

	.APC-left h2 {
		font-size: 16px;
	}

	.Entries-Edit i {
		font-size: 12px;
	}

	.Group-Details {
		display: block;
		text-align: left;
		line-height: 20px;
		padding: 0 16px;
	}

	h3 {
		font-size: 14px;
	}

	.WD {
		width: 100%;
	}

	.Entries-Amt a {
		font-size: 14px;
	}


	.expense-box p b {
		font-size: 15px;
	}

	.icon-number {
		font-size: 14px;
	}
}

@media (max-width:991px) {

	.RegisterPage form,
	.LoginPage form {
		padding: 40px;
	}
}

@media only screen and (min-width: 768px) {
	.cd-pagination li {
		display: inline-block;
	}
}

@media only screen and (min-width: 1170px) {
	.cd-pagination {
		margin: 0 auto;
	}
}