form {
  border: 0px solid #f1f1f1;
}

 #myaccount-form {
        border: 1px solid #eee;
        background: #fafafa;
        Padding: 20px;
        margin: 0px auto;
        max-width: 500px;
 }

 #myaccount-form .login-button {
   background-color: #007dc3;
   color: #fff;
 }

 #myaccount-form .top {text-align: center;  margin-bottom: 10px;}

 #myaccount-form .row {min-height: 50px;}

#myaccount-form .label {
	min-width: 100px !important;
	text-align: left;
	margin-right: 10px;
	font-size: 18px;
}

#myaccount-form input,
#myaccount-form select {
	padding: 10px;
  border: 1px solid #ccc;
  outline: none;
  background-color: #fff;
}

#myaccount-form .end-addon {
  display: grid;
  grid-template-columns: 1fr 40px;
}

#myaccount-form .end-addon .fa-eye,
#myaccount-form .end-addon .fa-eye-slash {
  color: #007dc3;
}

#myaccount-form .end-addon .end {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border-left: none;
  cursor: pointer;
}

 #login-box input[type="email"],  #login-box input[type="password"], #login-box input[type="submit"] {padding: 10px; border: 1px solid #ccc; min-width: 300px;}

 #login-box .login-button {padding: 10px; background: #0064af; color: #fff; border: 1px solid #00507d;}


 #login-box .label { min-width: 150px !important; }
 #login-box .label { min-width: 180px !important; }
 #login-box .row > input,#login-box .row > select { min-width: 220px !important; } 
 
.glyphicon-remove {  color: red;}
.glyphicon-ok {  color: green;}

.login {max-width: 500px; border: 1px solid #eee; margin: 20px auto 10px auto; padding: 20px;}

.login h1 {margin-top: 0px;}

 #login-box {
	border: 1px solid #eee;
	background: #fafafa;
	Padding: 20px;
	margin: 0px auto;
	max-width: 500px;	 
 }
 
 #login-box .top {text-align: center;  margin-bottom: 10px;}
 
 #login-box .row {min-height: 50px;}
 
 #login-box .label {
	 display: inline-block;
	 min-width: 100px !important;
	 text-align: right;
	 font-size: 18px;
	 margin-right: 10px;
 }
 
 #login-box input[type="email"],  #login-box input[type="password"], #login-box input[type="submit"] {padding: 10px; border: 1px solid #ccc; min-width: 300px;}
 
 #login-box .login-button {padding: 10px; background: #0064af; color: #fff; border: 1px solid #00507d;}


