/*
 * This file contains CSS changes that override settings in civicrm.css
 * that conflict or otherwise look bad with a bootstrap theme.
 */

/* 
 * These settings essentially make the logo responsive - this is easier
 * than trying to insert .img-responsive into the html. We need both to
 * make the .navbar-header 100% wide, we need the img changes and we need
 * to stop the a.logo from floating left.
 */
.navbar-header {
  width: 100%;
}

#navbar .logo img {
  max-width: 100%; 
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

a.logo {
  float: none !important;
}

/*
 * All the code below helps make civicrm forms look better with bootstrap.
 * They can all hopefully be removed when civicrm supports bootstrap natively.
 */

/*
 * Our typical background is white. And boostrap makes labels white.
 * This code also makes the label stand out a bit more.
 */
div.crm-container .label, div.crm-container label, #crm-container.crm-public .label {
  color: #3e3e3e;
  font-weight: normal;
  font-size: 18px;
}

/*
 * Except the simpledonate form... for which we want to preserve the 
 * white text labels because they do appear on dark backgrounds.
 */
div.crm-container .simpleDonationForm .priceSet label {
  color: #fff;
}

/* Don't make the price set labels stand out - otherwise it is too much
 * standing out. */
#crm-container.crm-public .price-set-row .crm-price-amount-label, div.crm-container .price-set-option-content > label {
  font-size: 18px !important;
  color: #3e3e3e !important;
  font-weight: normal !important;
}

.crm-container .crm-section .label {
  float: none;
}

.crm-container .crm-section .content {
  margin-left: 10px;
}

input[type="radio"], input[type="checkbox"] {
  margin: 0 4px 0;
}

.crm-container fieldset {
  border: 1px solid #c0c0c0;
  margin: 10px 2px;
  padding: 0.35em 0.625em 0.75em;
}

.crm-container fieldset legend {
  margin-bottom: 4px;
  /* Use bootstrap size, not CiviCRM size. */
  font-size: 21px;
}

#crm-container.crm-public .crm-section, .crm-section {
  margin-bottom: 20px;
}

.crm-container .crm-section .I_would_like_to_donate_another_-content {
  display: inline;
  margin-left: 0px;
}

/*
 * When using webform with themekey, the ajax upload breaks because themekey
 * doesn't kick in properly on the ajax call, so we get Call to undefined
 * function bootstrap_form_process().  As a work around, hide the ajax upload
 * button so files get uploaded when you submit.
 */
.form-managed-file button.ajax-processed {
  display: none;
}

.crm-container a.button, .crm-container a.button:link, .crm-container a.button:visited, .crm-container input.crm-form-submit, .crm-container .ui-dialog-buttonset .ui-button, .crm-container input[type="button"], .crm-container .crm-button {
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  padding: 10px 25px;
  text-shadow: none;
  background: none;
  margin: 0 15px 15px 0;
  background-color: #3a8233;
  border: 0 solid transparent;
  font-size: 18px;
}

.crm-container .register_link-top {
  margin-bottom: 10px;
}

div.action-link {
  clear: both;
}

/** 
 * For some reason, in webform, if we have a collapsible fieldset
 * that is collapsed by default, it is fully expanded (even though 
 * the elements are invisible). This fixes that bug.
 */ 
/* div.panel-body .panel-collapse .collapse .fade .collapsed { */
div.collapsed {
  height: 30px;
}

/*
 * The total amount doesn't get properly aligned on contribution
 * pages without this fix.
 */
.crm-container .crm-section .label {
  text-align: left;
}

/* override default blue back ground */
.crm-container h3 {
  background-color: unset;
}

div.region-breadcrumb {
  display: none;
}

/* Work Around for ckeditor5 - ensure uploaded images are properly resized. */
figure.image_resized img {
  width: 100%;
}

/* Fix Action links on event registration page - don't set height too small */
.crm-container .action-link {
  height: inherit;
}

/* Ensure social media backgrounds are not white */
.crm-socialnetwork a.btn {
  color: black;
}

/* Give some space between header and main content */
div[role="heading"] {
  margin-bottom: 20px;
}