body {
  /*margin-bottom: 80px;*/
  text-align: justify;
}

.page-header {
  margin-top: 0;
}

/*
.panel-body {
	padding-top: 0;
}*/


/*Typeahead css changes*/

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0px;
  margin-top: 0px;
  font-size: 13px;
  padding-left: 0px !important;
  padding-right: 14px;
  /*     -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
               border-radius: 15px;  */
  width: 100%;
  min-height: 20px;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.twitter-typeahead .tt-hint {
  display: block;
  /*height: 34px;*/
  height: 22px;
  padding: 6px 12px;
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.428571429;
  border: 1px solid transparent;
  color:#d3e2bb;
  width:100%;
}
.twitter-typeahead .hint-small {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
  line-height: 1.5;
}
.twitter-typeahead .hint-large {
  height: 45px;
  padding: 10px 16px;
  font-size: 18px;
  border-radius: 6px;
  line-height: 1.33;
}

.twitter-typeahead{
  width:100%;
}

.twitter-typeahead .tt-query{
  margin-bottom: 0;
}
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  width:100%;
}

.tt-menu {
  width: 100%;
  max-height: 255px;
  overflow-y: auto;

  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 12px;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #1b807c;
  background-image: -moz-linear-gradient(top, #1d8a86, #197672);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1d8a86), to(#197672));
  background-image: -webkit-linear-gradient(top, #1d8a86, #197672);
  background-image: -o-linear-gradient(top, #1d8a86, #197672);
  background-image: linear-gradient(to bottom, #1d8a86, #197672);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}


/* some more typeahead stuff ... at the point i'm too busy to determine which styles are necessary and remove the duplicates.. a clean up job for later*/

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 100%;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ced4da;
  border: 1px solid rgba(0, 0, 0, 0.01);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);

}

.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  /*color: #fff;*/
  background-color: #eee;

}

.tt-suggestion p {
  margin: 0;
}

.tt-selectable + .tt-selectable {
  /*border-top: 1px solid #ccd6dd;*/
}

/*Tablesorter css changes*/

table.tablesorter thead tr th.tablesorter-headerAsc {
  background-image: url('../images/hipla-asc.gif');
  background-repeat: no-repeat;
  background-position: 90% 50%;
}
table.tablesorter thead tr th.tablesorter-headerDesc {
  background-image: url('../images/hipla-desc.gif');
  background-repeat: no-repeat;
  background-position: 90% 50%;
}
table.tablesorter thead tr .tablesorter-header {
  background-image: url('../images/hipla-unsorted.gif');
  background-repeat: no-repeat;
  background-position: 90% 50%;
}

table.tablesorter > thead >tr > th.sorter-false {
  background-image: none;
  background-repeat: no-repeat;
  background-position: 90% 50%;
}

/*Google maps*/

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }



/*to fix the jquery form validation error message placement if putting in an unordered list
ul
{
padding: 0px;
margin-left: 20px;
}
*/

/*To remove the top border for myMaximumPrice modal on buying-position*/
.table.borderTopNone th, .table.borderTopNone td, .table.borderTopNone tbody tr td{
  border-top: none;
}


.delete_entry {
  margin-left: 10px;
  /*display: inline-block;
  color: #d9534f;
  height: 13px;
  width: 30px;
  background-color: #fffff;
  top: 5px;
  margin-bottom: 0;
  margin-left: 10px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: none;
  white-space: nowrap;
  padding: 0px 0px;
  font-size: 14px;
  line-height: 0;
  border-radius: 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;*/
}
/*
.delete_entry:focus {
  outline: thin dotted;
  outline: 0px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.delete_entry:hover,
.delete_entry:focus {
  color: #333333;
  text-decoration: none;
}*/

.collapse-tooltip {
  color: #1b807c;
  display: inline;
  vertical-align: top;
  background-color: #FFFFFF;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .collapse-tooltip {
    padding: 7px 0px;
  }
}

@media (min-width: 768px) {
  .collapse-tooltip.collapse-tooltip-no-padding{
    padding: 0px 0px;
  }
}


.collapse-tooltip:focus{
  outline: thin dotted;
  outline: 0px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.collapse-tooltip:hover,
.collapse-tooltip:focus{
  color: #333333;
  text-decoration: none;
}

.agent-select-address{
  font-weight: normal;
  line-height: 1.2;
  color: #777777;
  font-style: italic;
  font-size: 75%;
  padding-left: 5px;
}

.agent-select-logo{
  height: 100%;
  width: 40px;
  background-size: contain;
  background-position: 0px, 0px;
  background-repeat:no-repeat;
}

.sprite {
  background-image:url('../images/sprite-logo3.png');
  background-repeat:no-repeat;
}

.logo {
  background-position: 0 0;
  width: 206px;
  height: 60px;
}

body { padding-top: 60px; }

/*styling to improve the bootstrap select picker plugin to make it look the same height and colour as an input-sm
*/
.selectpicker, .bootstrap-select > .dropdown-toggle {
  padding: 4px 12px;
}



.selectpicker:focus,
.selectpicker:active
{
  border-color: #6fa6a4;
  background-color: #fff;
  outline: 0;
}

.selectpicker:hover
{
  background-color: #fff;
  border: 1px solid #999999;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  border-color: #adadad;
  outline: 0;
}
/* to make disabled bootstrap selects have same colour as disabled inputs */
.btn.selectpicker.disabled {
  background-color: #EEEEEE !important;
  opacity: 1 !important;
}

/* styling to remove the blue background from form focus items
*/

.btn:focus,
.btn:active:focus,
.btn.active:focus,
a:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: none;
}

.bootstrap-select .btn:focus, .bootstrap-select .btn:active
{
  border-color: #8dc0be;
  background-color: #fff;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(141, 192, 190, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(141, 192, 190, 0.6);
}

.bootstrap-select .btn:hover {
  border-color: #999999;
  outline: 0;

}

.open > .dropdown-toggle.btn-default {
  background-color: #fff;
}


.has-error2 {
  border-color: #a94442 !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  background-color: #F9E1E1;
}
.has-error2:hover {
  border-color: #999999 !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  background-color: #F9E1E1;
}

.has-error2:focus {
  border-color: #843534 !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483 !important;
  background-color: #F9E1E1;
}

.has-error2 > .dropdown-menu > li > a, .has-error2 > .dropdown-menu {
  background-color: #F9E1E1;
}

.has-error2 > .dropdown-menu > li.divider {
  background-color: #999999;
}

/*otherwise it shows as white*/
.has-error2 > .dropdown-menu > .active > a {
  color: #777777;
}
.has-error2 > .dropdown-menu > .active > a:hover, .has-error2 > .dropdown-menu > .active > a:focus {
  color: #ffffff;
}

.has-error .form-control {
  background-color: #F9E1E1;
}

.has-error .help-block {
  color: red;
}


/* styling to align control labels to the left*/
.form-horizontal .control-label{
  /* text-align:right; */
  text-align:left;
}


/* styling to create the add applicant button on the affordability check*/

.add-applicant-btn {
  display: inline-block;
  width: 100%;
  height: 162px;
  margin-top: 15px;
  margin-bottom: 0px;
  font-weight: normal;
  font-style: italic;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  background-color: #ffffff;
  color: #bbbbbb;
  border: 1px dashed #cccccc;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.42857143;
  border-radius: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
  -webkit-transition: border-color ease-in-out 0.15s, color ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s;
}

.add-applicant-btn:hover, .add-applicant-btn:focus {
  color: #1b807c;
  text-decoration: none;
  background-color: #f5f5f5;
  border: 1px dashed #cccccc;
}

