/* ==========================================================================
  #F2FTHEME
  ========================================================================== */
/**
 * Create your custom theme styles here.
 */



/* Layout
   ========================================================================== */
/**
 * 1. Set margins on the form container.
 * 2. Set the padding on the form container if required.
 * 3. Set the width of the form in pixels or a percentage of the page width.
 * 4. Set the font-family, font-weight, and global text color for your form.
 */
 .c-form-container {
    margin: 0 auto; /* [1] */
    padding-top: 24px; /* [2] */
    padding-right: 24px; /* [2] */
    padding-bottom: 24px; /* [2] */
    padding-left: 24px; /* [2] */
    width: 33.3%; /* [3] */
    min-width: 600px; /* [3] */
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; /* [4] */
    font-weight: 300; /* [4] */
    font-size: 16px; /* [4] */
    color: #000000; /* [4] */
    text-align: left;
    line-height: 1.15;
}

/**
 * You can set the spacing between form and the bottom border
 * with the bottom margin, change or remove the bottom border.
 */
.c-form-section {
    margin-bottom: 24px;
    border-bottom: 1px solid #e6e6e6;
}


/* Heading of a section within the form */
.o-section--heading {
    margin-bottom: 24px;
    padding-top: 48px;
}

/* Color and bottom margin of the H3 tag in the section heading */
.c-heading-form-section {
    color: #000000;
    margin-bottom: 12px;
    font-size: 24px;
}



/* Alerts
   ========================================================================== */
/** 
 * 1. Set the width of the alert container in pixels or a percentage of the 
 *    `c-form-container` element.
 * 2. Set the rounded corner radius of your alert container. Set to `0` for  
 *    square corners.
 */
.c-alert {
    width: 100%; /* [1] */
    margin-bottom:  24px;
    padding: 12px 24px;
    border-radius: 3px; /* [2] */
    font-size: 16px;
    line-height: 1.15;
    border-radius: 3px;
}

/** 
 * 1. Set the text color of all alert types globally, or change individually under
 *    each class name.
 */
.c-alert--error,
.c-alert--warning,
.c-alert--success,
.c-alert--message {
    color: #ffffff; /* [1] */
}


/**
  * Set some defaults for the alert's icon as a pseudo element.
  * NOTE: `.alert--message` doesn't have an icon
  * 1. We want our icon to be placed to the left of the alert message.
  * 2. Our icon sits in a solid color circle, set the width and height.
  * 3. Leave some space between the message and the icon.
  * 4. Our icon is a font so set the font-family and font-size. Odd number
  *    font-size seems to center better.
  * 5. Center the icon vertically and horizontaly in the circle. Line-height
  *    value depends on width and height values.
*/
.c-alert--error:before,
.c-alert--warning:before,
.c-alert--success:before,
.c-alert--message:before {
    display: block; /* [1] */
    float: left; /* [1] */
    width: 24px; /* [2] */
    height: 24px; /* [2] */
    margin-right: 24px; /* [3] */
    text-align: center; /* [5] */
    content: "";
    background-size: 24px 24px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    overflow: hidden;
}


/**
 * 1. Set the background-color of the alert container.
 * 2. Set the icon for the alert.
 */
.c-alert--message {
    margin-top: 24px;
    margin-bottom: 48px;
    background-color: #1188d3; /* [1] */
}
.c-alert--message:before {
    display: none; /* no icon */
    background-image: none; /* [2] */
}

.c-alert--error {
    background-color: #ff4040; /* [1] */
}
.c-alert--error:before {
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="white" d="M16 0c-8.8 0-16 7.2-16 16 0 8.686 7.2 16 15.657 16 8.914 0 16.457-7.314 16.343-16 0-8.914-6.971-16-16-16zM17.829 26.857h-3.657v-3.771h3.657v3.771zM17.371 20.8h-2.743l-1.143-15.314h5.029l-1.143 15.314z"></path></svg>'); /* [2] */
}

.c-alert--warning {
    background-color: #ffb94a; /* [1] */
}
.c-alert--warning:before {
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="white" d="M16 0c-8.8 0-16 7.2-16 16 0 8.686 7.2 16 15.657 16 8.914 0 16.457-7.314 16.343-16 0-8.914-6.971-16-16-16zM17.829 26.857h-3.657v-3.771h3.657v3.771zM17.371 20.8h-2.743l-1.143-15.314h5.029l-1.143 15.314z"></path></svg>'); /* [2] */
}

