/* 
Theme Name: Colibri WP Child 
Theme URL: http://yourdomain.com
Description: Colibri WP Child 
Theme Author: Duncan
Author URL: http://yourdomain.com
Template: colibri-wp 
Version: 0.1.3 
Text Domain: colibri-wp-child 
*/

/* Variable (custom properties) definitions */
:root {
    --main-blue-color: #03a9f4;
    --main-border-color: #aaa;
    --form-fields-text-color: #444;
    --form-fields-border-color: #ccc;
    --main-error-color: #f03;
    --breakpoint-max-mobile-size: 767px;
    --breakpoint-min-small-screen: 768px;
    --breakpoint-max-small-screen: 1023px;
    --breakpoint-min-large-screen: 1024px;
}

/* Global Elements */

body, body p, body h1, body h2, body h3, body h4 {
    font-family: "Mulish", "Open Sans", sans-serif;
    text-align: left;
    /*font-size: 15px;*/
}

#content {
    padding: 1em;
}

::selection {
background-color: var(--main-blue-color);
}

#crm-container .breadcrumb {
    display: none;
}

.h-logo__image {
    max-height: none !important;
}

@media (max-width: 1023px) {
    body h1 {
        font-size: 2.8em;
    }
}

@media (max-width: 767px) {
    body h1 {
        font-size: 2.2em;
    }
}

hr {
    border-top: 1px solid var(--form-fields-border-color) !important;
    max-width: 100% !important;
}

.bold {
    font-weight: 600; 
}

/* Lists */
.wp-block-list li {
    margin: 0.4em 0;
}

/* General Forms */

form {
    text-align: left;
}

input, button, textarea, select, .select2-result-label {
    font-family: 'Mulish', FontAwesome, sans-serif;
    color: var(--form-fields-text-color);
    font-size: 13.33px;
}

@-moz-document url-prefix() {
    input[type=radio], input[type=checkbox] {
        accent-color: var(--main-blue-color);
    }
}

fieldset {
    border: 1.5px solid var(--main-border-color);
    border-radius: 5px;
    padding: 1em;
    margin-bottom: 2em;
}

/* Set to hidden and unhide with javascript, removes unwanted blocks from awaiting approval contact screens */
form#Register fieldset:not(#priceset):not(.crm-profile-name-Donation) {
    display: none;
}

@media (min-width: 768px) {
    fieldset {
        padding: 1em 2em;
    }   
}

legend, .header-dark {
    font-size: 26px;
    font-weight: 500;
    padding: 0 0.1em 0.4em 0.1em;
}

.af-admin-edit-form-link {
    display: none;
}

.crm-marker, .crm-error, label.crm-inline-error{
    color: var(--main-error-color);
}

label.crm-inline-error{
    display: block;
}

.label {
 margin-bottom: 0.4em;
}

label.radio-inline {
    margin-right: 0.5em;
}

/* TODO: Decide what to do with form text and Label sizes 
(.price-set-option-content label) */
af-form {
    font-size: 15px;
}

label {
    font-weight: 600;
    font-size: 16px;
}

.crm-checkbox-list li, .price-set-row {
    margin: 0.2em 0;
}

input[type=text], input[type=number], input[type=email], textarea {
    border: 1px solid var(--form-fields-border-color);
    border-radius: 5px;
    padding: 0.5em;
    width: 100%;
    max-width: 20em;
}

input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, textarea:focus {
    border: 1px solid var(--main-border-color) !important;
}

/* Select 2 */

.select2-choice {
    border-color: var(--form-fields-border-color) !important;
}

.select2-drop-active, .select2-container-active .select2-choice {
    border-color: var(--main-border-color) !important;
}

.select2-search input {
    border-color: var(--form-fields-border-color) !important;
}

.select2-highlighted {
    background-color: var(--main-blue-color) !important;
}

.select2-results li.select2-disabled {
    display: none;
}

input[type=radio] + label, input[type=checkbox] + label, label.radio-inline {
    margin-right: 1em;
    font-weight: 400;
    font-size: 15px;
}

input + a.crm-clear-link {
    margin-left: 0.4em;
}

input.four {
    max-width: 6em;
}

textarea {
    max-width: 30em;
}

select{
    width: 100% !important;
    max-width: 20em !important;
}

.select2-container{
    width: 100% !important;
    max-width: 20em !important;
    font-size: 13.33px;
}

.select2-choice {
    height: 29px !important;
}

.messages{
    padding-bottom: 1em;
}

.crm-checkbox-list, .crm-search-display-list-container {
    list-style-type: none !important;
    margin: 0 !important;
}

.crm-search-col-type-field {
    margin-bottom: 0.8em;
}

