/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #a1a1a1 ; 
  border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #6b6b6b ; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #0f5765 ; 
}
   


* a{
	color: inherit;
	text-decoration: none;
}

* b{
	margin-right: 10px;
	display: inline-block;
}

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #fcfbfa;	
	/*background-color: #fcfcfc;*/	
	color: #3E3E3E ;
}


.loader-bg{	
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(00, 00, 00, 0.2);
	z-index: 98;
}

.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: inline-block;
	border-top: 4px solid #e16c27;
	border-right: 4px solid transparent;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}
.loader::after {
	content: '';  
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	border-left: 4px solid #0f5765;
	border-bottom: 4px solid transparent;
	animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
} 


.prompter{
	display: none;
	position: fixed;
	width: 300px;
	height: 80px;
	top: 30px;
	right: 5px;
	background-color: #0f5765;
	border-radius: 8px;
	padding: 10px;
	z-index: 99;
}


.prompter-close i{
	font-size: 20px;
	color: #fff;
}

.prompter-text{
	color: #fff;
	padding: 10px;
}

@keyframes loadingEffect{
	0% {
	  width: 0%;
	}
	100% {
	 	width: 100%;
	}

}

.promter-loader{
	width: 100%;
	height: 4px;
	background-color: #fff;
	animation: loadingEffect;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	border-radius: 6px;
}

.login-main{
	display: flex;
	width: 100%;
	height: 100%;
	/*background-image: url("../images/bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;*/
}

.login-area{
	vertical-align: middle;
	width: 1000px;
	height:  500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: table;	
	box-shadow: 0 0 20px -10px #0f5765;	
	padding: 20px;
	/*background-color: rgb(00, 00, 00, 0.4);*/
}

.login-text{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.login{	
	display: table-cell;
	width: 40%;
	vertical-align: middle;
}

.login-text .logoarea{
	width: 60%;
	display: inline-block;
	text-align: left;
}

.login-text img{
	width: 90px;
}

.login-text h3{
	display: inline-block;
	width: 60%;
	text-align: left;
	margin: 5px;
	font-size: 30px;
	color: #0f5765;
}
.login-text p{
	display: inline-block;
	width: 60%;
	text-align: left;
	margin: 5px;
}

.login-text p a{
	color: #0f5765;
	text-decoration: underline;
}

.login-text p a:hover{
	color: #e84f01;
}

.login form{
	padding-top: 20px;
	width: 300px;
}

.resend-btn{
	cursor: pointer;
}

.label{
	color: #515151;
	text-align: left;
	padding: 4px;
	font-size: 13px;
}


.box{
	border-bottom: 1px solid #0f5765;
	padding: 3px;
	margin-bottom: 15px;
	font-size: 13px;	
	box-shadow: 0 0 10px -5px #0f5765;
	border-radius: 4px;
}

.box i{
	font-size: 20px;
	width: 20px;
}
.box input[type=text]{
	padding: 8px;
	display: inline-block;
	width: 85%;
	background-color: transparent;
	border: none;
	outline: none;
}

.box input[type=number],
.box select,
.box input[type=date],
.box input[type=email],
.box input[type=password],
.box textarea,
.box input[type=datetime-local]{
	padding: 8px;
	display: inline-block;
	width: 85%;
	background-color: transparent;
	border: none;
	outline: none;
}

.box #password-input{
	padding: 8px;
	display: inline-block;
	width: 75%;
	background-color: transparent;
	border: none;
	outline: none;
}

.box #password-input2{
	padding: 8px;
	display: inline-block;
	width: 75%;
	background-color: transparent;
	border: none;
	outline: none;
}

.box .pass{
	font-size: 15px;
	cursor: pointer;
}

input[type=submit]{
	padding: 10px;
	display: inline-block;
	width: 99%;
	border: none;
	outline: none;
	background-color: #0f5765;
	color: #fff;
	border-radius: 4px;
	border: 1px solid #0f5765;
}

input[type=submit]:hover{
	background-color: transparent;
	color: #0f5765;
}

.filter-area{
	display: inline-block;
}

.filter-area input[type=date]{
	padding: 3px;
	margin-left: 20px;
	display: inline-block;
	width: 200px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #0f5765;
	outline: none;
}

