@import "compass/css3";

* { box-sizing: border-box; }

body {
	font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  color:white;
  font-size:12px;
  background:#333 url(/images/classy_fabric.png);
}

form {
 	background:#111; 
      width: 100%;
    max-width: 300px;
  margin:30px auto;
  border-radius:0.4em;
  border:0px solid #191919;
  overflow:hidden;
  position:relative;
  /*box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);*/
}

form:after {
  content:"";
  display:block;
  position:absolute;
  height:0px;
  width:100px;
  left:20%;
  background:linear-gradient(left, #111, #444, #b6b6b8, #444, #111);
  top:0;
}

form:before {
 	content:"";
  display:block;
  position:absolute;
  width:8px;
  height:5px;
  border-radius:50%;
  left:34%;
  top:-7px;
  box-shadow: 0 0 6px 4px #fff;
}

.inset {
 	padding:20px; 
  border-top:1px solid black;
}

form h1 {
  font-size:24px;
  text-shadow:0 1px 0 black;
  text-align:center;
  padding:15px 0;
  border-bottom:1px solid rgba(0,0,0,1);
  position:relative;
}

form h1:after {
 	content:"";
  display:block;
  width:250px;
  height:100px;
  position:absolute;
  top:0;
  left:50px;
  pointer-events:none;
  transform:rotate(70deg);
  background:linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
}

label {
 	color:#55;
  display:block;
  padding-bottom:9px;
}

input[type=text],
input[type=email],
input[type=password] {
 	width:100%;
  padding:8px 5px;
  background:linear-gradient(#1f2124, #27292c);
  border:1px solid #222;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1);
  border-radius:0.3em;
  margin-bottom:20px;
	color:white;
}

label[for=remember]{
 	color:white;
  display:inline-block;
  padding-bottom:0;
  padding-top:5px;
}

input[type=checkbox] {
 	display:inline-block;
  vertical-align:top;
}

.p-container {
 	padding:0px 20px 20px 20px; 
}

.p-container:after {
 	clear:both;
  display:table;
  content:"";
}

.p-container span {
  display:block;
  float:left;
  color:#0d93ff;
  padding-top:8px;
}

input[type=submit] {
 	padding:5px 20px;
  border:1px solid rgba(0,0,0,0.4);
  text-shadow:0 -1px 0 rgba(0,0,0,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 10px 10px rgba(255,255,255,0.1);
  border-radius:0.3em;
  background:#0184ff;
  color:white;
  float:right;
  font-weight:bold;
  cursor:pointer;
  font-size:13px;
}

input[type=submit]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -10px 10px rgba(255,255,255,0.1);
}

input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
 	background:#27292c;
}

button[type=submit] {
 	padding:5px 20px;
  border:1px solid rgba(0,0,0,0.4);
  text-shadow:0 -1px 0 rgba(0,0,0,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 10px 10px rgba(255,255,255,0.1);
  border-radius:0.3em;
  background:#0184ff;
  color:white;
  float:left;
  font-weight:bold;
  cursor:pointer;
  font-size:13px;
}

.p-containerall {
 	background:#111; 
      width: 100%;
    max-width: 300px;
  margin:30px auto;
  border-radius:0.4em;
  box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}

/* for the search results jsps */
select {
       width:100%;
       background:linear-gradient(#1f2124, #27292c);
       padding:8px 5px;
    margin-bottom:20px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1) ;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1) ;
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) ;
    border:1px solid #222;
    color:#888;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

.inset-searchform {
      padding:20px;
  border-top:0px solid #19191a;
}

.inset-searchform span {
      padding-right:20px; 
}

.p-containerall-searchform {
     background:#111;
  width:100%;
  max-width: 1600px;
  border-radius:0.4em; 
  margin:30px auto;
  border:0px solid #191919;
  overflow:hidden;
  position:relative;
  box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}

.p-containerall-searchform:after {
  content:"";
  display:block;
  position:absolute;
  height:1px;
  width:100%;
  max-width: 1600px;
  left:20%;
  background:linear-gradient(left, #111, #444, #b6b6b8, #444, #111);
  top:0;
}

.p-containerall-searchform span {
  display:block;
  float:left;
  color:#0d93ff;
  padding-top:8px;
}

#searchform {
      background:#111;
  width:100%;
  max-width: 1600px;
  margin:30px auto;
  border-radius:0.4em;
  /*border:1px solid #191919;*/
  overflow:hidden;
  position:relative;
  /*box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);*/
    border:0px;
}

#searchform:before {
      content:"";
  display:block;
  position:absolute;
  width:0px;
  height:0px;
  border-radius:50%;
  left:34%;
  top:-7px;
  box-shadow: 0 0 6px 4px #fff;
}

.inset-printform {
      padding:40px;
  border-top:0px solid #19191a;
}

#printform {
      background:#111;
  width:100%;
  max-width: 1600px;
  margin:30px auto;
  border-radius:0.4em;
  border:0px solid #191919;
  overflow:hidden;
  position:relative;
  /*box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);*/
}

