@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --white: #fff;
    --black: #000;
    --dark_blue: #0a152f;
    --light_green: #44b678;
    --light_gray: #7c8292;
    --bg_gray: #e8e8e8;
    --light_gray2: #f8f8f8;
    --light_gray3: #e5e5e5;
    --green: #286d34;
    --light_skyblue: #ddeae8;
    --light_gray4: #959595;
    --light_gray5: #f9f9f9;
    --light_gray6: #dfe4e3;
    --light_gray7: #7b7b7b;
    --brown: #b54708;
    --light_brown: #fffaeb;
    --light_brown2: #fedf89;
    --light_orange: #e3584a;
    --light_orange2: #ffb7b0;
    --light_orange4: #fef3f2;
    --green2: #17d1b2;
}

/* common util css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Source Sans 3", serif;
    font-size: 16px;
}

p {
    line-height: 28px;
    font-weight: 400;
}

a {
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* common css */
.no_scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no_scrollbar::-webkit-scrollbar {
    display: none;
}

.section_bg {
    background-color: var(--bg_gray);
}

.h_100 {
    height: 100%;
}

.lg_container {
    max-width: 1920px;
    padding: 0 20px;
    margin: 0 auto;
}

.tool_btn {
    display: inline-block;
    border: 1px solid var(--white);
    color: var(--white);
    padding: 5px 12px;
    border-radius: 5px;
}

.flex_1 {
    flex: 1;
}

.hr_1 {
    border: none;
    border-bottom: 1px solid #dfe4e3;
}

.mb_8 {
    margin-bottom: 8px;
}

/* section css */
.main_header {
    background-color: var(--dark_blue);
    padding: 6px 0;
}

.header_grid {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
}

.design_step_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.design_step_wrap li {
    color: var(--white);
}

.design_step_wrap li span {
    display: inline-block;
}

.design_step_wrap li .step_number {
    background-color: var(--light_gray);
    color: var(--dark_blue);
    width: 20px;
    height: 20px;
    border-radius: 100px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    margin-right: 2px;
    font-size: 15px;
}

.design_step_wrap li .step_label {
    color: var(--light_gray);
    font-weight: 400;
    font-size: 15px;
}

.design_step_wrap li .step_line {
    height: 2px;
    width: 30px;
    background-color: var(--light_gray);
    display: block;
}

.design_builder_wrap {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 20px 0;
}

.design_main_wrap {
    height: calc(100vh - 58px);
}

.design_builder_option_wrap,
.design_builder_canvas_wrap {
    background-color: var(--white);
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.design_builder_option_wrap {
    width: 35%;
}

.design_builder_canvas_wrap {
    width: 65%;
}

.design_step_btn_wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--light_gray2);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--light_skyblue);
}

.design_next_btn,
.design_prev_btn {
    background: var(--green);
    border: none;
    display: inline-block;
    padding: 8px 17px;
    color: #fff;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
}

.design_prev_btn {
    background: var(--light_gray3);
    color: var(--dark_blue);
}