.add-dependent-btn {
  display: inline-block;
  width: 100%;
  height: 40px;
  margin-top: 15px;
  margin-bottom: 0px;
  font-weight: normal;
  font-style: italic;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  background-color: #ffffff;
  color: #bbbbbb;
  border: 1px dashed #cccccc;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.42857143;
  border-radius: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
  -webkit-transition: border-color ease-in-out 0.15s, color ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s;
}

.add-dependent-btn:hover, .add-applicant-btn:focus {
  color: #1b807c;
  text-decoration: none;
  background-color: #f5f5f5;
  border: 1px dashed #cccccc;
}



.hide {
  display: none;

}
.hide2slide {
  display: none;
  opacity: 0;
}


.applicant-2 {
  display: block;
}

.income-heading, .outgoings-heading {
  font-weight: normal;
  line-height: 1;
  color: #777777;
  margin-top: 8px;
  font-size: 13.5px;
}

.hipla-tooltip {
  margin-left: 5px;
}

.hipla-tooltip:hover {
  text-decoration: none;
}

/* NOT WORKING: to remove the nasty x close box in IE 11 on inputs */
input::-ms-clear {
  display: none !important;
}

/* NOT WORKING: to remove the nasty dotted line around the tabs */
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
  outline: none !important;
  color: #555555;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}


.table-panel {
  text-align:center;
  border-collapse:separate;
  border: 1px solid #dddddd;
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

}

.table-panel > thead {
  text-align:center;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.table-panel > thead > tr > th {
  text-align:center;
  border-bottom: 1px solid #dddddd;
}

.table-panel > tbody > tr > td.verticalAlignMiddle {
  vertical-align:middle;
}


td.verticalAlignMiddle > p > button {
  margin-top: 5px;
}

.lender-logo {
  display: block;
  max-width: 120px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  background-image:url(../images/sprite-logo-lenders.png);
}

@media (max-width: 768px) {
  .company-mm-alignment {
    padding-left: 0px;
    padding-right: 2px;
    margin-bottom:10px;
  }
}

@media (min-width: 769px) {
  .company-mm-alignment {
    padding-left: 2px;
    padding-right: 0px;
  }
}

p, h4, h3 {
  text-align:justify;
}

.align-centre {
  text-align:center;
}

@media (max-width: 768px) {
  .margin-bottom-10-xs {
    margin-bottom:10px;
  }
}

.max-loan-sort-tooltip {
  position: relative;
  top: 25px;
}

/*to prevent the navbar from scrolling on a small screen. */
@media (max-width: 767px) {
  /*#nav-menu {
    max-height: none !important;
    overflow-x: hidden !important;
  }*/
}

.no-margin-bottom{
  margin-bottom: 0px;
}

.no-margin-top{
  margin-top: 0px;
}

/* to make disabled bootstrap selects have same colour as disabled inputs */

.col-lg-1point25 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 1200px) {
  .col-lg-1point25 {
    float: left;
  }
  .col-lg-1point25 {
    width: 10.40%;
  }
}

.text-white {
  color: #FFF;
}

/* noty saved notification: needed to provide a fadeToUp type transition, i.e. one with opacity*/
@-webkit-keyframes fadeToUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 0.6;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeToUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 0.6;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeToUp {
  -webkit-animation-name: fadeToUp;
  animation-name: fadeToUp;
}

@-webkit-keyframes fadeToDown {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeToDown {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeToDown {
  -webkit-animation-name: fadeToDown;
  animation-name: fadeToDown;
}

@-webkit-keyframes saveFadeIn {
  0% {opacity: 0;}
  100% {opacity: 0.5;}
}

@keyframes saveFadeIn {
  0% {opacity: 0;}
  100% {opacity: 0.5;}
}

.saveFadeIn {
  -webkit-animation-name: saveFadeIn;
  animation-name: saveFadeIn;
}

@-webkit-keyframes saveFadeOut {
  0% {opacity: 0.5;}
  100% {opacity: 0;}
}

@keyframes saveFadeOut {
  0% {opacity: 0.5;}
  100% {opacity: 0;}
}

.saveFadeOut {
  -webkit-animation-name: saveFadeOut;
  animation-name: saveFadeOut;
}

/* To provide enough padding so when a spinner is temporarily shown (such as for a delete) that the existing text placement is not moved */

.spinnerPadding {
  padding-bottom: 6px;
}

/* To provide flat edges for the input when a typeahead and part of a group

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}*/

/* IE specific styling */
input[type="radio"]:focus {
  outline: none;
}
/* chart y axis lable */
.y-axis{
  min-height: 10em;
  position: relative;
}
.y-axis p{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 100%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}


.row-chart {
  height: 100px;
  max-height: 266px;
}


/* Chart JS Tooltip */

#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  padding: 3px;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#chartjs-tooltip.below {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#chartjs-tooltip.below:before {
  border: solid;
  border-color: #111 transparent;
  border-color: rgba(0, 0, 0, .8) transparent;
  border-width: 0 8px 8px 8px;
  bottom: 1em;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  z-index: 99;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}
#chartjs-tooltip.above {
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
  border: solid;
  border-color: #111 transparent;
  border-color: rgba(0, 0, 0, .8) transparent;
  border-width: 8px 8px 0 8px;
  bottom: 1em;
  content: "";
  display: block;
  left: 50%;
  top: 100%;
  position: absolute;
  z-index: 99;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.table > tbody > tr > td.table-spacer{
  padding-bottom: 28px;
}


@media print{
  .traffic-light-words {
    margin-left:-30px;
  }
}

.traffic-light-circle-red{
  color: #F7464A;
  background: #F7464A;
  background-image: radial-gradient(#FF5A5E, transparent);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding-top:0px;
  box-shadow:
          0 0 5px #111 inset,
          0 0 2px #F7464A;
}

.traffic-light-circle-red.request-status, .traffic-light-circle-amber.request-status, .traffic-light-circle-green.request-status{
  display: inline-block;
  position: relative;
  top: 5px;
  margin-right: 10px;
}

.request-status-position{
  margin-top: -14px;
}

.traffic-light-circle-amber{
  color: #FDB45C;
  background: #FDB45C;
  background-image: radial-gradient(#FFC870, transparent);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding-top:0px;
  box-shadow:
          0 0 5px #111 inset,
          0 0 2px #FDB45C;
}

.traffic-light-circle-green{
  color: #46BFBD;
  background: #46BFBD;
  background-image: radial-gradient(#5AD3D1, transparent);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding-top:0px;
  box-shadow:
          0 0 5px #111 inset,
          0 0 2px #46BFBD;
}

.traffic-light-circle-na{
  color: #bebebe;
  background: #bebebe;
  background-image: radial-gradient(white, transparent);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding-top:0px;
  box-shadow:
          0 0 5px #b5b5b5 inset,
          0 0 2px white;
}

.traffic-light-words-red{
  color: red;
  padding-left: 30px;
}
.traffic-light-words-amber{
  color: orange;
  padding-left: 30px;
}
.traffic-light-words-green{
  color: green;
  padding-left: 30px;
}
.traffic-light-words-na{
  color: green;
  padding-left: 30px;
}

.traffic-light-words{
  padding-left: 30px;
}

.traffic-light-words-red.request-status{
  display: inline-block;
}


@media (max-width: 767px) {
  .no-padding-top-xs-mode {
    padding-top: 0px;
  }
}

.no-padding-top {
  padding-top: 0px;
}

.scorecard-subheading-row {
  margin-bottom:10px;
}

ul.hipla-bullet{
  line-height: 2em;
}

.padding-top-10{
  padding-top: 10px;
}

.padding-top-7{
  padding-top: 7px;
}

.legend {
}

.legend-title {
  display: block;
  margin-bottom: 0.5em;
  padding: 0 0.3em;
  font-size: 0.9rem;
}

.legend .color-sample {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  /*border: 1px solid;  Comment out if you don't want to show the black border */
  border-radius: 1em; /* Comment out if you prefer squarish samples */
  margin-right: 0.5em;
}

.better {
  /*background-color: #F7464A;*/
  /*background-color: rgba(247,70,74,1);*/
  background-color: rgba(247,70,74,1);
}

.text-better {
  /*background-color: #F7464A;*/
  /*background-color: rgba(247,70,74,1);*/
  color: rgba(247,70,74,1);
}


.same {
  /*background-color: #FDB45C;*/
  /*background-color: rgba(253,180,92,0.3);*/
  background-color: rgba(166,151,133,0.4);
}

.worse {
  /*background-color: #46BFBD;*/
  /*background-color: rgba(70,191,189,0.3);*/
  background-color: rgba(134,163,163,0.3);
}

.chart {
  margin-bottom: 10px;
}

.score-percentage-icon {
  display: inline-block;
  margin-top: -28px;
  /*margin-left: -15px;*/
}

.score-percentage-icon-background {
  top: 5px;
}

.score-percentage-text {
  font-family: Arial, Helvetica, Geneva, SansSerif;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
  padding-top: 3px;
}

.text-good {
  color: #46BFBD;
}

.text-ok {
  color: #FDB45C;
}

.text-bad {
  color: #F7464A;
}

.text-na {
  color: #dddddd;
}

.text-star-yellow {
  color: #BD882C;
}

.text-green {
  color: #00c851;
}

.text-amber {
  color: #fb3;
}

.text-red {
  color: #ff3547;
}

.translate-caret-up-for-hidden-comments{
  transform:  translate(-3px, -6px) rotate(45deg);
}

.margin-left-5px {
  margin-left: 5px;
}

.margin-top-10px {
  margin-top: 10px;
}

.margin-bottom-10px {
  margin-bottom: 10px;
}

/*To make SVG clickable*/
a.svg {
  position: relative;
  display: inline-block;
}
a.svg:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Retina display */
@media screen and (min-width: 1024px){
}

/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
}

/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
}

/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
}

/* Mobile LD */
@media screen and (max-width: 350px){
}

/*CSS for revolution slide */
.bannercontainer {
  width:100%;
  position:relative;
  padding:0;
}
.banner{
  width:100%;
  position:relative;
}

.tp-caption.headline {
  position:absolute;
  color:#fff;
  text-shadow:0px 2px 10px rgba(0, 100, 100, 100);
  font-weight:700;
  font-size:60px;
  line-height:60px;
  font-family:'Asap';
  padding:2px 4px;
  margin:0px;
  border-width:0px;
  border-style:none;
  background-color:transparent;
  white-space:nowrap;
}

.tp-caption.screenshot-captions {
  position:absolute;
  color:#424B52;
  /*text-shadow:0px 2px 10px rgba(0, 100, 100, 100);*/
  font-weight:700;
  font-size:30px;
  line-height:60px;
  font-family:'Asap';
  padding:2px 4px;
  margin:0px;
  border-width:0px;
  border-style:none;
  background-color:transparent;
  white-space:nowrap;
}
/*
.tp-caption.screenshot-captions {
position:absolute;
color:#414B52;
font-weight:400;
font-size:28px;
line-height:30px;
font-family:'Roboto';
padding:2px 4px;
margin:0px;
border-width:0px;
border-style:none;
background-color:transparent;
white-space:nowrap;
}
*/

.learn-more-btn{
  position: relative;
  top: -200px;
  z-index: 1000;
}

.learn-more-btn .btn-primary{
  border-color: #ffffff;
}

.center-line {
  display: inline-block;
  width: 70px;
  height: 1px;
  border-top: 1px solid #bbb;
  /* border-bottom: 1px solid $skincolor; */
  margin: auto;
  text-align: center;

}
/* to prevent the dots being shown whilst the slider is loading */
.banner li{
  opacity:0;
}

.explainer-text{
  text-align: center;
  font-size:18px;
  margin-top:10px;
  margin-bottom:10px;
  font-family: inherit;
  font-weight: 300;
  line-height: 1.1;
  color: inherit;
}
.explainer-text-2{
  text-align: center;
  font-size:16px;
  margin-top:10px;
  margin-bottom:10px;
  font-family: inherit;
  font-weight: 300;
  line-height: 1.1;
  color: inherit;
}

.icon-circle {
  text-align: center; }

.icon-circle i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border: 1px solid;
  background-color: #ffffff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 20px;
  margin-bottom: 15px; }

