/*Default css*/

/*------------------------------------------------------------------

Template Name: Easystep - Ajax Based Multistep Advances Registration Form Wizard
Template Description: Registration Form Wizard is a Multistep Responsive form wizard. It's Bootstrap based PHP form with full Ajax support. It can be easily customized as it is well documented and developed using latest web technologies. This form will be a perfect choice for all registration based websites.
Version: 1.0
Author: Phplime
-------------------------------------------------------------------*/


/*==========================================

[TABLE OF CONTENTS]

    1. Default Styles
    2. Form Styles

======================================*/

/*===================
 1. Default Styles 
================================*/

* {
    box-sizing: border-box;
}

body {
    color: #333333;
    background-size: cover;
    font-family: '微軟正黑體', 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    overflow-x: hidden;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 {
    color: #232323;
    font-family: '微軟正黑體', 'Roboto Condensed', sans-serif;
}

input.invalid, select.invalid, textarea.invalid {
    background-color: #ffdddd;
    border-color: red;
}

/*remove chrome autofill yellow background*/
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.p-0 {
    padding: 0;
}

.pt-50 {
    padding-top: 50px;
}

.pt-15 {
    padding-top: 15px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-10 {
    margin-top: 10px;
}
/*-----------------------------
 2. Form Styles 
-------------------------------*/

/* 2.1 Form Content Area */

.form_content {
    background: #ffffff;
    border: 1px solid #ccc;
    margin: 0 auto;
    padding: 2% 4% 5%;
    width: 80%;
}

    .form_content .text-success {
        border: 1px solid green;
        color: #333333;
        font-size: 16px;
        padding: 15px 25px;
        line-height: 1.2;
        color: green;
    }

    .form_content .text-danger {
        border: 1px solid #E7272D;
        font-size: 16px;
        padding: 15px 25px;
        line-height: 1.2;
    }

.loan-text {
    float: right;
    font-size: 20px;
    font-weight: 700;
}

.tab {
    display: none;
}

.top-area {
    border-bottom: 1px dashed #ccc;
    margin-bottom: 25px;
    padding-bottom: 20px;
}

/* 2.2 Form Input Related CSS */

.main-form-area .fa {
    padding-right: 10px;
}

.main-form-area {
    background: #fff;
}

    .main-form-area input {
        border-radius: 0px;
        height: 45px;
        padding: 10px;
        width: 100%;
    }

    .main-form-area label {
        font-weight: bold;
        text-transform: uppercase;
    }

    .main-form-area select {
        box-sizing: border-box;
        font-family: '微軟正黑體', Oswald, sans-serif;
        height: 45px;
        max-width: 100%;
        min-width: 100%;
        outline: none;
        padding: 10px 15px;
        padding-left: 15px;
        text-indent: 0.01px;
        text-overflow: "";
        width: 100%;
    }

    .main-form-area textarea {
        border-radius: 0px;
        padding: 10px;
        width: 100%;
    }



/* 2.3 Form Button Related CSS */

.button-area {
    margin-top: 20px;
    display: block;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: right;
}

    .button-area button {
        border: none;
        color: #ffffff;
        cursor: pointer;
        font-size: 17px;
        padding: 8px 20px 10px;
    }

        .button-area button:hover {
            opacity: 0.8;
        }

.form-step-button {
    margin-top: 40px;
    text-align: center;
}

/*#prevBtn {
    background-color: #bbbbbb;
}*/


.user_profile_image {
    height: 50px;
    width: 50px;
}


/* 2.4 Form widget Related CSS */


/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
    position: relative;
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-between;
}

    #progressbar li {
        text-align: center;
    }

        #progressbar li span {
            border-radius: 49%;
            height: 50px;
            width: 50px;
            display: inline-block;
            position: relative;
            color: #222;
            line-height: 23px;
            background: #ddd;
            z-index: 2;
            line-height: 48px;
            font-weight: bold;
        }

            #progressbar li span:before {
                content: counter(step);
                counter-increment: step;
            }

        #progressbar li.active span:after {
            content: "";
            position: absolute;
            height: 40px;
            width: 40px;
            background: #4788C7;
            top: 5px;
            left: 5px;
            border-radius: 100%;
            z-index: -1;
        }

        #progressbar li span::after {
            content: "";
            position: absolute;
            height: 40px;
            width: 40px;
            background: #fff;
            top: 5px;
            left: 5px;
            border-radius: 100%;
            z-index: -1;
        }

        #progressbar li.active span {
            background: #ddd;
            color: white;
        }

        #progressbar li::after {
            position: absolute;
            background: #4788C7;
            height: 5px;
            content: "";
            width: 100%;
            top: 27%;
            left: -47%;
            z-index: 1;
            transform: translate(50%);
        }

