/*main - color*/
/*main: blue: #396EB3*/

/*************************************************/
/*** 				FONT	 				   ***/
/*************************************************/
	@font-face{
		font-family: fontTitle;
		src:url('../fonts/Raleway/Raleway-Light.ttf');
	}

	@font-face{
		font-family: fontDefault;
		src:url('../fonts/opensans/OpenSans-Regular.ttf');
	}

	/*@font-face{
		font-family: fontTitle;
		src:url('../fonts/slabo/Slabo27px-Regular.ttf');
	}*/

/*************************************************/
/*** 				TEXT STYLE 				   ***/
/*************************************************/
	p.lowercase{
		text-transform: lowercase;
	}

/*************************************************/
/*** 			BASIC ATTRIBUTE				   ***/
/*************************************************/
	ul, li{
		list-style: none;
	}
	h2 {
		font-size: 24px;
	}
	red{
		color: red;
	}
	blue{
		color: #3a7ce8;
	}
	green{
		color: #12ba47;
	}
	lightgreen{
		color:#18bc6d;
	}
	orange{
		color: orange;
	}
	grey{
		color: #8c95a3;
	}
	a,a:hover{
		text-decoration: none !important;
		color: inherit;
	}
	html, body, .container{
		/*height: 100%;*/
	}
	body{
		/*font-size: 16px;*/
		/*font-family: fontDefault;*/
	}
	td,th{
		padding-right: 5px;
		padding-left: 5px;
	}
	.body{
		height: 100%;
	}
	.centered{
		margin-left: auto;
		margin-right: auto;	
	}
	.clickable{
		cursor: pointer; 
	}
	.display-inline{
		display: inline;
	}
	.strike {
		text-decoration: line-through !important;
	}
	.uppercase {
		text-transform: uppercase;
	}

/*************************************************/
/*** 					TABLE				   ***/
/*************************************************/
	.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
	  	background-color: #dbf9ff;
	}

/*************************************************/
/*** 					INPUT				   ***/
/*************************************************/
	.mainInput {
		border-radius: 4px;
		border: none;
		border-bottom: solid 1px #dadada;
	}
	.mainInput.full {
		width: 100%;
	}


/*************************************************/
/*** 			PADDING AND SPACE			   ***/
/*************************************************/
	.content{
		margin-top: 15px;
	}
	.horizontal-scroll{
		overflow: scroll;
	}

/*************************************************/
/*** 				ALIGNING				   ***/
/*************************************************/
	.align-left{
		text-align: left;
	}
	.align-right{
		text-align: right;
	}
	.align-center{
		text-align: center;
	}

/*************************************************/
/*** 				TABLE	 				   ***/
/*************************************************/
	.bordered-table tr th, .bordered-table tr td{
		border: solid #DEDEDE 1px;
	}
	.table-print .bordered-table tr th, .table-print .bordered-table tr td{
		border: solid #434343 1px;
	}
	.fill-light-out {
		background-color: #fff4af; /* yellow */
	}
	.fill-light-in {
		background-color: #b2ffd4; /* green */
	}

/*************************************************/
/*** 				INPUT STYLE				   ***/
/*************************************************/
	.input-day input{
		width: 45px !important;
	}
	.input-year input{
		width: 70px !important;
	}
/*************************************************/
/*** 				TEXT STYLE				   ***/
/*************************************************/
	.large-text{
		font-size: 20px;
	}
	.small-text{
		font-size: 12px;
	}
	.warning{
		color: orange;
	}
	.invoice-logo{
		font-size: 30px;
		font-family: fontTitle;
	}

/*************************************************/
/*** 				BUTTON STYLE			   ***/
/*************************************************/
	button{
		border: none;
	}
	.addButton{
		position: fixed;
		right: 75px;
		top: 50%;
		float: right;
		background-color: red;
		width: 50px;
		height: 50px;
		text-align: center;
		color: white;
		border-radius: 50%;
	}
	.addButton span{
		font-size: 50px;
		line-height: 50px;
	}
	.button{
		text-align: center;
		border-radius: 5px;
		padding: 5px;
		padding-right: 10px;
		padding-left: 10px;
		background-color: #396EB3;
		color: white;
	}
	.button:hover{
		/*background-color: #DB9CA4;*/
		/*color: black;*/
		cursor: pointer;
		opacity: 0.8;
	}
	.button-full{
		width: 100%;
	}
	.button-outline{
		background-color: white !important;
		border: solid #396EB3 3px !important;
		color: black !important;
	}
	.button-warning{
		background-color: orange;
	}
	.button-full--active{
		background-color: #1F467A;
	}
	.button-full--inactive{
		background-color: #56595C;
	}
	.button-danger{
		background-color: #D9534F;
	}
	.button-green{
		background-color: green;
	}

/*************************************************/
/*** 				HEADER					   ***/
/*************************************************/
	.header{
		border-bottom: solid #e1e4ea 2px;
		padding-top: 15px;
	}
	.brand{
		font-family: fontTitle;
		font-size: 25px;
	}
	.header-menu{
		/*line-height: 60px;*/
	}