.colored-boxed {
  text-align: center; }

.colored-boxed i {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: 1px solid;
  background-color: transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 30px;
  margin-bottom: 15px; }

.colored-boxed.green i {
  color: #1b807c;
}

.colored-boxed.dark i {
  color: #333;
  border-color: #333; }

.colored-boxed.blue i {
  color: #3b5998;
  border-color: #3b5998; }

.colored-boxed.red i {
  color: #cb2027;
  border-color: #cb2027; }

/*Nav bar at the bottom styling*/
.bottom-nav-menu{
  padding-top: 10px;
  padding-bottom: 10px;
}

.bottom-nav-menu > a{
  color: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}
.bottom-nav-menu > a:hover{
  color: #6fa6a4;
  text-decoration: none;
}

.navbar-social-buttons{
  padding-bottom: 10px;
  margin-top: -34px;
  float: right;
}

.s-btns{
  /*margin-top: -30px;*/
  float: right;

}
.s-btns > a, .navbar-social-buttons > a{
  padding-left: 5px;
  padding-right: 5px;
  color: #ffffff;
}
.s-btns > a:hover, .navbar-social-buttons > a:hover{
  color: #6fa6a4;
}

@media (max-width: 845px) {
  .bottom-nav-menu{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .s-btns, .navbar-social-buttons{
    margin-top: 0px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
}

.black-background {
  background-color: #232f3e;
  border-color: #232f3e;
}


/*to prevent the bottom nav bar from floating in space if there's not much content on the page*/
body{
  height:100%;
}

#page-wrapper{
  min-height:100%;
  position:relative;
}

.navbar-bottom{
  width: 100%;
  /*position:absolute;*/
  bottom:0;
  background-color:#232f3e;
  border-color: #232f3e;
}

#main-content{
  /*padding-bottom: 40px;*/
}

@media (max-width: 345px) {
  #main-content{
    /*padding-bottom: 107px;*/
  }
}

@media screen and (min-width: 346px) and (max-width: 547px){
  #main-content{
    /*padding-bottom: 87px;*/
  }
}

@media screen and (min-width: 547px) and (max-width: 767px){
  #main-content{
    /*padding-bottom: 67px;*/
  }
}
/*additional breadcrumb styling*/

.breadcrumbs-section-title{
  display: inline-block;
  margin-top: 18px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;

}

.breadcrumb{
  background-color: #6fa6a4;
  /*margin-top:-35px;*/
  margin-top:3px;
  margin-bottom: 0px;
  padding: 15px 15px;
  border-bottom: 1px solid #dddddd;
  border-radius: 0px;
  /*text-align: right;*/
  height: 50px;
  font-size: 16px;
  font-weight: 400;
}

.breadcrumb > li > a{
  color: #dddddd;
  font-weight: 400;

}

.breadcrumb > li > a:hover{
  color: #414b52;
  text-decoration: none;
  font-weight: 400;

}

.breadcrumb > .active {
  color: #ffffff;
}

/*Panel Styling for things such as dashboard*/

.panel-title-text{
  display: inline-block;
  color: #3a3a3a;
  padding-bottom: 10px;
  font-weight: bold;
}

.panel-plain > .panel-heading{
  background-color: #f5f5f5;
  border-bottom: 1px solid #dddddd;
}

.tool-status{
  display: inline-block;
  font-style: italic;
  font-size: 75%;
  font-weight: normal;
  color: #777777;
  padding-top: 7px;
  text-align: justify;
}

