html {
   min-height: 100%;
}

body {
   /*for webcoil looks*/
   /*   background-color: #999999;
   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ECF5FB), to(#41789b));
   background: -moz-linear-gradient(#ECF5FB, #41789b);
   background: linear-gradient(#ECF5FB, #41789b);
   -pie-background: linear-gradient(#ECF5FB, #41789b);
*/
   padding: 0;
   margin: 0;
   /*for webcoil looks*/
   color: white;
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   /*
   color: black;
   font-family: "lucida grande", lucida, "helvetica nueue", helvetica, arial;
   */
   min-height: 1000px;
   height: auto !important;
   behavior: url(pie/pie.htc);
   font-size: 11px;
   line-height: 16px;
}

H3, H3.cntr {
   margin: 0;
   padding-top: 3px;
   padding-bottom: 3px;
   padding-left: 1em;
   padding-right: 1em;
   /* for webcoil looks
   border-bottom: solid #41789b;
   background-color: #9fbcd0;
   */
}

H3.cntr {
   text-align: center;
}

TD {
   vertical-align: top;
}

/*for webcoil looks*/
.mainHeader {
   background-color: #222d32;
}

.wizardContent {
   /*for webcoil looks*/
   /*
   color: Black;
   background-image: url("back.jpg");
   border: solid 2px #446655;
   -moz-box-shadow: 2px 2px 5px #666666;
   -webkit-box-shadow: 2px 2px 5px #666;
   box-shadow: 2px 2px 5px #666;
   behavior:url(pie/pie.htc);
*/
}

.fixedWidth {
   width: 1200px;
   margin-left: auto;
   margin-right: auto;
}

.fixedHgt {
   height: 800px;
   overflow:auto;
}

.clientHgt {
   height: 540px;
}

.fullWidth {
   width: 100%;
}

.fullHeight {
	height: 100%;
}

.cntr {
   margin-left: auto;
   margin-right: auto;
}

.cntrCell {
   text-align: center;
}

/*for webcoil looks*/
._1col {
   padding: 5px;
   overflow: auto;
}

._2col {
   width: 520px;
}

._3col {
   /*for webcoil looks*/
   width: 3%; /*390px;*/
}

#_coilTypeInputs img {
   width: 400px;
}


/* We need to create class for this button and apply that class in .aspx file or all the button configure with this style and then override unitswap button*/
.grad0, .grad1, .coolGrad, .hotGrad, .grad1 > input[type=button], #_filesCtrlButtonsCol > input[type=button], #_removeBtn, #_loadParamsBtn, #_sizesAndSpeeds input[type=button], #_hwAndcwCoils input[type=button], #_setpassword, .resultsCol input[type=submit] {
   /*for webcoil looks*/
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2c447f+0,1d2d53+100 */
   background: #2c447f; /* Old browsers */
   background: -moz-linear-gradient(top, #2c447f 0%, #1d2d53 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #2c447f 0%,#1d2d53 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #2c447f 0%,#1d2d53 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c447f', endColorstr='#1d2d53',GradientType=0 ); /* IE6-9 */
   color: white;
   border-radius: 3px;
}

.grad0 > H3, .coolGrad  > H3, .hotGrad > H3{
   /*for webcoil looks*/
   padding-top: 10px;
   padding-bottom: 10px;
}

/*for webcoil looks*/
.grad1 > input[type=button], #_filesCtrlButtonsCol > input[type=button], #_removeBtn, #_loadParamsBtn, #_sizesAndSpeeds input[type=button], #_hwAndcwCoils input[type=button], #_setpassword, .resultsCol input[type=submit]   {
   border: 1px solid transparent;
   border-color: #1d2d53;
   color: white;
   border-radius: 3px;
/* remove due to #_filesCtrlButtonsCol > input[type=button] is 8% is too small and added more other css ids
   width: 8%;
*/
   padding: 10px 16px;
   cursor: pointer;
}
.grad1 > input[type=button]:hover, #_filesCtrlButtonsCol > input[type=button]:hover, #_removeBtn:hover, #_loadParamsBtn:hover, #_sizesAndSpeeds input[type=button]:hover, #_hwAndcwCoils input[type=button]:hover, #_setpassword:hover, .resultsCol input[type=submit]:hover  {
   box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2)
}
.grad1 > input[type=button].disabled, #_filesCtrlButtonsCol > input[type=button].disabled, #_removeBtn.disabled, #_loadParamsBtn.disabled, #_sizesAndSpeeds input[type=button].disabled, #_hwAndcwCoils input[type=button].disabled, #_setpassword.disabled, .resultsCol input[type=submit].disabled {
   cursor: not-allowed;
   box-shadow: none;
   opacity: .65;
}

