/*/////////////////
// Base-Elements //
/////////////////*/

html { scroll-behavior: smooth; }
body { margin: 0 15px 0 210px; background: url('../img/stripes-light.png'); transition: 0.5s; }
header { position: fixed; width: 200px; background: #171717; top: 0px; bottom: 0px; left: 0px; font-family: 'Fjalla One', sans-serif; transition: 0.5s; z-index: 1; overflow: hidden; }
footer { position: fixed; bottom: 0px; left: 200px; background-color: #21456b; padding: 5px; right: 0px; font-family: 'Fjalla One', sans-serif; color: white; font-size: 0.75em; transition: 0.5s; }
.fspace { height: 25px; }
h2 { color: white; background-color: #21456b; margin: 0 -15px 40px -15px; font-weight: 400; padding: 5px; font-family: 'Fjalla One', sans-serif; }
h3 { padding: 0; margin: 0; font-style: italic; font-size: 1.2em; border-bottom: 2px solid #1f8dd6; font-family: 'Fjalla One', sans-serif; }

table {border: 1px solid #EAEAEA; background-color: #F9F9F9; width: 100%; text-align: left; margin: 5px auto 20px auto; }
table td, table th { border: 1px solid #5B5B5B; padding: 3px 2px;}
.nthtbl tr:nth-child(even) { background: #DEDEDE9e; }
table thead { 
	background-image: linear-gradient(#0c79cf, #21456b);
    border: 1px solid #0077CC;
    border-radius: 4px;
    color: white;
    font-family: 'Fjalla One', sans-serif;
 }
table thead th { font-weight: bold; color: #FFFFFF; text-align: left; }

#pdf_content { height: calc(100vh - 100px); }

a, a:visited { color: #1f8dd6; }

.table { margin-bottom: 20px; }

tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: #d4e9f7; }

label { font-weight:bold; width:90px; font-size:14px; display: inline-block; }
select { padding: 1px; height: 27px;  }
select option { font-family: "Courier New", Courier; }
input:disabled { opacity: 0; }
.inline { display: inline-block; }

.ttt { float: right; }
.ttt a { color: white; text-decoration: none; }

.bold { font-weight: bold; }
.center { text-align: center; }
.clear { clear: both; }
.errorbox { margin: 5px 0 -5px 0; color: red; font-size: 0.75em; text-align: center; }
.exists { color: red; }
.logo { margin: 0; padding: 0; height: 200px; width: 200px; transition: 0.5s; }
.logo img { transition: 0.5s; }
.nc { pointer-events: none; }
.ni { pointer-events: none; background: #d2d2d2; }
.not-exists { color: green; }
.right { text-align: right; }
.w50 { width: 50%; display: inline-block; }
.warning { font-weight: bold; color: red; }

.sj { 
	border-radius: 5px; 
	margin: 10px; 
	background-color: #e0e0e0; 
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch
}

.sj h2 {
	flex-shrink: 1;
    flex-grow: 1;
    width: 100%;
	height: 30px;
}

.sj label {
	font-weight: 400;
    padding-left: 2px;
    font-family: sans-serif;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	align-items: center;
	margin: 3px;
}

.sj h2, .inv-total-left h2, .inv-total-right h2, .inv-total h2 { margin: 0 0 5px 0; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }

.fr { float: right; width: 100px; }
.fl { display: inline-block; }
.fw { flex-shrink: 1; flex-grow: 1; margin: 3px; }

/* .hw { width: 49%; }
.hwl { width: 49%; float: left; } */

.hw, .hwl {
	flex-basis: auto;
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    align-self: auto;
    order: 0;
	margin: 3px;
}

.no-flex {
	display: block !important;
}

.no-flex h2 {
	margin: 0 !important;
	padding: 5px 0 5px 0 !important;
}

.w65 { width: 70%; float: right; }
.short2 { width: 30px; height: 24px; float: right; }

.hidden { display: none; }
.tsp { background-color: transparent; }

.idnum { width: 75px; }
.invdate { width: 150px; text-align: center; }
.ta-center {text-align: center;}

.notes { width: calc(100% - 6px); outline: none; resize: none; overflow: auto; }
.note { padding: 0px; }

.btn_left { padding: 5px; float: left; text-align: right; width: calc(50% - 10px); }
.btn_right { padding: 5px; float: right; text-align: left; width: calc(50% - 10px);}
.btn_right input { float: left; }
.dnote { background-color: white; border: 1px solid rgb(169, 169, 169); padding: 5px; margin: 0 0 4px 0; }
.dnote p { margin: 2px 0 0 8px ; padding: 0px; }
.dvis { border: 1px dashed black; }
.adt { font-style: italic; font-weight: bold; color: green; font-size: 0.9em; }

.ico_s { height: 20px; width: 20px; }
.remnote .ico_s { float: right; }

.fltc { width: 100%; text-align: center; margin-bottom: 5px; }
.fltc span a { padding: 1px 6px; text-decoration: none; color: black; -webkit-appearance: button; }
.fltc span { margin: 0 2px; }
.pagenum { border: 1px solid black; margin: 3px; padding: 2px; background-color: #1f8dd6; }
.pagenum a, .pagenum a:active, .pagenum a:hover, .pagenum a:visited { font-weight: bold; color: white; text-decoration: none; }
.pagenum:hover { background-color: grey; }

/*//////////////
//    Menu    //
//////////////*/

.pure-menu-heading { color: #ffffff; background: #007cff; text-transform: normal; font-size: 1em; }
.pure-menu-link, .pure-menu-link:visited { color: white; font-size: 0.9em; }
.pure-menu-link:hover, .pure-menu-link:focus { text-decoration: none; background: #464646; }
.pure-menu-link, .pure-menu-heading { padding: .2em 1em; }


/*//////////////
// Login Page //
//////////////*/

.forgot { font-size: 0.75em; text-align: center; margin: 15px 0 -5px 0px; }
.lg { text-align: center !important; width: 100% !important; }
.login_box h3, .signup_box h3, .newticket_box h3 { padding: 2px; text-align: center; font-weight: 400; color: white; background: #1f8dd6; margin: -5px -5px 5px; font-family: 'Fjalla One', sans-serif;}
.login_box { margin-right: 25px; }
.login_box, .signup_box { width: 218px; float: left; border: 1px solid black; padding: 5px; background: #e2e2e2; }
.login_portal { margin: 0 auto 0 auto; width: 485px; }
.logo_block { text-align: center; }

/*/////////////////
// Account Pages //
/////////////////*/

#form { border-radius: 5px; border: 1px solid #afafaf; background-color: #e8e8e885; }
.response { margin: -14px 0 0 calc(10em + 33% + 29px); width: 216px; }

/*/////////////////
// Form Elements //
/////////////////*/

label { font-family: 'Fjalla One', sans-serif; }
option:disabled { background: #1f8dd6; color: white; font-family: 'Fjalla One', sans-serif; font-size: 1.1em; }
textarea { height: 125px; }
fieldset { border: none; margin: 0; padding: 0; }
table .p_del fieldset { display: inline-block; float: left; }
.remnote fieldset { display: inline-block; float: right; }
.fsbtn { display: inline-block; }
.tac { text-align: center; }

.pure-control-group:nth-child(odd) { background-color: #dedede9e }
.pure-form-message-inline { margin-top: -12px; }
.pure-form-message-inline { width: 33%; }

/*//////////////////
//  Job Priority  //
//////////////////*/

.Emergency { background-color: red; }
.Urgent { background-color: yellow; }
.Normal { background-color: #27ff00; }
.Waiting { background-color: #61a7ff; }
.NoPrio { background-color: white; }

.schedule { display: inline-block; width: 100%; }
.schedule a { color: black; }

/*//////////////////
// Lost User/Pass //
//////////////////*/

#SecurityQuestion, #SecurityAnswer { display: none; }

/*////////////////
// Ticket Pages //
////////////////*/

.newticket_box { border: 1px solid black; padding: 5px; background: #e2e2e2; margin-top: 20px; }

.t_author { width: 125px; }
.t_issue { width: 40%; }
.t_lu { width: 20%; }
.t_status { width: 15%; }
.t_subject { width: 15%; }
.ti_author, .ti_date { float: left; }
.ti_body p { display: block; padding: 5px; clear: both; margin: 0;}
.ti_body { border-radius: 5px; margin: 5px 0 15px 0; padding: 5px; border: 1px solid black; }
.ti_date { margin-left: 5px; }
.ti_del { float: right; }
.ti_info_bar { border-radius: 5px; border: 1px solid black; padding: 5px; }
.ti_response { margin-left: 55px; }
.ti_subject, .ti_id { margin-left: 20px; }

/*////////////////
// Customers Page //
////////////////*/

.ct_bar { float: left; text-align: left; font-weight: bold; padding: 0 0 15px 0px; }

.dt_bar { float: right; text-align: center; font-weight: bold; margin-bottom: 7px; display: flex; flex-wrap: wrap ;}

/*//////////////
//  Invoices  //
//////////////*/

.ico_l { float: left; margin-left: -25px; }
.ico_sub { width: 20px; height: 20px; float: left; padding: 0 3px; }

.p_button { margin-left: auto; margin-right: auto; display: block; }
.p_desc { width: calc(100% - 52px); }
.p_del { text-align: center; width: 52px; }
.p_tax { text-align: center; width: 100px; }
.p_total { text-align: center; width: 130px; }
.p_cost { text-align: center; width: 130px; }
.p_qty { text-align: center; width: 130px; }
.p_date { text-align: center; width: 234px; }
.p_method { text-align: center; }

.block { display: block; margin: auto; border: 0px; }

.flink { float: right; margin-top: -40px; line-height: 40px; }

.total-table { width: 350px !important; }
.total-table-pdf { width: 40%; float: right; }

.inv-total { float: right; width: 350px; padding: 8px; border-radius: 5px; background-color: #e0e0e0; }
.inv-total-left, .inv-total-right { float: left; width: calc(50% - 209px); margin-right: 10px; padding: 8px; border-radius: 5px; background-color: #e0e0e0; }
.inv-total-left h2, .inv-total-right h2, .inv-total h2 { font-size: 1em; }

/*//////////////
//  Reports   //
//////////////*/

.repp { width: 120px; text-align: right; padding: 0 5px 0 0; }
.repc:before { content: "$"; float: left; padding: 0 0 0 5px; }

.idnum:before { content: "#"; float: left; padding: 0 0 0 5px; }
.idnum { text-align: right; padding: 0 5px 0 0; }
tfoot, .cust_totals { border-top: 3px solid black; }

.tr-noborder { font-weight: 700; border-bottom: 3px solid black; }

/*//////////
// Backup //
//////////*/

#progress{
	height:50px;
	background-color: green;
}

#progressBar{
	height: 50px;
	background-color: grey;
}

.backups tr{
	height: 44px;
}

/*////////////////
// Inputs New   //
////////////////*/

input[type=submit], input[type=file]::file-selector-button, .fakeBtn {
	font-family: 'Fjalla One', sans-serif;
    padding: 6px 15px;
    color: white;
    background-image: linear-gradient(#0c79cf, #21456b);
    border: 1px solid #0077CC;
    border-radius: 4px;
}

input[type=submit]:hover, input[type=file]::file-selector-button:hover, .fakeBtn:hover {
    background-image: linear-gradient(#42A1EC, #0070C9);
}

.fakeBtn, .fakeBtn:visited {
	text-decoration: none;
	font-weight: 400;
	color: white !important;
	margin: 0 10px 5px 0;
}

/*////////////////
// Image Upload //
////////////////*/


  

#uploadForm{
	border: 2px solid #1f8dd6;
    border-radius: 10px;
    padding: 5px;
}

#uploadedImagesHeader{
	margin: 10px 0 10px 0;
}

#uploadedImagesContainer
{
	margin: 10px 0 0 0;
}

.image-container {
    position: relative;
    display: inline-block;
    margin: 10px;
}

.image-container img{
    max-width: 300px;
    max-height: 200px;
	border: 2px solid #21456b;
}

.delete-image {
	position: absolute;
    bottom: 4px;
    right: 0;
    background-image: linear-gradient(#ec4242, #c90000);
    color: white;
    padding: 6px 20px;
    cursor: pointer;
    border-top: 1px solid #af0000;
    border-left: 1px solid #af0000;
    border-radius: 10px 0 0;
    font-family: 'Fjalla One';
    opacity: 0.8;
}

/*//////////////
// Edit Users //
//////////////*/

table.users th { text-align: center; }
table.users td { text-align: center; }

.a_role { font-family: mono-space; text-align: left !important; }
.permission {  width: 50px; display: inline-block; text-align: center; border: 1px solid black; color: white; background-color: #1f8dd6; font-family: monospace; letter-spacing: 4px; margin-right: 5px; }


/*///////////////
// Config Page //
///////////////*/

.src_control { margin: 0; width: 100%; height: 500px; color: #1f8dd6; background: #3b4646; resize: none; font-family: "Courier New", Courier; }
.s_custs, .s_phonet { height: 100px; }
.s_paid, .s_menu, .s_menu_create, .s_menu_view, .s_menu_user, .s_menu_admin { height: 115px; }
.s_jobt, .s_invs, .s_status { height: 80px; }
.s_tax, .s_bans { height: 60px; }
.s_subjects { height: 295px; }
.s_config { height: 800px; }
.cform { margin-bottom: 10px; }

/*///////////////
// Responsive  //
///////////////*/

.mtoggle { float: right; cursor:pointer; height: 75px; width: 75px; background: #21456b; margin: 0 -5px 5px 5px; font-size: 40pt; text-align: center;}



@media only screen and (min-width: 1921px) {
	html { font-size: 100%; }
}

@media only screen and (max-width: 1280px) {
	html { font-size: 90%; }
}

@media only screen and (max-width: 853px) {
	html { font-size: 80%; }
	.logo { height: 34px; }
	.logo img { display: none; }
	.row { display: block; flex-wrap: nowrap; margin: auto; }
	.fw { width: 99.3%; }
	.hwl, .hw { width: 49.6%; }
	.hide_s { display: none; }
	.inv-total-left, .inv-total-right { width: calc(100% - 16px); float: none; margin-top: 20px; }
	.inv-total { float: none; margin: 20px auto 0 auto; }
	.p_del, .p_total, .p_tax, .p_date { width: auto; }
	.p_cost, .p_qty { width: 60px; }
	.p_desc { width: 99%; }
}

@media only screen and (max-height: 723px) {
	
	header { overflow: scroll; }
	.row { display: block; flex-wrap: nowrap; margin: auto; }
	.fw { width: 99.3%; }
	.hwl, .hw { width: 49.6%; }
	
	
}

@media screen and (max-width: 1150px) {
	header { width: 0; }
	body { margin: 0; }
	h2 { margin: 0 0 51px 0; }
	footer { left: 0; }
	.pure-control-group label { width: 90px !important; }
}

@media print {
	#header { display: none; }
	h2 { display: none; }
	form { display: none; }
	body { margin: 0; }
	html { font-size: 75% !important; }
	thead { display: none; }
	footer { display: none; }
	table td { border: none !important; }
	.cust_totals { border-top: 1px solid black; }
}