/* Copyright @ Balbooa, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/* ========================================================================
    General and resets
 ========================================================================== */

.icento-forms-wrapper *:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: -1px;
}

/* Custom scroll */
.ic-form-page *::-webkit-scrollbar {
    width: 6px;
}

.ic-form-page *::-webkit-scrollbar-track {
    background-color: transparent;
}

.ic-form-page *::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 6px;
}

.ic-form-page *{
    -webkit-tap-highlight-color: transparent;
}

/* ========================================================================
    Form Style
 ========================================================================== */

.ic-form-page input[disabled] {
    cursor: not-allowed;
    background-color: transparent;
}

.ic-form-page h1,
.ic-form-page h2,
.ic-form-page h3,
.ic-form-page h4,
.ic-form-page h5,
.ic-form-page h6,
.ic-form-page p {
    margin: 0;
}

.ic-form-page {
    background: var(--form-background-color);
    border-bottom: calc(var(--form-border-bottom)*var(--form-border-width)) solid var(--form-border-color);
    border-left: calc(var(--form-border-left)*var(--form-border-width)) solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    border-right: calc(var(--form-border-right)*var(--form-border-width)) solid var(--form-border-color);
    border-top: calc(var(--form-border-top)*var(--form-border-width)) solid var(--form-border-color);
    box-shadow: 0 calc(var(--form-shadow-value)*10px) calc(var(--form-shadow-value)*20px) 0 var(--form-shadow-color);
    box-sizing: border-box;
    display: block;
    margin: 0 auto; 
    min-width: var(--form-width-fullwidth);
    max-width: 100%;
    padding-bottom: var(--form-padding-bottom);
    padding-left: var(--form-padding-left);
    padding-right: var(--form-padding-right);
    padding-top: var(--form-padding-top);
    width: var(--form-width-value);
}

.ic-form-column-wrapper .ic-form-column {
    align-self: stretch;
    display: flex !important;
    flex-direction: column;
    position: relative;
}

.ic-form-column-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.ic-form-submit-field {
    align-items: flex-end;
    display: flex;
    height: 100%;
}

.ic-form-submit-field:not(.hidden-condition-field) ~ .ic-form-submit-field {
    height: auto;
}

.ic-form-submit-wrapper {
    width: 100%;
}

/*
/* Form Item
*/

.ic-form-field-item {
    margin-bottom: var(--field-margin-bottom);
    margin-top: var(--field-margin-top);
    position: relative;
    width: 100%;
}

.ic-form-field-item[data-hidden="true"] {
    height: 0 !important;
    overflow-y: hidden !important;
    margin: 0 !important;
}

.ic-form-field-item .ic-field-label-wrapper {
    position: relative;
    text-align: var(--label-typography-text-align);
    line-height: var(--label-typography-line-height);
}

.ic-form-field-item legend.ic-field-label-wrapper {
    border: none !important;
    font-size: initial;
    margin-bottom: 0;
}

.ic-form-field-item .ic-field-label-wrapper * {
    text-align: var(--label-typography-text-align);
    line-height: var(--label-typography-line-height);
}


.ic-form-field-item .ic-field-label-wrapper > * {
    color: var(--label-typography-color);
    cursor: default;
    font-family: var(--label-typography-font-family);
    font-size: var(--label-typography-font-size);
    font-style: var(--label-typography-font-style);
    font-weight: var(--label-typography-font-weight);
    letter-spacing: 0;
    line-height: var(--label-typography-line-height);
    text-transform: var(--label-typography-text-transform);
}

.ic-field-container {
    position: relative;
}

.ic-field-container i {
    align-items: baseline;
    bottom: calc(var(--field-padding-bottom) + var(--field-border-width)*var(--field-border-bottom));
    box-sizing: border-box;
    color: var(--field-icon-color);
    display: flex;
    font-size: var(--field-icon-size);
    line-height: var(--field-typography-line-height);
    justify-content: var(--field-icon-text-align);
    left: calc(var(--field-padding-left) + var(--field-border-width)*var(--field-border-left));
    pointer-events: none;
    position: absolute;
    right: calc(var(--field-padding-right) + var(--field-border-width)*var(--field-border-right));
    top: calc(var(--field-padding-top) + var(--field-border-width)*var(--field-border-top) );
}