.c-alert--success {
    background-color: #2ecc71; /* [1] */
}
.c-alert--success:before {
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="white" d="M16 0c-8.8 0-16 7.2-16 16 0 8.686 7.2 16 15.657 16 8.914 0 16.457-7.314 16.343-16 0-8.914-6.971-16-16-16zM12.457 24.571l-7.657-7.886 2.171-2.171 5.486 5.6 12.571-12.686 2.171 2.171-14.743 14.971z"></path></svg>'); /* [2] */
}




/* Form inputs
   ========================================================================== */

/**
 * 1. Set the spacing between each form field container.
 * 2. Set the width of the form field input.
 */
.c-form-field {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin-bottom: 24px;
}

.c-form-field--text .c-input,
.c-form-field--numeric .c-input,
.c-form-field--select .c-input,
.c-form-field--datepicker .c-input {
    width: 50%; /* [2] */
}

.c-form-field--textarea {
    width: 100%; /* [2] */
}


/* Set the color, font-size, and spacing between the label and the form input. */
.c-form-field__label {
    margin-bottom: 6px;
    color: #000000;
    font-size: 16px;
    font-weight: 400;
}

/* Style the `(optional)` text which appears next an optional field's label. */
.c-form-field__label em {
    font-weight: 300;
}

/* Set the color of the asterisk on required fields. */
.is-required {
    color: #ed1c24;
}

/* Wrapper for a checkbox or radio button and it's label. */
.c-form-field__checkbox {
    margin-bottom: 12px;
}

.c-form-field .c-form-field__checkbox:last-child {
    margin-bottom: 3px;
}


/* Label for a checkbox or radio button */
.c-input__label {
    color: #000000;
    font-size: 16px;
    font-weight: 300;
}

/* Inline error messaging on a form field. */
.c-form-field__error {
    position: relative;
    display: inline-block;
    padding: 0;
    color: #ed1c24;
    font-size: 14px;
}

.c-form-field__error a:link,
.c-form-field__error a:visited,
.c-form-field__error a:hover,
.c-form-field__error a:active {
    color: #ed1c24 !important;
    text-decoration: underline !important;
}


/* Spacing for `Other` text input field in a collection of checkboxes or radio buttons. */
.c-form-field--checkboxes .c-form-field--text {
    padding-top: 6px;
    padding-left: 24px;
    margin-bottom: 3px;
}
/* Label for `Other` text input field in a collection of checkboxes or radio buttons. */
.c-form-field--checkboxes .c-form-field--text .c-form-field__label {
    font-weight: 300;
}


/**
 * 1. Set a height on input fields because some browsers don't add up the 
 *    line-height and padding properly, so inputs can vary slightly in height.
 * 2. Set the text, border and background colors of your input fields.
 * 3. Set the rounded corner radius of your input fields. Set to `0` for  
 *    square corners.
 * 4. Highlight the input field when the user is interacting with it.
 * 5. Set a default height for textarea inputs.
 */
