/*---------- ------ ----------*/
/*----- Webcollect.org.uk ----*/
/*---------- ------ ----------*/
/*----- Styles FRONTEND ------*/
/*--------- ------ -----------*/
/* Basic elements */
body{
  margin:0 auto; 
  padding:0; 
  text-align:center;
  font-family:Arial, Helvetica, sans-serif; 
  font-size: 0.75em; 
  color:#333;   
  background-color:#fff;
  line-height:1.5em;
}
body > *, body.mceContentBody{
  text-align: left;
}

body.mceContentBody {
  font-size: 12px; 
  line-height: normal;
}

/* Override reset styles */
h1{
  font-size: 1.6em; 
  margin: .67em 0;
}
h2{
  font-size: 1.4em; 
  margin: .5em 0;
}
h3{
  font-size: 1.17em; 
  margin: .83em 0;
}
p{
  margin: .4em 0 0 0;
}
ol, ul{ 
  margin: 0px 0px 0px 20px; 
  padding:0px 0px 0px 20px;
}
h1 a,
.header a{
  color:#333;
  text-decoration:none;
}
.last,
.negative,
a{
  color:#0099FF;
  text-decoration:underline;  
  cursor:pointer;
}
a:hover{
  color:#333;
  text-decoration:underline;
}

.small{
  font-size:.75em; 
  font-weight: normal; 
  line-height: 1.2em;
}

.my-org .textright a.button{
  float:right;
}
.my-org p, .my-org a{
  word-wrap: break-word;
}

/* Header styles */
.header{
  margin:0 auto; 
  width:960px;
  height:90px;
  background:url(/media/images/header-bg.png) repeat-x left top;
}
.header-inner {
  padding: 0 0 0 10px; /* no longer right, because we want to use that for cart 8*/
  position: relative;
}

.logo{
  width:490px;
  height:80px;
  padding:0px;
}
.logo * {
  vertical-align: middle;
}
.logo a{
  cursor:pointer;
}
.logo img.wc-logo{
  padding: 15px 10px 0px 0px;
}
.logo .org-name {
  margin: 0;
  padding-top: 10px;
  display: inline-block;
}
h1.org-name a:hover{
  text-decoration: underline;
}
div.org-name a.btn-adm{
  padding-left: 0.5em;
  color:#0099FF;
  text-decoration:underline;  
  font-weight: bold;
}
#organisationBrand a{
  font-size: 120%;
  font-weight: bold;
}
#organisationBrand a:hover{
  text-decoration: underline;
}
#organisationBrand a.btn-adm{
  color:#0099FF;
  text-decoration:underline;  
  font-weight: bold;
  padding-left: 0.5em;
}
h1.head-breadcrumb{
  color:#333;
  float:right;
} 

/* positioning adjectives */
#headerPositioning {
  position: absolute;
  left: 250px;
  top: 35px;
}
#headerPositioning h2 {
  float: left;
  height:30px;
  margin:0;
  text-indent:-99999px;
  overflow:hidden;
}
#headerPositioning h2.flexible {
  background:url(/media/images/flexible.png) no-repeat top left;
  width:115px;
}
#headerPositioning h2.easy {
  background:url(/media/images/easy.png) no-repeat top left;
  width:85px;
}
#headerPositioning h2.affordable {
  background:url(/media/images/affordable.png) no-repeat top left;
  width:125px;
}

/* Top nav */
.menu-nav ol, .menu-nav ul, .menu-nav li,
.menu-links ol, .menu-links ul, .menu-links li,
.header ol, .header ul, .header li {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  list-style: none;
}
.header .top-nav{
  padding-right: 10px;
  float:right;
  text-align:right;
  width:450px;
  clear:right;  
}
.header .user-nav .minimal-top-nav {
  padding-top: 5px;
  text-align:left;
}
.header .user-nav .minimal-top-nav * {
  vertical-align: middle;
  padding-right: 5px;
}  
.header .top-nav ul{
  float:right;
  text-align:right;
}
.header .top-nav ul li{
  float:left;
  margin-left:10px;
}

/* Account nav */
.header .user-nav{
  padding-right: 10px;
  float:right;
  margin:0px 0px 0px 0px;
  text-align:right;
  width:450px;
  clear:right;
}
.header .user-nav ul.user-nav-list {
  float:right;
}

.header .user-nav div.contact-org {
  padding-top: 0.5em;
  clear: right;
  float: right;
}