.fields-icons-flex-start .ic-field-container i + textarea,
.fields-icons-flex-start .ic-field-container i + input {
    padding-left: calc(var(--field-padding-left) + var(--field-icon-size) + .9375rem) !important;
}


.ic-field-container textarea::-webkit-input-placeholder,
.ic-field-container input[type="text"]::-webkit-input-placeholder,
.ic-field-container input[type="number"]::-webkit-input-placeholder,
.ic-field-container input[type="email"]::-webkit-input-placeholder{
    color: var(--field-typography-color);
    opacity: .5;
}


.ic-field-container textarea::-webkit-input-placeholder,
.ic-field-container input[type="text"]::-webkit-input-placeholder,
.ic-field-container input[type="number"]::-webkit-input-placeholder,
.ic-field-container input[type="email"]::-webkit-input-placeholder {
    color: var(--field-typography-color);
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    letter-spacing: 0;
    line-height: var(--field-typography-line-height);
}

.ic-field-container textarea::-moz-placeholder,
.ic-field-container input[type="text"]::-moz-placeholder,
.ic-field-container input[type="number"]::-moz-placeholder,
.ic-field-container input[type="email"]::-moz-placeholder {
    color: var(--field-typography-color);
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    letter-spacing: 0;
    line-height: var(--field-typography-line-height);
}


.ic-field-container select,
.ic-field-container textarea[readonly],
.ic-field-container textarea,
.ic-field-container input[type="text"],
.ic-field-container input[type="number"],
.ic-field-container input[type="password"],
.ic-field-container input[type="email"] {
    background: var(--field-background-color) !important;
    background-image: none !important;
    border-bottom: calc(var(--field-border-bottom)*var(--field-border-width)) solid var(--field-border-color) !important;
    border-left: calc(var(--field-border-left)*var(--field-border-width)) solid var(--field-border-color) !important;
    border-radius: var(--field-border-radius);
    border-right: calc(var(--field-border-right)*var(--field-border-width)) solid var(--field-border-color) !important;
    border-top: calc(var(--field-border-top)*var(--field-border-width)) solid var(--field-border-color) !important;
    box-sizing: border-box;
    box-shadow: none;
    color: var(--field-typography-color);
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    height: auto;
    letter-spacing: 0;
    line-height: var(--field-typography-line-height);
    margin: 0;
    padding-bottom: var(--field-padding-bottom);
    padding-left: var(--field-padding-left);
    padding-right: var(--field-padding-right);
    padding-top: var(--field-padding-top);
    text-align: var(--field-typography-text-align);
    text-transform: var(--field-typography-text-transform);
    transition: none;
    width: 100% !important;
}

.ic-field-container select:not([multiple]) {
    height: calc(var(--field-typography-line-height) + var(--field-padding-top) + var(--field-padding-bottom) + (var(--field-border-top)*var(--field-border-width)) + (var(--field-border-bottom)*var(--field-border-width)));
    padding-bottom: 0;
    padding-top: 0;
    text-align-last: var(--field-typography-text-align);
}

@supports (-webkit-overflow-scrolling: touch) {
        
        .ic-field-container select,
        .ic-field-container textarea,
        .ic-field-container input[type="text"],
        .ic-field-container input[type="number"],
        .ic-field-container input[type="password"],
        .ic-field-container input[type="email"]{
            -webkit-appearance: none;
        }
}

.ic-field-container select option {
    font-weight: var(--field-typography-font-weight);
}

.ic-field-container textarea {
    min-height: 9.375rem;
    resize: vertical;
}

@media (min-width: 769px){
}

/* ========================================================================
    Signature Field
 ========================================================================== */

/* ========================================================================
    Products Cart
 ========================================================================== */

/* ========================================================================
    Image
 ========================================================================== */
.ic-form-field-item .ic-image-wrapper {
    text-align: var(--image-field-align);
}