.c-input {
    width: 100%;
    height: 38px; /* [1] */
    padding: 6px;
    font-family: sans-serif;
    font-size: 16px;
    color: #000000; /* [2] */
    background-color: #fff; /* [2] */
    border-width: 1px;
    border-style: solid;
    border-color:  #e6e6e6; /* [2] */
    border-radius: 3px; /* [3] */
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

.c-input:focus,
.c-input:active {
    border-color: #0099cd; /* [4] */
    box-shadow: 0 0 5px rgba(0, 153, 204, 0.5); /* [4] */
}


/* Control the size of certain field types. */
.c-input--number {
    max-width: 120px;
}

.c-input--textarea {
    min-height: 80px; /* [5] */
}

.c-form-container input[type=checkbox],
.c-form-container input[type=radio],
.c-input-radio,
.c-input-checkbox {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin: 1px 6px 0 0;
  padding: 0;
  border-width: 1px;
  border-style: solid;
  border-color:  #e6e6e6;
  border-radius: 3px;
}



/**
 * We need to wrap select boxes so we can style them properly across browsers.
 * The select input needs to be inside a container with the `.c-input` class and
 * `.c-input--select` modifier class.
 *

 <div class="c-input c-input--select">
     <select>
         <option selected>Please select</option>
         <option>Option 1</option>
     </select>
 </div>

 * 1. Override the padding of the `.c-input` class since we're using it as a wrapper.
 *    Padding gets applied to select element instead.
 * 2. Position and size the drop-down's custom arrow icon.
 * 3. Set the icon for the drop-down's arrow.
 */
.c-input--select {
    position: relative;
    padding: 0 !important; /* [1] */
    background-color: #fafafa;
    transition: box-shadow 150ms 0 ease-out;
    overflow: hidden;
    vertical-align: bottom; /* to counter extra space created by overflow hidden */
}

.c-input--select:before { /* [2] */
    position: absolute;
    top: 50%;
    left: auto;
    right: 12px;
    width: 12px;
    height: 12px;
    content: "";
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="black" d="M29.699 8.58c-0.492-0.492-0.985-0.492-1.477 0l-12.8 12.8-12.8-12.8c-0.492-0.492-0.985-0.492-1.477 0-0.246 0.492-0.246 0.985 0 1.477l13.538 13.538c0.246 0.246 0.492 0.246 0.738 0.246s0.492 0 0.738-0.246l13.538-13.538c0.492-0.492 0.492-0.985 0-1.477v0z"></path></svg>'); /* [3] */
    background-size: 12px auto;
    background-repeat: no-repeat;
    z-index: 0;
    transform: translateY(-50%);
}

.c-input--select:hover,
.c-input--select:focus,
.c-input--select:active {
    cursor: pointer;
    background-color: #ffffff;
}

/**
 * 1. Height of our `c-input` minus the top and bottom border height.
 * 2. Padding is adjusted for text aligment. The left padding width
 *    creates a buffer for your custom drop down arrow icon.
 * 3. Reset some defaults on select just in case.
 */
.c-input--select select {
    position: relative;
    display: block;
    width: 100%;
    height: 36px; /* [1] */
    padding: 7px 32px 5px 6px; /* [2] */
    color: #000000;
    font-size: 16px;
    background-image: none; /* [3] */
    background-color: transparent; /* [3] */
    border: 0; /* [3] */
    border-color: transparent; /* [3] */
    -webkit-appearance: none;
    -moz-appearance:    none; /* [3] */
    appearance:         none; /* [3] */
    -webkit-text-size-adjust: none; /* [3] */
    cursor: pointer; /* [3] */
    z-index: 1;
}

/* 1. Hide the native drop-down button arrow in IE10+. */
.c-input--select select::-ms-expand {
    display: none; /* [1] */
}

.c-input--select select option {
    max-width: 92%;
    background-color: transparent;
}



/*
 * 1. Position and size the datepicker's custom icon.
 * 2. Set the icon for the datepicker.
 */
.c-input--datepicker {
    position: relative;
    padding: 0 !important;
}

.c-input--datepicker:before {
    position: absolute;
    top: 50%;
    left: auto;
    right: 6px; /* [1] */
    width: 24px; /* [1] */
    height: 24px; /* [1] */
    content: "";
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 41 32"><path fill="black" d="M29.224 2.52v-2.447h-2.4v2.452h-12.303v-2.452h-2.4v2.452h-7.341v29.407h31.859v-29.412h-7.414zM12.12 29.427h-4.905v-4.899h4.899v4.899zM12.12 22.128h-4.905v-4.899h4.899v4.899zM12.12 14.771h-4.905v-4.899h4.899v4.899zM19.456 29.427h-4.899v-4.899h4.899v4.899zM19.456 22.128h-4.899v-4.899h4.899v4.899zM19.456 14.771h-4.899v-4.899h4.899v4.899zM26.792 29.427h-4.899v-4.899h4.899v4.899zM26.792 22.128h-4.899v-4.899h4.899v4.899zM26.792 14.771h-4.899v-4.899h4.899v4.899zM34.128 29.427h-4.899v-4.899h4.899v4.899zM34.128 22.128h-4.899v-4.899h4.899v4.899zM34.128 14.771h-4.899v-4.899h4.899v4.899z"></path></svg>'); /* [2] */
    background-size: 24px auto;
    background-repeat: no-repeat;
    z-index: 0;
    transform: translateY(-50%);
}

/* 1. Reset some defaults on select just in case. */
.c-input--datepicker .hasDatepicker {
    position: relative;
    display: block;
    width: 100%;
    height: 36px;
    padding: 7px 36px 5px 6px;
    color: #000000;
    font-size: 16px;
    background-image: none; /* [1] */
    background-color: transparent; /* [1] */
    border: 0; /* [1] */
    border-color: transparent; /* [1] */
    -webkit-appearance: none;
    -moz-appearance:    none; /* [1] */
    appearance:         none; /* [1] */
    -webkit-text-size-adjust: none; /* [1] */
    cursor: pointer; /* [1] */
    font-size: 16px;
    z-index: 1;
}



/* Buttons
   ========================================================================== */
/**
 * 1. Mobile first - make our buttons block elements below tablet size screens,
 *    center align them, and make them full width up to a set max-width.
 * 2. Allow us to style box model properties.
 * 3. Line different sized buttons up a little nicer.
 * 4. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 5. Reset/normalize some styles.
 * 6. Force all button-styled elements to appear clickable.
 * 7. Give the user a nice visual indication that the button is in focus.
 */
.c-btn {
    position: relative;
    display: inline-block; /* [1] */
    width: auto; /* [1] */
    max-width: 100%; /* [1] */
    margin-bottom:  0; /* [1] */
    margin-right:   0; /* [1] */
    margin-left:    0; /* [1] */
    padding-top:    12px; /* [1] */
    padding-bottom: 12px; /* [1] */
    padding-left:   24px; /* [1] */
    padding-right:  24px; /* [1] */
    vertical-align: middle; /* [3] */
    font: inherit; /* [4] */
    text-align: center; /* [5] */
    color: currentColor; /* [5] */
    letter-spacing: 1px;
    cursor: pointer; /* [6] */
    border: 0;
    border-radius: 3px;
    opacity: 1;
    transition: opacity 250ms ease-out;
}


/* Hover and focus button styles */
.c-btn:hover,
.c-btn:focus {
    opacity: 0.8;
    will-change: opacity;
}

/* Give the user a nice visual indication that the button is in focus. */
.c-btn:focus {
    outline: 1px dotted rgba(255, 255, 255, 0.6); /* [7] */
    outline-offset: -4px;
}


/* Disabled button styles */
.c-btn:disabled {
    transition: none;
}

.c-btn:disabled,
.c-btn:disabled:hover {
    cursor: none !important;
    background-image: none !important;
    border: 0 !important;
    opacity: 0.3;
}

   
   
   
   
/* Style variants
    ========================================================================== */
/* Set the text color and background color for your primary button style. */
.c-btn--primary {
    color: #ffffff;
    background-color: #1188d3;
}

.c-btn--primary:link,
.c-btn--primary:visited,
.c-btn--primary:hover,
.c-btn--primary:active,
.c-btn--primary:focus {
    text-decoration: none;
    color: #ffffff;
}

.c-btn--primary:hover,
.c-btn--primary:focus {
    background-color: #1188d3;
}

.c-btn--primary:active {
    background-color: #1188d3;
}



/* Form buttons layout
   ========================================================================== */
/* Group your Save and Cancel buttons inline. */
.c-form-buttons {
    width: 50%;
    padding-top: 24px;
}

.c-form-buttons--prev {
    text-align: left;
}

.c-form-buttons--next {
    text-align: right;
}

/* Set a width for the previous and next buttons so they are balanced */
.c-form-buttons .c-btn {
    min-width: 120px;
}

/* Error highlighting
   ========================================================================== */
.c-form-container .c-form-field[data-form-field-status="error"] .c-input:not(.c-input--other) {
    border-color: #ed1c24 !important;
}

/* .c-form-container .c-form-field[data-form-field-status="error"] [type="radio"],
.c-form-container .c-form-field[data-form-field-status="error"] [type="checkbox"] {
    outline: 1px solid #ed1c24 !important;
} */

.c-form-container .c-form-field.c-form-field--checkboxes[data-form-field-status="error"] .c-form-field__fieldset {
    border: 1px solid #ed1c24 !important;
}