.filter-area input[type=submit]{
	padding: 5px;
	display: inline-block;
	width: 100px;
	border: none;
	outline: none;
	background-color: #0f5765;
	color: #fff;
	border-radius: 4px;
	border: 1px solid #0f5765;
}

.filter-box input[type=submit]:hover{
	background-color: transparent;
	color: #0f5765;
}



.test-box{
	border-bottom: 1px solid #0f5765;
	padding: 3px;
	font-size: 13px;
	width: 95%;	
	/*box-shadow: 0 0 10px -5px #0f5765;*/
	border-radius: 2px;
	background-color: #fff;
}

.test-box i{
	font-size: 20px;
	width: 20px;
}
.test-box input[type=text]{
	padding: 8px;
	display: inline-block;
	width: 85%;
	background-color: transparent;
	border: none;
	outline: none;
}


.signup-bg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgb(00, 00, 00, 0.2);
	text-align: center;
}

.signup-area{
	position: absolute;
	width: 400px;
	padding: 20px;
	background-color: #EAECF5;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	border-radius: 6px;
}

.signup-area h3{
	font-size: 25px;
	margin: 0;
	color: #0f5765;
}

.signup-area p{
	font-size: 16px;
	margin: 5px;
	
}

.signup-area img{
	width: 40px;
}

.signup-area form{
	width: 300px;
	display: inline-block;
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
}


.signup-area form input[type=submit]{
	width: 98%;
	padding: 10px;
	border: 1px solid #0f5765;
	outline: none;
	background-color: transparent;
	color: #0f5765;
	text-align: center;
}

.signup-area p a{
	color: #0f5765;
	text-decoration: underline;
}

.signup-close{
	position: absolute;
	right: 10px;
	top: 10px;
	color: #ba0101;
	text-align: right;
}

.signup-close a{
	display: inline-block;
}

.signup-close i{
	font-size: 25px;
}



.forgot-bg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgb(00, 00, 00, 0.2);
	text-align: center;
}

.forgot-area{
	position: absolute;
	width: 400px;
	padding: 20px;
	background-color: #EAECF5;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	border-radius: 6px;
}

.forgot-area h3{
	font-size: 25px;
	margin: 0;
	color: #0f5765;
}

.forgot-area p{
	font-size: 16px;
	margin: 5px;
	
}

.forgot-area img{
	width: 40px;
}

.forgot-area form{
	width: 300px;
	display: inline-block;
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
}


.forgot-area form input[type=submit]{
	width: 98%;
	padding: 10px;
	border: 1px solid #0f5765;
	outline: none;
	background-color: transparent;
	color: #0f5765;
	text-align: center;
}

.forgot-area p a{
	color: #0f5765;
	text-decoration: underline;
}

.forgot-close{
	position: absolute;
	right: 10px;
	top: 10px;
	color: #ba0101;
	text-align: right;
}

.forgot-close a{
	display: inline-block;
}

.forgot-close i{
	font-size: 25px;
}


.main{
	display: flex;
	width: 100%;
	height: 100%;
}

.menu-area{
	width: 70px;
	padding: 5px;
	border-right: 2px #f0f0f0 solid;
	text-align: center;
	display: grid;
    place-items: center;
	z-index: 2;
}

.menu{
	padding-top: 10px;
}

.menu li{
	list-style: none;	
	color: #0f5765;
	margin-bottom: 15px;
	display: inline-block;
	padding: 8px;
	background-color: #f0efef;
	border-radius: 6px;
	width: 45px;
	box-shadow: 0px 0px 5px -3px;
	cursor: pointer;
}

.menu li:hover{
	background-color: #0f5765;
	color: #f0efef;
}
.menu li i{
	font-size: 20px;
}

.menu span{
	font-size: 11px;
	display: block;
}


.container{
	flex: 1;
}

.ribon{
	display: flex;
	padding: 10px;
}

.title-area{
	flex: 1;
}


.title-area .menu-open{
	margin-right: 20px;
	font-size: 25px;
	color: #0f5765;
	text-align: center;
	cursor: pointer;
	display: none;
}

.menu .menu-close{
	margin-bottom: 10px;
	font-size: 25px;
	color: #0f5765;
	text-align: center;
	cursor: pointer;
	display: none;
}

.title-area h3{
	margin: 0;
	font-size: 20px;
	display: inline-block;
}