.ic-form-field-item .ic-image-wrapper img {
    width: var(--image-field-width);
    max-width: 100%;
}

/* ========================================================================
    Attachment
 ========================================================================== */

/* ========================================================================
    Map
 ========================================================================== */

/* ========================================================================
    Page Navigation
 ========================================================================== */

/* Progress Navigation */

/*
/* Page Break
*/

.ic-field-label-wrapper:after,
.ic-field-label-wrapper:before,
.ic-form-field-item:after,
.ic-form-field-item:before,
.ic-page-items:before,
.ic-page-items:after {
    clear: both;
    content: "";
    display: table;
    line-height: 0;
}

/* ========================================================================
    Step Navigation
 ========================================================================== */

/* ========================================================================
    Dots Navigation
 ========================================================================== */

/* ========================================================================
    Tooltip
 ========================================================================== */

@keyframes tooltip {
    from { opacity: 0; }
}

/* Tooltip  */

@keyframes tooltip {
    from { opacity: 0; }
}

/* ========================================================================
    Rating
 ========================================================================== */

/* Smiles */

/* Stars */

/* ========================================================================
    Range
 ========================================================================== */

/* ========================================================================
    Checkbox
 ========================================================================== */

.ic-form-acceptance-field .ic-field-container {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    flex-wrap: wrap;
    float: left;
    margin: .9375rem 0;
    position: relative;
    width: calc(100% / var(--checkbox-field-count));
}

.ic-form-acceptance-field .ic-field-container label {
    transform: none;
}

.ic-form-acceptance-field .ic-field-container{
    box-sizing: border-box;
    display: inline-flex;
    min-height: 1.125rem;
    padding-left: 3.125rem;
    position: relative;
    width: 100%;
}

.ic-form-acceptance-field label.ic-form-checkbox input[type="checkbox"]:checked + span {
    border: 2px solid var(--theme-color);
    background: var(--theme-color);
}


.ic-form-acceptance-field .ic-form-checkbox input  {
    appearance: none;
    height: 1.875rem;
    left: 0;
    margin: 0;
    position: absolute;
    top: calc(var(--field-typography-line-height)/2 - .875rem);
    width: 1.875rem;
}

.ic-form-acceptance-field label.ic-form-checkbox > span {
    background: rgba(214, 214, 214, .4);
    border-radius: .25em;
    border: 2px solid transparent;
    box-sizing: border-box;
    content: '';
    cursor: pointer;
    display: block;
    height: 1.875rem;
    left: 0;
    position: absolute;
    top: calc(var(--field-typography-line-height)/2 - .875rem);
    width: 1.875rem;
}

@keyframes checkbox-checked  {
    from { opacity: 0; transform: scale(0);}
    to { opacity: 1; transform: scale(1);}
}

.ic-form-acceptance-field label.ic-form-checkbox input[type="checkbox"]:checked + span:before {
    animation: checkbox-checked .15s linear;
}

.ic-form-acceptance-field label.ic-form-checkbox input[type="checkbox"]:checked + span:before {
    color: #fff;
    content: '\f26b';
    display: block;
    font: normal normal normal 1.5rem/1.625rem 'balbooa-form-icons';
    text-align: center;
}


.ic-form-acceptance-field label.ic-form-checkbox > span:hover {
    border: 2px solid var(--theme-color) !important;
}


.ic-form-acceptance-field .ic-form-acceptance-html p,
.ic-form-acceptance-field .ic-form-acceptance-html {
    color: var(--field-typography-color);
    cursor: text;
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    letter-spacing: 0;
    line-height: var(--field-typography-line-height);
    text-align: var(--field-typography-text-align);
    text-transform: var(--field-typography-text-transform);
    width: 100%;
}


.ic-form-acceptance-field .ic-form-acceptance-html p {
    cursor: default;
}

.ic-form-acceptance-field .ic-form-acceptance-html p a {
    color:var(--theme-color);
}

/* ========================================================================
    Poll
 ========================================================================== */

