/*--- All Custom CSS for Fluent Forms ---*/

/* CSS: root */
:root {
    
	/*--Form--*/
    --form-width: 500px;
	--form-width-1024: 500px;
    --form-width-880: 400px;
	--form-width-767: 300px;
	--form-width-600: 300px;
    --padding: 6px 12px !important;
    
	/*--Font--*/
    --font-family: "Montserrat", Sans-serif;
    --fs: 16px;
    --color: #222222;
    --color-focus: #222222;
    --color-placeholder: #3C3C3C;
    --color-placeholder-focus: #CCC;
    --line-height: 1.5;
    --font-weight: 400;
    --text-tr: none !important;
    
	/*--Control--*/
    --control-bg: #FFF;
    --control-bg-focus: #FFF;
    --border: 1px solid #9C9C9C;
    --border-radius: 0px;
    --border-focus: 1px solid #FEC200;
    
	/*--Button--*/
    --btn-width: 200px;
    --btn-padding: 6px 12px !important;
    --btn-fs: 16px;
    --btn-font-weight: 300 !important;
    --btn-color: #000;
    --btn-color-hover: #FFF;
    --btn-bg: #242424;
    --btn-bg-hover: #000000;
	--btn-border-radius: 50px;
    
	/*--Mobile--*/
    --mobile-width: 300px;
    
	/*--Messages--*/
    --mess-success-bg: #FFF;
    --mess-success-border: #FEC200;
    --mess-success-border-radius: 0px;
    --mess-success-padding: 6px 12px;
}

/*-- Forms --*/
.fluentform.ff-default.ffs_default_wrap {
    max-width: var(--form-width);
}

/*Labels*/
.ff-default .ff-el-input--label {
    font-family: var(--font-family);
    font-size: var(--fs);
    color: var(--color);
    line-height: var(--line-height);
    font-weight: var(--font-weight);
}

/*-- Controls --*/
.ff-default .ff-el-form-control {
    font-family: var(--font-family);
    font-size: var(--fs);
    line-height: var(--line-height);
    color: var(--color);
    font-weight: var(--font-weight);
    background: var(--control-bg);
    padding: var(--padding);
    border: var(--border) !important;
    border-radius: var(--border-radius) !important;
}

.ff-default .ff-el-form-control:focus {
    border: var(--border-focus) !important;
    color: var(--color-focus);
    background: var(--control-bg-focus);
    outline: none;
    /*-webkit-box-shadow: 0 0 0 3px rgba(255, 0, 129, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 0, 129, 0.25);*/
}

/*-- Placeholders --*/
.ff-el-form-control::placeholder {
    font-family: var(--font-family);
    font-size: var(--fs);
    color: var(--color-placeholder) !important;
}

.ff-el-form-control:focus::placeholder {
    font-family: var(--font-family);
    font-size: var(--fs);
    color: var(--color-placeholder-focus) !important;
}

/*-- Button --*/
.ff-default .ff-btn-submit {
    font-family: var(--font-family);
    border-radius: var(--btn-border-radius) !important;
    text-transform: var(--text-tr) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-fs) !important;
    font-weight: var(--btn-font-weight) !important;
    background: var(--btn-bg) !important;
    width: var(--btn-width) !important;
}

.ff-default .ff-btn-submit:hover {
    color: var(--btn-color-hover) !important;
    background: var(--btn-bg-hover) !important;
}

/*-- Message --*/
.ff-message-success {
    font-family: var(--font-family);
    background: var(--mess-success-bg);
    border: var(--mess-success-border);
    border-radius: var(--mess-success-border-radius);
    padding: var(--mess-success-padding);
    color: var(--color);
    font-size: var(--fs);
    font-weight: var(--font-weight);
}

/*-- Flags --*/
.fluentform .iti__selected-flag {
    background: #FFF !important;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

/*Change Step button styles*/
/*form.fluent_form_149 .step-nav button {
    background-color: #000000;
    color: #ffffff;
    border-radius: 10px;
} */


/*Change Step button styles on hover*/
/*form.fluent_form_149 .step-nav button:hover {
    background-color: #ff0606;
    color: #000000;
} */

/* Change Rating Star Color */
/*form.fluent_form_149 .ff-el-ratings label.active svg {
    fill: red;
} */

/*--------- MOBILE ---------*/
@media screen and (max-width: 1024px) {

    .ff-default .ff-el-form-control {
        max-width: var(--mobile-width-1024);
        font-weight: var(--font-weight);
    }
}

@media screen and (max-width: 880px) {

    .fluentform.ff-default.ffs_default_wrap {
        max-width: var(--form-width-880);
    }
}

@media screen and (max-width: 767px) {

    .fluentform.ff-default.ffs_default_wrap {
        max-width: var(--mobile-width-767) !important;
    }
}

@media screen and (max-width: 600px) {

    .ff-default .ff-btn-submit {
        max-width: var(--mobile-width-660);
        border-radius: var(--border-radius) !important;
        text-transform: var(--text-tr) !important;
        padding: var(--btn-padding);
        font-size: var(--btn-fs);
        font-weight: var(--btn-font-weight);
    }
}