.tool-status.actionsRed{
  color: #f7464a;
}
.tool-status.actionsGreen{
  color: #46bfbd;
}
.dashboard-action-pad {
  padding: 10px;
  /*margin-bottom: 15px;*/
  min-height: 239px;
}
.dashboard-action-wrap {
  padding: 15px;
  border-radius: 5px;
  background-color: rgb(163 186 193 / 15%);;
}
.dashboard-action-icon-wrap {
  display: inline-block;
  background-color: white;
  width: 60px;
  text-align: center;
  border-radius: 100%;
  height: 60px;
}
.dashboard-action-icon {
}
.dashboard-action-heading {
  display: inline-block;
  font-family: Roboto, sans-serif;
  font-weight: bold;
  font-size: 14px;
  text-align: left;
  padding: 10px 0 2px 0;
  margin-left: 5px;
}
.dashboard-action-subheading {
  font-family: Roboto, sans-serif;
  font-weight: normal;
  font-size: 12px;
  padding: 0 0 15px 0;
  margin-top: 10px;
}
.dashboard-action-icon-sign {
  height: 24px;
  font-size: 30px;
  margin: 30px 0 0 0;
}
.dashboard-action-icon-passport {
  /*height: 27px;*/
  font-size: 30px;
  margin: 30px 0 0 0;
}
.dashboard-action-icon-dlp {
  height: 25px;
  font-size: 30px;
  margin: 30px 0 0 0;
}
.dashboard-action-icon-quote {
  height: 27px;
  font-size: 30px;
  margin: 30px 0 0 0;
}

/* Chain CSS

* {
  margin: 0;
  padding: 0;
}*/

.tree ul {
  margin: 0;
  padding: 0;
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
/*

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;

}*/

.tree li {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  margin: 0 -2px 0 -2px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #ccc;
  width: 50%; height: 20px;
}
.tree li::after{
  right: auto; left: 50%;
  border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
}

.tree li a{
  border: 1px solid #ccc;
  background-color: #eeeeee;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 2px 6px 0 rgba(0, 0, 0, 0.05);*/
  box-shadow: 0 2px 5px 0 rgba(26, 138, 83, 0.15), 0 2px 6px 0 rgba(0, 0, 100, 0.15);
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also   #549492*/
.tree li a.clickable:hover{
  background: #6fa6a4; color: #ffffff; border: 1px solid #549492;
  box-shadow: 0px 0px 1px 1px rgb(136, 184, 182) inset;

}

/* Not currently used, but we could use this to differentiate as to what the user can and can't click on in the chain tree*/
.tree li a.clickable{
  border: 1px solid #ccc;
  background-color: #ffffff;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 2px 6px 0 rgba(0, 0, 0, 0.05);*/
  box-shadow: 0 2px 5px 0 rgba(26, 138, 83, 0.15), 0 2px 6px 0 rgba(0, 0, 100, 0.15);
}


/*my changes*/
.tree li a.not-approved, .tree li a.not-completed-bp, .tree li a.not-signed-up{

  background-color: #fdb45c;
  border-color: #ECA249;
  color: #ffffff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  pointer-events: none;
  cursor: default;
  box-shadow: 0px 0px 1px 1px rgb(254, 205, 147) inset;

}

.tree li a.no-buyer, .tree li a.no-seller{

  background-color: #f7464a;
  color: #ffffff;
  border-color: #DB595c;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  pointer-events: none;
  cursor: default;
  box-shadow: 0px 0px 1px 1px rgb(255, 153, 153) inset;

}

.tree li a.not-found-seller, .tree li a.not-found-buyer{
  /*border:none;*/
  padding-bottom: 0;
  pointer-events: none;
}


.tree address{
  margin-top: 5px;
  margin-bottom: 5px;
}

.tree ul ul.unknown::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px dashed #ccc;
  width: 0; height: 20px;
}






/*
.tree li.no-buyer li.unknown{
  left: 30%;
}*/

.tree .not-signed-up-padding{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 2px;
  padding-right: 2px;
}

.tree .not-completed-bp-padding{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 1px;
  padding-right: 1px;
}

.tree .not-approved-padding{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 4px;
  padding-right: 4px;
}

.tree .no-buyer-padding{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 7px;
  padding-right: 7px;
}

.tree .no-seller-padding{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.score-percentage-icon-chain-view{
  display: inline-block;
  /*margin-top: -58px;
  margin-left: 45px;*/
  padding-bottom: 10px;
}

.disableClick{
  pointer-events: none;
}

.url-link{
  color: #1b807c;
}

.print-page-break-before {
  page-break-before: always;
}

/*
to make the review cards look snazzy
}*/


.review-card{
  display: block;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 2px 6px 0 rgba(0, 0, 0, 0.05);
  border-radius: 1px;
}
@media (max-width: 767px) {
  .review-card{
    margin:0 auto;
  }
}


@media (min-width: 768px) {
  .review-card-1{
    position: absolute;
    right: 0px;
  }
  .review-card-2{
    margin:0 auto;
  }
  .review-card-3{
    position: absolute;
    left: 0px;
  }
}

.secondary-nav{
  /*background-color: #6fa6a4;*/
  background-color: #33475b;
  border-radius: 0;
  height: 60px;

}
.secondary-nav-title{
  display: inline-block;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;

}

.secondary-nav .btn-group{
  display: inline-block;
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  font-weight: 400;
  color: #ffffff;

}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.03); }

.expand:hover{
  text-decoration: none;
}

/*To make something flash*/

.blink_me {
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(1,0,0,1);
  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: blinker;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: cubic-bezier(1,0,0,1);
  -moz-animation-iteration-count: infinite;

  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(1,0,0,1);
  animation-iteration-count: infinite;
  text-shadow: 0 0 5px #ffffff;
  color: #ffffff
}

@-moz-keyframes blinker {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@keyframes blinker {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink_me_primary {
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(1,0,0,1);
  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: blinker;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: cubic-bezier(1,0,0,1);
  -moz-animation-iteration-count: infinite;

  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(1,0,0,1);
  animation-iteration-count: infinite;
  text-shadow: 0 0 5px #ffffff;
  color: #1b807c;
}

.blink_me_primary_chain {
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(1,0,0,1);
  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: blinker;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: cubic-bezier(1,0,0,1);
  -moz-animation-iteration-count: infinite;

  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(1,0,0,1);
  animation-iteration-count: infinite;


}
.blink_me_primary_chain:hover {
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(1,0,0,1);
  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: blinker;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: cubic-bezier(1,0,0,1);
  -moz-animation-iteration-count: infinite;

  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(1,0,0,1);
  animation-iteration-count: infinite;


}

/* To sort the positioning of the data tables btn group  (refresh/download/print etc..) when in mobile*/
@media (max-width: 767px) {
  .dataTableButtons {
    text-align: center;
    margin-bottom: 10px;
  }
  .dataTablesPageLength {
    padding-right: 50px;
    margin-bottom: 5px;
  }
  .dataTablesSelectFilter {
    margin-bottom: 10px;
  }
}

@media (max-width: 991px) {
  .dataTableButtons.col-md-4 {
    text-align: center;
    margin-bottom: 10px;
  }
  .dataTablesPageLength {
    padding-right: 50px;
    margin-bottom: 5px;
  }
  .dataTablesSelectFilter {
    margin-bottom: 10px;
  }
  .dataTablesSearchFilter.col-md-4 {
    text-align: center;
  }
  .dataTablesSearchFilter>.dataTables_filter {
    text-align: center !important;
  }
}

.dataTablesPageLength {
  text-align: center;
  padding-right: 50px;
}

.dataTablesSelectFilter {
  text-align: center;
}

.dataTables_filter label input::-webkit-input-placeholder {
  text-align: center;
}

.dataTables_filter label input:-moz-placeholder { /* Firefox 18- */
  text-align: center;
}

.dataTables_filter label input::-moz-placeholder {  /* Firefox 19+ */
  text-align: center;
}

.dataTables_filter label input:-ms-input-placeholder {
  text-align: center;
}

/* to add tick boxes to colVis button */
/*
.dt-button-collection li.buttons-columnVisibility a:before {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  content: "\e014";
  margin-right: 10px;
}

.dt-button-collection li.buttons-columnVisibility.active a:before {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  content: "\e013";
  margin-right: 10px;
}*/

.dt-button-collection li.buttons-columnVisibility a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  transform: translate(0,0);
  content: "\f00d";
  margin-right: 13px;
}

.dt-button-collection li.buttons-columnVisibility.active a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  transform: translate(0,0);
  content: "\f00c";
  margin-right: 10px;
}