/*************************************************/
/*** 				TOP MENU 				   ***/
/*************************************************/
	.top-menu {
		background-color: white;
	}
	.top-menu .mainMenu {
		display: inline-block;
		padding: 8px 16px;
		cursor: pointer;
	}
	.top-menu .mainMenu:hover {
		background-color: #c1c4c9;
	}

/*************************************************/
/*** 				FIXED FOOTER 			   ***/
/*************************************************/
	.fix-footer {
		position: fixed;
		width: 90%;
		bottom: 0;
		background-color: white;
		padding: 16px;
	}

/*************************************************/
/*** 				SIDEBAR	 				   ***/
/*************************************************/
	.sidebar{
		margin-top:15px;
		padding-top:30px;
		padding-bottom:30px;
		padding: 15px;
		background-color: white;
		width: 100%;
		height: 100%;
		overflow: hidden;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		border-radius: 3px;
	}
	.sidebar ul{
		padding-left: 0px;

	}
	.sidebar ul li{
		padding-left: 15px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.sidebar ul li:hover{
		background-color: #5C8B9B;
	}
	.sidebar ul.subtitle li {
		background-color: #41392E;
	}
	.sidebar ul li.active{
		background-color: #81C8CE;
	}


/*************************************************/
/*** 	   				STAMP 	 	   		   ***/
/*************************************************/
	.stamp {
		border: solid gray 2px;
		border-radius: 5px;
		padding: 5px;
		display: inline-block;
		vertical-align: middle;
	}
	.stamp-small {
		font-size: 12px;
	}
	.stamp-red { 
		color: red;
		border-color: red;
	}

/*************************************************/
/*** 	   			OTHER STYLE 	   		   ***/
/*************************************************/
	
	/*.box-invoice{
		background-color: #81C8CE;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		border-radius: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.box-invoice.done{
		background-color: #23CC4A;
	}
	.bordered-box{
		border: solid black 1px;
		margin-bottom: 5px;
		padding: 5px;
	}
	#autocomplete_list{
		border: solid gray 1px;
		background-color: white;
	}
	.pagination-box{
		padding: 5px;
		border-radius: 5px;
		border: solid black 1px;
		margin-top: 15px;
		margin-right: 10px;
		display: inline;
	}
	.pagination-box.active{
		background-color: #191F58;
		color: white;
	}
	.paginationSection{
		margin-right: auto;
		margin-left: auto;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
	}*/

	.card{
		background-color: white;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		border-radius: 3px;
		padding: 15px;
	}
	.card.noPadding{
		padding: 0px;
	}
	.card_link:hover{
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
		cursor: pointer;
	}
	.square{

	}

/*************************************************/
/*** 	   	COLUMN SIZE FOR PRINTING   		   ***/
/*************************************************/
	img.img-full-horizontal{
		width:100%;
	}

/*************************************************/
/*** 	   	COLUMN SIZE FOR PRINTING   		   ***/
/*************************************************/
	.col-1{
		width: 100px;
	}
	.col-2{
		width: 200px;
	}
	.col-3{
		width: 300px;
	}
	.col-4{
		width: 400px;	
	}
	.col-5{
		width: 500px;	
	}
	.col-6{
		width: 600px;	
	}
	.col-7{
		width: 700px;	
	}
	.col-8{
		width: 800px;	
	}

/*************************************************/
/*** 				PAGES STYLE 			   ***/
/*************************************************/
	.stocks .card{
		padding: 0px;
	}


/*************************************************/
/*** 				PRINT STYLE				   ***/
/*************************************************/
	.print-only{
		display: none;
	}
	@media print{
		.print-only{
			display: block;
		}
		input{
			border:none !important;
		}
		.exclude-print{
			display: none;
		}
		body{
			width: 100%;
			/*height: 4in;*/
			margin-top:0px;
			/*margin-left:20px;*/
			/*margin-right:20px;*/
			/*font-size: 10px;*/
		}
		table{
			/*font-size: 10px;*/
		}
		.invoice, .receipt {
			margin-top: 0;
			padding-left: 50px;
			padding-right: 50px;
			overflow: hidden;
		}
		a[href]:after {
		    content: none !important;
		  }
	}

/*************************************************/
/***		 			SJ					   ***/
/*************************************************/
	.sj-add-item-button {
		margin-top: 16px;
	}
/*************************************************/
/***	 			INVOICE					   ***/
/*************************************************/
	.invoice {
		position: relative;
		font-size: 12px;
		width: 100%;
	}
	.invoice .top-content {
		position: relative;
		display: block;
		height: 120px;
		font-weight: bold;
		font-family: sans-serif;
	}
	.invoice .header-info {
		position: absolute;
		right: 0;
		width: 30%;
	}
	.invoice .header-logo {
		position: absolute;
	}
	.invoice .header-logo .logo {
		font-size: 30px;
		line-height: 1em;
	}
	.invoice .header-info .invoice-info-container {
		display: block;
		border: solid #434343 2px;
		padding: 4px 8px;
		margin-bottom: 12px;
		width: 100%;
	}
	.invoice .invoice-info-container .info-label {
		display: inline-block;
		font-weight: bold;
	}
	.invoice .invoice-info-container .info-value {
		display: inline-block;
		right: 0;
		float: right;
	}
	.invoice .invoice-number {
		position: relative;
		font-weight: bold;
		padding: 4px 0px;
		font-size: 13px;
		font-family: sans-serif;
	}
	.invoice .invoice-table {
		width: 100%;
		display: block;
		position: relative;
		font-weight: bold;
		font-family: sans-serif;
	}
	.invoice .bordered-table {
		width: 100%;
	}
	.invoice .invoice-table-1 {
		width: 8%;
	}
	.invoice .invoice-table-2 {
		width: 5%;
	}
	.invoice .invoice-table-3 {
		width: 11%;
	}
	.invoice .invoice-table-4 {
		width: 37%;
	}
	.invoice .invoice-table-5 {
		width: 5%;
	}
	.invoice .invoice-table-6 {
		width: 17%;
		position: relative;
	}
	.invoice .invoice-table-7 {
		width: 17%;
		position: relative;
	}
	.invoice .sj-table-1 {
		width: 8%;
	}
	.invoice .sj-table-2 {
		width: 4%;
	}
	.invoice .sj-table-3 {
		width: 4%;
	}
	.invoice .sj-table-4 {
		width: 18%;
	}
	.invoice .sj-table-5 {
		width: 36%;
	}
	.invoice .sj-table-6 {
		width: 30%;
	}
	.invoice .invoice-table span.currency{
		position: absolute;
		left: 8px;
	}
	.invoice .invoice-table-empty td {
		height: 15px;
	}
	.invoice-grandtotal {
		font-size: 12px;
	}
	.invoice .invoice-grandtotal-number, 
	.invoice .invoice-grandtotal th{
		position: relative;
	}
	.invoice .sign-container {
		font-weight: bold;
		font-family: sans-serif;
		width: 30%;
		text-align: center;
	}
	.invoice .sign-container .greeting {
		margin-bottom: 80px;
	}
	.invoice .sign-container .greeting-left {
			
	}
	.invoice .sign-container .greeting-right {
		position: absolute;
		bottom: 0;
		right: 120px;
	}
	.invoice .sign-container .bracket {
		margin-top: 80px;
	}
/*************************************************/
/***	 			RECEIPT					   ***/
/*************************************************/
	.receipt {
		position: relative;
		width: 100%;
		font-family: sans-serif;
	}
	.receipt .box-logo {
		position: absolute;
		border: solid #434343 2px;
		display: inline-block;
		padding: 4px 16px;
	}
	.receipt .box-logo .logo {
		font-size: 26px;	
		line-height: 1em;	
	}
	.receipt .box-logo .sublogo {
		font-size: 12px;	
		line-height: 1.5em;	
	}
	.receipt .box-title {
		border: solid #434343 2px;
		display: inline-block;
		padding: 4px 40px;
		font-size: 16px;
		position: relative;
	}
	.receipt .box-title-top {
		border-bottom: solid #434343 1px;
	}
	.receipt .info-container {
		position: absolute;
		right: 0;
		top: 20px;
		width: 30%;
	}
	.receipt .info-item-container {
		border-bottom: solid #434343 1px;
		margin-bottom: 8px;
	}
	.receipt .info-item-container span {
		font-weight: bold;
		margin-left: 8px;
	}
	.receipt .receipt-content {
		margin-top: 30px;
		border: solid #434343 2px;
		padding: 8px;
	}
	.receipt .content-item {
		position: relative;
	}
	.receipt .receipt-label {
		width: 20%;
		position: relative;
		display: inline-block;
	}
	.receipt .receipt-value	{
		width: 70%;
		position: relative;
		display: inline-block;
		vertical-align: top;
		text-transform: uppercase;
		margin-left: 10px;
	}
	.receipt .receipt-label .top {
		border-bottom: solid #434343 1px;
	}
	.receipt .receipt-label .bottom {
		font-size: 12px;
		color: #8c95a3;
	}
	.receipt .receipt-grandtotal {
		margin-top: 48px;
		padding: 16px 0;
		border-top: double #434343 4px;
		border-bottom: double #434343 4px;
		display: inline-block;
		font-size: 16px;
		font-weight: bold;
	}
	.receipt .currency {
		margin-right: 180px;
	}
	.receipt .sign {
		font-weight: bold;
		right: 100px;
		position: absolute;
		margin-top: 60px;
	}
	.receipt .footnote {
		margin-top: 92px;
		font-size: 10px;
		border: solid #434343 1px;
	}

/*************************************************/
/*** 			PURCHASE PAGE				   ***/
/*************************************************/
	.finderBox{
		margin-top: 15px;
		margin-bottom: 30px;
	}


/*.partition{
height: 30px;
}*/