@keyframes votes-progress {
    from { width: 0; }
    to { width: var(--poll-votes-percent);}
}

/* ========================================================================
    Submit Button
 ========================================================================== */


.ic-form-submit-wrapper .ic-form-submit-btn-wrapper {
    display: inline-flex;
    font-family: var(--label-typography-font-family);
    justify-content: var(--submit-typography-text-align);
    width: 100%;
}

.ic-form-submit-btn-wrapper input[type="checkbox"] {
    display: none;
}

.ic-form-submit-btn {
    align-items: center;
    background-color: var(--submit-background-color);
    border-bottom: calc(var(--submit-border-bottom)*var(--submit-border-width)) solid var(--submit-border-color);
    border-left: calc(var(--submit-border-left)*var(--submit-border-width)) solid var(--submit-border-color);
    border-radius: var(--submit-border-radius);
    border-right: calc(var(--submit-border-right)*var(--submit-border-width)) solid var(--submit-border-color);
    border-top: calc(var(--submit-border-top)*var(--submit-border-width)) solid var(--submit-border-color);
    box-shadow: 0 calc(var(--submit-shadow-value)*10px) calc(var(--submit-shadow-value)*20px) 0 var(--submit-shadow-color); 
    color: var(--submit-typography-color);
    cursor: pointer;
    display: flex;
    flex-direction: var(--submit-icon-text-align);
    flex-grow: var(--submit-typography-text-align);
    font-family: var(--submit-typography-font-family);
    font-size: var(--submit-typography-font-size);
    font-style: var(--submit-typography-font-style);
    font-weight: var(--submit-typography-font-weight);
    justify-content: center;
    letter-spacing: 0;
    line-height: var(--submit-typography-line-height);
    padding-bottom: var(--submit-padding-bottom);
    padding-left: var(--submit-padding-left);
    padding-right: var(--submit-padding-right);
    padding-top: var(--submit-padding-top);
    position: relative;
    text-align: var(--submit-typography-text-align);
    text-decoration: none !important;
    text-transform: var(--submit-typography-text-transform);
    transition: background-color .3s ease-in-out, border-right .3s ease-in-out,  border-left .3s ease-in-out, border-top .3s ease-in-out, border-bottom .3s ease-in-out, box-shadow .3s ease-in-out;
}

.ic-form-submit-btn:hover {
    background-color: var(--submit-background-hover);
    border-bottom: calc(var(--submit-border-bottom)*var(--submit-border-width)) solid var(--submit-border-hover);
    border-left: calc(var(--submit-border-left)*var(--submit-border-width)) solid var(--submit-border-hover);
    border-right: calc(var(--submit-border-right)*var(--submit-border-width)) solid var(--submit-border-hover);
    border-top: calc(var(--submit-border-top)*var(--submit-border-width)) solid var(--submit-border-hover);
    box-shadow: 0 calc(var(--submit-shadow-value)*10px) calc(var(--submit-shadow-value)*20px) 0 var(--submit-shadow-hover); 
    color: var(--submit-typography-hover);
}

.ic-form-submit-btn i {
    font-size: var(--submit-icon-size);
    color: var(--submit-icon-color);
    margin: 0 .625rem;
}

.ic-form-submit-btn:hover i {
    color: var(--submit-icon-hover);
}

 
.ic-form-submit-btn:focus-visible {
    outline-offset: 1px;
}

/*
* Submit Button Animation
*/

.ic-form-submit-wrapper[class*="animation"] .ic-form-submit-btn {
    overflow: hidden;
    position: relative;
    transition: background .0s ease-in-out;
}

.ic-form-submit-wrapper[class*="animation"] .ic-form-submit-btn > i,
.ic-form-submit-wrapper[class*="animation"] .ic-form-submit-btn > span {
    z-index: 5
}

.ic-form-submit-wrapper[class*="animation"] .ic-form-submit-btn:after {
    border-radius: inherit;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .3s;
}

.ic-form-submit-wrapper[class*="animation"] .ic-form-submit-btn:after {
    background: var(--submit-background-hover);
    z-index: 2;
}