.search-area{
	flex: 1;
	text-align: center;	
	display: grid;
    place-items: center;
}

.search-box{	
	border: 1px #e2e2e2 solid;
	border-radius: 6px;
	width: 80%;
}

.search-box input[type=search]{
	width: 90%;
	border: none;
	outline: none;
	padding: 6px;
	background-color: transparent;
}

.search-box i{
	font-size: 18px;
}


.search-results{
	display: none;
	position: absolute;
	background-color: #fcfbfa ;
	border: 1px solid #b3b3b3;
	border-radius: 8px;
	width: 350px;
	max-height: 180px;
	overflow-y: auto;
	padding: 5px;
	box-shadow: 0px 0px 20px -13px #000;
	z-index: 97;
}

.search-results li{
	list-style: none;
	text-align: left;
	padding: 8px;
	margin-bottom: 5px;
	cursor: pointer;
	font-size: 13px;
	background-color: #f5f5f5;
	border-radius: 6px;
}

.search-results li:hover{
	background-color: #f0efef;
}



.item-results{
	display: none;
	position: absolute;
	background-color: #fcfbfa ;
	border: 1px solid #b3b3b3;
	border-radius: 8px;
	width: 300px;
	max-height: 180px;
	overflow-y: auto;
	padding: 5px;
	box-shadow: 0px 0px 20px -13px #000;
	z-index: 97;
}

.item-results li{
	list-style: none;
	text-align: left;
	padding: 8px;
	margin-bottom: 5px;
	cursor: pointer;
	font-size: 13px;
	background-color: #f5f5f5;
	border-radius: 6px;
}

.item-results li:hover{
	background-color: #f0efef;
}

.profile-area{
	flex: 1;
	text-align: right;
}

.profile-area2{
	display: none;
}

.profile-area li{
	list-style: none;	
	color: #0f5765;
	margin-right: 10px;
	display: inline-block;
	padding: 8px;
	background-color: #f0efef;
	border-radius: 6px;
	text-align: center;
	box-shadow: 0px 0px 5px -3px;
	cursor: pointer;
}


.profile-area li i{
	font-size: 20px;
}


.profile-area span{
	font-size: 11px;
}

.profile-area li:hover{
	background-color: #0f5765;
	color: #f0efef;
}


.tiles-area{
	display: flex;
	gap: 30px;
	padding: 20px;
	padding-bottom: 10px;
	margin-top: 40px;
	margin-bottom: 20px;
}

.tiles{
	flex:1;
	border-radius: 8px;
	box-shadow: 0px 0px 20px -13px #000;
}