.design_price_section {
    background-color: var(--dark_blue);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.design_cart_button {
    background: var(--light_green);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 25px;
    font-size: 16px;
    border: none;
    color: var(--white);
    font-weight: 600;
    border-radius: 4px;
}

.design_cart_button img {
    width: 23px;
}

.price_calc_wrap {
    color: var(--white);
    font-size: 40px;
    font-weight: 600;
    display: block;
}

.price_text {
    color: var(--white);
    font-weight: 400;
    font-size: 14px
}

.design_canvas_wrap {
    height: calc(100% - 119px);
    display: flex;
    /*align-items: center;*/
    justify-content: center;
}

.design_option_box {
    height: calc(100% - 62px);
}

.design_option_box {
    padding: 30px 20px 0 20px;
}

.design_option_field_wrap {
    overflow: scroll;
    overflow-y: scroll;
    height: 77vh;
}

.hr_1,
.design_option_field_wrap {
    padding-top: 18px;
}

.option_title {
    color: var(--dark_blue);
    font-weight: 600;
    font-size: 28px;
}

.tooltip_wrap {
    position: relative;
}

.tooltip_icon {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    cursor: pointer;
}

.tooltip_icon img {
    width: 28px;
    display: block;
}

.tooltip_gap {
    padding-left: 35px;
}

.option_shorttext {
    font-size: 15px;
    color: var(--light_gray4);
    line-height: 25px;
}

.option_subtitle {
    font-weight: 600;
    font-size: 18px;
    color: var(--dark_blue);
}

.option_shorttext p {
    margin-bottom: 0;
}
.noste_form_heading hr.hr_1 {
    margin-bottom: 18px;
}
h3.option_subtitle {
    font-size: 25px;
    font-weight: 700;
    padding-bottom: 25px;
}

.noste_text_field label,
.noste_radio_field > label,
.noste_number_field label {
    display: block;
    font-weight: 600;
    font-size: 18px;
    padding-bottom: 3px;
}

.noste_text_field input,
.noste_number_field input {
    width: 100%;
}

.noste_text_field,
.noste_number_field {
    margin-bottom: 30px;
}

.noste_image_field {
    margin-bottom: 25px;
}

.noste_image_field .noste_image_field_group_warp > label {
    font-size: 18px;
    font-weight: 600;
    margin-top: 25px;
    display: block;
    color: #000;
}

.noste_image_field .noste_image_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    margin-top: 12px;
}

.noste_image_field .noste_image_wrap > label {
    width: 32%;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 11px;
}

.noste_image_field .noste_image_wrap > label .item_s_img {
    width: 100%;
    background: #ddd;
    height: 100px;
}

.noste_image_field .noste_image_wrap > label .item_s_img img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.noste_image_field .noste_image_wrap > label > input[type="radio"] {
    opacity: 0;
    visibility: hidden;
    height: 0;
    width: 0;
    display: block;
}

.noste_image_field .noste_image_wrap > label .item_s_content {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.noste_image_field .noste_image_wrap .item_s_content h4 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5em;
}

.noste_image_field .noste_image_wrap .item_s_content p {
    font-size: 15px;
    margin-bottom: 0;
    line-height: 1.3em;
}

.noste_image_field .noste_image_wrap  .item_s_content .item_head {
    padding-right: 11px;
    width: calc(100% - 40px);
}

.noste_image_field .noste_image_wrap .item_s_content .item_gallery {
    width: 40px;
    background: #ddd;
    height: 40px;
    padding: 9px;
    border-radius: 8px;
    cursor: pointer;
}

.noste_radio_field .noste_radio_item_wrap {
    display: flex;
    flex-wrap: wrap;
    padding-top: 5px;
}

.noste_radio_field .noste_radio_item {
    width: 20%;
}

.noste_radio_field .noste_radio_item label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
}

.noste_radio_field {
    margin-bottom: 25px;
}


