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

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

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

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

.loader-area{
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 20px; 
}
.loader {
        transform: rotateZ(45deg);
        perspective: 1000px;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        color: #790000;
      }
        .loader:before,
        .loader:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          border-radius: 50%;
          transform: rotateX(70deg);
          animation: 1s spin linear infinite;
        }
        .loader:after {
          color: #015455;
          transform: rotateY(70deg);
          animation-delay: .4s;
        }

      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }
   

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

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #EAECF5;
}

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


.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 #000;	
	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;
	vertical-align: middle;
}

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

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

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

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

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

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

.resend{
	cursor: pointer;
}

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



.signup-bg{
	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: #003942;
}

.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 #003942;;
	outline: none;
	background-color: transparent;
	color: #015455;
	text-align: center;
}

.signup-area p a{
	color: #015455;
	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;
}

.prompter{
	display: none;
	position: absolute;
	width: 300px;
	height: 80px;
	top: 30px;
	right: 5px;
	background-color: #003942;;
	border-radius: 8px;
	padding: 10px;
	z-index: 98;
}
.prompter-close{
	color: #ba0101;
	text-align: right;
	padding: 5px;
	margin: 0;
}

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

.prompter-text{
	color: #fff;
}

.menu{
	width: 60px;
	background-color: #003942;
	color: #fff;
	padding-top: 100px;
}

.menu li{
	padding: 3px;
	text-align: center;
	list-style: none;
	margin-bottom: 30px;
}

.menu li i{
	font-size: 22px;
}

.menu li:hover{
	color: #e84f01;
}

.content{
	flex: 1;
	padding: 20px;
}

.ribon{
	text-align: right;
	margin: 0;
	padding: 0;
}

.ribon i{
	margin-left: 20px;
	font-size: 20px;
	color: #003942;
}

.ribon i:hover{
	color: #e84f01;
}

.title-bar{
	margin: 0;
}

.title-bar h3{
	color: #003942;
	font-size: 25px;
	font-family: "serif";
	margin-bottom: 5px;
}

.container{
	min-height: 510px;
	max-height: 510px;
	overflow-y: auto;
	background-color: #fff;
	border-radius: 8px;
	padding: 10px;
}

.blocks-area{
	display: flex;
}

.blocks{
	flex: 1;
	margin: 30px;
	border-radius: 4px;
	padding: 20px;	
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
	box-shadow: 0 0 20px -10px #000;
}

.blocks h3{
	font-size: 20px;
	text-align: right;
	margin: 0;
	color: #003942;
}

.blocks .desc{
	font-size: 16px;
	color: #003942;
}

.section-area{
	display: flex;
}

.section{
	flex: 1;
	margin: 30px;
	margin-bottom: 0;
	border-radius: 4px;
	padding: 20px;	
	box-shadow: 0 0 20px -10px #000;
	min-height: 250px;
	max-height: 250px;
	overflow-y: auto;
	overflow-x: hidden;
}

.section h3{
	font-size: 18px;
	color: #003942;
	margin-top: 0;
}

.section li{
	list-style: none;
	padding: 6px;
	margin-bottom: 15px;
	border: 1px solid #e9e9e9;
	border-radius: 3px;
	font-size: 14px;
}

.section li:hover{
	border: 1px solid #003942;
}

.palet-area{
	display: flex;
}

.palet-left{
	background-color: #fff;
	color: #003942;
	width: 300px;
	padding: 10px;
	margin: 2px;
	border-radius: 3px;
}

.palet-right{
	flex: 1;
	background-color: #fff;
	color: #003942;
	padding: 0;
	margin: 2px;
	border-radius: 3px;
}

.palet-left h3{
	font-size: 14px;
	margin: 0;
}

.palet-drop{
	display: inline-block;
	margin-right: 60px;
}

.palet-drop select{
	border: none;
	width: 130px;
	color: #003942;
	outline: none;
	user-select: none;
}

.palet-btn{
	width: 90px;
	padding: 6px;
	background-color: #003942;
	display: inline-block;
	text-align: center;
	color: #fff;
	border-radius: 4px;
	font-size: 13px;
}

.palet-btn i{
	margin-right: 5px;
}

.palet-btn:hover{
	background-color: #e84f01;
}