.disabledAnchorTag{
  /*background-color: #1b807c;*/
  border-radius: 8px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 2px;
  color: #33475b;
  pointer-events: none;
  text-decoration: none;
  font-weight: 500;
}

/*same as disabledAnchorTag above, but done seperately for flexibility*/
.hiplaAwardTag{
  background-color: #1b807c;
  border-radius: 8px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 2px;
  color: #ffffff;
  pointer-events: none;
  text-decoration: none;
  width: 100%;
  border-style: solid;
  border-width: 3px;
  border-color: #6fa6a4;
  padding-top: 1px;
}

.registerAgentSelectALike:hover .hiplaAwardTag{
  border-color: #ffffff !important;
}

.highlightTextPrimary{
  background-color: #1b807c;
  border-radius: 4px;
  padding-left: 4px;
  padding-right: 5px;
  color: #ffffff;
}

.highlightTextDanger{
  background-color: #a94442;
  border-radius: 4px;
  padding-left: 4px;
  padding-right: 5px;
  color: #ffffff;
}

@media (min-width: 768px) {
  .hiplaAwardTag-col-sm-6{
    width: 50%;
  }
}

.agentSeperator{
  border: 0;
  border-top: 1px solid #eeeeee;
  display: block;
}


@media (max-width: 767px) {
  .xs-padding-top-10px{
    padding-top: 10px;
  }
}

.table-thumbnail{
  width: 20%;
}
/*
.table-filename{
  width: 40%;
}

.table-filesize{
  width: 10%;
}

.table-uploadedBy{
  width: 15%;
}

.table-timestamp{
  width: 20%;
}*/

td.documents{
  height: 100% !important;
}

td.documents a {
  display: inline-block;
  height:100%;
  width: 100%;
}

td a:hover{
  text-decoration: none;
}


.banner-btn:hover{
  cursor: pointer;
  box-shadow: 0px 0px 2px 1px #1b807c;
  border-radius: 50%;
}

.toggleCollapseMyTools{
  cursor: pointer;
}

/*.toggleCollapseMyTools:hover{
  background-color: #ffffff;
}
.toggleCollapseMyTools:hover .myToolsTitleText, .toggleCollapseMyTools:hover .myToolsIcon{
  color: #3a3a3a;
}

*/

.toggleCollapseMyTools:hover{
  background-color: #1b807c;
  color: #ffffff;
}

.toggleCollapseMyTools:hover .myToolsTitleText, .toggleCollapseMyTools:hover .myToolsIcon{
  color: #ffffff;
}

.myToolsTitleText{
  display: inline-block;
  color: #1b807c;
  padding-bottom:10px;
  font-weight: bold;
}

.myToolsIcon{
  color: #1b807c;
}

@media (min-width: 768px) {
  .buyer-left-border{
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #dddddd;
  }
}
@media (max-width: 767px) {
  .buyer-left-border{
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #dddddd;
  }
}

.typeahead-subheading{
  padding-left: 10px;
}

.inputValuationBtn{
  margin-top: 15px;
}

.select-agent > .dropdown-menu .selectpicker > li > a {
  border-top: 1px solid #ccd6dd;
  padding-top: 5px;
  padding-bottom: 5px;
}

.row-removable-heading{
  background-color: #FDF4E1;
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .row-removable-heading{
    padding-top: 0px;
  }
}
@media (max-width: 767px) {
  .row-removable-heading{
    padding-top: 5px;
  }
}
@media (min-width: 768px) {
  .row-missing-collapse{
    margin-bottom: 7px;
  }
}
@media (max-width: 767px) {
  .row-missing-collapse{
    margin-bottom: 0px;
  }
}


.property, .valuation, .marketingAgent, .marketing, .offer, .outstanding-mortgage-balances, .row-cash-account, .row-holding, .row-other-source, .row-locations, .row-account, .row-additional-buyer, .hmlr-title{
  margin-bottom: 5px;
}


/*.collapse{
  margin-top: 10px;
}*/

.btn-grey {
  color: #ffffff;
  background-color: #8E8E8E;
  border-color: #696868;
}
.btn-grey:hover,
.btn-grey:focus,
.btn-grey:active,
.btn-grey.active,
.open > .dropdown-toggle.btn-grey {
  color: #ffffff;
  background-color: #696868;
  border-color: #0A0A0A;
}
.btn-grey:active,
.btn-grey.active,
.open > .dropdown-toggle.btn-grey {
  background-image: none;
}


.noWrap{
  white-space: nowrap;
}

.estateAgentInSelectList{
  margin-top: 5px;
  margin-bottom: 5px;
}

.showMoreAgentsInSelectList{
  margin-top: 5px;
  margin-bottom: 5px;
}

.registerAgentSelectALike, .registerAllAgentsSelectALike, .referringAgentSelectALike, .registerBroker, .registerAgentCheckboxRow{
  color: inherit;
  cursor: pointer;
}

.registerAgentCheckboxRow{
  padding-top: 5px;
}

.registerAgentSelectALike:hover, .registerAllAgentsSelectALike:hover, .referringAgentSelectALike:hover, .registerBroker:hover, .registerAgentCheckboxRow:hover{
  color: #ffffff !important;
  background: #1b807c;
}

.registeredStatusText{
  color: #3c763d;
}

.registerAgentSelectALike:hover .registeredStatusText, .referringAgentSelectALike:hover .registeredStatusText, .registerBroker:hover .registeredStatusText, .registerAgentCheckboxRow:hover .registeredStatusText{
  color: #ffffff !important;
}

.registerAgentSelectALike:hover .hover-white, .registerBroker:hover .hover-white, .registerAgentCheckboxRow:hover .hover-white {
  color: #ffffff !important;
}

@media (min-width: 768px) {
  .registerAgentSelectALikeAgentLogo, .registerAgentCheckboxLogo{
    text-align: center;
  }
}

.action > li{
  text-align: justify !important;
}

.lineHeight2Em{
  line-height: 2em !important;
}

.cc_banner > .cc_message > a {
  color: #1b807c;
}
.cc_banner > .cc_message > a:hover, .cc_banner > .cc_message > a:focus {
  color: #0e413f;
}

.toFillIn{
  background-color: #d5ecec;
}

.chalk-underscore:after{
  content:' ';
  display: block;
  position: relative;
  background: url(../images/chalk-underscore.png) no-repeat;
  bottom: 13px;
  left: 0px;
  width: 260px;
  height: 28px;
  margin: 0 auto;
}

.chalk-arrow-down:after{
  content:' ';
  display: block;
  position: relative;
  background: url(../images/chalk-arrow-down.png) no-repeat;
  bottom: 13px;
  left: 0px;
  width: 46px;
  height: 75px;
  margin: 0 auto;
}

.lead{
  font-weight: 500;
}