.grad0 {
   /*for webcoil looks*/
   /*border: 2px solid #41789b;*/
   margin-top: 3px;
   margin-bottom: 3px;
}

.coolGrad {
   /* border: 2px solid #4466ff; */
   /*for webcoil looks*/
   /*border: 2px solid #41789b;*/
}

.hotGrad {
   /*border: 2px solid #ff6644;*/
   /*for webcoil looks*/
   /*/border: 2px solid #41789b;*/
}

.subGroup {
   border: solid 1 Gray;
   background-color: #888888;
   margin-left: 2em;
   padding-left: 2em;
}

.bottomAlign {
   vertical-align: bottom;
}

.numIn {
   width: 3em;
}

.medCombo {
   width: 25em;
}

.smallerFont {
   font-size: 10px;
}

.fltLeft {
   float: left;
}

.fltRight {
   float: right;
}

.err {
   border: solid 1px red;
}

.errBox {
   color: White;
   background-color: #dd0000;
   border: solid 2px #ff3333;
   width: 980px;
   margin-left: auto;
   margin-right: auto;
}

.scsBox {
   color: White;
   background-color: #00cc00;
   border: solid 2px #33ee33;
   width: 980px;
   margin-left: auto;
   margin-right: auto;
}

.errBoxHidden {
   display: none;
}

tr.oddRow  {
}

tr.hilite  {
   background-color: Green;
   color: White;
}

td.indL  {
   width: 24px;
  text-align: right;
}

td.indR  {
   width: 24px;
}

INPUT[disabled][type=text], select[disabled] {
   /*background-color: #359988;*/
}

#_coolingCoilInputs INPUT[disabled] {
   /*background-color: #8888ff;*/
}

#_heatingCoilInputs INPUT[disabled], #_heatingCoilInputs select[disabled] {
   /*background-color: #cc6666;*/
}


.blk {
   display:block;
}

#_fcusInProject {
   overflow: auto;
}

.UOM {
   margin: 0.5em;
   color: #005500;
}

#_navBar {
   padding-top: 8px;
   padding-bottom: 8px;
   /*for webcoil looks*/
   background: #2c3b41;
   color: #8aa4af;
}

#_navTabs {
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 0;
   padding-right: 0;
   margin: 0;
}

#_navTabs span {
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 8px;
   padding-right: 8px;
}

#_navBar span {
   font-size: 125%;
   font-weight: bold;
   margin-left: .25em;
   margin-right: .25em;
   cursor: default;
   /*for webcoil looks*/
   /*/background-color: #bed3e1;*/
}

#_navBar span span:hover {
   /*for webcoil looks*/
   /*background-color: #9fbcd0;*/
   color: #ffffff;
}

#_navBar span.disabled {
   font-size: 125%;
   font-weight: bold;
   margin-left: .25em;
   margin-right: .25em;
   cursor: default;
   /*for webcoil looks*/
   /*color: #9fbcd0;
   background-color: #bed3e1;*/
   opacity: 0.5;
}

#_navBar span.disabled:hover {
   /*for webcoil looks*/
   /*background-color: #bed3e1;*/
   color: #ffffff;
}

#_navBar .current {
   color: White;
   /*for webcoil looks*/
   /*background-color: #7b9cb4;*/
}

#_navBar .bgnStep {
   border-left: solid 2px #a0a0a0;
}

#_navBar .endStep {
   border-right: solid 2px #a0a0a0;
}

#_wizardButtons {
   /*for webcoil looks*/
   /*margin: 5px;*/
   padding: 10px;/*3px;*/
   background-color: #dedede;
   border: 1px solid #cdcdcd;
}

/* context menu styles */
   .contextMenu {
      position: absolute;
      display: none;
      z-index: 100;
      width: 250px;
   	background-color: White;
      background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ECF5FB), to(#7EBFE7));
      background: -moz-linear-gradient(#ECF5FB, #7EBFE7);
      background: linear-gradient(#ECF5FB, #7EBFE7);
      -moz-box-shadow: 2px 2px 5px #666666;
      -webkit-box-shadow: 2px 2px 5px #666;
      box-shadow: 2px 2px 5px #666;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      padding: 0;
   }
   
   .contextMenu li {
      border-bottom: 1px #4283AB solid;
      padding: 3px;
      font-size: 115%;
   	list-style: none;
   	
   }

   .contextMenu li a {
      display: block;
      text-decoration: none;
      color: black;
   }

   .contextMenu li:hover {
      border-bottom: 1px #4283AB solid;
      padding: 3px;
      font-size: 115%;
      color: White;
      background-color: #4283AB;
      
   }

/* classes for jQuery ui actions */
   .ui-selecting { background-color: #66aadd; color: white; }
   .ui-selected { 
      /*background-color: #88bbee; */
      color: #2c447f; /* Old browsers */
      background: white;
   }

/* file manager page */
   #_filesCtrlButtonsCol {
      width: 7.5em;
      padding: 4px;
      border-right: 2px solid #41789b;
      vertical-align: top;
   }

   #_fileList TH {
      border-bottom: 1px solid #41789b;
   }

   #_fileList TR.curr {
      font-weight: bold;
   }

   #_filesCtrlListCol {
      vertical-align: top;
   }

   #_fileList .c1 { text-align: right; }

