#error-text
{
	position: relative;
	text-align: center;
	font-size: 80px;
	font-weight: bold;
	color: #444;
	letter-spacing: 5px;
	text-shadow: 5px 5px 10px #ccc;
	line-height: 1.2;
	margin-top: 60px;
}

#error-text p
{
	margin-top: 30px;
}
/*////////////////////////////////////////////////////////////////////////////////////////*/
html
{
	height: 100%;
}

body
{
	min-width: 800px;
	position: relative;
}

.arrow-small
{
	display: block;
	position: absolute;
	z-index: 5;
	top: 50%;
	margin-top: -4px;
	width: 11px;
	height: 8px;
	background: url(/images/arrow-small.png) no-repeat center;
}

.stylish-btn
{
	display: inline-block;
	background-color: #fa6f57;
	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	color: #fff;
	border: 0;
	border-radius: 2px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	text-decoration: none;
	padding: 8px 22px 12px 22px;
	height: 16px;
	cursor: pointer;
}

.stylish-btn:hover
{
	color: #fff;
	text-decoration: none;
}

#logo-black
{
	position: relative;
	width: 238px;
	height: 52px;
	background: url(/images/logo-black.png) no-repeat center;
	left: 50%;
	margin: 160px 0 45px -152px;
}

#logo-white
{
	position: relative;
	width: 146px;
	height: 31px;
	background: url(/images/logo-white.png) no-repeat center;
}

#login-form #username,
#login-form #password
{
	position: relative;
	display: block;
	width: 304px;
	height: 46px;
	padding: 0 17px;
	border: 1px solid #e0dcdb;
	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	color: #5e5b5b;
	left: 50%;
	margin-left: -152px;
}
.button-large {
	width: 100%;
	height: 48px;
	background-color: #fa6f57;
	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	color: #fff;
	border: 0;
	border-radius: 2px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	text-decoration: none;
	padding: 8px 22px 12px 22px;
	cursor: pointer;
}
#login-form #outer-login-btn
{
	position: relative;
	height: 48px;
	width: 161px;
	left: 50%;
	margin-left: -152px;
	margin-top: 20px;
}

#login-form #login-btn
{
	width: 161px;
	height: 48px;
}

#login-form #outer-login-btn .arrow-small
{
	margin-left: 22px;
}

header
{
	position: relative;
	padding: 13px 60px 17px 60px;
	background-color: #333332;
	box-shadow: 0 5px 5px rgba(1, 1, 1, 0.26);
	margin-bottom: 15px;
}

#change-company
{
	position: absolute;
	top: 50%;
	margin-top: -19px;
	left: 240px;
}

#change-company a
{
	box-shadow: 0 0 0;
	background: #d3cfcc;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	color: #333332;
	padding: 8px 16px;
}

#change-company a.active
{
	background: #f3efec;
}

#hello
{
	position: absolute;
	right: 215px;
	top: 50%;
	margin-top: -10px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	color: #fa6f57;
}

#logout
{
	position: absolute;
	right: 60px;
	padding: 8px 40px 12px 22px;
	top: 50%;
	margin-top: -18px;
	text-decoration: none;
}

#logout .arrow-small
{
	right: 17px;
}

#main-menu
{
	padding: 0 10px;
	margin: 0;
}

#main-menu a
{
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	color: #fa6f57;
}

#main-menu li.active a
{
	font-weight: 700;
	background: #EEEDFF;
}

#content
{
	position: relative;
	padding: 20px 10px;
}

#company-name
{
	position: relative;
	margin: 0;
}

#company-owners
{
	position: relative;
	margin: 5px 0;
}

#outer-warnings
{
	position: relative;
	display: inline-block;
	min-width: 500px;
	width: 50%;
}

.warnings
{
	position: relative;
	border: 2px solid #ddd;
	border-radius: 10px;
	padding: 10px 14px 0;
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 308px;
	margin-bottom: 15px;
	margin-top: 10px;
}

