@zero: 0px;
@xxs: 5px;
@xs: 10px;
@sm: 15px;
@md: 30px;
@lg: 50px;
@xl: 75px;
@xxl: 100px;
@xxxl: 125px;

// If we want to add colour schemes, we'll want to rename these to 'primary', 'secondary', etc.
@main-background: #f5f5f5;
@main-font: #000000;
@purple: #4f2482;
@white: #ffffff;
@green: #3e8f3e;
@red: #b92c28;
@orange: #f89406;
@blue:#0000EE;

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

.m-no { margin: @zero; }
.m-xxs { margin: @xxs; }
.m-xs { margin: @xs; }
.m-sm { margin: @sm; }
.m-md { margin: @md; }
.m-lg { margin: @lg; }
.m-xl { margin: @xl; }
.m-xxl { margin: @xxl; }

.mt-no { margin-top: @zero; }
.mt-xxs { margin-top: @xxs; }
.mt-xs { margin-top: @xs; }
.mt-sm { margin-top: @sm; }
.mt-md { margin-top: @md; }
.mt-lg { margin-top: @lg; }
.mt-xl { margin-top: @xl; }
.mt-xxl { margin-top: @xxl; }

.mr-no { margin-right: @zero; }
.mr-xxs { margin-right: @xxs; }
.mr-xs { margin-right: @xs; }
.mr-sm { margin-right: @sm; }
.mr-md { margin-right: @md; }
.mr-lg { margin-right: @lg; }
.mr-xl { margin-right: @xl; }
.mr-xxl { margin-right: @xxl; }

.mb-no { margin-bottom: @zero; }
.mb-xxs { margin-bottom: @xxs; }
.mb-xs { margin-bottom: @xs; }
.mb-sm { margin-bottom: @sm; }
.mb-md { margin-bottom: @md; }
.mb-lg { margin-bottom: @lg; }
.mb-xl { margin-bottom: @xl; }
.mb-xxl { margin-bottom: @xxl; }

.ml-no { margin-left: @zero; }
.ml-xxs { margin-left: @xxs; }
.ml-xs { margin-left: @xs; }
.ml-sm { margin-left: @sm; }
.ml-md { margin-left: @md; }
.ml-lg { margin-left: @lg; }
.ml-xl { margin-left: @xl; }
.ml-xxl { margin-left: @xxl; }

.p-no { padding: @zero; }
.p-xxs { padding: @xxs; }
.p-xs { padding: @xs; }
.p-sm { padding: @sm; }
.p-md { padding: @md; }
.p-lg { padding: @lg; }
.p-xl { padding: @xl; }
.p-xxl { padding: @xxl; }

.pt-no { padding-top: @zero; }
.pt-xxs { padding-top: @xxs; }
.pt-xs { padding-top: @xs; }
.pt-sm { padding-top: @sm; }
.pt-md { padding-top: @md; }
.pt-lg { padding-top: @lg; }
.pt-xl { padding-top: @xl; }
.pt-xxl { padding-top: @xxl; }

.pr-no { padding-right: @zero; }
.pr-xxs { padding-right: @xxs; }
.pr-xs { padding-right: @xs; }
.pr-sm { padding-right: @sm; }
.pr-md { padding-right: @md; }
.pr-lg { padding-right: @lg; }
.pr-xl { padding-right: @xl; }
.pr-xxl { padding-right: @xxl; }

.pb-no { padding-bottom: @zero; }
.pb-xxs { padding-bottom: @xxs; }
.pb-xs { padding-bottom: @xs; }
.pb-sm { padding-bottom: @sm; }
.pb-md { padding-bottom: @md; }
.pb-lg { padding-bottom: @lg; }
.pb-xl { padding-bottom: @xl; }
.pb-xxl { padding-bottom: @xxl; }