.header .cart-nav{
  margin-top: 30px;
}

.header a.space-left {
  padding-left: 0.5em;
}

div.embedded-header{
  height: 30px; 
  width: 100%; 
  padding-bottom: 3px;
}
div.embedded-header a.space-left {
  margin-left: 0.5em;
}

div.embedded-header h1.org-name {
  float: left;
  margin-top: 0;
  margin-right: 1em;
}

div.embedded-header div.cart-nav {
  float: right;
}

div.embedded-header #basketButton, div.embedded-header #checkoutButton {
  margin-left: 0.5em;
}

div.embedded-header div.sign-in-out-my-home {
  float: right;
}

/* Bottom nav */
.header .bottom-nav{
  float:right;
  margin:5px 0px 0px 0px;
  text-align:right;
  width:300px;
  clear:right;  
}
.header .bottom-nav ul{
  float:right;
  text-align:right;
}
.header .bottom-nav ul li{
  float:left;
  margin-left:10px;
}

/* Main content styles */
.main{
  margin:0 auto; 
  width:960px;
  text-align:left;
  height:auto;
  padding:10px 0px 0px 0px;
  background:url(/media/images/header-bg.png) repeat-x left top;
}
.main .content{
  margin:0 auto; 
  width:940px;
  text-align:left;
  min-height:300px;
  height:auto;
  padding:0px 10px 30px 10px;
  background:url(/media/images/header-blocks-bg.png) repeat-x left bottom;
}
.main .left_content{
  float:left;
  width:360px;
  height:auto;
  padding:0px 10px 0px 0px;
}
.main .right_content{
  float:right;
  width:560px;
  height:auto;
  padding:0px 0px 0px 0px;
}
div.seperator.text-left {
  text-align: left;
}

/* this is for listed tables */
.rounded table tr.seperator th,
.rounded table tr.seperator td{
  border-bottom:1px dotted #cccccc;
  margin-bottom:5px;
}
div.seperator {
  text-align: right;
  padding-bottom: 5px;
  border-bottom:1px dotted #cccccc;
  margin-bottom:5px;
}

/* Inline help box */
.inline-help{
  padding:5px 10px;
  clear:both;
  border:1px dotted #ffff99;
  background: #ffffee;
}

/* Footer styles */
.footer{
  margin:0 auto; 
  width:960px;
  text-align:left;
  padding:10px 0px 0px 0px;  
}
.footer .copyright{
  text-align:left;
  width:455px;
  padding:0px 0px 0px 10px;
} 
.footer .copyright a{
  margin-right:10px;
} 
.footer .copyright *{
  vertical-align:middle;
} 
.footer .copyright p{
  font-size:11px;
} 
.footer .sponsors{
  float:right;
  width:440px;
  height:65px;
  padding:0px 0px 0px 10px;
} 
.footer .sponsors img{
  margin-right:5px;
} 

/* Message / Error Styles */
.message{
  clear:both;
  width:100%;
  padding:3px 0px;
  text-align:center;
  border:1px dotted #009900;
  font-weight:bold;
  color:#009900;
}
span.message{
  width:100%;
  padding:0px;
  text-align:center;
  border:0;
  font-weight:normal;
  color:#009900;
}
span.error-message{
  color:#FF0000;
}
.message-error{
  clear:both;
  width:100%;
  padding:3px 3px;
  text-align:center;
  border:1px dotted #FF0000;
  font-weight:bold;
  color:#FF0000;
}
.message-error.light{
  text-align: left;
  font-weight:normal;
}
span.message-error{
  width:100%;
  padding:0px;
  text-align:center;
  border:0;
  font-weight:normal;
  color:#FF0000;
}
strong.message-error{
  border:0;
}

/* Class Clear*/
.clear:after{
  content: ".";
  display:block;
  clear: both;
  visibility:hidden;
  line-height: 0;
  height: 0;
} 
.clear{
  display:inline-block;
} 
html[xmlns] .clear{
  display:block;
} 
* html .clear {
  height: 1%;
}