.next-section-white:after{
  display: block;
  position: relative;
  bottom: 24px;
  left: 0px;
  width: 80px;
  height: 80px;
  line-height: 50px;
  text-align: center;
  background-color: #ffffff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 30px;
  margin: 0 auto -50px auto;
}

.next-section-grey:after{
  display: block;
  position: relative;
  bottom: 24px;
  left: 0px;
  width: 80px;
  height: 80px;
  line-height: 50px;
  text-align: center;
  background-color: #f2f5f5;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 30px;
  margin: 0 auto -50px auto;
}
/*
.next-section-arrow:before{
  content:' ';
  display: block;
  position: relative;
  background: url(../images/next-section.png) no-repeat;
  bottom: 27px;
  left: 0px;
  width: 29px;
  height: 45px;
  margin: 0 auto;
  content: "\f078";
}*/

.next-section-arrow:before{
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
  url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
  url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
  url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
  url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  font-size: 1.6em;
  content:' ';
  display: block;
  position: relative;
  bottom: 18px;
  left: 5px;
  width: 29px;
  height: 45px;
  margin: 0 auto;
  content: "\f078";
}

.next-section-arrow-grey:before{
  color: #eeeeee;
}

.next-section-arrow-white:before{
  color: #ffffff;
}


@media (max-width: 767px) {
  .xs-text-align-center{
    text-align: center;
  }
}

/*Style for terms of use*/

OL.ordered{
  counter-reset: item;
  padding-left: 0px;
  margin-top: 25px;
  margin-bottom: 30px;
}
LI.ordered{
  display: block;
  margin-top: 15px;
  text-align: justify;
}
LI.ordered:before{
  content: counters(item, ".") " ";
  counter-increment: item
}

LI.ordered.none{
  margin-top: 20px;
  text-align: center
}

LI.ordered.none:before{
  /*content: ' ' !important;*/
  text-align: center;
}

.h2{
  font-family: 'Asap', sans-serif !important;
}

/* for the agent dashboard 'supported postcodes'*/
postcode{
  display: block;
}

/*for user dashboard, specifically for buyers*/
.dashboard-max-property-price-col, .dashboard-property-score-col, .dashboard-mortgage-score-col{
  padding-top: 5px;
}

@media (min-width: 768px) {
  .dashboard-max-property-price-col, .dashboard-property-score-col, .dashboard-mortgage-score-col{
    text-align: center;
  }
}

@media (min-width: 993px) {
  .dashboard-max-property-price-col{
    padding-top: 23px;
  }
}

.propertyScoreIcon{
  display: inline-block;
}

.mortgageScoreIcon{
  display: inline-block;
}

.maxPropertyPrice{
  display: inline-block;
}

@media (min-width: 768px) and (max-width: 993px){
  .propertyScoreIcon, .mortgageScoreIcon, .maxPropertyPrice{
    display: block;
  }
  .maxPropertyPrice{
    padding-top: 5px;
  }
}

@media (max-width: 769px) {
  .maxPropertyPrice, .maxPropertyPriceLabel, .propertyScoreIcon, .propertyScoreIconLabel, .mortgageScoreIcon, .mortgageScoreIconLabel{
    position: relative;
    min-height: 1px;
    float: left;
    width: 50%;
  }
  .mortgageScoreIconLabel, .propertyScoreIconLabel, .maxPropertyPriceLabel, .maxPropertyPrice{
    margin-top: 20px;
  }
}


@media (min-width: 768px) and (max-width: 993px){
  .maxPropertyPriceOnResultsPage{
    padding-top: 7px;
  }
}

@media (max-width: 769px) {
  .maxPropertyPriceOnResultsPage, .maxPropertyPriceConfidenceLevelOnResultsPage{
    margin-top: -7px;
  }
}

.tableCellDown{
  background-color: #a94442;
  color: #ffffff;
}

.tableCellUp{
  background-color: #3c763d;
  color: #ffffff;
}


/* Stripe CSS */

.StripeElement--hover {
  border-color: #999999;
  outline: 0;
}
.StripeElement--focus {
  border-color: #8dc0be;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(141, 192, 190, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(141, 192, 190, 0.6);
}

.StripeElement--invalid {
  background-color: #F9E1E1;
  border-color: #a94442;
}

.card-errors{
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #a94442;
}

@media (min-width: 768px) {
  .email-preference-header{
    margin-top: 6px;
  }
}

.chain-view-property{
  border-right: 1px solid #ccc;
}

.chain-view-property:last-of-type {
  border-right:none;
  padding-left:7px;
}
.chain-view-property:first-of-type:last-of-type {
  padding-left:7px;
}

.typed-cursor {
  color:#ffffff;
  opacity: 1;
  font-weight: 500;
  font-size: 22px;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  -ms-animation: blink 0.7s infinite;
  -o-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-ms-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; }
}
.typedSubheading{
  display: inline-block;
  color: #ffffff;
  font-weight: 500;
  font-size: 18px;
  margin-top: 13px;
  margin-bottom: 13px;
  padding-left:3px;
  padding-right:3px;
}
.video-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
.video-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

@media (max-width: 767px) {
  .maxPotentialSpendOnDashboard{
    font-size: 24px;
    font-weight: 700;
    margin-top: 10px;
  }
  .maxPropertyPrice{
    margin-top: 10px;
  }

}

/*
body.modal-open {
    overflow: hidden;
    position: fixed;
}*/

.stepper-container{
  /*margin-bottom: 30px;*/
}

.core-layout--small .book-progress-steps {
  list-style: none;
  padding: 0;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
}

.core-layout--small .book-progress-steps__list-item {
  -ms-flex: 1;
  flex: 1;
  display: block;
  float: left;
  position: relative;
  width: 25%;
  text-align: center;
  vertical-align: top;
  font-size: 12px;
  font-weight: 500;
  color: darkgrey;

}

.core-layout--small .book-progress-steps {
  list-style: none;
}

.core-layout--small .book-progress-steps__list-item:first-child::before {
  /*content: "1";*/
  /*content: "\f00c";*/
  content: "\f015";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 28px;
  line-height: 1.8;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  padding-top: 3px;
}

.core-layout--small .book-progress-steps__list-item:nth-child(2):before {
  /*content: "2";*/
  content: "\f154";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 28px;
  line-height: 1.9;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  padding-top: 3px;
}

.core-layout--small .book-progress-steps__list-item:nth-child(3):before {
  /*content: "3";*/
  content: "\f002";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 28px;
  line-height: 1.8;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  padding-top: 3px;
}

.core-layout--small .book-progress-steps__list-item--completed:before, .core-layout--small .book-progress-steps__list-item--current:before {
  padding-top: 0px !important;
}

.core-layout--small .book-progress-steps__list-item:first-child::after {
  left: 50%;
}

.core-layout--small .book-progress-steps__list-item:last-child:after {
  right: 50%;
}

.core-layout--small .book-progress-steps__list-item--completed:after, .core-layout--small .book-progress-steps__list-item--completed:before, .core-layout--small .book-progress-steps__list-item--current:after, .core-layout--small .book-progress-steps__list-item--current:before {
  background: #11aaf6;
}

.core-layout--small .book-progress-steps__list-item:before {
  display: block;
  height: 60px;
  width: 60px;
  background: #e1e1e1;
  border-radius: 35px;
  color: #fff;
  line-height: 2.2;
  margin: 0 auto 3px;
  font-size: 20px;
  transition: all .2s ease-in-out;
}

.core-layout--small .book-progress-steps__list-item--completed:before, .core-layout--small .book-progress-steps__list-item--current:before {
  line-height: 1.9;
  border: 3px solid #40849a;
}