.summary_of_plan .summary_title_down {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.summary_of_plan .summary_title_down h2 {
    width: 60%;
    font-size: 22px;
}

.summary_of_plan .summary_title_down .download_wrap {
    width: 40%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.summary_of_plan .download_wrap button {
    font-size: 13px;
    color: #63a2c4;
    font-weight: 700;
    background: #f0f9ff;
    border: 1px solid #bee5ff;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 35px;
    padding: 0 11px;
}
.summary_of_plan .download_wrap button img {
    width: 20px;
}
.summary_of_plan .summary_title_down .download_wrap i {
    color: #e3584a;
}
.summary_of_plan .summary_title_down .download_wrap > span {
    width: 35px;
    display: flex;
    height: 35px;
    background: #fef3f2;
    border: 1px solid #ffb7b0;
    border-radius: 5px;
    padding: 7px;
    align-items: center;
    justify-content: center;
}

.summary_of_plan table {
    border-collapse: collapse;
    width: 100%;
}

.summary_of_plan table td {
    border: 1px solid #dddddd;
    padding: 8px;
}

.summary_of_plan table td:first-child {
    font-weight: 700;
}
.add_new_product a {
    color: #44b678;
    font-weight: 500;
    text-decoration: underline;
}
.noste_image_field .noste_image_wrap .item_s_content .item_gallery i {
    font-size: 21px;
}

.noste_image_field .noste_image_wrap > label.noste_image_item.active {
    border-color: #44b678;
    position: relative;
}

.noste_image_field .noste_image_wrap > label.noste_image_item.active:before {
    content: '✔ Valittu';
    position: absolute;
    top: 12px;
    right: 12px;
    background: #44b678;
    color: #fff;
    padding: 0px 15px;
    border-radius: 13px;
}

.section_cart_wrap .design_builder_option_wrap {
    width: 100%;
    padding: 20px;
}

.section_cart_wrap .heading_title {
    font-weight: 600;
    color: var(--dark_blue);
    font-size: 28px;
}

.section_cart_wrap .cart_column_wrap,
.section_cart_wrap .cart_footer_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 65px;
}

.section_cart_wrap .cart_footer_wrap {
    margin-top: 25px;
}

.section_cart_wrap .cart_info_box {
    background: var(--light_gray5);
    padding: 20px 25px;
}

.section_cart_wrap .info_text {
    margin-bottom: 0;
    color: var(--dark_blue);
    font-size: 16px;
}

.section_cart_wrap .info_email {
    margin-bottom: 0;
    color: var(--light_green);
    margin-top: 5px;
    font-size: 16px;
}

.section_cart_wrap .cart_left_box {
    width: 35%;
}

.section_cart_wrap .cart_title_2 {
    font-size: 24px;
    color: var(--dark_blue);
    font-weight: 600;
}

.section_cart_wrap .cart_info_list {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
}

.section_cart_wrap .cart_info_listv2 span {
    color: var(--light_gray7);
    font-size: 15px;
}

.section_cart_wrap .cart_gap_v1 {
    padding: 15px 0
}

.section_cart_wrap .cart_info_listv3 span {
    color: var(--dark_blue);
    font-weight: 500;
}

.section_cart_wrap .product_canvas_wrap {
    display: flex;
    flex: 1;
    gap: 25px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 10px 10px #f9f9f9;
}

.section_cart_wrap .product_image_wrap {
    width: 33%;
}

.section_cart_wrap .product_image_wrap img {
    display: block;
    height: 100%;
    object-fit: cover;
}

.section_cart_wrap .product_description_wrap {
    flex: 1;
    padding: 15px;
    padding-left: 0;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
}

.section_cart_wrap .product_title {
    font-size: 20px;
    font-weight: 500;
    color: var(--dark_blue);
    margin-bottom: 10px;
}

.section_cart_wrap .product_description_wrap p {
    color: var(--light_gray7);
    font-size: 15px;
}

.section_cart_wrap .cart_column_wrap {
    margin-top: 20px;
    align-items: flex-start;
}

.section_cart_wrap .cart_action_wrap {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.section_cart_wrap .product_description_wrap ul li {
    color: var(--light_gray7);
    font-size: 15px;
    margin-bottom: 10px;
}

.section_cart_wrap .product_description_wrap ul li:last-child {
    margin-bottom: 0;
}

.section_cart_wrap .product_description_wrap ul li i {
    color: var(--green2);
}

.section_cart_wrap .product_list_item {
    margin-top: auto;
}

.edit_button {
    background: var(--light_brown);
    color: var(--brown);
    font-weight: 500;
    border: 1px solid var(--light_brown2);
    display: inline-block;
    padding: 7px 10px;
    font-size: 15px;
}

.delete_button {
    border-color: var(--light_orange2);
    background: var(--light_orange4);
}

.delete_button i {
    color: var(--light_orange);
}

.pt_0 {
    padding-top: 0 !important;
}

.text_right {
    text-align: right;
}

.cart_btnv1 {
    background: var(--light_green);
    color: var(--white);
    border-radius: 4px;
    padding: 13px 20px;
    font-weight: 500;
    font-size: 16px;
    border: 1px solid var(--light_green);
    cursor: pointer;
}

.border_b_1 {
    border-bottom: 1px solid var(--light_gray6);
}

.flex_gap_8 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mt_30 {
    margin-top: 30px;
}

.design-afetr-cart {
    padding: 20px;
    width: 100%;
}

.hidden {
    display: none;
}