/* Tada */
@-webkit-keyframes hover-4 {
    from, 11.1%, to {transform: none;}
    22.2% {transform: skewX(-12.5deg) skewY(-12.5deg);}
    33.3% {transform: skewX(6.25deg) skewY(6.25deg);}
    44.4% {transform: skewX(-3.125deg) skewY(-3.125deg);}
    55.5% {transform: skewX(1.5625deg) skewY(1.5625deg);}
    66.6% {transform: skewX(-0.78125deg) skewY(-0.78125deg);}
    77.7% {transform: skewX(0.390625deg) skewY(0.390625deg);}
    88.8% {transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}

/* Slide Out Diagonal */

/* Slide In Diagonal */

/* Slide In Horizontal */

/* Slide Out Horizontal */

/*  Icon Horizontal Slide In  */

/* Icon Vertical Slide In */


.ic-form-submit-btn:before {
    animation: spinner 1.1s infinite linear;
    border-radius: 50%;
    border: .2em solid transparent;
    border-left: .2em solid var(--submit-typography-color);
    box-sizing: border-box;
    content: "";
    height: calc(var(--submit-typography-font-size)*2);
    left: calc(50% - var(--submit-typography-font-size));
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(50% - var(--submit-typography-font-size));
    transition: .3s;
    width: calc(var(--submit-typography-font-size)*2);
    z-index: 100 !important;
}

@keyframes spinner {
    0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}


.ic-form-submit-btn * {
    transition: .3s;
}

/*
/* Notification
*/

@keyframes notification-in {
    from {bottom: 0; transform: translateY(100%); opacity: 0;}
}

@keyframes notification-out {
    to { bottom: 0; transform: translateY(100%); opacity: 0;}
}

/* ========================================================================
    Phone Flag
 ========================================================================== */

/* ========================================================================
    Calendar
 ========================================================================== */

@keyframes calendar-close {
    0% { top: 50%; opacity: 1;}
    100% { top: -31.25rem; opacity: 0;}
}

@keyframes calendar-open {
    0% { top: -31.25rem; opacity: 0; }
    100% { top: 50%; opacity: 1; }
}

/* ========================================================================
    Lightbox
 ========================================================================== */

/* Lightbox Position */

/*
/* Lightbox Effect
*/

/* Fade In */

/* Scale In */

/* Slide In Left */

/* Slide In Right */

/* Slide In Top */

/* Slide In Bottom */

/* Spinner */

/* Fall In */

/* Flip Horizontal */

/* Flip Vertical */

/*
/* Authorize Modal
*/

/* ========================================================================
    Responsive Grid
 ========================================================================== */

.icento-forms-wrapper .ic-row-clear {
    width: 100%;
}

.icento-forms-wrapper [class*="span"]{
    flex-grow: 1;
    box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.127659574468085%;
}

.icento-forms-wrapper [class*="span"]:first-child {
    margin-left: 0;
}

.icento-forms-wrapper .ic-span12 {
    width: 100%;
}

/* ========================================================================
    Icons
 ========================================================================== */
 
@font-face {
    font-family: 'balbooa-form-icons';
    src: url('/assets/fonts/ic-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ========================================================================
    Responsive
 ========================================================================== */

@media (max-width: 1024px){
}

@media (max-width: 768px){
    .icento-forms-wrapper [class*="span"] {
        margin-left: 0;
        width: 100%;
    }

    .ic-form-page {
        padding: 20px !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
}

/* ========================================================================
    RTL
 ========================================================================== */

html[dir="rtl"] .ic-form-acceptance-field .ic-field-container {
    padding-left: 0;
    padding-right: 50px;
}


html[dir="rtl"] .ic-form-acceptance-field label.ic-form-checkbox > span {
    left: auto;
    right: 0;
}

/* For IOS */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    select {
        -webkit-appearance: none
    }
}

@supports (-webkit-text-size-adjust:none) and (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
    select {
        -webkit-appearance: none
    }
}

@media not all and (min-resolution:.001dpcm) {
    select {
        -webkit-appearance: none
    }
}