.tile-header{
	background-color: #f9f9f9;
	color: #818181;
	padding: 10px;
	display: flex;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.tile-icon-area{
	width: 40px;
	height: 40px;
	border-radius: 8px;
	padding: 8px;
	text-align: center;
	margin-top: -30px;
	position: relative;
	font-size: 30px;
	z-index: 1;
}

.tile-icon-bg-color1{
	background-color: #f8edd9;
	color: #e16c27;
	/*border: 1px solid #f6b12f;*/
}

.tile-icon-bg-color2{
	background-color: #ccf8d4;
	color: #1ec018;
	/*border: 1px solid #62cb71;*/
}

.tile-icon-bg-color3{
	background-color: #eee8dd;
	color: #f7b226;
	/*border: 1px solid #b658a0;*/
}

.tile-icon-bg-color4{
	background-color: #e5f1f1;;
	color: #0ec8c7;
	/*border: 1px solid #592ff6;*/
}

.tile-text-area{
	flex: 1;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* Align items to the right vertically */
    height: 80px;
}

.tiles h4,
.tiles h3{
	margin: 0;
	text-align: right;
	color: #686868;
}

.tiles h4{
	font-weight: 100;
	font-size: 14px;
	margin-bottom: 5px;
}

.tiles h3{
	color: #555555;
	font-size: 16px;
	font-weight: 600;
}

.tile-footer{
	background-color: #0f5765;
	color: #fff;
	padding: 10px;
	font-size: 13px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}



.tile-icon-bg-color4{
	background-color: #e5f1f1;;
	color: #0ec8c7;
	/*border: 1px solid #592ff6;*/
}


.content{	
	height: calc(100% - 98px);
}

.section-area{
	display: flex;
	height: 100%;
}

.section-area2{
	display: flex;
	height: auto;
}

.section-mini{	
	width: 350px;
	border-right: 2px #f0f0f0 solid;
	padding: 10px;
	overflow-y: auto;
}

.section{
	flex: 1;
	padding: 40px;
	padding-top: 10px;
}


.section2{
	flex: 1;
	padding: 10px;
	padding-top: 10px;
}

.overflow{
	overflow-y: auto;
	max-height: 80vh;
}

.section-header{
	display: flex;
	border-bottom: 2px #f0f0f0 solid;
	margin-bottom: 10px;
	box-shadow: 0 8px 5px -9px;
	padding: 10px;
	border-radius: 6px;
}

.section-header h3{
	flex: 1;
	margin: 0;
	font-size: 15px;
}

.section-header .section-btn{
	width: 80px;
	padding: 4px;
	color: #fff;
	background-color: #0f5765;
	border: 1px solid #0f5765;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
	margin-left: 10px;
}

.section-header .section-btn:hover{
	color: #0f5765;
	background-color: transparent;

}

.items{	
	font-size: 13px;
}

.items li{
	display: flex;
	list-style: none;
	padding: 10px;
	margin-bottom: 10px;
	padding-bottom:10px;
	border-bottom: 2px #f0f0f0 solid;
	cursor: pointer;
	box-shadow: 0 8px 5px -9px;
	border-radius: 6px;
}

.items li i{
	width: 30px;
	border-radius: 6px;
	padding: 3px;
	font-size: 20px;
	display: grid;
	margin: 0;
	margin-right: 10px;
    place-items: center;

}

.items-details{
	flex: 1;
}

.item-top{
	display: flex;
}

.item-name{
	flex: 1;
	font-weight: 700;
}

.item-amount{
	flex: 1;
}

.item-bottom{
	display: flex;
}

.item-client{
	flex: 1;
}

.item-status{
	width: 50px;
	text-align: right;
}


.header{
	font-weight: 900;
	background-color: #f0efef;
	color: #000;
}

.header h3{
	margin: 0;
}

.body{		
	color: #707070;
	background-color:#f7f7f7;
}

.log-message{
	display: grid;
    place-items: center;
	height: 100%;
	font-size: 13px;
}


.popupbg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: rgb(00,00,00,0.3);
	z-index: 96;
}

.popup{
	width: 90%;
	max-height: 90%;
	min-height: 90%;
	overflow-y: auto;
	background-color: #fcfbfa;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	padding: 20px;
}

.popup-close{
	text-align: right;
	margin-bottom: 0px;
}

.popup-close i{
	color: #0f5765;
	font-size: 20px;
	cursor: pointer;
}

.popup-split{
	display: flex;
}

.popup-split-left{
	width: 300px;
	margin-right: 20px;
}

.popup-split-right{
	flex: 1;
	height: calc(100vh - 160px);
	padding: 20px;
	overflow-y: auto;
}

.popup h3{
	margin: 0;
	font-size: 18px;
	color: #0f5765;
}

.popup-next-area{
	margin-top: 40px;
}

.popup-next{
	padding: 10px;
	display: inline-block;
	width: 120px;
	border: none;
	outline: none;
	background-color: #0f5765;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
	border: 1px solid #0f5765;
}

.popup-next-area input[type=submit]{
	padding: 10px;
	display: inline-block;
	width: 140px;
	border: none;
	outline: none;
	background-color: #0f5765;
	border: 1px solid #0f5765;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
}

.popup-next i{
	margin-left: 10px;
	margin-right: 10px;
	font-size: 18px;
}

.popup-next:hover{
	background-color: transparent;
	color: #0f5765;
}


.window-bg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: rgb(00,00,00,0.3);
	z-index: 96;
}

.window{
	width: 85%;
	max-height: 550px;
	min-height: 550px;
	overflow-y: auto;
	background-color: #fcfbfa;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	padding: 20px;
}

.window-close{
	text-align: right;
	margin-bottom: 0px;
}

.window-close i{
	color: #0f5765;
	font-size: 20px;
	cursor: pointer;
}

.window-split{
	display: flex;
}

.window-split-left{
	width: 300px;
	margin-right: 20px;
}

.window-split-right{
	flex: 1;
	height: 450px;
	padding: 20px;
	overflow-y: auto;
}

