/* ==========================================================================
   COLORS
	header: #2b2e37
	subheader: #4f5f6f
 	
   FONTS:
   	headers: "pragmatica-web"
	body: "proxima-nova"
   ==========================================================================
*/
* { outline: 0; font-family:"proxima-nova", sans-serif; vertical-align:top;}
html, body { height: 100%; min-height: 100%; font-size: 100.25%; margin:0; padding:0; }

/* ==========================================================================
   BODY
   ========================================================================== */

body { background-color: #F4F4F8; color:#555; font-size: 14px; }


header.main { background-color: #2F3358; padding: 0; height: 75px;}
	header.main > nav { height: 75px; margin-left: 20px; overflow: hidden; }
	header.main > nav a span { display: inline-block; margin-left: 25px; font-size: 11px; line-height: 21px; }
	.logo { width: 80px; display: block; height: 72px; margin: 0px 0 0 0; }
	nav .selected { color: #fff; background-color: #5D62B6;}
	nav a { display: inline-block; text-decoration: none; font-size: 14px; color: #fff; padding: 9px 20px; margin-top: 19px; border-radius: 3px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);}

	.profile-picture { width: 30px; display: inline-block; height: 30px; background-color: #FF9B00; border-radius: 50%; padding: 5px; text-align: center; color: #fff; font-size: 12px; line-height: 31px; font-weight: bold; }
	.profile .icon-cog {font-size: 25px; color: #fff; display: inline-block; vertical-align: middle; line-height: 40px; }
	.profile { padding: 17px 15px 17px 30px; background-color: rgba(255, 255, 255, 0.08); }

.profile.right {}
	.profile .name, .company .name {  color: #fff; line-height: 41px;  margin-right: 10px; font-size: 12px; font-weight: bold;   vertical-align: middle;}
		.profile .name .icon-down-open { margin-right: 13px; font-size: 10px; }
	
	.company { padding: 17px 15px 17px 15px; background-color: rgba(255, 255, 255, 0.04); height: 42px; }
	.company .icon-down-open { line-height: 42px; display: inline-block; color: #fff; margin-right: 13px;  font-size: 10px; }

/* ==========================================================================
   PANELS (floating ones, normal, anykind)
   ========================================================================== */

	/*Real modal.modal { box-sizing: border-box; position: absolute; width: 100%; top: 3%; background-color: #FFFFFF; padding: 30px; max-width: 97%; left: 1.5%; z-index: 600; border-radius: 3px; box-shadow: 0 2px 15px -5px #000;}*/
	.modal { box-sizing: border-box; position: absolute; width: 100%; top: 0; background-color: #F4F4F8; padding: 0px; max-width: 100%; left: 0; z-index: 600; box-shadow: 0 2px 15px -5px #000; min-height: 100%; -webkit-transform: translate3d(0, 0, 0);}
	.modal header h1 { font-size: 19px; margin: 0; color: #2C2F3A; font-weight: normal;}
	.modal header h2 { font-size: 15px;  margin: 0;  color: #4B4C54;  font-weight: normal;  font-family: "pragmatica-web"; }
	
	.modal.window { width: 400px; min-height: 180px; top: 40%; left: 50%; margin: -90px -200px; border-radius: 3px; overflow: hidden; z-index: 650;}
    	.modal.window main { padding: 10px 20px; }
    	.modal.window footer { padding: 0 20px 20px; text-align: right; }

	#overlay, #overlay-form { position: fixed; background-color: rgba(47, 51, 88, 0.85); width: 100%; height: 100%; display: block; z-index: 500; top: 0; }
		#overlay-form { z-index:600; }

		#HistoryData { width: 500px; margin: -250px; min-height: 500px; }
		
/* ==========================================================================
   TABLE
   ========================================================================== */
.table, table { padding: 15px 0;}
.table header .row > div, .table header .col { font-weight:bold ; cursor: pointer; font-size: 12.5px;}
	.table header .row { background-color:#fff; padding: 20px 30px; border-bottom: 1px solid #F1F1F5; box-sizing: padding-box; text-transform: uppercase; color: #A6A9B8;}
	.table header .selected {color: #000106;}
		.list-order span { font-size: 9px; display: inline-block; line-height: 18px; margin: 0 7px 0 5px; width: 10px; height: 10px;}
		
		.table header .overflow-box .selected { color: #fff; }
		.table header .row paper-input { text-transform: none;}
		.table.contained header select { border: 0px; margin-left: 50px; font-weight: bold;   font-size: 12.5px; text-transform: uppercase;}
		.select-list span { margin: 0 0 0 20px; }

.table .row { padding: 20px 30px; transition: 200ms ease background;}
	.table main .row > div { color: #1F222B;}
	.table main .row > div.right { margin-top: -7px; }
	.row.pointer:hover { background-color: #D0D3FF; color: #FFF;}
	.row.sum { padding: 10px 20px; background-color: #F7F7F7 !important; color: #91989E;}
		.row.sum span { display: inline-block; }

	.table.col-block main .row { padding: 0px 30px; }
	.table.col-block .row > div { padding: 20px 0; }

    .selectable.table .row.selected { background-color: #7379C8; color: #FFF; }
    .selectable.table .row.selected div, .selectable.table .row.selected .icon-holder { color: #F6F6FB; }

.row > div, .row .col { display: inline-block;  padding: 0; font-size: 14px;}
	.row:nth-child(even) { background-color: #F4F4F8; }
	.row:nth-child(odd):not(.row) { background-color:#fafafa; }
	.list .row { margin-left: 0; border-top: 0 !important; border-bottom: 1px solid #F1F1F5;}
		.list .row > span { color: #4B4F66;  border: solid #E4E4E4;  border-width: 0 1px 0 0; padding: 5px 10px;  font-size: 15px; width: 152px; display: inline-block; text-align: left; margin-right: -4px; overflow: hidden; box-sizing: border-box; }
			.list .row span input[type='text'] { width: 100%; border: 0; height: 100%; background-color: transparent; padding: 5px 0px;}
.contained { margin: 20px; border-radius: 3px; padding: 1px; background-color: #FFF; /* overflow: hidden; */ }
	
	.row.paddingless {padding: 0; }
	.row.compact { padding: 10px; }
		.row.compact.selected { background-color: #D0D3FF; }
		.compact input[type="text"] { width: 70%; border: 0; background-color: transparent;}
    
    .row.compact .overline { width: 100%; height: 1px; position: absolute; border-bottom: 1px solid #8A8EB1; margin: 8px -10px; }

	.table.compact .row { padding:0px; }
    	.table.compact {padding: 0; border-radius: 3px;overflow: hidden;}
	.row.invoice-input { padding: 0; border-top: 1px solid #F1F1F5; }
		.invoice-input.selected { background-color: #D0D3FF; }
		
	.table .profile-picture { margin:-11px -8px; }
	.scroll { position: relative; margin: 0px auto; padding: 0px; overflow: hidden; }
    
    .table .note { margin: -15px 0; height: 48px; }
        .table .note input { border: 0; height: 45px; background: transparent; padding: 10px 0 5px; width: 100%;}

/* ==========================================================================
   HEADINGS
   ========================================================================== */

h1 {
    color: #0398c3;
    font-family:"pragmatica-web";
    font-weight: normal;
    font-size: 25px;
    margin: 30px 30px 0;
}

h2 { font-size: 15px; font-weight: normal; margin: 0 20px -5px; display: block; color: #BABABA; text-shadow: 0 1px #FFF; }

/* ==========================================================================
   HIGHLIGHTS - highlighted elements
   ========================================================================== */
	.button.highlight { background-color: #676D9C; border-color: #676D9C; }


/* ==========================================================================
   SUMS
   ========================================================================== */
.floating-sum { position: absolute; margin: -39px -3px; border: 1px solid #E4E4E4; background-color: #fff; border-width: 1px 0 0 1px; padding: 10px !important; width: 70px; text-align: left; font-size: 13px !important; }


#login { background-color: #2F3358; height: 100%; width: 100%;}
#login .logo { background-image: url('../images/logo-login.png'); display: block; background-size: cover; width: 180px; height: 185px;}
#login .userpass-holder { margin: 40px 0; }