/* tool tip */
a.tooltip{
  margin:0px 0px 0px 3px;
  text-decoration:none;
  padding-bottom: 2px;
  position: relative;
}
a.tooltip:hover {
  background:#ffffff; /*BG color is a must for IE6*/
  text-decoration:none;
} 
a.tooltip span {
  display:none; 
  padding:2px 3px; 
  margin-left:8px; 
  width:300px;
  white-space: normal; /* to counter any nowrap setting on the parent element */
  z-index: 99;
}
a.tooltip:hover span{
  display:inline; 
  position:absolute;
  border:1px dotted #60CDF6; 
  background:#ffffff; 
  color:#0099FF;
}
a.tooltip.missing{
  padding: 4px;
  background-color: red;
  display: none;
}

/* Show the tooltip on left*/
a.on-left:hover span{
  margin-left:-325px;
}
/* Show the tooltip on top*/
a.on-top:hover span{
  bottom: 0;
}
a.tooltip.force-on-left:hover span{
  margin-left:-325px;
}

/* Table styles */
table th{
  padding-right:5px;
}
.rounded table{
  width:100%;
}
.rounded table tr th{
  text-align:left;
  font-weight: normal;
}
table.filter tr td input{
  float:left;
  clear:left;
}

/* Table list style */
table.list{
  border-collapse: collapse;
  border-spacing: 0;
  border:1px solid #81D7F8;
  background:none;
  margin-top:5px;
  margin-bottom:5px;
}
table.list tr th,
table.list tr td{
  padding-left:.5em;
  padding-right:.5em;
}
table.list tr.heading th,
table.list tr.heading td{
  border:1px solid #81D7F8;
  color:#333;
  font-weight:bold;
  text-align:left;
}
table.list tr th, table.list tr td{
  border:1px dotted #60CDF6;
}
table.list tr td.buttons,
table.list th.buttons{
  padding:3px 5px 3px 5px;
  text-align:right;
}
table.list tr td.buttons div,
table.list th.buttons div{
  padding:3px 5px 3px 5px;
  text-align:left;
}
table.list tr td.buttons div.buttons{
  text-align:right;
}
table.list tr td.buttons div.buttons button{
  margin-bottom:5px;
}
table.list tr td.align-right,
table.list tr th.align-right,
table.summary-order tr td.right,
table.summary-order tr.total td,
table.list tr td.right,
table.list tr th.right{
  padding:3px 5px 3px 5px;
  text-align:right;
}
table.list tr td.qty,
table.list tr th.qty{
  text-align:center;
}

/* Table Grid in the Table List */
table.list tr td table.grid{
  border-collapse: collapse;
  border-spacing: 0;
  width:98%; 
  margin:5px 5px 5px 0px;
}

/* suppress border on nested list=>grid tables */
table.list tr td table.grid.no-border,
table.list tr td table.grid.no-border tr td,
table.list tr td table.grid.no-border tr th {
  border: none;
}