.crm-search-field-value {
    font-weight: bold;
}

fieldset .crm-section, .CRM_Profile_Form_Edit .crm-section {
    margin-bottom: 1em;
}

af-field {
    display: block;
    margin-bottom: 1em;
}

@media (min-width: 768px) {

    .af-container.af-layout-cols > .af-container:first-of-type {
      border-right: 1px solid var(--form-fields-border-color);
      padding-right: 1em;
    }
    
    .af-container.af-layout-cols > .af-container:nth-of-type(2) {
      padding-left: 2em;
    }

}

@media (max-width: 767px) {
  .af-container.af-layout-cols {
      display: block !important;
  }
}

.price-set-row input[type=radio], .crm-option-label-pair input[type=checkbox]{
    margin-right: 8px;
}

.section-pricesetTotal {
    display: flex;
    font-weight: bold;
    padding-top: 1em;
    margin-top: 1em;
    border-top: 1px solid var(--main-border-color);
}

.section-pricesetTotal div {
    margin-right: 2em;   
}

.crm-submit-buttons{
    margin-bottom: 1em;
}

/* Confirmation and Thank you screens */

#intro_text.event_confirm_text-section{
    display: none;
}

#crm-event-register-different:not(a) {
    font-size: 20px;
    font-weight: 700;
}
#crm-event-register-different a {
    font-size: 16px;
    font-weight: 500;
}

.bold.crm-profile-view-title {
    font-size: 22px;
}

.crm-register-button {
    margin-bottom: 1em;
    display: inline-block;
}

.crm-event-thankyou-form-block .event_info_link-section{
    display: none;
}

.hiddenElement {
    display: none;
}

.event_fees-group table {
    width: 100%;
    border-collapse: collapse;
}

.event_fees-group table th{
    border-bottom: 1px solid grey;
    padding: 0.4em;
}

.event_fees-group table td{
    font-size: 14px;
    border-bottom: 1px solid var(--main-border-color);
    padding: 0.4em;
}

.total_amount-section{
    margin-top: 0.5em;
    font-weight: bold;
}

.crm-profile-view-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 1em;
}

.participant_info-group .label {
  background-color: #f1f1f1;
}

.participant_info-group .label, .participant_info-group .content {
  padding: 0 0.4em;
}

.event_info-group td {
    vertical-align: top;
    padding: 0.4em;
}

.action-link.section.iCal_links-section{
    margin-bottom: 1em;
}

/* British waterski form */
.payment_processor-section label:after { 
    content: "\A";
    white-space: pre; 
}

.payment_processor-section input:first-of-type { 
    margin-left: 0.25em;
}

/* Site access Information page */

afsearch-site-access-information h4 {
    margin-top: 1em;
}


/* Upcoming waterski sessions */

afsearch-upcoming-water-ski-sessions1 ul {
    display: flex;    
}

afsearch-upcoming-water-ski-sessions1 li {
    width: 300px;
    border-radius: 5px;
    border: 1px solid var(--main-border-color);
    margin: 1em;
}

#bootstrap-theme .crm-search-loading-placeholder {
    width: 100% !important;   
}

afsearch-upcoming-water-ski-sessions1 h5, afsearch-upcoming-water-ski-sessions1 a.btn-xs {
    margin: 1em !important;
}

afsearch-upcoming-water-ski-sessions1 h5 a{
    font-weight: 600 !important;
}
	
/* Remove the header (Keep me Updated) from the contact us page */
	
.crm-title h2{
	display : none;
}

.page-id-211 .page-header, .page-id-76 .page-header {
	/*display : none;*/
}

/* Colibri Buttons */


a.btn-xs, button{
    text-align: center !important;
    background-color: var(--main-blue-color) !important;
    background-image: none !important;
    font-family: "Mulish", "Open Sans", sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    color: #fff !important;
    border-top-width: 2px !important;
    border-top-color: var(--main-blue-color) !important;
    border-top-style: solid !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border-right-width: 2px !important;
    border-right-color: var(--main-blue-color) !important;
    border-right-style: solid !important;
    border-bottom-width: 2px !important;
    border-bottom-color: var(--main-blue-color) !important;
    border-bottom-style: solid !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-left-width: 2px !important;
    border-left-color: var(--main-blue-color) !important;
    border-left-style: solid !important;
    padding-top: 12px !important;
    padding-right: 24px !important;
    padding-bottom: 12px !important;
    padding-left: 24px !important;
    margin-bottom: 5px;
}

a.btn-xs:hover, button:hover {
    cursor: pointer;
    filter: brightness(90%) !important;
    background-color: var(--main-blue-color) !important;
    border-color: var(--main-blue-color) !important;
}