/* TOC - ADF Styles...
    
    1. General
    2. Placeholders
    3. Validation
    4. Button Group
    5. Amounts
    6. Custom Input (Checkboxes)
    
*/



/* =========================================================================================
1. General
========================================================================================= */

.form-group {
margin-bottom:1rem;
position:relative;
}

#adfSubmit {
margin:0;
}

#adfSubmit[disabled] {
cursor:not-allowed;
opacity:.65;
}


/* field labels */

.adfFormLabel {
display:inline-block;
font-weight:700;
}


/* hidden fields */

*.hidden {
display:none !important;
}


/* bbcheckout overrides */

#bbcheckout-iframe-wrapper.processing {
display:block !important;
opacity:1 !important;
}


/* confirmation screen */

#adfConfWrapper .button-wrapper {
margin-top:2.5rem;
}

#adfConfWrapper .button-wrapper a.button {
margin:0 1rem 1rem 0;
}


/* input field spacing */

#honoreeSection input[type="text"],
#honoreeSection select,
#acknowledgeeSection input[type="text"],
#acknowledgeeSection select,
#billingInfo input,
#billingInfo select,
#designation,
#otherDesignation {
margin-bottom:1.5rem;
}


/* note */

p.note {
background-color:#ebf4ff;
border-radius:4px;
color:#0057b8;
display:inline-block;
font-size:1rem;
font-style:italic;
line-height:1.3;
margin:1rem 0;
padding:.625rem .8rem .8rem 2.25rem;
position:relative;
}

p.note svg {
left:.625rem;
position:absolute;
top:.85rem;
}



/* =========================================================================================
2. Placeholders
========================================================================================= */

input.placeholder,
textarea.placeholder,
input:disabled {
color:#949494 !important;
}

::-webkit-inner-spin-button,
::-webkit-clear-button {
-webkit-appearance:none;
appearance:none;
}

::placeholder {
color:#949494;
opacity:1;
}

::-webkit-input-placeholder {
color:#949494;
opacity:1;
}

:-moz-placeholder {
color:#949494;
opacity:1;
}

::-moz-placeholder {
color:#949494;
opacity:1;
}

:-ms-input-placeholder {
color:#949494 !important;
opacity:1;
}

::-ms-input-placeholder {
color:#949494 !important;
opacity:1;
}



/* =========================================================================================
3. Validation
========================================================================================= */

/* validation markers */

.marker::before {
color:#ab0520;
content:"*";
left:1px;
position:relative;
top:1px;
}


/* status bar */

p.error {
background-color:#feebee;
border-radius:4px;
color:#ab0520;
display:block;
font-size:1rem;
font-style:italic;
line-height:1.3;
margin:0 0 2.5rem;
padding:.625rem .8rem .8rem 2.25rem;
position:relative;
}

p.error svg {
left:.625rem;
position:absolute;
top:.85rem;
}


/* inline validation */

.has-error {
position:relative !important;
}

.has-error .form-control.invalid {
box-shadow:none;
border-color:#ab0520 !important;
}

.form-control:invalid {
box-shadow:none;
}

.validation-message {
bottom:4px;
color:#ab0520;
font-size:.8rem;
position:absolute;
}



/* =========================================================================================
4. Button Group
========================================================================================= */

.button-group {
display:flex;
border:1px solid #a8a8a8;
border-radius:4px;
margin:1rem 0 1.5rem;
padding:.5rem;
}

.button-group .btn {
background-color:#fff;
border-radius:4px;
cursor:pointer;
flex:1 1 100%;
font-size:1.2rem;
font-weight:700;
margin:0 .25rem;
padding:.5rem .25rem;
text-align:center;
}

.button-group .btn:first-child {
margin-left:0;
}

.button-group .btn:last-child {
margin-right:0;
}

.button-group .btn:hover {
background-color:#e6e6e6;
}

.button-group .btn.active {
background-color:#0057b8;
color:#fff;
}

.button-group .btn svg {
font-size:1rem;
margin-right:.25rem;
}

@media only screen and /*!YUI Compressor */ (max-width:600px) {
    .button-group {
    flex-wrap:wrap;
    padding:.25rem;
    }
    
    .button-group .btn {
    flex-basis:calc(50% - .5rem);
    margin:.25rem;
    }
    
    .button-group .btn:first-child,
    .button-group .btn:last-child {
    margin:.25rem;
    }
}



/* =========================================================================================
5. Amounts
========================================================================================= */

#amounts {
margin-top:.5rem;
}

#amounts + #amountSection {
display:none;
}

#amounts[data-for="other"] + #amountSection,
#amounts.hidden + #amountSection {
display:block;
}

#amountSection {
padding-bottom:1.5rem;
position:relative;
}



/* =========================================================================================
6. Custom Input (Checkboxes)
========================================================================================= */

.checkbox {
cursor:pointer;
margin-bottom:.5rem;
position:relative;
width:auto;
}

.checkbox input {
opacity:0;
position:absolute;
}

.checkbox label {
cursor:pointer;
display:block;
line-height:1.3;
padding:.5rem .5rem .5rem 1.625rem;
}

.checkbox label::before {
background:#fff;
border-radius:.125rem;
content:"";
border:1px solid #a8a8a8;
cursor:pointer;
height:17px;
left:0;
position:absolute;
top:10px;
width:17px;
}

.checkbox label::after {
background:transparent;
border:2px solid #000;
border-right:none;
border-top:none;
content:"";
height:6px;
left:3px;
opacity:0;
position:absolute;
top:14px;
transform:rotate(-45deg);
width:11px;
}

.checkbox:hover label::after {
opacity:.25;
transition:all 100ms ease-in-out;
}

.checkbox input[type="checkbox"]:checked + label::after {
opacity:1;
}

.checkbox input[type="checkbox"]:focus + label::before {
border-color:#0057b8;
}