.palet-btn2{
	width: 150px;
	padding: 6px;
	background-color: #003942;
	display: inline-block;
	text-align: center;
	color: #fff;
	border-radius: 4px;
	font-size: 13px;
}

.palet-btn2 i{
	margin-right: 5px;
}

.palet-btn2:hover{
	background-color: #e84f01;
}

.items-area{
	min-height: 450px;
	max-height: 450px;
	overflow-y: auto;
}

.items-area li{
	list-style: none;
	margin-bottom: 10px;
	padding: 6px;
	background: #fff;
	border-bottom: 1px solid #D9D9D9 ;
}

.items-area li:hover{
	
}

.items-area li .top{
	font-size: 15px;
	font-weight: 800;
	margin: 0;
	padding: 0;
	display: flex;
}

.items-area li .bottom{
	font-size: 13px;
	margin: 0;
	padding: 0;
	display: flex;
}

.items-area li .top .name{
	color: #003942;
	flex: 1;
}

.items-area li .top .amount{
	color: #003942;
	flex: 1;
	text-align: right;
}

.items-area li .bottom .details{
	flex: 1;
}
.items-area li .bottom .status{
	width: 80px;
	text-align: right;
	color: #e84f01;
}

.api-side li{
	margin: 10px;
	list-style: none;
	margin-bottom: 10px;
	padding: 6px;
	background: #fff;
	border-bottom: 1px solid #D9D9D9 ;
}

.palet-ribon{
	display: flex;
	padding: 15px;
}

.palet-invoice-no{
	flex: 1;
	font-size: 16px;
	font-weight: 800;
}
.palet-invoice-status{
	display: inline-block;
	width: 120px;
	font-size: 16px;
	font-weight: 800;
	color: #e84f01;
	text-align: left;
	margin-left: 30px;
}

.palet-action-btn{
	flex: 1;
	text-align: right;
}

.palet-action-btn i{
	margin-left: 20px;
	font-size: 18px;
}

.palet-action-btn i:hover{
	color: #e84f01;
}



.invoice{
	min-height: 400px;
	max-height: 400px;
	overflow-y: auto;
	padding: 30px;
}
 
.invoice-header{
	display: flex;
}

.invoice-header-left{
	flex: 1;
}

.invoice-header-right{
	flex: 1;
	text-align: right;
}

.invoice-header h3{
	margin: 0;
	margin-bottom: 10px;
	background-color: #003942;
	color: #fff;
	padding: 6px;
	min-width: 200px;
	display: inline-block;
}
.invoice-header p{
	margin: 0;
	margin-bottom: 5px;
}

.invoice-header img{
	width: 60px;
}

.invoice-body{
	padding-top: 10px;
	
}

.invoice-item{
	display: flex;
	font-size: 14px;
	margin-bottom: 5px;
}

.invoice-item-head{
	flex: 1;
	margin: 0;
	padding: 8px;
	background-color: #6E6E6E;
	color: #fff;
	border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: left;
}

.invoice-item-head-sl{
	width: 40px;
	margin: 0;
	padding: 8px;
	background-color: #6E6E6E;
	color: #fff;
	border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: center;
}
.invoice-item-head-qty{
	width: 90px;
	margin: 0;
	padding: 8px;
	background-color: #6E6E6E;
	color: #fff;
	border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: right;
}

.invoice-item-head-price{
	width: 130px;
	margin: 0;
	padding: 8px;
	background-color: #6E6E6E;
	color: #fff;
	border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: right;
}

.invoice-item-head-pay{
	width: 250px;
	margin: 0;
	padding: 8px;
	background-color: #6E6E6E;
	color: #fff;
	border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: right;
}

.invoice-item-sect{
	flex: 1;
	padding: 8px;
	border: none;
	border-bottom: 1px solid #6E6E6E ;
}

.invoice-item-sect-sl{
	width: 40px;
	padding: 8px;border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: right
}
.invoice-item-sect-sl i{
	color: #e84f01;
}

.delquote{
	cursor: pointer;
}
.invoice-item-sect-qty{
	width: 90px;
	padding: 8px;border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: right;
}
.invoice-item-sect-price{
	width: 130px;
	padding: 8px;
	border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: right;
}

.invoice-item-sect-pay{
	width: 250px;
	padding: 8px;
	border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: right;
}


.invoice-item-total{
	flex: 1;
	padding: 8px;
	border: none;
}