.window h3{
	margin: 0;
	font-size: 18px;
	color: #0f5765;
}

.window-next-area{
	margin-top: 40px;
}

.window-next{
	padding: 10px;
	display: inline-block;
	width: 120px;
	border: none;
	outline: none;
	background-color: #0f5765;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
	border: 1px solid #0f5765;
}

.window-next-area input[type=submit]{
	padding: 10px;
	display: inline-block;
	width: 140px;
	border: none;
	outline: none;
	background-color: #0f5765;
	border: 1px solid #0f5765;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
}

.window-next i{
	margin-left: 10px;
	margin-right: 10px;
	font-size: 18px;
}

.window-next:hover{
	background-color: transparent;
	color: #0f5765;
}

.btn-area{
	display: flex;
}

.btn{
	width: 80px;
	padding: 6px;
	color: #fff;
	background-color: #0f5765;
	border: 1px solid #0f5765;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
	margin-left: 10px;
}

.btn:hover{
	color: #0f5765;
	background-color: transparent;
}


.btn2{
	width: 120px;
	padding: 6px;
	color: #fff;
	background-color: #0f5765;
	border: 1px solid #0f5765;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
	margin-left: 10px;
}

.btn2:hover{
	color: #0f5765;
	background-color: transparent;
}

.alert-btn-area{
	display: flex;
}

.cancel{
	flex: 1;
	padding: 6px;
	color: #fff;
	background-color: #0f5765;
	border: 1px solid #0f5765;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
	margin-left: 10px;
}

.delete{
	width: 100px;
	padding: 6px;
	color: #fff;
	background-color: #8b1111;
	border: 1px solid #8b1111;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
	margin-left: 10px;
}

.send-quote-area{
	font-size: 14px;
	color: #0f5765;
}

.popup-split-left p{
	font-size: 14px;
}

.window-split-left p{
	font-size: 14px;
}


.platform-bg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: rgb(00,00,00,0.3);
	z-index: 97;
}

.platform{
	width: 450px;
	min-height: 90px;
	max-height: 90%;
	background-color: #fcfbfa;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 6px;
	padding: 10px;
	overflow-y: auto;
}


.platform-close{
	text-align: right;
	margin-bottom: -20px;
}

.platform-close i{
	color: #0f5765;
	font-size: 20px;
	cursor: pointer;
}

.platform-body{
	margin-top: -5px;
	padding: 20px;
}

.platform-body h3{
	margin: 0;
	margin-bottom: 10px;
	font-size: 15px;
}



.alert-bg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: rgb(00,00,00,0.3);
	z-index: 97;
}

.alert{
	width: 400px;
	min-height: 90px;
	max-height: 90vh;
	overflow-y: auto;
	background-color: #fcfbfa;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	padding: 10px;
}


.alert-close{
	text-align: right;
	margin-bottom: -20px;
}

.alert-close i{
	color: #0f5765;
	font-size: 20px;
	cursor: pointer;
}

.alert-body{
	margin-top: -5px;
	padding: 20px;
}

.alert-body h3{
	margin: 0;
	margin-bottom: 10px;
	font-size: 15px;
}

.clientView-area{
	min-height: 350px;
	overflow-y: auto;
	padding: 30px;
	box-shadow: 0 0 20px -9px;
	border-radius: 6px
}

.list{
	margin: 0;
}
.list h3{
	margin: 0;
	margin-bottom: 10px;
	padding: 8px;
	border-radius: 6px;
	font-size: 15px;
	box-shadow: 0 0 20px -9px;
}

.list li{
	display: flex;
	list-style: none;
	padding: 4px;
	margin-bottom: 10px;
	border-bottom: 2px #f0f0f0 solid;
	box-shadow: 0 8px 5px -9px;
	border-radius: 6px;
	font-size: 13px;
	place-items: center ;
}

.list li i{
	width: 30px;
	border-radius: 6px;
	padding: 3px;
	font-size: 13px;
	display: grid;
	margin: 0;
	margin-right: 10px;
    place-items: center;
}

.visitRecords{
	padding: 4px;
	margin-bottom: 10px;
	border-bottom: 2px #f0f0f0 solid;
	box-shadow: 0 8px 5px -9px;
	border-radius: 6px;
	font-size: 13px;
	place-items: left ;
}

