@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@font-face {font-family:'product-sans-regular';font-style: normal; font-display: swap; src: url('fonts/ProductSans-Regular.ttf');}
@font-face {font-family:'product-sans-light';font-style: normal; font-display: swap; src: url('fonts/ProductSans-Light.ttf');}

body{padding:0;margin:0!important;font-size: 16px; /* background-color:#e8e8e8!important; */font-family:'Open Sans',sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5}
h1,h2,h3,h4,h5,h6 {font-family:'product-sans-regular';}
*after,*before{clear:both}
a:hover{color:#fff;text-decoration:none}
.cl{visibility:hidden;line-height:0;clear:both}
.container-image{background:url(../images/user.svg) no-repeat center;width:200px;height:200px;border-radius:500px}
.container-image img{border-radius:500px;max-width:200px;max-height:200px}
.disp-none{display:none}
.container{/* padding:0 10%!important; */}
.vcard-header{margin-bottom: 10px;margin-top: 15px;text-align: left;}
.vcard-header h1{margin-bottom:0}
.text-dark{color:#343a40!important}
.card-create-process-container{margin-bottom: 40px;padding: 20px 30px 0px 30px;border: 1px solid #d8d9e0;background-color: #f1f2f9;}
.sign_in_form_side{box-shadow:1px 1px 20px 5px #ececec;border-radius:9px;padding:30px}
.for_border_radius{border-radius:8px;width:100%}
.sign_in_form_side h2{font-size:22px;color:#000;font-family:'Roboto Medium',Arial,Helvetica,sans-serif}
.leftside_login_form{padding:30px;background-color: #ffffff;padding: 18px 32px 5px 32px;border-radius: 9px;box-shadow: 0 0 0 1px rgba(53,72,91,.1),0 3px 2px rgba(0,0,0,.04),0 7px 5px rgba(0,0,0,.02),0 13px 10px rgba(0,0,0,.02),0 22px 17px rgba(0,0,0,.02)!important;}
.card_preview {box-shadow: 0 0 0 1px rgb(53 72 91 / 7%), 0 2px 2px rgb(0 0 0 / 1%), 0 4px 4px rgb(0 0 0 / 2%), 0 10px 8px rgb(0 0 0 / 3%), 0 15px 15px rgb(0 0 0 / 3%), 0 30px 30px rgb(0 0 0 / 4%), 0 70px 65px rgb(0 0 0 / 5%); background-color: #ffffff; padding: 18px 32px 5px 32px; border-radius: 9px;}
.card_outer {padding: 20px 0 50px 0;background-image: linear-gradient(180deg,#f6f9fb 0%,#ffffff 100%)!important;}
.form_design_field .input-container{display:flex;width:100%;margin-bottom:20px;border:1px solid #ccc;border-radius:4px;overflow:hidden;position:relative}
.form_design_field .input-container input::placeholder{color:#586773}
.form_design_field .input-field{width:100%;padding:10px 10px 10px 5px;outline:none;border:none;font-size:15px;background:#fff;margin:0;height: 38px;}
.form_design_field .icon{white-space:nowrap;padding:15px 8px;color:#bec6cd;min-width:36px;text-align:right;vertical-align:bottom}
.form_design_field .field-icon{margin-left:0;cursor:pointer;position:absolute;right:10px;top:31%;color:#bbb}
.form_design_field .btn{background:#2b344a;color:#fff;font-size:16px;padding:12px 18px;border:none;cursor:pointer;transition-duration:.3s;box-shadow:none!important}
.col-form-label{font-weight:600;text-align:right;padding-top:calc(0.375rem + 1px);padding-bottom:calc(0.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}
.form-control{height:40px!important}
.form-group.row{display:flex;align-items:center}
.for_top_flex.row{align-items:flex-start}
.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}
.input-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;width:100%}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 50px white inset!important}
.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}
.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}
.svg-inline--fa.fa-w-16{width:1em}
.fa-10x{font-size:10em}
.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}
.photo_btn{-moz-user-select:none;-ms-user-select:none;border:1px solid transparent;padding:.7rem 1rem;border-radius:.25rem;margin:12px 0}
.vcard-footer{background-color: #f0f2ff!important;padding: 30px 10px 40px 10px;line-height: 2.0em;border-top: 1px solid #c3cee8;margin-top: 15px;}
.vcard-footer a.white{color: #000;}
.add_more_fields .btn-danger{background:#d0d0d0;padding:2px 10px;font-weight:700;z-index:9;margin-left:-46px;background-image: linear-gradient( 40deg,rgb(58 65 111) 0%,rgb(13 116 200) 100%)!important;box-shadow: 0 7px 13px -3px rgb(45 35 66 / 30%), 0 2px 4px 0 rgb(45 35 66 / 40%), inset 0 -2px 0 0 #404d77 !important;}
.add_more_fields .full_width_example{width:100%}
.add_more_fields .for_select_width{width: 35%;margin-right: 2%;}
.add_more_fields .input_right_width{width:55%}
.group_form_add_group{display:flex;align-items:center}
.address_display_start{align-items:flex-start}
.phone_design .group_form_add_group:nth-child(1){display:none}
.email_design .group_form_add_group:nth-child(1){display:none}
.website_design .group_form_add_group:nth-child(1){display:none}
.address_design .group_form_add_group:nth-child(1){display:none}
.add_more_fields .display_two_flex{display:flex;margin-bottom:5px;align-items:center;flex-wrap:wrap}
.button_design_remove{align-items:center;padding:0!important;color:#000!important;font-weight:400!important;background:#312d2c00!important;text-decoration:underline !i}
.button_design_remove:hover{color:#007bff!important}
.button_design_remove::focus{box-shadow:none!important}
.selected_width{width:90%!important}
.for_user_design{background:#333333;color:#fff;padding:13px 33px 24px;border-radius:155px;font-size:129px}
.file-upload{position:relative}
.file-upload input.file-input{position:absolute;top:0;right:0;margin:0;padding:0;font-size:20px;cursor:pointer;opacity:0;filter:alpha(opacity=0);height:100%}
.extra_index{z-index:9}
.modal-header{align-items:center!important}
.modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto !important}
.out_form .btn-primary{box-shadow: inset 0 0 0 1px rgb(0 0 0 / 30%) !important;transition: box-shadow .4s,color .4s !important;border: none;font-size: 16px;padding: 7px 18px !important;letter-spacing: 0px;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;font-family: 'product-sans-regular';}
.section-icon .fa-2x { font-size: 25px;}

.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}
.three_design_box button{background:#ffffff00!important;border-radius:5px;color:#2b344a!important;font-size:20px!important;padding:10px 13px!important;border:1px solid #2b344a!important;margin:0 4px;transition-duration:.3s}
.three_design_box button:hover{background:#2b344a!important;color:#ffffff!important}
.three_design_box .btn{background:#ffffff00!important;color:#2b344a!important;font-size:20px!important;padding:10px 13px!important;border:1px solid #2b344a!important;margin:0 4px;transition-duration:.3s}
.three_design_box .btn:hover{background:#2b344a!important;color:#ffffff!important}
.view-profile-container .share-button{text-align:center;font-family: 'product-sans-regular';}
.btn-outline-dark{color:#343a40;border-color:#343a40}
.view-profile-container{margin-bottom:1rem}
.card-section{margin-bottom:1rem;flex-flow:row wrap}
.card-section .section-label-col{flex-basis:150px;align-items: flex-start;}
.card-section .section-value-col.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-section .section-icon{margin-right:1rem}
.card-section .section-value-col{flex-grow:1;margin-left:calc(40px + 1rem);width: 74%;}
.card-section .section-value{vertical-align:text-top}
.card-section .section-value>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-section .section-value a{color:#000}
.btn-gd{background-image:linear-gradient(100deg,rgb(47 56 134) 0%,rgb(16 110 194) 100%)!important;color:#fff;font-size:16px;padding: 12px 24px !important;border:none;cursor:pointer;transition-duration:.3s;box-shadow:none!important;border: 2px solid #000 !important;}
.out_form {    max-width: 900px; margin: 0px auto;}

.card-section .section-label {font-family: 'product-sans-regular';text-transform: uppercase;}

@media screen and (max-width: 768px) {
.leftside_login_form{padding:10px}
.container{padding:0 15px!important}
.add_more_fields .for_select_width{width:100%}
.selected_width{width:100%!important}
.add_more_fields .input_right_width{width:100%}
.group_form_add_group{flex-wrap:wrap}
.add_more_fields .display_two_flex{order:2}
.col-form-label{text-align:left;padding-left:0}
}
@media only screen and (max-width: 480px) {
.three_design_box{margin:17px 0 0}
}