.invoice-item-total-sl{
	width: 40px;
	padding: 8px;
	border: none;
	text-align: right;
}

.invoice-item-total-qty{
	width: 90px;
	padding: 8px;
	border: none;
	text-align: right;
	

	
}
.invoice-item-total-price{
	width: 130px;
	padding: 8px;
	border: none;
	border-bottom: 1px solid #6E6E6E ;
	text-align: right;
}

.invoice-header i{
	font-size: 22px;
	width: 30px;
}
.invoice .invoice-header .userp{
	margin-top: 10px;
}

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

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

.popup-close{
	text-align: right;
	
}

.popup-close i{
	color: #003942;
	font-size: 25px;
}

.popup-close i:hover{	
	color: #e84f01;
}

.popup-content{
	
}

.popup-content h3{
	margin-top: -20px;
}

.popup-content h4{
	color: #e84f01;
	margin-bottom: 10px;
}

.popup-split{
	display: flex;
}

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

.popup-split-right{
	flex: 1;
}

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

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

.popup-next-area input[type=submit]{
	padding: 10px;
	display: inline-block;
	width: 140px;
	border: none;
	outline: none;
	background-color: #003942;
	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: #e84f01;
}

.back{
	
}

.back i{
	color: #003942;
	font-size: 25px;
}

.back i:hover{
	color: #e84f01;
}


.box{
	border-bottom: 1px solid #003942;
	padding: 0;
	margin-bottom: 15px;
}

.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]{
	padding: 8px;
	display: inline-block;
	width: 85%;
	background-color: transparent;
	border: none;
	outline: none;
}
.box textarea{
	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;
}

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

input[type=submit]:hover{
	background-color: #e84f01;
}



.platform-bg{
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: rgb(00,00,00,0.3);
}

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

.platform-close{
	text-align: right;
	
}

.platform-close i{
	color: #003942;
	font-size: 25px;
}

.platform-close i:hover{	
	color: #e84f01;
}

.platform-content{
	
}

.platform-content h3{
	margin-top: -20px;
}

.edit-profile-btn{
	cursor: pointer;
}

.edit-profile-area{
	display: none;
}

.edit-business-btn{
	cursor: pointer;
}

.edit-business-area{
	display: none;
}

.add-user-btn{
	cursor: pointer;
}

.add-users{
	display: none;
}

.bill-item{
	padding: 5px;
	margin-bottom: 5px;
	font-size: 14px;
}

.bill-item i{
	font-size: 20px;
	width: 30px;
	text-align: left;
}

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

body{
	width: 100%;
	/*padding-bottom: 100px;*/
}

.main{
	display: flex;
	width: 100%;
	height: 70%;
	margin: 0;
	padding: 0;
}
	

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


.login-text{
	display: block;
	vertical-align:inherit ;
	text-align: center;
}

.login{	
	display: block;
	vertical-align: inherit;
	text-align: center;
}

.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: #003942;
}
.login-text p{
	display: inline-block;
	width: 100%;
	text-align: center;
	margin: 5px;
}

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

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

.login form{
	padding-top: 20px;
	width: 90%;
	display: inline-block;
}



.menu{
    
	display: flex;
	width: 100%;
	background-color: #003942;
	color: #fff;
	padding-top: 0;
	position: fixed;
	bottom:0;
	text-align: center;
} 

.menu a{
    flex: 1;
}

.menu li{
    display: inline-block;
	padding: 3px;
	text-align: center;
	list-style: none;
	margin: 5px;
	flex: 1;
}

.menu li i{
	font-size: 25px;
}
	
.ribon{
	text-align: right;
	margin: 0;
	padding: 0;
}
	
.container{
	min-height:inherit;
	max-height: inherit;
	overflow-y:auto;
	background-color: #fff;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 50px;
}
	
.blocks-area{
	display: block;
}

.blocks{
	flex: none;
	margin: 30px;
	border-radius: 4px;
	padding: 20px;	
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
	box-shadow: 0 0 20px -10px #000;
}
	
.section-area{
	display: block;
}

.section{
	flex: none;
	margin: 20px;
	margin-bottom: 30px;
	border-radius: 4px;
	padding: 20px;	
	box-shadow: 0 0 20px -10px #000;
	height: 400px;
	overflow-y: scroll;
}
	
}