.pl-no { padding-left: @zero; }
.pl-xxs { padding-left: @xxs; }
.pl-xs { padding-left: @xs; }
.pl-sm { padding-left: @sm; }
.pl-md { padding-left: @md; }
.pl-lg { padding-left: @lg; }
.pl-xl { padding-left: @xl; }
.pl-xxl { padding-left: @xxl; }

.pale-text { font-weight: 200; }
.bold-text { font-weight: 500; }
.header-text { font-weight: 700; }

.green {
  color: @green;
}

.red {
  color: @red;
}

.purple {
  color: @purple;
}

.blue {
  color: @blue;
}

.bg-purple {
  background-color: @purple;
}

.bg-green {
  background-color: @green;
}

.bg-red {
  background-color: @red;
}

.bg-orange {
  background-color: @orange;
}

.v-align {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.text-center {
  justify-content: center;
}

.card .ordered-not-orderable .sorting_asc {
  cursor: default;
}

.card .ordered-not-orderable .sorting_asc:before, .card .ordered-not-orderable .sorting_asc:after {
  content: none;
}

html {
  min-height: 100%;
  position: relative;
}

body {
  background-color: @main-background;
  color: @main-font;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
}

#body {
  padding: 88px 0px 60px;
}

#no-subnav-body {
  padding: 52px 0px 60px;
}

.navbar-default {
  background-color: @white;
  background-image: none;
  font-size: 15px;
}

.navbar-default p {
  font-size: 13px;
}

.row {
  .v-align();
}

.row div:not(.panel):not(.radio) {
  .pt-xxs();
  .pb-xxs();
}

input[type=file], .has-feedback input[type=file] {
  padding: 6px 12px; /* to match all other input types, rather than fannying around with vertical alignments */
  .pale-text();
}

input:not(.no-limit), textarea:not(.no-limit), select:not(.no-limit) ~ .dropDown, select:not(.no-limit), .ellipsis {
  max-width: 200px;
}

input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not(.xxs):not(.xs):not(.sm):not(.md):not(.select2-search__field), select:not(.no-limit):not(.xxs):not(.xs):not(.sm):not(.md):not(.input-sm) ~ .dropDown, textarea:not(.xxs):not(.xs):not(.sm):not(.md):not(.no-limit) {
  min-width: 200px;
}

.add-btn, .remove-btn {
  min-width: 30px;
  min-height: 30px;
}

.no-limit {
  max-width: 100%;
  width: 100% !important;
}

input.xxs, select.xxs, select.xxs ~ .dropDown {
  width: @lg !important;
}

input.xs, select.xs, select.xs ~ .dropDown {
  width: @xl !important;
}

input.sm, select.sm, select.sm ~ .dropDown {
  width: @xxl !important;
}

input.md, select.md, select.md ~ .dropDown {
  width: @xxxl !important;
}

.phone-number .iti--show-flags .iti__tel-input {
  padding-left: 48px !important;
}

input[type=radio] {
  accent-color: @purple;
}

a {
  .blue();
  .pale-text();
}

label, td label, .fieldset label, .form-group label, .fieldset div[class^="col-xs"]:not(.header-text):nth-child(odd) {
  .bold-text();
}

td label > em, .fieldset label > em, .form-group label > em, .table > tbody > tr > td, .fieldset div[class^="col-xs"]:not(.header-text):nth-child(even) {
  .pale-text();
}

.table > thead > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td {
  vertical-align: middle;
}

a:hover {
  text-decoration: none;
}

.form-inline .radio-block {
  display: block;
}

.glyphicon-warning-sign {
  font-size: 40px;
}

table.no-border > thead > tr > th, table.no-border > tbody > tr > td, table.no-border > tfoot > tr > td {
  border: none;
}

.exception-message {
  .purple();
  .pt-xs();
}

.buttons a:not(:first-child), .buttons button:not(:first-child) {
  .ml-xs();
}

.buttons a:not(:last-child), .buttons button:not(:last-child) {
  .mr-xs();
}

.help-block {
  .red();
}

