button{
    font-family: var(--fontFamily);
    font-weight: 600;
}

body.home_page{
    background-color: #fefefe;
}

body.home_page.no_header .ow_page_padding{
    padding-top: 69px;
}

body.home_page.boxed_content .ow_content{
    max-width: 100%;
    padding: 0;
}

.home_page_main_container{
    padding-bottom: 42px;
}

.home_page_main_container .key_banner_view{
    background-color: #f8f8e5;
    padding-top: 60px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 80px;
}

.home_page_main_container .call_to_action_container,
.home_page_main_container .footer_wrap,
.home_page_main_container .use_case_example_first_container{
    padding: 0 24px;
}

.header_wrap{
    position: fixed;
    background-color: white;
    box-sizing: border-box;
    padding: 10px 20px;
    width: 100%;
    top: 0;
    right: 0;
    border-bottom: 1px solid var(--borderColor);
    z-index: 10;
}

.header_el{
    display: inline-block;
    vertical-align: middle;
    height: 48px;
}

.header_el .ow_logo{
    width: 48px;
    height: 48px;
    min-height: auto;
    background-image: url(../img/logo_circle_96X96.png?v1);
}

.header_el.menu_wrap{
    
}

.header_el.menu_wrap .menu_el{
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 600;
    color: rgb(34,34,34,34);
    line-height: 40px;
    margin-right: 6px;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 40px;
    padding: 4px;
}

.header_el.menu_wrap .menu_el a{
    color: rgb(34,34,34,34);
    text-decoration: none;
}

.header_el.menu_wrap .menu_el:hover{

}

.header_el.menu_wrap .menu_el .submenu_wrap{
    position: absolute;
    top: 56px;
    background-color: white;
    border: 1px solid var(--borderColor);
    padding: 6px 0;
}

.header_el.menu_wrap .menu_el .submenu_wrap a{
    display: block;
    line-height: 36px;
    padding: 0px 13px;
    width: max-content;
}

.header_el.left_menu_wrap{
    padding-left: 4px;
}

.header_el.right_menu_wrap{
    position: absolute;
    right: 20px;
    top: 10px;
}