/* control & valve selection pages */
   .excludedPackage {
      background-color: #555555;
      color: #555555;
   }
   .selectedPackage {
      background-color: Maroon;
      color: White;
   }
   .packages {
      height: 384px;
      overflow: scroll;
      margin-top: 8px;
   }
   .packages .c1 {
      padding-left: 5px;
      width: 70px;
   }

/* project contents */
   #_fcusInProjectTable {
      /*border-collapse: collapse;*/
   }

   #_fcusInProjectTable TH {
      font-weight: bold;
	  text-align: left;
   }
      
   .prjCntent .c0 {
      width: 34px;
   }
   .prjCntent .c1 {
      width: 280px;
   }
   .prjCntent .c2 {
      width: 100px;
   }
   .prjCntent .c3 {
      width: 100px;
   }
   .prjCntent .c4 {
      width: 100px;
   }

/* tables */
   table.tablesorter thead tr th, table.tablesorter tfoot tr th {
      /*for webcoil looks*/
/*
	   background-color: #e6EEEE;
	   border: 1px solid #FFF;
*/
	   font-size: 8pt;
	   padding: 4px;
   }
   table.tablesorter thead tr .header {
	   background-image: url(bg.gif);
	   background-repeat: no-repeat;
	   background-position: center right;
	   cursor: pointer;
   }

   table.tablesorter tbody tr.odd td {
	   background-color:#F0F0F6;
   }

   table.tablesorter thead tr .headerSortUp {
	   background-image: url(asc.gif);
   }

   table.tablesorter thead tr .headerSortDown {
	   background-image: url(desc.gif);
   }

   table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
/*for webcoil looks*/
      box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
      /*/background-color: #8dbdd8;*/
   }

   /*for webcoil looks*/
   ._results th {
      position: sticky;
      top: 0;
      
   }
   ._results thead {
      opacity: 1;
   }

   /*for webcoil looks*/
   input [type=button] {
      background-color: ButtonFace;
      border-width: 2px;
      border-style: outset;
      border-color: ButtonFace;
   }

   /*for webcoil looks*/
   input[type=button].numIn {
      border-radius: 3px;
   }

   /*for webcoil looks*/
   ._headerUserLogoff {
      font-size: 18px;
      float: right;
      padding-top: 20px;
      padding-right: 20px;      
   }

   /*for webcoil looks*/
   ._headerUserLogoff input {
      font-size: 16px;
      background-color: inherit;
      border: none;
      cursor: pointer;
      color: white;
   }

   ._headerUserLogoff input:hover {
      color: #8aa4af;
   }

/*for webcoil looks*/
   .ui-widget-header{
      background: #2c447f !important;
      border: none;
   }
/*for webcoil looks*/
   .ui-widget-content {
      background: white !important;
      color: #2c447f !important; /* Old browsers */
      border-radius: 3px !important;
   }
/*for webcoil looks*/
   .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
      background: #2c447f !important;
      color: white !important;
      border: none !important;
   }

/*for webcoil looks*/
   .login {
      width: 320px;
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;
      background-color: #f5f5f5;
      padding: 19px;
      border: 1px solid #e3e3e3;
      border-radius: 4px;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
      color: #333;
   }
/*for webcoil looks*/
   #_loginBtn {
      display: block;
      background-color: #337ab7;
      border-color: #2e6da4;
      color: #fff;
      text-align: center;
      padding: 10px 100px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 4px;
      margin-bottom: 15px;
   }
   .login table {
   margin-left: auto;
   margin-right: auto;
   }
   #_email, #_password{
      height: 21px;
      width: 300px;
      border-radius: 4px;
      padding: 5px 1px;
      margin-bottom: 30px;
   }
   .login_label{
      font-size: 14px;
      font-weight: bold;
   }
   .websitelink{
      text-align: center;
   }