.help-block-inline {
  .ml-sm();
  .mb-no();
  display: inline-block;
}

h1, h2, h3, h4, h5, .alert, .list-group, table.no-border {
  .m-no();
}

.alert-sm {
  padding: 10px 15px;
}

ul {
  list-style-type: square;
}

ul.no-bullets {
  list-style-type: none;
}

.toggle:after {
  content:"\e259";
  float: right;
  font-family: 'Glyphicons Halflings';
}

.toggle.collapsed:after {
  content:"\e258";
}

.toggle:not(.collapsed), .non-toggle {
  .mb-xs();
}

div.alert p {
  color: inherit;
}

h1 {
  font-size: 20px;
  .header-text();
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 12px;
}

.jumbotron h1 {
  font-size: 28px;
}

p {
  font-size: 12px;
}

.btn-sm {
  font-size: 11px;
}

.form-control {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  padding: 6px 8px;
}

.mouse-pointer {
  cursor: pointer;
}

.list-inline {
  display: inline-block;
  margin-left: 0px;
}

.header, .footer {
  background-color: @white;
}

.header img, .footer img, .client-logo {
  max-height: 23px;
}

.client-logo img {
  height: 100%;
  width: auto;
}

.nav-pills > li {
  font-size: 11px;
  padding: 0px 5px 10px;
}

.nav-pills > li > a {
  .p-xxs();
}

.subnav a, .tooltip, .tooltip-inner {
  .bg-purple();
  color: @white;
}

.subnav a:hover {
  background-color: @white;
  .purple();
}

.tooltip-arrow {
    display: none;
}

.badge {
  border-radius: 3px;
  font-size: 10px;
  padding: 5px;
  text-transform: uppercase;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: 0px 5px;
}

.btn-link {
  font-size: 12px;
  font-weight: 200;
  margin: 0px;
  padding: 0px;
  vertical-align: baseline;
}

.existing-attachment {
  .mb-xxs();
}

.keep-whitespace {
  white-space: pre-wrap;
}

.badge a {
  color: white;
  cursor: pointer;
}

.no-pointer {
  cursor: default;
}

/* Needed in order to override Bootstrap defaults */
.panel-info > .panel-heading .bg-green {
  .bg-green();
}

/* Needed in order to override Bootstrap defaults */
.panel-info > .panel-heading .bg-red {
  .bg-red();
}