.core-layout--small .book-progress-steps__list-item:after {
  content: "";
  display: block;
  background: #e1e1e1;
  height: 3px;
  top: 28px;
  left: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

.core-layout--small .book-progress-steps__list-item.book-progress-steps__list-item--finished:after {
  height: 0px;
}

.core-layout--small .book-progress-steps__list-item--completed:after, .core-layout--small .book-progress-steps__list-item--completed:before, .core-layout--small .book-progress-steps__list-item--current:after, .core-layout--small .book-progress-steps__list-item--current:before {
  background: #6ab6b6;
}

.core-layout--small .book-progress-steps__list-item--current:after {
  background: linear-gradient(90deg,#6ab6b6 0,#6ab6b6 50%,#e1e1e1 0,#e1e1e1);
}
.core-layout--small .book-progress-steps__list-item--current:first-child::after {
  background: linear-gradient(90deg,#6ab6b6 0,#6ab6b6 0%,#e1e1e1 0,#e1e1e1);
}
.core-layout--small .book-progress-steps__list-item--current:last-child::after {
  background: linear-gradient(90deg,#6ab6b6 0,#6ab6b6 100%,#e1e1e1 0,#e1e1e1);
}

.book-progress-steps__list-item--completed, .book-progress-steps__list-item--current {
  cursor: pointer;
}

.book-progress-steps__list-item--current > .book-progress-steps__list-item--plain-text {
  color: #1b807c !important;
}
.book-progress-steps__list-item--current:hover > .book-progress-steps__list-item--plain-text,  .book-progress-steps__list-item--completed:hover > .book-progress-steps__list-item--plain-text{
  color: #40849a !important;
}

.core-layout--small .book-progress-steps__list-item--current:hover::before, .core-layout--small .book-progress-steps__list-item--completed:hover::before{
  color: #40849a !important;
  transition: all .2s ease-in-out;
}

.sub-total{
  border-bottom: 3px double #dedede !important;
  border-top: 1px solid #dedede !important;
}

.iphone {
  position: relative;
  width: 36.25vh;
  height: 74.37vh;
  max-width: 290px;
  max-height: 600px;
  margin: auto
}

.iphone:before {
  content: "";
  position: absolute;
  top: 15px;
  right: 1px;
  bottom: 1px;
  left: 3px;
  border-radius: 48px;
  border-radius: 3rem;
  background-color: #f3f4f5;
  -webkit-box-shadow: 0 24px 32px rgba(0, 0, 0, .15);
  box-shadow: 0 24px 32px rgba(0, 0, 0, .15)
}

.iphone:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-position: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../images/iphone.png)
}

.iphone.iphone-black:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-position: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../images/iphone-black.png)
}

.iphone .iphone-video {
  position: relative;
  top: 13.5%;
  width: 31.625vh;
  height: 56.25vh;
  max-width: 253px;
  max-height: 450px;
  margin: 0 0 0 6.5%;
  z-index: 1
}

.position-absolute{
  position: absolute !important;
}

.better-than-you{
  font-weight: 400;
  font-size: 1.1rem;
}

.table-not-complete{
  height: 5px;
  width: 5px;
  background-color: #fb3!important;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle
}

.table-not-complete-green{
  height: 5px;
  width: 5px;
  background-color: #00c851!important;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle
}
.table-not-complete-span{
  padding-right: 15px;
}

.individual-call-recording{
  display: inline-block;
  margin-bottom: 10px;
}

.partners-border-top{
  border-top: 1px solid rgba(0,0,0,.1);
}

.red-alert-badge-bs3{
  background: #ff4c4c;
  border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  color: #ffffff;
  display: inline-block;
  line-height: 1.4em;
  text-align: center;
  min-width: 1.62em;
  font-weight: 500;     /*added in specifically for agents dashboard in bootstrap 3*/
  font-family: roboto;  /*added in specifically for agents dashboard in bootstrap 3*/
  margin-bottom: -2px;  /*added in specifically for agents dashboard in bootstrap 3*/
  padding-left: 2px;
  padding-right: 2px;
  border: 1.5px solid #ffffff;
  transition: 0.4s;
}

.red-alert-badge-bs3:empty {
  border: none;
}

.active > a > .red-alert-badge-bs3 {
  border: 1.5px solid #a57272;
  transition: 0.4s;
}

.active > a > .red-alert-badge-bs3:empty, .red-alert-badge-bs3:empty {
  border: none;
}

.tooltip-link{
  font-weight: 600;
}

/*some tooltip css as we're not running on the latest MDB version)*/

.md-tooltip.show,
.md-tooltip-main.show,
.md-tooltip-email.show {
  opacity: 1 !important; }

.md-inner {
  padding: 7px 8px;
  background: rgba(97, 97, 97, 0.9) !important;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-size: 10px;
  min-height: 24px !important; }

.md-arrow {
  display: none; }

.md-inner-main {
  padding: 9px 16px;
  background: rgba(97, 97, 97, 0.9) !important;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-size: 14px;
  min-height: 32px !important; }

.md-tooltip,
.md-tooltip-main {
}

.md-inner-email {
  background-color: #232f34 !important;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  font-size: 12px;
  padding-left: 12px;
  padding-right: 12px; }

/*end of tooltip css.  Note that we've removed line height from md-tooltip-main as it looked too squashed with it*/

.note{
  font-size: 13px;
  font-style: italic;
  margin-bottom: 0px;
  color: #7b7b7b; /*was darkgrey*/
}

.highlight-row{
  background-color: #6ab6b6;
  color: #ffffff;
}

.bold-when-not-collapsed{
  font-weight: 500;
}

.collapsed .bold-when-not-collapsed{
  font-weight: 300;
}

@media (max-width: 376px) {
  .bold-when-not-collapsed{
    font-size: 0.87rem!important;
    padding-bottom: 8px!important;
  }
  .collapsed .bold-when-not-collapsed{
    /*padding-bottom: 0px!important;*/
  }
}

@media (max-width: 321px) {
  .hide-on-less-than-320{
    display:none!important;
    font-size: 0.78rem!important;
  }
}

@media (max-width: 374px) {
  .hide-on-less-than-375{
    display:none!important;
    font-size: 0.78rem!important;
  }
}

@media (min-width: 377px) {
  .margin-for-tick-not-in-mobile{
    margin-top: 2px;
  }
}

.marginless{
  margin: -14px;
}

.filesExist, .noFiles, .fileTypes{
  color: #d3d3d3;
}



/* By default if you disable a button it will show a spinner... that's what these first two rules do.
To prevent that so that you can have a disabled button without a spinner you have to add the class allowDisable and then addClass showSpinner
... which is what these second 2 rules do*/

button:disabled:not(.allowDisable) .button-spinner, div:disabled:not(.allowDisable) .button-spinner, a:disabled:not(.allowDisable) .button-spinner, a.disabled:not(.allowDisable) .button-spinner, div.disabled:not(.allowDisable) .button-spinner{
  opacity: 1;
  display: inline-block; /*was originally block, but didn't work for our small circular buttons*/
  visibility: visible;
  transition: opacity 0.15s ease-in-out;
}

button:disabled:not(.allowDisable) .button-text, div:disabled:not(.allowDisable) .button-text, a:disabled:not(.allowDisable) .button-text, a.disabled:not(.allowDisable) .button-text, div.disabled:not(.allowDisable) .button-text{
  opacity: 0;
  display: none;
  visibility: hidden;
  transition: opacity 0.15s ease-in-out;
}

button.showSpinner .button-spinner, div.showSpinner .button-spinner, a.showSpinner .button-spinner, a.showSpinner .button-spinner, div.showSpinner .button-spinner{
  opacity: 1;
  display: inline-block;
  visibility: visible;
  transition: opacity 0.15s ease-in-out;
}

button.showSpinner .button-text, div.showSpinner .button-text, a.showSpinner .button-text, a.showSpinner .button-text, div.showSpinner .button-text{
  opacity: 0;
  display: none;
  visibility: hidden;
  transition: opacity 0.15s ease-in-out;
}