#printform:before {
      content:"";
  display:block;
  position:absolute;
  width:0px;
  height:0px;
  border-radius:50%;
  left:34%;
  top:-7px;
  box-shadow: 0 0 6px 4px #fff;
} 

#accounts {
    border-collapse: collapse;
    width: 100%;
    max-width: 1600px;
}

#searchform td {
    border: 5px solid #666;
    padding: 8px;
    background:#111;
}

#searchform tr:nth-child(even){background-color: #f2f2f2;} 

#searchform th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    border: 5px solid #666;
    padding: 8px;
    color:white;
    font-weight:1600;
}

td.positive { color : #33cc33; }

td.negative { color : red; }

/* table scroll and createlogin css*/
#accounts th, td{
    width: 10%;
}

#accountsDateRangeHeader {
    border-collapse: collapse;   
    width: 100%;
    max-width: 1600px;
    /*display: block*/
}

#accountsDateRangeHeader th{
    width: 10%;
}

#accountsDateRange {
    border-collapse: collapse;   
    width: 100%;
    max-width: 1600px;
}

#accountsDateRange td{
    width: 10%;
}

/* Track */
::-webkit-scrollbar-track {
    background: 777;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
}

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

.p-containerall-createlogin {
      background:#111;
      width: 100%;
    max-width: 400px;
  margin:30px auto;
  border-radius:0.4em;
  box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}

#createloginform {
      background:#111;
  width:100%;
  max-width: 400px;
  margin:0px auto;
  border-radius:0.4em;
  border:0px solid #191919;
  overflow:hidden;
  position:relative;
  /*box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);*/
}

/* Jquery Datepicker css*/

.ui-datepicker {
       width: 17em;
       padding: .2em .2em 0;
       display: none;
    background:#222222;
    /*background:#2F99B4; */   
}

.ui-datepicker .ui-datepicker-title {
       margin: 0 2.3em;
       line-height: 1.8em;
       text-align: center;
    color:#FFFFFF;
    background:#222222; 
}

.ui-datepicker table {
       width: 100%;
       font-size: .7em;
       border-collapse: collapse;
    font-family:verdana;
       margin: 0 0 .4em;
    color:#000000;
    background:grey;
}

/*This is date TD */
.ui-datepicker td {
       border: 0;
       padding: 1px;   
}

.ui-datepicker td span,
.ui-datepicker td a {
       display: block;
       padding: .8em;
       text-align: right;
       text-decoration: underline;
}

/*Style the phone input validation*/
input[type=tel]{
 	width:100%;
  padding:8px 5px;
  background:linear-gradient(#1f2124, #27292c);
  border:1px solid #222;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1);
  border-radius:0.3em;
  margin-bottom:20px;
	color:white;
}

.p-containerall-404 {
     background:#111;
     width: 100%;
   max-width: 500px;
  margin:30px auto;
  border-radius:0.4em;
  box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}

#scroll {
    height: 100%;
    width: 100%;
    max-height: 300px;
    max-width: 1600px;
    overflow-y: auto;
    overflow-x: auto;
} 

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

/* Style the header */
.header {
	position: -webkit-sticky;
  	position: sticky;
  	top:0px;
	background-color: rgba(17,17,17,1);
}

#clientuseraccountnumber{
       color:white;
}

.ui-tabs, .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-panel,
.ui-widget-header .ui-state-default, .ui-widget-header .ui-state-active,
.ui-state-active, .ui-tabs .ui-widget
{
        background: transparent;
         border-width: 0px 0px 0px 0px;
}

.ui-widget-content,
.ui-widget-content .ui-state-active,
.ui-widget-content .ui-corner-all
{
       color: white;
}

/*.ui-tabs, */
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor
/*.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor*/
{
       color: #0184ff;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited
{
       color: white;
}

#searchAllAccountform {
      background:#111;
  width:100%;
  max-width: 300px;
  margin:0px auto;
  border-radius:0.4em;
  border:0px solid #191919;
  overflow:hidden;
  position:relative;
  /*box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);*/
}

.p-containerall-searchAllAccount {
      background:#111;
      width: 100%;
    max-width: 300px;
  margin:30px auto;
  border-radius:0.4em;
  box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}

.inset-searchAllform {
      padding:20px;
      padding-top:0px;
  border-top:0px solid #19191a;
}

.inset-searchform-inputtext {
      padding:20px;
      padding-bottom:0px;
  border-top:0px solid #19191a;
}

.inset-profileform {
      padding:20px;
  border-top:0px solid #19191a;
}

.inset-profileform label {
 	color:#55;
  display:inline-block;
  padding-bottom:9px;
  
}

#profileClientAccount h1 {
  font-size:24px;
  text-shadow:0 1px 0 black;
  text-align:center;
  padding:15px 0;
  border-bottom:1px solid rgba(0,0,0,1);
  position:relative;
}

#profile {
    width: 100%;
    max-width: 600px;
    margin-left:auto; 
    margin-right:auto;
}