#statistic
{
	top: 10px;
	position: relative;
	min-width: 472px;
	width: 50%;
	border: 2px solid #ddd;
	border-radius: 10px;
	padding: 0 14px 5px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.statistic
{
	float: left;
	position: relative;
	padding: 0 25px 10px 0;
}

.warning-block {
	position: relative;
	margin-top: 40px;
}

.warning-block-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.warning-block-header h4 {
	margin: 0;
}

.badge
{
	z-index: 2;
}

.warning
{
	position: relative;
	border-radius: 5px;
	margin-bottom: 15px;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 0 5px #888888;
}

.warning.red
{
	background-color: #EF6F6F;
}

.warning.orange
{
	background-color: #EDB952;
}

.warning.yellow
{
	background-color: #EEF47F;
}

.record h5
{
	margin: 0;
}

#activities
{
	padding: 5px 0 5px 5px;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 250px;
	border-left: 2px solid #ddd;
	background-color: #F2FCFF;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#activities h4
{
	margin: 3px 0;
}

#activities #records
{
	border-top: 1px solid #BDDDE9;
	overflow-y: scroll;
	overflow-x: hidden;
	height: calc(100% - 25px);
	-webkit-height: calc(100% - 25px);
}

#records .record
{
	position: relative;
	width: calc(100% - 7px);
	-webkit-width: calc(100% - 7px);
	padding: 5px;
	border-bottom: 1px solid #BDDDE9;
}

.record .action
{
	margin: 0;
	line-height: 1;
}

.record .time
{
	position: relative;
	margin-top: 5px;
	margin-bottom: 0;
	font-size: 12px;
}

table.center, ul.center
{
	position: relative;
	margin: 0 auto;
}

div.center
{
	text-align: center;
}

table.center tr:last-child
{
	text-align: center;
}

.table
{
	margin-top: 20px;
}

form
{
	margin: 0;
}

.table tr
{
	background-color: #f3efec;
	font-family: 'Oxygen', sans-serif;
	font-size: 14px;
	border-top: 1px solid #ddd;
}

.table tr:last-child
{
	border-bottom: 1px solid #ddd;
}

.table-hover tbody tr:hover>td
{
	background-color: #fff;
}

.table thead tr
{
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	font-weight: 700;
	background-color: #fff;
}

.table thead th, .table thead td
{
	border-right: 1px solid #ddd;
}

.table thead td:last-child
{
	border: 0;
}

.table thead th
{
	cursor: pointer;
	background: url(/images/table-sort.png) no-repeat center right;
}

.table thead th.headerSortUp
{
	background: url(/images/table-sort-up.png) #fa6f57 no-repeat center right;
}

.table thead th.headerSortDown
{
	background: url(/images/table-sort-down.png) #fa6f57 no-repeat center right;
}

.table i
{
	margin-right: 7px;
	cursor: pointer;
}

.table a
{
	text-decoration: none;
}

.table .activity-col
{
	width: 20px;
	padding: 8px 20px;
}

#legend .active, #legend .paid
{
	background-color: #f3efec;
}

#legend .inactive, #legend .overdue,
.activity-col div.inactive, .activity-col div.overdue
{
	background-color: #5e5b5b;
}

#legend .sent, #legend .soon-expires,
.activity-col div.sent, .activity-col div.soon-expires
{
	background-color: #49a776;
}

#legend .expires-today,
.activity-col div.expires-today
{
	background-color: #fa6f57;
}

#legend .new,
.table div.new
{
	background-color: #3DC3CD;
}

#legend .deleted,
.table div.deleted
{
	background-color: rgb(250, 87, 87)
}

#legend
{
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #a3a3a3;
	position: absolute;
	top: 27px;
	right: 10px;
}

#legend td
{
	padding-right: 10px;
}

#legend div, .activity-col div
{
	width: 20px;
	height: 20px;
	border-radius: 20px;
}

#legend div
{
	margin-left: 15px;
}

label
{
	font-weight: bold;
}

table label
{
	text-align: left;
}

input[type="checkbox"]
{
	margin-top: -5px;
}

.input-prepend input
{
	width: 179px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-prepend .add-on
{
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.required:before
{
	content: "* ";
	color: red;
}

.scroll-block
{
	position: relative;
	width: 500px;
	left: 50%;
	margin-left: -250px;
	margin-bottom: 20px;
}

.scroll-block-objects
{
	position: relative;
	width: 380px;
	margin: 0;
	left: 10px;
	display: inline-block;
	top: -10px;
}

.scroll-block-objects h4
{
	margin-top: 0;
}

.scroll-block  td:first-child
{
	width: 227px;
}

.scroll-block table, .scroll-block-objects table
{
	margin: 0;
}

#clients, #objects
{
	overflow-y: scroll;
	height: 370px;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom-left-radius: 6px;
}

#objects
{
	height: 551px;
}

.scroll-table tr
{
	cursor: pointer;
}

.scroll-table tr.selected
{
	background-color: #31B404;
	color: #fff;
}

#data
{
	position: relative;
	text-align: center;
	width: 420px;
	font-size: 16px;
}

#data a
{
	position: relative;
	margin-top: 15px;
}

#add-new-client
{
	display: block;
	position: relative;
	top: 15px;
	width: 94px;
	margin: 0 auto;
}

#client-error, #object-error
{
	position: relative;
	top: 15px;
	color: red;
}

#invoices-table-form
{
	margin: 0;
}

#invoices-table-form input[type="submit"]
{
	position: absolute;
	top: 66px;
	left: 564px;
}

#btns-group
{
	margin: 10px 0;
}

input.error
{
	background-color: #F8E0E0;
	border: 1px solid #FE2E2E;
}

#bg
{
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000000;
	opacity: 0;
}

#waiting
{
	position: fixed;
	z-index: 101;
	left: 50%;
	width: 350px;
	margin-left: -175px;
	top: 50%;
	margin-top: -60px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.circle
{
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	border-right:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 35px #2187e7;
	width:50px;
	height:50px;
	margin:0 auto;
	-moz-animation:spinPulse 1s infinite ease-in-out;
	-webkit-animation:spinPulse 1s infinite linear;
}
.circle1
{
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	border-left:5px solid rgba(0,0,0,0);
	border-right:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 15px #2187e7;
	width:30px;
	height:30px;
	margin:0 auto;
	position:relative;
	top:-50px;
	-moz-animation:spinoffPulse 1s infinite linear;
	-webkit-animation:spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse
{
	0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
	50% { -moz-transform:rotate(145deg); opacity:1; }
	100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse
{
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse
{
	0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
	50% { -webkit-transform:rotate(145deg); opacity:1;}
	100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse
{
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}

#user-companies
{
	position: relative;
	margin-bottom: 10px;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 8px 8px 0px 8px;
	min-height: 36px;
	width: 312px;
}

#user-companies .company
{
	position: relative;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 1px 4px;
	margin: 0 10px 10px 0;
	background-color: #fff;
}

#user-companies .delete
{
	cursor: pointer;
	position: absolute;
	color: red;
	top: 0px;
	right: 0px;
	margin-top: -10px;
	margin-right: -5px;
}

#scroll-top
{
	position: fixed;
	padding: 12px 8px 10px;
	right: 10px;
	bottom: -30px;
	background-color: #000;
	opacity: 0.4;
	color: #fff;
	font-weight: bold;
	border-radius: 10px;
	cursor: pointer;
	font-size: 20px;
	transition: border-radius 0.5s, opacity 0.7s;
}

#scroll-top:hover
{
	opacity: 0.6;
	border-radius: 20px;
}

div.saved
{
	background: #81F781;
	border: 1px solid #088A08;
	border-radius: 5px;
	line-height: 25px;
	margin-bottom: 10px;
	width: 220px;
	margin: 0 auto 10px;
}

#search-form
{
	margin: 10px 0 -10px;
}

#search-form div
{
	float: left;
	margin-right: 20px;
}


.tableFloatingHeaderOriginal a{
	display: block;
	height:  100%;
	width:  100%;
}

ul.pagination {
	display: inline-block;
	padding: 0;
	margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
	color: black;
	transition: background-color .3s;

	float: left;
	padding: 8px 16px;
	text-decoration: none;
}
ul.pagination li a:hover {
	background-color: #fa6f57;
	color: #FFFFFF
}

ul.pagination .active a{
	background-color: #fa6f57;
	color: #FFFFFF
}

ul.pagination .disabled{
	display: none;
}


.main-login-form {
	display: flex;
	gap: 12px;
}
.button-element {
	position: relative;
}

#forgot-password-form div {
	display: flex;
	gap: 10px;
	align-items: center;
}

#forgot-password-form div input {
	margin: 0;
}

#site-reset-password {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.fill-email-banner {
	background-color: #d85252;
	color: white;
	text-align: center;
	padding: 10px;
	height: 20px;
}

.fill-email-banner a {
	color: yellow;
	text-decoration: underline;
}

#email-form-container input, 
#email-form-container textarea {
	width: 500px;
}

#email-form-container textarea { height: 200px; }

.invoice-edit form label {
	width: 120px;
}

/* Utility classes */
.flex {
	display: flex;
}

.flex-column {
	flex-direction: column;
}

.justify-center {
	justify-content: center;
}

.align-center {
	align-items: center;
}

.align-top {
	align-items: flex-start;
}

.align-bottom {
	align-items: flex-end;
}

.w-500 {
	width: 500px;
}

.w-200 {
	width: 200px;
}

.w-100 {
	width: 100px;
}

.w-50 {
	width: 50px;
}

.gap-10 {
	gap: 10px;
}

.gap-50 {
	gap: 50px;
}

.margin-0 {
	margin: 0;
}

.mb-10 {
	margin-bottom: 10px;
}


.table-centered thead th {
    text-align: left;
}
.table-centered tr tbody {
	display: flex;
	justify-content: center;
	align-items: center;
}

.table-centered td input {
	margin: 0;
}
table.column-spacing-10 td {
	padding: 0 10px;
}


hr {
	margin: 5px 0;
}

#flash-messages {
    position: fixed;
    bottom: 50px;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    width: 100%;
    justify-content: center;
}
.alert {
	padding: 10px;
}

input[type="decimal"] {
	display: inline-block;
    height: 20px;
    padding: 4px 6px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
}