.name{
	flex: 1;
}

.contact{
	flex: 1;
}

.email{
	flex: 1;
}

.status{
	flex: 1;
}

.action{
	flex: 1;
}

.amount{
	flex: 1;
}

.hide{
	display: none;
}


.suggestions {
	position: absolute;
	border: 1px solid #ccc;
	border-radius: 6px;
	max-height: 150px;
	width: 300px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 15px;
	z-index: 97;
	background-color: #fcfbfa;
	color:#0f5765;
	display: none;
	padding: 10px;
}
.suggestion-item {
	padding: 8px;
	cursor: pointer;
	margin-bottom: 4px;
	list-style: none;
	background-color: #f0efef;;
}
.suggestion-item:hover {
	color: #f0f0f0;
	background-color: #0f5765;
}


.color1{
	color: #e16c27;
}

.color2{
	color: #1ec018;
}

.color3{
	color: #f7b226;
}

.color4{
	color: #0ec8c7;
}

.bg-color1{
	background-color: #ffdddd;
	/*border: 1px solid #f6b12f;*/
}

.bg-color2{
	background-color: #ccf8d4;
	/*border: 1px solid #62cb71;*/
}

.bg-color3{
	background-color: #eee8dd;
	/*border: 1px solid #b658a0;*/
}

.bg-color4{
	background-color: #e5f1f1;
	/*border: 1px solid #592ff6;*/
}

.bg-color5{
	background-color: #e9e9e9;
	color: #515151;
	/*border: 1px solid #592ff6;*/
}

.viewVisit{
	cursor: pointer;
}

.viewVisitDetails{
	cursor: pointer;
}

.viewPatient{
	cursor: pointer;
}

.delBillItem{
	cursor: pointer;
}

.delNote{
	cursor: pointer;
}

.editNote{
	cursor: pointer;
}

.viewPharmacyRecord{
	cursor: pointer;
}

.delPharmRec{
	cursor: pointer;
}

.delBillPay{
	cursor: pointer;
}

.delWalkIn{
	cursor: pointer;
}

.delPharmPay{
	cursor: pointer;
}

.viewUser{
	cursor: pointer;
}

.permissions{
	cursor: pointer;
}

.download{
	cursor: pointer;
}

.viewAppointment{
	cursor: pointer;
}

.setting-btn,
.autoNotifications{
	cursor: pointer;
}

.viewInvItem{
	cursor: pointer;
}

.delInvItem,
.printPay,
.downloadPayRec,
.downloadBill,
.printLab,
.downloadVisit,
.groupon, 
.groupoff, 
.notificationson, 
.notificationsoff, 
.delusers,
.editInvItem{
	cursor: pointer;
}

.editTreatmentSheet,
.delTreatmentSheet{
	cursor: pointer;
	display: inline-block;
}

.approveLPR{
	display: inline-block;
	padding: 3px;
	margin-left: 10px;
	cursor: pointer;
	background-color: #05971b;
	border: 1px solid #05971b;
	border-radius: 8px;
	width: 50px;
	text-align: center;
	color: #fff;
	font-size: 11px;
}


.declineLPR{
	display: inline-block;
	padding: 3px;
	margin-left: 10px;
	cursor: pointer;
	background-color: #ba0101;
	border: 1px solid #ba0101;
	border-radius: 8px;
	width: 50px;
	text-align: center;
	color: #fff;
	font-size: 11px;
}

.editSavingsForm{
	display: none;
	padding: 10px;
	border-radius: 8px;
	max-width: 400px;
	margin-bottom: 40px;
}

.logo-settings{
	text-align: center;
}

.logo-settings img{
	width: 150px;
	display: inline-block;
}

.deluser{
	cursor: pointer;
}

.updatelogo,
.changeTemp,
.updatesign{
	display: none;
}

.apiswitch,
.newkey{
	font-size: 20px;
	cursor: pointer;
}

.lift{
	margin: 0;
}


.lift .close{
	display: none;
	font-size: 30px;
	text-align: left;
	color:  #0f5765;
}

