body{font:13px/1.5 "Trebuchet MS", Arial, Helvetica, sans-serif}a:focus{outline:1px dotted invert}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:0px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}

input::-webkit-calendar-picker-indicator{
    display: none;
}

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

.tab-loading
{
    text-align: center;
    width:100% !important;


}
#overlay {
    width: 100%;
    background: url('path/to/opaque/img.png') repeat;
    position: absolute;
    display:none;
}

#overlay img.loading_circle {
    position: absolute;
    top: 50%;  // edit these values to give you
    left: 50%; // the positioning you're looking for.
}


.red
{
    color: #EC5D4C;
    }
.green
{
    color: #70A62F;
   
}

.yellow
{
    color: #FAE7B5;
   
}

.gray
{
    color: gray;
   
}


.progress {
overflow: hidden;
//margin: 100px auto;
padding: 0 15px;
width: 220px;
height: 34px;
//background: #d3d5d9;
//border-radius: 17px;
//background-image: -webkit-linear-gradient(top, #ebecef, #bfc3c7);
//background-image: -moz-linear-gradient(top, #ebecef, #bfc3c7);
//background-image: -o-linear-gradient(top, #ebecef, #bfc3c7);
//background-image: linear-gradient(to bottom, #ebecef, #bfc3c7);
//-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
//box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
}
.progress-val {
float: right;
margin-left: 15px;
font: bold 12px/34px Helvetica, Arial, sans-serif;
color: #333;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}

.progress-bar {
display: block;
overflow: hidden;
height: 8px;
margin: 13px 0;
background: #b8b8b8;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
}
.progress-in {
display: block;
min-width: 8px;
height: 8px;
background: #1997e6;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #147cd6, #24c1fc);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #147cd6, #24c1fc);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #147cd6, #24c1fc);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #147cd6, #24c1fc);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.price {
//	display:none;
display: inline-block;
padding: 2px 4px;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
white-space: nowrap;
vertical-align: baseline;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/* warning #f89406
pertrol ; #3a87ad*/
width:40px;
}

.price_online
{
    background-color: #468847;
}

.price_error
{
    background-color: #f89406;
}

.price_offline
{
    background-color: #ccc;
}


.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	background: #F8F7F6 url('images/ui-bg_fine-grain_10_f8f7f6_60x60.png') 50% 50% repeat;
}

/* begin: jQuery UI Datepicker moving pixels fix */
table.ui-datepicker-calendar {border-collapse: separate;}
.ui-datepicker-calendar td {border: 1px solid transparent;}
/* end: jQuery UI Datepicker moving pixels fix */

/* begin: jQuery UI Datepicker emphasis on selected dates */
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
	background: #743620 none;
	color: white;
}
/* end: jQuery UI Datepicker emphasis on selected dates */


/* begin: jQuery UI Datepicker hide datepicker helper */
#ui-datepicker-div {display:none;}
/* end: jQuery UI Datepicker hide datepicker helper */ 



  #about {
    text-align: center;
    color: #fafafa;
    font: normal small Arial, Helvetica;
  }
  
  #about a {
    color: #777;
  }
  
  /* --------------- */
    
  #pricing-table {
  //  margin: 100px auto 50px auto;
    text-align: center;
  //  width: 892px; /* total computed width = 222 x 3 + 226 */
  }

  #pricing-table .plan {
    font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
    text-shadow: 0 1px rgba(255,255,255,.8);        
    background: #fff;      
    border: 1px solid #ddd;
    color: #333;
    padding: 20px;
    margin:2px;
    width: 120px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
    float: left;
    position: relative;


      -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;  
  }
  
  #pricing-table #most-popular {
    z-index: 2;
    top: -13px;
    border-width: 3px;
    padding: 30px 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
    box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
  }

  #pricing-table .plan:nth-child(111) {
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;        
  }

  #pricing-table .plan:nth-child(44) {
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;        
  }
  
  /* --------------- */ 

  #pricing-table h3 {
    font-size: 20px;
    font-weight: normal;
    padding: 10px;
    margin: -20px -20px 50px -20px;
    background-color: #eee;
    background-image: -moz-linear-gradient(#fff,#eee);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
    background-image: -webkit-linear-gradient(#fff, #eee);
    background-image: -o-linear-gradient(#fff, #eee);
    background-image: -ms-linear-gradient(#fff, #eee);
    background-image: linear-gradient(#fff, #eee);
  }
  
  #pricing-table #most-popular h3 {
    background-color: #ddd;
    background-image: -moz-linear-gradient(#eee,#ddd);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));    
    background-image: -webkit-linear-gradient(#eee, #ddd);
    background-image: -o-linear-gradient(#eee, #ddd);
    background-image: -ms-linear-gradient(#eee, #ddd);
    background-image: linear-gradient(#eee, #ddd);
    margin-top: -30px;
    padding-top: 30px;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;     
  }
  
  #pricing-table .plan:nth-child(1) h3 {
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    border-radius: 5px 0 0 0;       
  }

  #pricing-table .plan:nth-child(4) h3 {
    -moz-border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    border-radius: 0 5px 0 0;       
  } 

  #pricing-table h3 span {
    display: block;
    font: bold 25px/100px Georgia, Serif;
    color: #777;
    background: #fff;
    border: 5px solid #fff;
    height: 100px;
    width: 100px;
    margin: 10px auto -65px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
    -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
    box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  }
  
  /* --------------- */

  #pricing-table ul {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
  }

  #pricing-table li {
    border-top: 1px solid #ddd;
    padding: 10px 0;
  }
  
  /* --------------- */
  .online
  {
    background-image: -moz-linear-gradient(#72ce3f, #62bc30);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));    
    background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
    background-image: -o-linear-gradient(#72ce3f, #62bc30);
    background-image: -ms-linear-gradient(#72ce3f, #62bc30);
    background-image: linear-gradient(#72ce3f, #62bc30);
  }  
  .offline
  {
    background-image: -moz-linear-gradient(#ccc, #FF0000);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#FF0000));    
    background-image: -webkit-linear-gradient(#ccc, #FF0000);
    background-image: -o-linear-gradient(#ccc, #FF0000);
    background-image: -ms-linear-gradient(#ccc, #FF0000);
    background-image: linear-gradient(#ccc, #FF0000);
  }  

  #pricing-table .signup {
    position: relative;
    padding: 5px 10px;
    margin: 20px 0 0 0;  
    color: #fff;
    font: bold 10px Arial, Helvetica;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;       
    background-color: #72ce3f;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;     
    text-shadow: 0 1px 0 rgba(0,0,0,.3);        
  /*  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);*/
  }

  #pricing-table .signup:hover {
    background-color: #62bc30;
    background-image: -moz-linear-gradient(#62bc30, #72ce3f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));      
    background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
    background-image: -o-linear-gradient(#62bc30, #72ce3f);
    background-image: -ms-linear-gradient(#62bc30, #72ce3f);
    background-image: linear-gradient(#62bc30, #72ce3f); 
  }

  #pricing-table .signup:active, #pricing-table .signup:focus {
    background: #62bc30;       
    top: 2px;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; 
  }
  
  /* --------------- */

  .clear:before, .clear:after {
    content:"";
    display:table
  }

  .clear:after {
    clear:both
  }

  .clear  {
    zoom:1
  } 
    </style>