/* suppress border on nested list=>grid tables */
table.list tr td table.grid.no-padding,
table.list tr td table.grid.no-padding tr td,
table.list tr td table.grid.no-padding tr th {
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Table/Div wide */
div.wide,
table.wide{
  width:100%;
}

/* Paginator styles */
table.pagination{
  border:1px solid #ccc;
  background:#ffffff;
  width:100%;
  padding:3px 0px;
  margin:5px 0px;
  border-collapse: collapse;
  border-spacing: 0;
}
table.pagination form, form.tight{
  margin:0px;
}
table.pagination th{
  padding:3px;
  font-weight:normal;
}
table.pagination th.org-search{
  text-align:right;
  padding-right:5px;
}

/* Tabel grid */
table.grid tr th{
  text-align:right;
  font-weight: normal;
}
table.grid *{
  vertical-align: middle;
}
table.grid tr.tall *{
  vertical-align: top;
}

table.virtual-record tr th{
  text-align: right;
  vertical-align: top;  /* big fields should have labels at top */
  padding-right: 10px;  /* gap between label and field */
  width: 180px; /* constant width makes expanding child fields less confusing */
  padding-bottom: 10px; /* gap between rows in form */
}
table.virtual-record div.description{
  float: left;
  margin-left: 1em;
  margin-top: 0.2em;
  width: 60%;
}
table.virtual-record div.description-field{
  float: left;
}
table.virtual-record td{
  vertical-align: top; /* if label wraps and field is small, push field to top */
  padding-bottom: 10px; /* gap between rows in form */
}
table.virtual-record td p{
  margin-top:0;
}

table.virtual-record input[type=radio] {
  margin-right: 10px;
}

/* Round corners */
.rounded {
  margin:0px 0px 10px 0px;
  /* Do rounding (native in Firefox and Safari) */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  /* css3 / ie 9 */
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

  background:url(/media/images/header-bg.png) #ffffff repeat-x left top;
  border: 1px solid #ccc;
}
.rounded .inner {
  margin:5px;
}
.rounded-logo{
  float:left;
  margin:0px 5px 10px 0px;
  width:60px;
  padding:2px;
  background:#ffffff;
}
.inner-logo{
  margin:5px;
  background:#ffffff;
  height:50px;
  line-height:45px;
}
.inner-logo *{
  vertical-align:middle;
  text-align:center;
}
.inner-logo a{
  width:50px;
  display:block;
}

/* Input.textbox border style */
input.textbox, textarea.textbox {
  border: 1px solid #60CDF6;
}

/* Module button style */
.buttonGray{
  padding:2px;
}
.my-org .orgbutton{
  float:left;
  margin:2px;
}

/* background image + border button */
/* Primary buttons */
.ui-widget input.positive, /* makes it work inside dialogs */
.header .positive,
a.orgbutton,
.orgbutton button,
.orgbutton,
.edit,
.positive,
.positive.disabled {
  background:url(/media/images/btn-bg.png) no-repeat right center; 
  color:#fff; 
  border:none;
  padding:2px 15px 1px 5px;
  font-weight:bold;
  cursor:pointer;
  text-decoration:none;
  white-space: nowrap;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  
  font-size:1em;
  font-family:Arial, Helvetica, sans-serif;
}
a.positive{  
  padding:3px 15px 2px 5px;
}
a.orgbutton:hover,
.orgbutton button:hover,
.positive.disabled,
.orgbutton:hover,
.edit:hover,
.positive:hover{ 
  background:url(/media/images/btn-hover-bg.png) no-repeat right center; 
  color:#fff; 
  text-decoration:none;
}
.positive.disabled{   
  text-decoration:none;
  cursor: text;
  color:#999; 
  background:url(/media/images/btn-disabled-bg.png) no-repeat right center; 
}

/* override jquery ui style */
.ui-widget-content a.positive {
  color:#FFFFFF;
}

a.orgbutton.large, button.orgbutton.large {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;

  /* css3 / ie 9 */
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  
  background:url(/media/images/org-buttons/btn-bg-large-4.png) no-repeat right center; 
  padding:6px 30px 6px 10px;
  font-size: 18px;
}
a.orgbutton.large.lft, button.orgbutton.large.lft {
  background:url(/media/images/org-buttons/btn-bg-large-lft-4.png) no-repeat left center; 
  padding:6px 10px 6px 30px;
}

a.orgbutton.large:hover, button.orgbutton.large:hover {
  background:url(/media/images/org-buttons/btn-bg-large-hover-4.png) no-repeat right center; 
}
a.orgbutton.large.lft:hover, button.orgbutton.large.lft:hover {
  background:url(/media/images/org-buttons/btn-bg-large-lft-hover-4.png) no-repeat left center; 
}

/* Secondary buttons */
a.last,
button.last,
.negative{
  text-decoration:underline;
  font-weight:normal;
  border:none;
  cursor:pointer;
  background:none;
}
.last:hover,
.negative:hover{ 
  color:#333; 
  text-decoration:underline;
}

/* Event category tree and events */
#categoryTree{
  width: 30%;
}
#categoryTree ul{
  margin:0px;
  padding:0px;
}
#categoryTree li.currentPath a{
  font-weight: bold;
}
#categoryTree li.notCurrentPath a{
  font-weight: normal;
}
#categoryTreeEvents{
  float:right; 
  width:65%;
  padding:0px 0px 0px 10px;
  border-left:1px dotted #cccccc;
}

/* Required fields*/
span.required, span.alert{
  color:#FF0000;
}
td.price{
  text-align: right;
  padding-right: 1em;
}
/* Some specific classes to override the normal styles */
.center,
.align-center{
  text-align: center !important;  /* if specifically specified as centered then do that! */
}
.align-left,
tr.align-left th{
  text-align: left; 
}
.valign-bottom{
  vertical-align: bottom; 
}
.m5{
  margin:5px;
}
.m10{
  margin:10px;
}
.blue{
  color:#36c2f6;
}
.bold{
  font-weight:bold;
}
.italic{
  font-style:italic;
}
.float-left{
  float:left;
}
.float-right{
  float:right;
}
.clearboth{
  clear:both;
}
.clear-right {
  clear:right;
}
.clear-left {
  clear:left;
}
.nowrap{
  white-space: nowrap;
}
.rounded table.pagination tr th.textright,
.textright{
  text-align:right;
}
.hidden {
  display: none;
}
.w20{
  width:20px;
}
.w145{
  width:145px;
}
.left{
  text-align: left;
}
.right{
  text-align: right;
}
.top{
  vertical-align: top !important;
}
.middle{
  vertical-align: middle;
}
.numeric {
  text-align: right;
  padding-left: 10px;
}
.total {
  font-weight: bold;
  border-top: 1px solid #ccc; 
  padding-top: 5px; 
  margin-top: 5px;
}