.panel-info > .panel-heading, .alert-info {
  background-image: -webkit-linear-gradient(top, #e2e2fe 0, #dcdcf3 100%);
  background-image: -o-linear-gradient(top, #e2e2fe 0, #dcdcf3 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e2fe), to(#dcdcf3));
  background-image: linear-gradient(to bottom, #e2e2fe 0, #dcdcf3 100%);
  background-repeat: repeat-x;
  .purple();
}

.btn-primary {
  background-color: #5B3885;
  background-image: -webkit-linear-gradient(top,#5B3885 0,@purple 100%);
  background-image: -o-linear-gradient(top,#5B3885 0,@purple 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,from(#5B3885),to(@purple));
  background-image: linear-gradient(to bottom,#5B3885 0,@purple 100%);
  background-repeat: repeat-x;
  border-color: @purple;
  outline-color: @purple;
}

.btn-primary.active, .btn-primary:active, .btn-primary.active.focus, .btn-primary:active.focus, .btn-primary.active:focus, .btn-primary:active:focus,
.btn-primary.active.hover, .btn-primary:active.hover, .btn-primary.active:hover, .btn-primary:active:hover,
.btn-primary.focus, .btn-primary:focus, .btn-primary.hover, .btn-primary:hover {
  .bg-purple();
  border-color: #421e6d;
  outline-color: @purple;
}

.panel-info, .panel-info .panel-heading, .alert-info {
  border-color: #dcdcf3;
}

.panel-info > .panel-heading .bg-purple {
  .bg-purple();
}

.panel-info a {
  .purple();
}

.pagination .active a, .pagination .active a:hover, .pagination .active a:focus {
  .bg-purple();
  border-color: #421e6d;
  outline-color: @purple;
}

.pagination > li > a, .pagination > li > a:focus, .pagination > li > a:hover {
  .purple();
  border: none;
  outline-color: @purple;
}

.match a {
  .red();
  .bold-text();
}

.match a:hover {
  color: @green;
}

.footer {
  border-top: 1px solid #dfdfdf;
  bottom: 0;
  height: 60px;
  position: absolute;
  width: 100%;
}

.footer .container div {
  height: 60px;
  line-height: 60px;
}

.navbar-nav > li > a:hover, .navbar-nav > li > a:focus, .navbar-nav > li > a:active, .navbar-nav a:hover, .navbar-nav a:focus, .navbar-nav a:active {
  background-color: @white;
  .purple();
}

.card {
  .p-sm();
  background-color: @white;
  margin: 12px auto;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#login-div {
  .card();
  max-width: 350px;
  .p-md();
  .mt-xxl();
  -moz-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
}

#login-logo-div {
  .pb-md();
  .v-align();
  min-height: 150px;
}

header .glyphicon:not(.glyphicon-cog) {
  padding-right: 6px;
}

.mandatory-field:after {
  content: "\FE61";
  .red();
  .pl-xxs();
}

.conditionally_mandatory:after {
  content: "(\FE61)";
  .red();
  .pl-xxs();
}

div[class^="col-xs"]:empty:after {
  content: ".";
  display: none;
}

.auto-clear .col-xs-1:nth-child(12n+1) { clear:left; }
.auto-clear .col-xs-2:nth-child(6n+1) { clear:left; }
.auto-clear .col-xs-3:nth-child(4n+1) { clear:left; }
.auto-clear .col-xs-4:nth-child(3n+1) { clear:left; }
.auto-clear .col-xs-6:nth-child(odd) { clear:left; }

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalise {
  text-transform: capitalize;
}

.select2-container--bootstrap {
  display: inline-block;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* For some reason this CSS is in Bootstrap 3.3 but not 3.4, and it really makes checkboxes and radio buttons look better */
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
  margin-left: -20px;
  position: absolute;
}

/* For some reason this CSS is in Bootstrap 3.3 but not 3.4, and it really makes checkboxes and radio buttons look better */
input[type=checkbox], input[type=radio] {
  line-height: normal;
  margin: 4px 0 0;
}

@media(min-width: 768px) {
  .form-inline input[type="radio"],
  .form-inline input[type="checkbox"] {
    float: left;
    margin-right: 5px;
  }
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  white-space: normal;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  .bg-purple();
}

.select2-container--bootstrap .select2-dropdown,
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection,
.form-control:focus {
  border-color: @purple;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(79 36 130 / 60%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(79 36 130 / 60%);
}

.select2-container--bootstrap .select2-selection {
  font-size: 12px;
}

/* The following two styles fix a bug on select2 multiple dropdowns whereby the placeholder doesn't display */
.select2-search--inline {
  display: contents; // this will make the container disappear, making the child the one who sets the width of the element
}

.select2-search__field:placeholder-shown {
  width: 100% !important; // forces the placeholder to be 100% of the width while there are no options selected
}

.wd-100 {
  width: 100%;
}

.wd-75 {
  width: 75%;
}

.wd-30 {
  width: 30%;
}

.wd-20 {
  width: 20%;
}

.wd-15 {
  width: 15%;
}

.wd-10 {
  width: 10%;
}

.wd-0 {
  width: 0%;
}

.level-two::before {
  padding-left: 1em;
  content: "\21B3 \00a0";
}

.level-three::before {
  padding-left: 2em;
  content: "\21B3 \00a0";
}

.totals {
  color: #333333;
}

.marginalised-children > * {
  .m-xxs();
}