.login-info {
background: rgba(0,0,0,0.15); 
padding: 5px 20px 0px 20px;   
border-top: 1px solid #8791af;
border-right: 1px solid #8791af;
border-left: 1px solid #8791af;		
	
}


 .order-box {
	border: 1px solid #eee;
	background: #fafafa;
	Padding: 10px;
	margin: 0px 10px 0px 0px;
	max-width: 150px;	 
	min-width: 150px;
	width: 150px;
	min-height: 210px;
 }
 .order-box .status-icon {display: none; float: right;}
 .order-box .notes {visibility: hidden; color: transparent;}
 .order-box h3 {color: #848484; margin-top: 5px;}


 .order-box-active {
	border: 1px solid #eee;
	background: #007dc3;
	Padding: 10px;
	margin: 0px 10px 0px 0px;
	max-width: 150px;	 
	min-width: 150px;
	width: 150px;
	min-height: 210px;	
 }
 .order-box-active .status-icon {display: block; float: right;}
 .order-box-active .notes {visibility: visible; color: #fff;  }
 .order-box-active  a {color: yellow; text-decoration: underline;}
					
 .order-box-active h3 {color: #fff; margin-top: 5px;}

.form-title {margin: 20px auto 20px auto; text-align: center; font-size: 24px; color: #00507d; font-weight: 400;}

button.create {background: #eee; color: #303030; border: 1px solid #ccc; width: 100% !important;}

a.reg, input.reg {font-size: 18px; font-weight: 400; display: block; 
	min-height: 30px;
	padding: 5px 10px 5px 10px; margin-bottom: 10px; 
	background: #eee; color: #303030; 
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 2px;	
	-khtml-border-radius: 2px; 
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px; }

a.reg:hover, input.reg:hover {background: #ddd;}

#section-block #myaccount {width: 100%; height: 110px; border: 0px solid red; background: url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y; }
#section-block #myaccount span {display: inline-block; width: 350px; font-size: 48px; font-weight: 400; line-height: 48px; padding: 40px 0px 0px 0px; color: #fff;}
#section-block #myaccount p {display: inline; color: #fff; font-weight: 400;}


#sub-menu ul li a.myaccount {
 	float: left;
 	margin-top: 0px; 
	height: 30px;
	border: 1px solid transparent;
	text-align: center;
	display: inline-block;
	background: transparent;
	color: #fff; 
	font-size: 18px; 
	line-height: 15px;
	padding: 12px 15px 0px 15px !important; 	
	font-weight: 300; 	

}

select.service-level {border: 1px solid #d2d2d2; min-height: 30px; max-height: 30px; min-width: 220px;  }
select.contact-select {border: 1px solid #d2d2d2; min-height: 30px; max-height: 30px; max-width: 105px; }
select.contact-select-long {border: 1px solid #d2d2d2; min-height: 30px; max-height: 30px; max-width: 220px; min-width: 220px; margin-bottom: 10px; color: #32647d;}

div#progress {border: 0px solid #303030; padding:0px; display: table; width: 100%; margin-bottom: 10px;}

div#progress span {display: table-cell;}
                                 
div#progress span a {color: #fff; }
div#progress span.focus {padding-left: 25px; color: #fff !important; background: #007dc3 url(https://www.protocase.com/myaccount/arw.png) center left no-repeat; background-size: 20px 20px;}

ul#tabs {
	list-style-type: none;
	
}

ul#tabs li {
		display: inline;

}

ul#tabs li a { padding: 6px 10px 0px 10px; 
	border-top: 1px solid #d7d7d7;
	border-right: 1px solid #d7d7d7;
	border-left: 1px solid #d7d7d7;
	
	border-radius: 3px;	
	-khtml-border-radius:  3px;
	-webkit-border-radius:  3px;
	-moz-border-radius:  3px;	
	font-size: 20px; 
	
	}



ul#tabs li a.active {background: #f5f5f5;	border-bottom: 1px solid #f5f5f5;}

ul#tabs li a.inactive {background: #d7f0d7;	border-bottom: 1px solid #d7d7d7;}

ul#tabs li a.inactive:hover {background: #fff;  cursor: pointer;}

table.AccountTable {
  border: 2px solid #1C6EA4;
  background-color: #fff;
  width: 100%;
  text-align: left;
  border-collapse: collapse;      
}
table.AccountTable td, table.AccountTable th {
  border: 1px solid #AAAAAA;
  padding: 5px 5px 5px 15px;
  vertical-align: top;
}
table.AccountTable tbody td {
  font-size: 16px;
}
table.AccountTable  tr {
  height: 40px;
}


table.AccountTable tbody td a {text-decoration: underline;}
table.AccountTable tbody td a.bevel-button-sml {text-decoration: none;}

table.AccountTable tr:nth-child(even) {
  background: #D0E4F5;
}
table.AccountTable thead {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
table.AccountTable thead th {
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
table.AccountTable thead th:first-child {
  border-left: none;
}

table.AccountTable tfoot td {
  font-size: 14px;
}
table.AccountTable tfoot .links {
  text-align: right;
}
table.AccountTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

.check-container {
  display: block;
  position: relative;
  min-height: 50px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 0px solid red;
}

.check-container span {font-size: 16px;}

.check-container input[type=checkbox] {
  height: 25px;
  width: 25px;
  background-color: #eee;	
}

.green {color: #18821d;}

input#filter-ref-name {height: 20px; padding: 1px; margin: 0px;}

input.reorder {	
	font-size: 12px;
	border: 1px solid #fff;
	border-radius: 3px;	
	-khtml-border-radius:  3px;
	-webkit-border-radius:  3px;
	-moz-border-radius:  3px;		
	padding: 3px 10px 3px 10px;
	background: #18821d;
	color: #fff;
	cursor: pointer;
}
a.reorder {	
	font-size: 18px;
	border: 1px solid #fff;
	border-radius: 3px;	
	-khtml-border-radius:  3px;
	-webkit-border-radius:  3px;
	-moz-border-radius:  3px;		
	padding: 3px 10px 3px 10px;
	background: #18821d;
	color: #fff;
	cursor: pointer;
}
a.reorder:hover {	
	background: #303030;
	color: #fff;
}
input.reorder-queue {	
	font-size: 12px;
	border: 1px solid #fff;
	border-radius: 3px;	
	-khtml-border-radius:  3px;
	-webkit-border-radius:  3px;
	-moz-border-radius:  3px;		
	padding: 3px 10px 3px 10px;
	background: #007dc3;
	color: #fff;
		cursor: pointer;
}

input.reorder-remove {	
	font-size: 12px;
	border: 1px solid #fff;
	border-radius: 3px;	
	-khtml-border-radius:  3px;
	-webkit-border-radius:  3px;
	-moz-border-radius:  3px;		
	padding: 3px 10px 3px 10px;
	background: #962323;
	color: #fff;
		cursor: pointer;
}

.check-container input[type=checkbox]:checked ~ input.reorder {
  	background-color: #000000;
}

table#filter tr {border: 0px solid red;}

table#filter td {vertical-align: bottom; border: 0px solid red;}


input.reorder-input {
	width: 100px; 
	height: 25px; 
	padding: 5px;
	background: #fff; 

	margin: 8px 0;
	box-sizing: border-box;
}


input.reorder-input::-webkit-outer-spin-button, input.reorder-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

textarea {
	padding: 10px;
	background: #fff; 
	border-color: #1C6EA4; 
	border-size: 2px; 
	margin: 8px 0;
	box-sizing: border-box;	
}

span.status-text-ready {vertical-align: middle; color: #23962d;}
span.status-text-notready {vertical-align: middle; color: #962323;}

.fsFieldCell {}

.fsField {padding: 0px 0px 0px 5px !important; max-height:30px;}

.fsLabel {font-size: 14px;}

.fsRow {min-height: 60px;}

table#contact-info td { border-right: 5px solid #fff; padding: 10px 10px 10px 10px; vertical-align: top;}

table#contact-info td:last-child { border-right: 0px solid #303030; }

.fsUpdated {border: 0px solid transparent !important; background: transparent !important; margin-bottom: 0px !important;}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
   top: -5px;
  left: 110%;  
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}