.header_el.left_menu_wrap .home a{
    background-image: linear-gradient(-225deg, #fcdd4b 0%, #fcdd4b 50%, #fcdd4b 100%);
    background-size: 100% 7px;
    background-repeat: no-repeat;
    background-position: bottom;
    padding-left: 3px;
    padding-right: 3px;
    color: black;
}

.header_el.right_menu_wrap .sign_up{
    padding: 0px 15px;
    background-color: #fcdd4b;
}

.header_el.right_menu_wrap .sign_up a{
    
}

.header_el.right_menu_wrap .sign_in{
    
}

.document_heading_wrap{
    text-align: center;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.document_heading_wrap h1{
    text-transform: none;
    font-size: 64px;
    line-height: 74px;
    color: rgb(34,34,34,34);
}

.document_heading_wrap h3{
    text-transform: none;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #32383c;
    margin-top: 20px;
}

.get_started_invitation_wrap{
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.link_input_wrap{
    position: relative;
    margin-top: 32px;
    background-color: white;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 2px solid #dadadb;
    border-radius: 40px;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 18px;
    
}

.link_input_wrap input{
    font-size: 27px;
    color: rgb(34,34,34,34);
    border: none;
    width: 100%;
    padding-left: 216px;
    height: 64px;
    box-sizing: border-box;
}

.link_input_wrap span.site_domain{
    font-size: 27px;
    position: absolute;
    top: 0;
    left: 32px;
    line-height: 64px;
    font-weight: 600;
    color: rgb(34,34,34,34);
}

button.get_started_button{
    position: absolute;
    top: 6px;
    right: 6px;
    border: none;
    height: 56px;
    border-radius: 40px;
    cursor: pointer;
    background-position: calc(100% - 14px) center;
    background-repeat: no-repeat;
    background-image: url(../img/ic_btn_arrow_right.svg);
    background-size: 32px;
    transition: 0.2s;
    padding-right: 52px;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 600;
    width: auto;
}

button.get_started_button:hover{
    transform: scale(1.02);
}

.call_to_action_container button.get_started_button{
    position: relative;
    max-width: 340px;
    width: 100%;
}

.link_input_invitation_wrap{
    font-size: 16px;
    line-height: 20px;
    margin-top: 16px;
    text-align: center;
    font-weight: bold;
    color: #4f5050;
    font-weight: 400;
}

.updown_connect_line{
    display: block;
    width: 0px;
    border-width: 0px 0px 0px 2px;
    border-top-style: initial;
    border-right-style: initial;
    border-bottom-style: initial;
    border-top-color: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-image: initial;
    margin: 0px auto;
    border-left-style: dashed;
    border-left-color: rgb(252 221 75);
    margin-top: 0px;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.updown_connect_line.first_updown_line{
    height: 148px;
    margin-top: -70px;
}

.page_sample_link_iframe, .preview_part_container{
    max-width: 340px;
    width: 100%;
    height: 520px;
    margin-left: 16px;
    margin-right: 16px;
    border: 12px solid rgb(34,34,34,34);
    border-radius: 40px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.page_sample_link_iframe iframe{
    height: 100%;
    width: 100%;
    border-radius: 28px;
}

.preview_part_container .preview_content_wrap{
    height: 100%;
    border-radius: 28px;
}

.section_heading_small{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
    text-align: center;
}

.section_heading_small h3{
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #4f5050;
    text-align: center;
}

.social_icon_container{
    text-align: center;
    margin-top: 10px;
    color: #585959;
}

.social_icon_container .chatbox_support_msg{
    margin-bottom: 6px;
}

.social_icon_container .supported_message_icon{
    margin: 3px;
    width: 28px;
    height: 28px;
}

.social_icon_container .supported_message_icon.dropbox{
    width: 22px;
    height: 22px;
}
.social_icon_container .supported_message_icon.more{
    width: 24px;
}


.call_to_action_container{
    text-align: center;
}

.call_to_action_container .updown_connect_line{
    height: 64px;
}

.preview_part_container .welcome_message_container.messenger img{
    height: 64px;
    width: 64px;
}

.footer_wrap{
    margin-top: 42px;
    text-align: center;
}

.footer_wrap .menu_el{
    display: inline-block;
    padding: 5px 4px;
    
}

.footer_wrap .menu_el a{
    color: var(--contentTextColor);
}

.preview_part_container .chatbox_header_bar{
    position: relative;
}

.get_paid_example_item.get_paid_inline .preview_part_container{
    background-color: white;
    color: var(--blackTextColor);
    position: relative;
}

.get_paid_example_item.get_paid_inline .profile_summary_wrap{
    margin-top: 4px;
    text-align: center;
}

.get_paid_example_item.get_paid_inline .profile_summary_item{
    display: inline-block;
    vertical-align: middle;
}

.get_paid_example_item.get_paid_inline .profile_summary_item.left_part{
    width: 86px;
}

.get_paid_example_item.get_paid_inline .profile_summary_item.right_part{
    width: calc(100% - 94px);
    text-align: center;
}

.get_paid_example_item.get_paid_inline .profile_summary_item .right_part_item{
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    text-align: center;
}

.get_paid_example_item.get_paid_inline .profile_summary_item .right_part_item .number{
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding-bottom: 1px;
}
.get_paid_example_item.get_paid_inline .profile_summary_item .right_part_item .label{
    font-size: 12px;
}

.get_paid_example_item.get_paid_inline .profile_summary_item .profile_picture{
    background: linear-gradient(-225deg, #FF057C 0%, #8D0B93 50%, #321575 100%);
    padding: 3px;
    border-radius: 50%;
    width: 78px;
    height: 78px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.get_paid_example_item.get_paid_inline .profile_summary_item .profile_picture img{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid white;
    box-sizing: border-box;
}

.get_paid_example_item.get_paid_inline .profile_name{
    margin-top: 6px;
    color: var(--blackTextColor);
    font-weight: 600;
    text-align: left;
    padding-left: 12px;
}

.get_paid_example_item.get_paid_inline .profile_text_vector{
    height: 10px;
    background-color: var(--borderColor);
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 10px;
    margin-top: 6px;
}

.get_paid_example_item.get_paid_inline .profile_text_vector.text_vector_1{
    width: 46%;
}
.get_paid_example_item.get_paid_inline .profile_text_vector.text_vector_2{
    width: 78%;
}

.get_paid_example_item.get_paid_inline .profile_text_vector.text_vector_3{
    width: 54%;
}

.get_paid_example_item.get_paid_inline .profile_biolink{
    margin-top: 8px;
    text-align: left;
    margin-left: 12px;
    padding-left: 24px;
    background-image: url(../img/ic_link.svg);
    background-size: 19px;
    background-repeat: no-repeat;
    background-position: left;
}

.get_paid_example_item.get_paid_inline .profile_biolink span{
    position: relative;
    color: #2a80ae;
}

.get_paid_example_item.get_paid_inline .rich_media_vector_wrap,
.get_paid_example_item.get_paid_inline .post_category_vector_wrap,
.get_paid_example_item.get_paid_inline .action_button_vector_wrap{
    margin-top: 16px;
    text-align: center;
    overflow: hidden;
}

.get_paid_example_item.get_paid_inline .rich_media_vector_wrap .rich_media_vector,
.get_paid_example_item.get_paid_inline .action_button_vector_wrap .profile_button_vector{
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    background-color: #f2f4f5;
    border-radius: 4px;
    width: 30%;
}

.get_paid_example_item.get_paid_inline .rich_media_vector_wrap .rich_media_vector.media_vector_2,
.get_paid_example_item.get_paid_inline .rich_media_vector_wrap .rich_media_vector.media_vector_4,
.get_paid_example_item.get_paid_inline .rich_media_vector_wrap .rich_media_vector.media_vector_6{
    background-color: #fbdd4b4d;
}

.get_paid_example_item.get_paid_inline .rich_media_vector_wrap .rich_media_vector{
    height: 94px;
}

.get_paid_example_item.get_paid_inline .post_category_vector_wrap{
    padding-left: 12px;
    width: max-content;
}

.get_paid_example_item.get_paid_inline .post_category_vector_wrap .post_category_vector_item{
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.get_paid_example_item.get_paid_inline .post_category_vector_wrap .post_category_vector{
    border: 1px solid var(--borderColor);
    border-radius: 50%;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    padding: 2px;
    margin: 0 auto;
    
}

.get_paid_example_item.get_paid_inline .post_category_vector_wrap .post_category_vector .child{
    background-color: var(--borderColor);
    border-radius: 50%;
    width: 44px;
    height: 44px;
}

.get_paid_example_item.get_paid_inline .post_category_vector_wrap .child_label{
    margin-top: 8px;
    height: 8px;
    width: 60px;
    background-color: var(--borderColor);
    border-radius: 4px;
}

.get_paid_example_item.get_paid_inline .chatbox_header_bar{
    padding-right: 42px;
    text-align: center;
    color: var(--blackTextColor);
    border-bottom: 0;
}

.get_paid_example_item.get_paid_inline .chatbox_header_bar img{
    display: none;
}

.pay_scene_wrap{
    position: absolute;
    bottom: 0;
    height: 90%;
    background-color: white;
    width: 100%;
    border-right: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 0px 10px rgb(0 0 0 / 25%);
    transition: .4s;
}

.pay_scene_wrap .drag_handle_wrap{
    display: block;
    padding: 5px;
    text-align: center;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    background-color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.pay_scene_wrap .drag_handle_wrap .drag_handle{
    width: 42px;
    height: 6px;
    border-radius: 8px;
    margin: auto;
    background-color: var(--borderColor);
    margin-top: 10px;
}

.pay_scene_wrap .link_button_content{
    height: calc(100% - 38px);
    background: linear-gradient(-68deg, #fa709a 0%, #fee140 100%);
    transition: 0.4s;
    opacity: 1;
    position: relative;
}

.pay_scene_wrap .profile_picture{
    text-align: center;
    padding-top: 18px;
}
.pay_scene_wrap .profile_picture img{
    width: 56px;
    border: 3px solid white;
    border-radius: 50%;
}

.pay_scene_wrap .profile_display_name{
    text-align: center;
    margin-top: 6px;
    font-weight: 600;
    color: white;
}

.pay_scene_wrap .link_button_list{
    margin-top: 20px;
    position: relative;
}

.pay_scene_wrap .link_button_list .link_button_item{
    height: 52px;
    box-sizing: border-box;
    background-color: white;
    margin-left: 18px;
    margin-right: 20px;
    margin-bottom: 16px;
    border-radius: 6px;
    box-shadow: rgb(58 59 62) 2px 3px 0px 2px;
    padding: 6px;
    position: relative;
}

.pay_scene_wrap .link_button_list .link_button_item .link_el{
    display: inline-block;
    vertical-align: middle;
}

.pay_scene_wrap .link_button_list .link_button_item .link_el img{
    height: 40px;
    width: 40px;
    border-radius: 4px;
}
.pay_scene_wrap .link_button_list .link_button_item .link_el.title{
    width: calc(100% - 84px);
    text-align: center;
    font-weight: 600;
    color: var(--themeTextColor);
}

.pay_scene_wrap .profile_and_link_list{
    opacity: 1;
    transition: .8s;
}

.pay_scene_wrap .pay_action_flow{
    padding-top: 44px;
    padding-bottom: 44px;
    opacity: 0;
    transition: .8s;
    position: absolute;
    top: 0;
    width: 100%;
}

.pay_scene_wrap .pay_action_flow .pay_screen{
    text-align: center;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 0px 6px rgb(0 0 0 / 20%);
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.pay_scene_wrap .pay_action_flow .pay_screen_title{
    line-height: 42px;
    border-bottom: 1px solid var(--borderColor);
    color: var(--contentTextColor);
    margin-bottom: 20px;
}

.pay_scene_wrap .pay_action_flow .pay_screen_line_vector{
    height: 10px;
    background-color: var(--borderColor);
    border-radius: 10px;
    margin-top: 6px;
    width: 78%;
    margin-left: auto;
    margin-right: auto;
}

.pay_scene_wrap .pay_action_flow .pay_screen_line_vector.pay_screen_line_vector_2{
    width: 68%;
}
.pay_scene_wrap .pay_action_flow .pay_screen_pay_button{
    padding-top: 20px;    
    padding-bottom: 20px;
    position: relative;
}
.pay_scene_wrap .pay_action_flow .pay_screen_pay_button .ow_button{
    width: 78%;
}

.pay_scene_wrap .pay_action_flow .pay_screen_feedback_container,
.pay_scene_wrap .pay_action_flow .pay_screen_form_container{
    height: 130px;
    transition: .8s;
}

.pay_scene_wrap .pay_action_flow .pay_screen_feedback_container{
    position: absolute;
    top: 67px;
    width: 100%;
    opacity: 0;
    
}

.pay_scene_wrap .pay_action_flow .pay_screen_feedback{
    
}

.pay_screen_feedback .checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #4bb71b;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #4bb71b;
    animation: pay_screen_feedback_fill .4s ease-in-out .4s forwards, pay_screen_feedback_scale .3s ease-in-out .9s both;
    position:relative;
    margin: 0 auto;
}
.pay_screen_feedback .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #4bb71b;
    fill: #fff;
    animation: pay_screen_feedback_stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
 
}

.pay_screen_feedback .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: pay_screen_feedback_stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.messaging_inbox_example .preview_part_container .link_list_bar{
    /** height: 0;
    padding: 0; **/
}

.messaging_inbox_example .pay_scene_wrap .link_button_content{
    background: linear-gradient(to top, #cc208e 0%, #6713d2 100%);
}

#id_home_page_pay_scene_wrap .pay_scene_wrap .link_button_content{
    background: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
}

@keyframes pay_screen_feedback_stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes pay_screen_feedback_scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes pay_screen_feedback_fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #4bb71b;
    }
}

.instagram_menu_bar_set {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    
}

.instagram_menu_bar_set .menu_set_icon{
    height: 100%;
    bottom: 0;
    width: 32px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

.instagram_menu_bar_set .menu_set_icon.notification_bell{
    background-image: url(../img/ic_notification_bell.svg);
}

.instagram_menu_bar_set .menu_set_icon.more{
    background-image: url(../img/ic_hori_more_dots.svg);
    background-size: 16px;
}

@media screen and (max-width: 640px){
    
    .header_wrap{
        padding: 10px;
    }
    
    .document_heading_wrap{
        margin-top: 16px;
    }
    
    .document_heading_wrap h1{
        font-size: 30px;
        line-height: 40px;
    }
    .document_heading_wrap h3{
        font-size: 18px;
        line-height: 26px;
    }
    
    .header_el.right_menu_wrap{
        right: 10px;
    }
    
    .header_el.left_menu_wrap .help,
    .header_el.left_menu_wrap .updates,
    .header_el.left_menu_wrap .agreement,
    .header_el.right_menu_wrap .sign_up{
        display: none;
    }
    
    .header_el.right_menu_wrap .sign_in{
        margin-right: 0;
    }
    
    .link_input_wrap span.site_domain{
        font-size: 18px;
        left: 20px;
        line-height: 54px;
    }
    
    .link_input_wrap input{
        font-size: 18px;
        padding-left: 142px;
        height: 54px;
    }
    
    .updown_connect_line{
        height: 100px;
    }
    
    button.get_started_button{
        position: relative;
        width: 100%;
        right: 0;
        top: 0;
        margin-top: 8px;
        padding-right: 14px;
        background-position: calc(100% - 26px) center;
    }
    
    .home_page_main_container .key_banner_view{
        padding-top: 10px;
        padding-bottom: 50px;
    }
    
    .updown_connect_line.first_updown_line{
        margin-top: -40px;
    }
    
}