.user_image {
    border: 1px solid #ddd;
    height: 150px;
    width: 150px;
    margin: 0 auto;
    border-radius: 100%;
    position: absolute;
    top: -82%;
    left: 50%;
    transform: translate(-50%,0%);
    background: #fff;
}

.single_top_user_section {
    border: 1px solid #ddd;
    margin-top: 14%;
    padding: 0 2%;
}

.image_area {
    height: 80px;
    /*height: 102px;*/
    position: relative;
    width: 100%;
}


label.p_image {
    display: block;
    position: relative;
    border-radius: 100%;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    height: 100%;
    width: 100%;
}

.p_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%
}

label.p_image::before {
    content: "";
    position: absolute;
    background: rgba(0,0,0,.3);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

label.p_image.before_none::before {
    content: none;
}

.p_img_text {
    position: absolute;
    color: #fff;
    font-size: 14px;
    vertical-align: middle;
    top: 50%;
    transform: translate(-7%, -56%);
    left: 13%;
}


    .p_img_text p {
        padding: 0;
        margin: 0;
        line-height: 20px;
    }

.fz-20 {
    font-size: 20px;
}


.loading_icon {
    display: block;
    font-size: 50px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    padding-top: 46px;
}

.sorry_text i {
    font-size: 35px;
}

.sorry_text h3 {
    margin: 0;
    font-size: 20px;
}

.sorry_text {
    padding: 32px;
}

.custom_btn {
    padding: 10px 20px;
    border-radius: 0;
}

.up_user_img.invalid {
    border: 2px solid red;
}

span.error {
    color: red;
}

/*   style 2, style 3, style 4
================================================== */
.easy_form_content_area {
    /*background: -webkit-linear-gradient(left, #000, #3D3D3D);*/
    /*background: #E6E3DE;*/
    /*background: #EEE;*/
    background: #FFEEEE;
    min-height: 100vh;
}

    .easy_form_content_area.dark {
        font-family: '微軟正黑體', 'Noto Sans', sans-serif;
    }

.full_page_easystep_form .easy_step_wapper {
    overflow-y: scroll;
    overflow-x: hidden;
    /*height: 100vh;*/
    /*為了聯絡資訊置底*/
    height: 95vh;
}

ul#easy_step_progressbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    counter-reset: step;
    color: black;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
}

    ul#easy_step_progressbar li {
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        width: 100%;
        font-size: 12px;
        /*text-transform: uppercase;*/
    }

        ul#easy_step_progressbar li p {
            /*font-size: initial;*/
            font-size:0.8rem;
        }

        ul#easy_step_progressbar li::before {
            content: counter(step);
            counter-increment: step;
            width: 30px;
            line-height: 20px;
            display: block;
            background: #fff;
            color: #000;
            border-radius: 3px;
            margin: 0 auto 5px auto;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            position: relative;
        }

        ul#easy_step_progressbar li:after {
            content: '';
            width: 100%;
            height: 2px;
            background: white;
            position: absolute;
            left: -50%;
            top: 9px;
            z-index: -1; /*put it behind the numbers*/
        }

        /*progressbar connectors*/

        ul#easy_step_progressbar li:first-child:after {
            content: none;
        }

        ul#easy_step_progressbar li.active:before, ul#easy_step_progressbar li.active:after {
            /*background: darkgoldenrod;*/
            /*background: #ff7f01;*/
            background: #A22722;
            color: white;
        }

.easy_form_content_area .user_image {
    border: 1px solid #ddd;
    height: 100px;
    width: 100px;
    margin: 0 auto;
    border-radius: 100%;
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%,0);
    background: #fff;
}

/*by Jay修改checkbox,radio的大小*/
.easy_step_tab input:not([type=checkbox]):not([type=radio]),
.easy_step_tab select,
.easy_step_tab textarea {
    height: 47px !important;
    border-radius: 3px;
    width: 100%;
    padding-left: 10px;
    color: #777;
}
/*by Jay修改checkbox,radio的大小*/
input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    height: 25px;
}
.easy_step_tab textarea {
    min-height: 80px !important;
}

.easy_step_user_section {
    /*border: 1px solid #ddd;*/
}

.easy_step_tab {
    margin-top: 3rem;
    padding: 20px;
    /*padding-bottom: 2px;*/
    background: #fff;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    margin-bottom: 20px;
}