@media only screen and (max-width: 1000px) {
	.login-area{
		width: 90%;
		height:  90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;	
		box-shadow: 0 0 20px -10px #000;	
		padding: 20px;
		border-radius: 8px;
	}

	.login-text{
		display: block;
		text-align: center;
	}
	
	.login{	
		display: block;
		text-align: center;
		width: 100%;
	}

	
	.login-text .logoarea{
		width: 100%;
		display: inline-block;
		text-align: center;
	}

	.login-text img{
		width: 40px;
	}

	.login-text h3{
		display: inline-block;
		width: 100%;
		text-align: center;
		margin: 5px;
		font-size: 30px;
		color: #818080;
	}
	.login-text p{
		display: inline-block;
		width: 100%;
		text-align: center;
		margin: 5px;
		color: #818080;
	}

	.login-text p a{
		color: #0f5765;
		text-decoration: underline;
	}

	.login-text p a:hover{
		color: #818080;
	}

	.login form{
		padding-top: 40px;
		width: 100%;
	}

	
	.signup-area{
		position: absolute;
		width: 80%;
		padding: 20px;
		background-color: #EAECF5;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		border-radius: 6px;
	}

	
	.alert{
		position: absolute;
		width: 80%;
		padding: 20px;
		background-color: #fcfbfa;	
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		border-radius: 6px;
	}
	
		
	.platform{
		width: 80%;
		min-height: 85px;
		background-color: #fcfbfa;	
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 4px;
		padding: 10px;
	}

	.menu-area{
		width: 70px;
		display: none;
		position: fixed;
		height: 100%;
		overflow-y: auto;
		background-color: #fcfbfa;
	}

		
	.menu li{
		list-style: none;	
		color: #0f5765;
		margin-bottom: 10px;
		display: inline-block;
		padding: 6px;
		background-color: #f0efef;
		border-radius: 6px;
		width: 35px;
		box-shadow: 0px 0px 5px -3px;
		cursor: pointer;
	}

	.menu li:hover{
		background-color: #0f5765;
		color: #f0efef;
	}
	.menu li i{
		font-size: 15px;
	}

	.profile-area{
		display: none;
	}

	.profile-area2{
		display: block;
	}
		
	.title-area{
		flex: 1;
	}

	.title-area .menu-open{
		display: inline-block;
	}

	.menu .menu-close{
		display: block;
	}

	.title-area h3{
		margin: 0;
		font-size: 18px;
	}

	.search-area{
		flex: 1;
		text-align: center;	
		display: grid;
		place-items: center;
	}

		
	.tiles-area{
		display: block;
		gap: 30px;
		padding: 20px;
		padding-bottom: 10px;
		margin-top: 40px;
		margin-bottom: 20px;
		text-align: center;
	}

	.tiles{
		display: inline-block;
		flex: none;
		width: 80%;
		border-radius: 8px;
		box-shadow: 0px 0px 20px -13px #000;
		margin-bottom: 50px;
	}

		
	.section-area{
		display: block;
		height: auto;
	}

	.section-area2{
		display: block;
		height: auto;
	}

	.section-mini{	
		width: auto;
		border-right: 2px #f0f0f0 solid;
		padding: 10px;
		overflow-y: auto;
	}

	.section{
		flex: none;
		padding: 40px;
		padding-top: 10px;
	}


	.section2{
		flex: none;
		padding: 10px;
		padding-top: 10px;
	}

		
	.popupbg{
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: rgb(00,00,00,0.3);
		z-index: 96;
	}

	.popup{
		width: 90%;
		max-height: 90%;
		min-height: 90%;
		overflow-y: auto;
		overflow-x: auto;
		background-color: #fcfbfa;	
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 4px;
		padding: 20px;
	}

		
	.popup-split{
		display: block;
	}

	.popup-split-left{
		width: 90%;
		margin-right: 20px;
	}

	.popup-split-right{
		flex: none;
		height: auto;
		width:auto;
		min-width: 700px;
		padding: 20px;
		overflow-y: auto;
	}
	.lift{
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		z-index: 3;
		background-color: #fcfbfa;
		min-width: 600px;  /*Set your desired maximum width */
		width: 100vw; /* Set the width to match the viewport width */
		transform: scale(0.8); /* Adjust the scale value as needed */
		transform-origin: 0 0; /* Ensure scaling starts from the top-left corner */
		margin: 0 auto; /* Center the div horizontally */
	

	}


	.lift .close{
		display: block;
		padding: 20px;
		cursor: pointer;
	}


}