.w60,
table.small-orders{
  width:60%;
}
.white{
  padding:5px;
  background:#ffffff;
}

.warning{
  color: red;
}

.alert{
  color: orange;
}

.payment-overdue{
  clear: both;
  color: red;
  border: 1px dotted red;
  margin: 1em 0 1em 0;
  padding: 1em;
}

.strong{
  font-weight: bold;
}

.cancelled td{
  text-decoration: line-through;
  color: red;
}
.cancelled td.buttons{
  text-decoration: none;
}

/* override font-family for jQuery UI */
.ui-widget {
  font-family:Arial, Helvetica, sans-serif; 
}
.ui-widget-content {
  color:#333;
}
.ui-widget input, .ui-widget select, .ui-widget textarea {
  font-family:Arial, Helvetica, sans-serif; 
  color:#333;
}

/* Profiler Style ONLY FOR DEV */
.profiler{
  width:98%;
  padding:1%;
  background:#eee;
  text-align:left;
}
.profiler table td{
  border:1px solid #333;
}
.profiler p{
  margin:20px 0px 5px 0px;
  font-weight:bold;
}

/* Background for Images*/
.img-bg a,
.img-bg span{
  float:left;
  padding:3px 0px 0px 6px;
  background:url(/media/images/img-bg-left.png) no-repeat left top;
} 
.img-bg img{
  padding:1px 10px 10px 2px;
  margin-right:0px;
  background:url(/media/images/img-bg-right.png) no-repeat right bottom;
} 

label.virtual-multi-enum {
  display: block;
  float: left;
}
input[type="checkbox"].virtual-multi-enum {
  margin-left: 3px;
  margin-right: 10px;
}

.filter fieldset fieldset{
  margin: 5px;
}
.helpful{
  color: green;
}

span.soft-warning{
  color: darkorange;
}


div#organisationGroupEditorTabs {
  min-height: 30em;
}
div#organisationGroupEditorTabs div.member-block {
  float: left;
  width: 50%;
}
div#organisationGroupEditorTabs div.addresses-block {
  float: left;
  margin-left: 20px;
  width: 45%;
}
div#organisationGroupEditorTabs div.virtual-record-block {
}
div#organisationGroupEditorTabs div.addresses-block div.form-container {
  border-bottom: 1px solid #aaa;
  margin-bottom: 5px;
}

div.add-new-group-member input.textbox {
  width: 70%
}
div#organisation_group input {
  width: 70%
}

div.introduction{
  margin: 1em;
  padding: 1em;
  border: 1px dotted green;
}

.w38 {
  width: 38%;
}
.w60 {
  width: 60%;
}

.w70 {
  width: 70%;
}
.w28 {
  width: 28%;
}

.w48 {
  width: 48%;
}
.w50 {
  width: 50%;
}

/* new auto resize image frames */

div.image_frame{
  float: left;
  z-index: 51; /* to force above bg */
  position: relative;
  padding: 8px 7px 9px 7px;
}
div.image_frame.float-right {
  float: right;
}

div.image_frame img{
  background: none;
  border: 0;
  display: block;
  float: none;
  margin: 0;
  padding: 0;
}

div.image_frame a{
  display: inline-block;
}

div.image_frame div.upper_left {
  z-index: -1; /* to make a tags around image work */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent url('/media/images/bg_frame.gif') no-repeat 0 0;
}


div.image_frame div.upper_right {
  width: 16px;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  background: transparent url('/media/images/bg_frame.gif') no-repeat right 0;
}


div.image_frame div.lower_left {
  background: url("/media/images/bg_frame.gif") no-repeat scroll left bottom transparent;
  bottom: 0;
  height: 16px;
  left: 0;
  margin-left: 0;
  position: absolute;
  width: 100%;
}