/* style 5, 6
================================================== */


.single_form img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.single_form {
    border: 1px solid #ddd;
    height: 350px;
    overflow: hidden;
    position: relative;
    transition: .5s;
}

    .single_form:hover:before {
        visibility: visible;
        transition: .5s;
        transform: scale(1);
    }

    .single_form::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.3);
        visibility: hidden;
        transform: scale(0);
        transition: .5s;
    }

.modal_form {
    padding: 0;
    box-shadow: none;
    margin: 0;
}

.modal_list {
    padding: 50px 23px;
    background: #fff;
}

    .modal_list ul {
        display: flex;
        flex-direction: column;
    }

        .modal_list ul li {
            color: #222;
            font-size: 17px;
            padding: 7px;
        }

/*   button area
================================================== */

.button_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
}

    .button_area button {
        width: 100%;
        padding: 10px;
        border-radius: 3px;
        margin: auto 4px auto 5px;
    }

/*   label
================================================== */
.easy_step_label label {
    display: flex;
    align-items: center;
    font-size: 16px;
}

    .easy_step_label label i {
        margin-right: 6px;
    }

/*   Circle
================================================== */
.easy_step_wapper.circle ul#easy_step_progressbar li::before {
    height: 30px;
    border-radius: 100%;
    line-height: 30px;
}

.easy_step_wapper.circle ul#easy_step_progressbar li::after {
    top: 15px;
}


/*   square
================================================== */
.easy_step_wapper.square ul#easy_step_progressbar li::before {
    height: 30px;
    border-radius: 0;
    line-height: 30px;
}

.easy_step_wapper.square ul#easy_step_progressbar li::after {
    top: 15px;
}

.easy_step_wapper.square .form-control {
    border-radius: 0;
}

.easy_step_wapper.square .btn {
    border-radius: 0;
}

/*   dark
================================================== */

.easy_form_content_area.dark {
    background: #191d2b;
    min-height: 100vh;
}


    .easy_form_content_area.dark ul#easy_step_progressbar li.active:before,
    .easy_form_content_area.dark ul#easy_step_progressbar li.active:after {
        background: #037fff;
        color: white;
    }

    .easy_form_content_area.dark ul#easy_step_progressbar li:after {
        background: #037fff;
    }

    .easy_form_content_area.dark .user_image {
        border-color: #037fff;
    }

/*.easy_form_content_area #prevBtn {
    background-color: #dc3545 !important;
}*/

.easy_form_content_area.dark #prevBtn {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.easy_form_content_area.dark #nextBtn {
    color: #fff;
    background-color: #037fff;
    border-color: #037fff;
}
/*   
================================================== */
.easy_form_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.easy_form_img {
    height: 100vh;
    position: relative;
}

    .easy_form_img::before {
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /*background: rgba(0, 0, 0, .5);*/
        position: absolute;
    }

.easy_form_text {
    position: absolute;
    color: #fff;
    /* text-align: center; */
    /*top: 25%;
    transform: translate(15vw,-12vh);
    padding: 40px;*/
}

    .easy_form_text h2 {
        color: #fff;
        font-family: '微軟正黑體', 'Barlow Condensed', sans-serif;
    }

.easy_error_msg {
    font-size: 13px;
    padding: 10px 5px;
    margin-bottom: 10px;
}

    .easy_error_msg.text-danger {
        border: 1px solid red;
    }

    .easy_error_msg.text-success {
        border: 1px solid green;
    }

.easy_form_text p {
    font-size: 0.98rem;
    /*font-size: 14px;*/
    line-height: 20px;
}

/*   social icon
================================================== */
.easy_social_area ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .easy_social_area ul li a {
        color: indianred;
        display: block;
        height: 40px;
        width: 40px;
        border: 2px solid #EB6001;
        border-radius: 100%;
        font-size: 24px;
        line-height: 35px;
        margin: 3px;
        transition: .5s;
    }

        .easy_social_area ul li a:hover {
            border-color: #ddd;
            transition: .5s;
            color: #EB6001;
        }

    .easy_social_area ul li {
        text-align: center;
    }

.mx-wd {
    max-width: 780px;
}

.image_connected_form {
    display: table;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    background: #000;
    border: 1px solid #000;
    box-shadow: 0 0 5px #222;
    margin: 0 auto;
}

.easy_form_img.image_connected {
    height: 100%;
    width: 50%;
    display: table-cell;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: cover !important;
}

.image_connected_form .easy_step_tab {
    background: #000;
}