.learnMoreLink{
  font-size: 0.75rem;
  color: #14799e !important;
}

.learnMoreDescription{
  font-size: 0.75rem;
  /*font-style: italic;*/
  color: grey;
}

.paymentMethodTable{
  width:100%;
  line-height: 15px;
}

.paymentMethodExpiry{
  font-size: 0.75rem;
  color: grey;
}

.small-sub-header{
  font-size: 13px;
  color: darkgrey;
}

.digitalLegalPackVersionHistory {
  text-decoration: underline;
  cursor: pointer;
}

/* Yoti to hide their logo on passport photo scan*/

._1H5LRXJRq3NB1JIO0aLTBT {
  display: none;
}

.table-bold{
  font-weight: 500 !important;
}

/* to make btn-outline-danger and btn-outline-warning work in bootstrap 3 as we haven't upgraded the agents dashboard*/

.btn-outline-danger {
  color: #dc3545;
  background-color: transparent;
  background-image: none;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:focus, .btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-warning {
  color: #ffc107;
  background-color: transparent;
  background-image: none;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:focus, .btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}



.btn-outline-grey-non-mdb {
  color: #bbb;
  background-color: transparent;
  background-image: none;
  border-color: #bbb;
}

.btn-outline-grey-non-mdb:hover {
  color: #fff;
  background-color: #bbb;
  border-color: #bbb;
}

.btn-outline-grey-non-mdb:focus, .btn-outline-grey-non-mdb.focus {
  box-shadow: 0 0 0 0.2rem rgba(187, 187, 187, 0.5);
}

.btn-outline-grey-non-mdb.disabled, .btn-outline-grey-non-mdb:disabled {
  color: #bbb;
  background-color: transparent;
}

.btn-outline-grey-non-mdb:not(:disabled):not(.disabled):active, .btn-outline-grey-non-mdb:not(:disabled):not(.disabled).active,
.show > .btn-outline-grey-non-mdb.dropdown-toggle {
  color: #fff;
  background-color: #bbb;
  border-color: #bbb;
}

.btn-outline-grey-non-mdb:not(:disabled):not(.disabled):active:focus, .btn-outline-grey-non-mdb:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-grey-non-mdb.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(187, 187, 187, 0.5);
}



.btn-outline-green-non-mdb {
  color: #5cb85c;
  background-color: transparent;
  background-image: none;
  border-color: #5cb85c;
}

.btn-outline-green-non-mdb:hover {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.btn-outline-green-non-mdb:focus, .btn-outline-green-non-mdb.focus {
  box-shadow: 0 0 0 0.2rem rgba(36, 72, 36, 0.5);
}

.btn-outline-green-non-mdb.disabled, .btn-outline-green-non-mdb:disabled {
  color: #5cb85c;
  background-color: transparent;
}

.btn-outline-green-non-mdb:not(:disabled):not(.disabled):active, .btn-outline-green-non-mdb:not(:disabled):not(.disabled).active,
.show > .btn-outline-green-non-mdb.dropdown-toggle {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.btn-outline-green-non-mdb:not(:disabled):not(.disabled):active:focus, .btn-outline-green-non-mdb:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-green-non-mdb.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(36, 72, 36, 0.5);
}






input:disabled:not(input[type="radio"]):not(input[type="checkbox"]), textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  -webkit-text-fill-color: #888888 !important; /* 1. sets text fill to current `color` for safari */
  opacity: 1 !important; /* 2. correct opacity on iOS */
}

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.6);
    margin: 8px 0px;
}
.hr-sect:before {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.1);
    height: 0.5px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 5px 0px 0px;
}
.hr-sect:after {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.1);
    height: 0.5px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 0px 0px 5px;
}

.avatar-thin {
  border: 3px solid #FFF !important;
}

.stepCard:hover:not(.no-hover-pointer){
      /*-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
      box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);*/

      cursor: inherit;
      -webkit-box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.18), 0 2px 11px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.18), 0 2px 11px 0 rgba(0, 0, 0, 0.15);
    }

greentext{
  color: #00c851;
}
ambertext{
  color: #fb3;
}
redtext{
  color: #ff3547;
}

.no-pointer{
  pointer-events: none;
}

.outcome-comments {
  display: inline-block;
}




.mt-5-accept-xs{

}


@media (min-width: 576px) {
  .mt-5-accept-xs{
    margin-top: 3rem !important;
  }
}

.documents-table .document{
  cursor: pointer;
}
.documents-table .document.documents-table-odd {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
}
.documents-table .document:hover {
    background-color: rgba(244,177,155,0.5);
    -webkit-transition: .5s;
    transition: .5s;
}
.documents-table .document-table-header {
  font-size: .9rem;
  font-weight: 400;
}
.documents-table .document:last-child, .documents-table .document-table-header {
    border-bottom: 2px solid #dee2e6;
}





/* to show a moving progress bar similar to pdfjs as a transaciton after signing a document */

.loadingBar {
  position: absolute;
  height: 4px;
  background-color: #000;
  border-bottom: 1px solid blue;
  transition-property: 0;
  transition-duration: 200ms;
  transition-timing-function: ease;
}
.loadingBar {
  position: absolute;
  inset-inline: 0 0;
  height: 4px;
  background-color: rgba(42, 42, 46, 1);
  border-bottom: 1px solid rgba(12, 12, 13, 1);
  transition-property: 0;
  transition-duration: 200ms;
  transition-timing-function: ease;
}
.loadingBar .progressLoadingBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: rgba(0, 96, 223, 1);
  overflow: hidden;
  transition: width 200ms;
}
@-webkit-keyframes progressIndeterminate {
  0% {
    left: -142px;
  }
  100% {
    left: 0;
  }
}
@keyframes progressIndeterminate {
  0% {
    left: -142px;
  }
  100% {
    left: 0;
  }
}
.loadingBar .progressLoadingBar.indeterminate {
  width: 100%;
  background-color: rgba(221, 221, 222, 1);
  transition: none;
}
.loadingBar .progressLoadingBar.indeterminate .glimmer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% + 150px);
  background: repeating-linear-gradient(
    135deg,
    rgba(20, 68, 133, 1) 0,
    rgba(40, 40, 43, 1) 5px,
    rgba(40, 40, 43, 1) 45px,
    rgba(0, 96, 223, 1) 55px,
    rgba(0, 96, 223, 1) 95px,
    rgba(20, 68, 133, 1) 100px
  );
  -webkit-animation: progressIndeterminate 1s linear infinite;
          animation: progressIndeterminate 1s linear infinite;
}

.propertiesTableBtnSpacer, .documentsTableBtnSpacer{
  display:  inline-flex;
}

@media (max-width: 600px) {
  .padding-left-right-5-at-600-or-less{
    padding-left: 5px !important;
    padding-right:5px !important;
  }
}


.dataTables_length {
  margin-top: 8px;
}
.dataTables_length .bootstrap-select{
  margin-top: -8px;
}

.data-required {
  font-size: 12px;
}

.missing-map {
  background-color: #101b29;
  /*-webkit-box-shadow: 0 7px 15px 0 rgba(0, 0, 0, .13), 0 1px 4px 0 rgba(0, 0, 0, .11);
  box-shadow: 0 7px 15px 0 rgba(0, 0, 0, .13), 0 1px 4px 0 rgba(0, 0, 0, .11);
  border: 2px dashed rgba(52, 66, 82, 0.2);*/
  border-radius: 4px;
  padding-top: 20%
}

.postcode {
  text-transform: uppercase;
}

.toggle-password{
  display: inline;
  margin-left: -35px;
  vertical-align: middle;
  cursor: default;
  color: #757575;
}

.toggle-password:hover{
  color: #3d3c3c;
}