div.image_frame div.lower_right {
  width: 90px;
  height: 16px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: transparent url('/media/images/bg_frame.gif') no-repeat bottom right;
}

div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
  opacity:                      .95 !important;
  -ms-filter:                   "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)" !important;
  filter:                       progid:DXImageTransform.Microsoft.Alpha(Opacity=95) !important;
}

div.cart-nav {
  position: relative;
}
div#onPageCartContainer {
  width: 30em;
  position: absolute;
  right: 0;
  display: none;
  z-index: 1999;
}
div#onPageCart {
  background-color: white;
  margin: 0;
  padding: 1em;
  border: 1px solid grey;
}

div#onPageCart {
  text-align: left;
}

div.checkout-payment-alert {
  color: red;
  width: 50%;
  margin: 2em;
  padding: 2em;
  border: 2px solid red;
}

div.payment-alert {
  width: 50%;
  float: right;
}
div.payment-alert div.checkout-payment-alert {
  margin-top: 0;
  padding: 1em;
  width: 80%;
}

/* lightbox */

a.lightbox img {
  padding: 5px;
  border: 5px solid white;
}
a.lightbox img:hover {
  border: 5px solid #ea8501;
}
span#lightbox-image-details-caption {
  font-size: 1.4em;
  color: #3399CC
}

span.fc-header-title h2 {
  font-size: 14px;
}

/* generic menu */

ul.menu li {
  margin-right: 2em;
  float: left;
  list-style: none;
}
ul.menu  {
  margin-left: 0;
  padding-left: 0;
}

/* global cf */
.cf:before,
.cf:after {
  content: "";
  display: table;
}
 
.cf:after {
  clear: both;
}
 
.cf {
  zoom: 1; /* ie 6/7 */
}

.cfs:before
{
  content: "";
  display: table;
}
 
table.event-variation-info {
  font-size: 1.2em;
}
table.event-variation-info td {
  font-weight: bold;
  color: red;
}
div.browser {
  margin-bottom: 2em;
}
p.template-warning, p.template-warning a {
  color: red;
  
}
p.template-warning a {
  text-decoration: underline;
}

/* step by step progressbar */
/*progressbar*/
.progressbar {
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1em;
  padding-right: 1em;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}
.progressbar li {
  text-align: center;
  list-style-type: none;
  padding-left: 2%;
  color: #222;
  float: left;
  position: relative;
}
.progressbar li:before {
  text-align: center;
  content: counter(step);
  counter-increment: step;
  width: 30px;
  line-height: 30px;
  display: block;
  font-size: 16px;
  color: #333;
  background: #ddd;
  border-radius: 3px;
  margin: 0 auto 5px auto;
  position: relative;
  z-index: 1;
}
/*progressbar connectors*/
.progressbar li:after {
  content: '';
  width: 100%;
  height: 4px;
  background: #ddd;
  position: absolute;
  left: -50%;
  top: 13px;
  z-index: 0; /* behind counter numbers */
}
.progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.progressbar li.active:before,  .progressbar li.active:after{
  background: #27AE60;
  color: white;
}

td.vf-indent-1 {
  padding-left: 3em;
}
td.vf-indent-2 {
  padding-left: 6em;
}
td.vf-indent-3 {
  padding-left: 9em;
}
td.vf-indent-4 {
  padding-left: 12em;
}

div#order-view-details tr.warning a {
  color: red;
}

#pw-progressbar-wrapper {
  box-sizing: border-box;
  width: 201px;
  height: 18px;
  overflow: hidden;
  background-color: whitesmoke;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
}

#pw-progressbar {
  height: 100%;
}
#pw-progressbar.complexity-low {
  background-color: #D9534F;
}
#pw-progressbar.complexity-medium {
  background-color: #EA8501;
}
#pw-progressbar.complexity-high {
  background-color: #5CB85C;
}

form#signup table.grid th {
  width: 12em;
}
form#signup table.grid input {
  width: 15em;
}
.no-border {
  border: none !important;
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-capitalize {
  text-transform: capitalize;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}


/** CS EDITS **/

div.ql-container > div.ql-editor  {
  max-height: 600px;
}

div.ql-container > div.ql-editor > p {
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 13px;
  margin-bottom: 1em;
  margin-top: 1em;
  min-height: 20px;
}

div.ql-container > div.ql-editor > p > br{
  display:none
}