.image_connected_form label {
    color: #fff;
}

.image_connected_form .easy_step_tab {
    margin-top: 14%;
    padding: 20px;
    padding-bottom: 0;
    background: inherit;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    margin-bottom: 0px;
}

@media (max-width: 767px) {
    .easy_form_img.image_connected {
        display: block;
        width: 100%;
        padding-top: 400px;
    }
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../images/loader.gif');
    background-repeat: no-repeat;
    background-color: #FFF;
    background-position: center;
}



/*   recaptcha
================================================== */

.recaptcha_area {
    margin-bottom: 10px;
}

.g-recaptcha.invalid {
    border: 2px solid red;
    display: inline-block;
}


/* home page layout
================================================== */

.top_contet {
    text-align: center;
    padding-top: 50px;
    color: #fff;
}

    .top_contet h4 {
        color: #fff;
        text-transform: capitalize;
    }

.single_form {
    margin-bottom: 30px;
}

.layout_heading {
    padding: 20px 0;
    color: #fff;
    font-size: 29px;
}


.easy_step_home_page {
    background: #191d2b;
}

.single_form h4 {
    color: #fff;
    position: absolute;
    bottom: -7px;
    left: 0;
    text-shadow: 0 0 5px #000;
    background: rgba(0,0,0,.5);
    display: block;
    width: 100%;
    padding: 5px 10px;
    font-family: '微軟正黑體', oswald;
    font-size: 23px;
}

.none {
    display: none;
}

.block {
    display: block;
}

/* custom radio
================================================== */
.easy_radio {
    height: 80px;
    border: 1px solid #ddd;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    width: 47%;
    transition: .5s;
    margin:auto;
}
.sym_radio {
    border: 1px solid #ddd;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    margin:auto;
    width: 47%;
    transition: .5s;
}

    .easy_radio i {
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 28px;
        font-size: 21px;
    }
.sym_radio i {
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 28px;
    font-size: 21px;
}

.gender_radio {
    height: 80px;
    border: 1px solid #ddd;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    margin-right: 9px;
    width: 47%;
    transition: .5s;
    margin-bottom: 10px;
}

    .gender_radio:hover {
        border-bottom: 5px solid #037fff;
    }

    .gender_radio.active {
        border-bottom: 5px solid #037fff;
    }

    .gender_radio i {
        border: 1px solid #ddd;
        height: 30px;
        width: 30px;
        border-radius: 100%;
        text-align: center;
        line-height: 28px;
        font-size: 21px;
    }

.custom_radio {
    display: flex;
    align-items: center;
}

input.input_sex:checked {
}

.custom_radio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}







/*   custom radio btn
================================================== */

.easy_radio {
    position: relative;
}
.sym_radio {
    position: relative;
}


    /* Hide the browser's default radio button */
    .easy_radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
.sym_radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: #2196F3;
    opacity: 0;
    transition: .5s;
}


.easy_radio input:checked ~ .checkmark {
    background-color: #2196F3;
    opacity: 1;
}

.easy_radio:hover input ~ .checkmark {
    opacity: 1;
}
#pain1 input:checked ~ .checkmark {
    background-color: #2196F3;
    opacity: 1;
}

#pain1:hover input ~ .checkmark {
    opacity: 1;
}
#pain2 input:checked ~ .checkmark {
    background-color: #2196F3;
    opacity: 1;
}

#pain2:hover input ~ .checkmark {
    opacity: 1;
}
#pain3 input:checked ~ .checkmark {
    background-color: #2196F3;
    opacity: 1;
}

#pain3:hover input ~ .checkmark {
    opacity: 1;
}
#pain4 input:checked ~ .checkmark {
    background-color: #2196F3;
    opacity: 1;
}

#pain4:hover input ~ .checkmark {
    opacity: 1;
}

/*arrow*/
/* 48px */
.toDown-arrow {
    width: 3rem;
    height: 3rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 33%;
    opacity: 0.6;
    background: darkslategrey;
    cursor: pointer;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: none;
}

    .toDown-arrow::before, .toDown-arrow::after {
        width: 25px;
        height: 6px;
        border-radius: 3px;
        background: white;
        position: absolute;
        content: "";
    }

    .toDown-arrow::before {
        transform: rotate(45deg) translate(0, -50%);
        left: 0.15rem;
    }

    .toDown-arrow::after {
        transform: rotate(-45deg) translate(0, -50%);
        right: 0.15rem;
    }

    .toDown-arrow:focus {
        outline: none;
    }