/**
 * Style border-only-button
 * */

 .border-only-button {}
 .border-only-button {}
 .border-only-button {}
 .border-only-button {}


/**
 * slidinging gradient-filled
 * */


/**
 * slidinging-gradintent-outlined
 * */


/**
 * slidinging gradient-filled
 * */


body.cx.cx_ems .cx_btn,
body.cx.cx_ems .cx_btn_el a {
    padding: 10px 20px;
    display: inline-block;
    font-size: .9em;
    font-weight: 500;
    text-align: center;
    border: none;
    outline: none;
    text-decoration: none;
    border-radius: var(--cx-btn-radius);
    cursor: pointer;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.cx_btn .cx-custom-currency,
.cx_btn .cx_fn_feeling_lucky {
    display: flex;
    align-items: center;
}

/*primary*/
body.cx.cx_ems .cx_btn.cx_btn_primary,
body.cx.cx_ems .cx_btn_el.cx_btn_primary a {
    background-color: var(--e-primary) ;
    color: var(--e-btn-color) ;
    transition: all .2s ease-in ;
}

body.cx.cx_ems .cx_btn.cx_btn_primary:hover,
body.cx.cx_ems .cx_btn_el.cx_btn_primary a:hover {background-color: var(--e-primary-dark) ;color: var(--e-btn-color) ;}



/* primary gradient */
body.cx.cx_ems .cx_btn.cx_btn_primary_gradient,
body.cx.cx_ems .cx_btn_el.cx_btn_primary_gradient a {
    background-image: var(--cx-primary-gradient);
    color: var(--e-btn-color) ;
    transition: all .2s ease-in ;
}


/* primary outline */
body.cx.cx_ems .cx_btn.cx_btn_primary_outline {
    background-color: transparent;    
    color: var(--e-site-text-light);
    border: 2px solid var(--e-primary) ;
    display: block;
    font-size: 1em;
    font-weight: 500;
    transition: all .2s ease-in;
}

.cx_btn.cx_btn_primary_outline > i {color: var(--e-primary);}

.cx_btn.cx_btn_primary_outline:hover {
    background-color: var(--e-primary);
    color: var(--e-primary-complement-light);
    transition: all .2s ease-in;
}
.cx_btn.cx_btn_primary_outline:hover > i {color: var(--e-primary-complement-light);}

    /* outline primary */
body.cx.cx_ems .cx_btn.cx_btn_primary_outline_round {
    background-color: transparent;
    color: var(--e-primary);
    border: 2px solid var(--e-primary) ;
    border-radius: var(--cx-radius-xl);
    font-size: .8em;
    display: block;
    transition: all .2s ease-in;
}

.cx_btn.cx_btn_primary_outline_round:hover {
    background-color: var(--e-primary);
    color: var(--e-primary-complement-light);
}

/*btn-color white
btn-color-rev grey-black
btn-secondary white
btn-secondary-dark grey-white */

/* secondary */
body.cx.cx_ems .cx_btn.cx_btn_secondary,
body.cx.cx_ems .cx_btn_el.cx_btn_secondary a {
    background-color: var(--e-btn-secondary) ;
    color: var(--e-primary) ;
    transition: all .2s ease-in ;
}

body.cx.cx_ems .cx_btn.cx_btn_secondary:hover,
body.cx.cx_ems .cx_btn_el.cx_btn_secondary a:hover {background-color: var(--e-btn-secondary-dark) ;}

/* secondary outline */
body.cx.cx_ems .cx_btn.cx_btn_secondary_outline,
body.cx.cx_ems .cx_btn_el.cx_btn_secondary_outline a {
    background-color: transparent ;
    color: var(--e-btn-color) ;
    border: 1px solid var(--e-btn-color) ;
    transition: all .2s ease-in ;
}

body.cx.cx_ems .cx_btn.cx_btn_secondary_outline:hover,
body.cx.cx_ems .cx_btn_el.cx_btn_secondary_outline a:hover {
	background-color: var(--e-btn-secondary) ;
	color: var(--e-primary) ; border-color: var(--e-btn-secondary) ;
}


/* tertiary */
body.cx.cx_ems .cx_btn.cx_btn_tertiary,
body.cx.cx_ems .cx_btn_el.cx_btn_tertiary a {
    background-color: var(--e-primary-dark) ;
    color: var(--e-primary-complement-light) ;
    transition: all .2s ease-in ;
}

body.cx.cx_ems .cx_btn.cx_btn_tertiary:hover,
body.cx.cx_ems .cx_btn_el.cx_btn_tertiary a:hover {/*background-color: var(--e-primary-dark) ;*/ background-color: #51208e ;}


/* simple */
body.cx.cx_ems .cx_btn.cx_btn_simple,
body.cx.cx_ems .cx_btn_el.cx_btn_simple a {
    padding: 0 ;
    background-color: transparent;
    color: #ffffff;
}

body.cx.cx_ems .cx_btn.cx_btn_simple i,
body.cx.cx_ems .cx_btn_el.cx_btn_simple a i {
	margin-right: 5px;
}


body.cx.cx_ems .cx_btn.cx_btn_simple:hover i, .cx_btn_el.cx_btn_simple a:hover i {
    color: var(--e-primary);
    transition: all .2s ease-in ;
}

.cx_btn.cx_btn_icon {padding: 7px 7px ;font-style: .7em ;}
.cx_btn.cx_btn_icon.cx-ajax-loading > .button-icon {display: none;}


.cx-ajax-loading .loading-icon-container {display: inline-block;animation-name: rotate_complete;animation-duration: 0.8s;animation-iteration-count: infinite;animation-fill-mode: forwards;}



/**/
body.cx.cx_ems .cx_btn_mini_primary {
    padding: 5px 7px ;
    background-color: var(--e-body-secondary-bg);
    color: #ffffff;
    border-radius: var(--cx-btn-radius);
}


/* code from front.css start */

.btn-block,
.btn-block_el a {display: block;width: 100%;}

.btn_white,
.cx_btn_el.cx_btn_primary.btn_white_el a {background-color: #ffffff; color: var(--e-btn-color-rev);}





/* code from front.css ends */





/*code from base.css moved here */
body.cx.cx_ems .btn-primary,.cx-btn-primary {background: #566984 ;border-color: #40526b ;color : white;}
body.cx.cx_ems .btn-primary:hover,.cx-btn-primary:hover {background: #536f96 ;}

.btn.cx-btn-outline {border: 2px solid #566984;background-color: transparent;padding: 7px 20px;color: #566984;font-size: 1rem;font-weight: 500;transition: all .2s ease-in;}
.btn.cx-btn-outline:hover {border-color: #d88821; color: #d88821;}


.btn-secondary {background: #272626;border: 1px solid #0e0e0e;}
.btn-secondary:hover {background: #464343;}