.hd-tile h2{
color: #00192E;
font-family: 'Plus Jakarta Sans';
font-size: 28px;
font-weight: 600;
text-align: center;
}
h2 img{
padding-top: 2px; vertical-align: middle;
}
.custom-select {
position: relative;
width: 200px; }
@font-face {
font-family: 'Reey';
src: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/css/<?php echo plugins_url(assets/fonts/Reey-Regular.otf, __FILE__); ?>') format('opentype');
font-weight: normal;
font-style: normal;
}
.selected {
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.options {
display: none;
position: absolute;
border: 1px solid #ccc;
background-color: white;
z-index: 1;
width: 100%;
}
.options li {
padding: 10px;
cursor: pointer;
}
.options li:hover {
background-color: #f0f0f0;
}
.flag {
display: inline-block;
width: 20px; height: 15px; margin-right: 5px;
}
#heading {
text-transform: uppercase;
color: #71B7EB;
font-weight: normal
}
#msform {
margin: 40px auto;
max-width: 600px; }
#msform fieldset {
border: none;
padding: 10px; }
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 12px;
background-color: #fff;
color: #90A3BF;
appearance: none; cursor: pointer;
}
.input-type-text {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 12px;
background-color: #fff;
color: #90A3BF;
cursor: pointer;
}
select:focus {
outline: none; border-color: #555; color: #333; }
fieldset {
border: none;
border-radius: 0.5rem; margin: 0;
padding: 20px;
}
.form-card-survey {
text-align: left
}
#msform fieldset:not(:first-of-type) {
display: none
}
#msform input{
width: 96%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 12px;
background-color: #fff;
color: #90A3BF;
appearance: none; cursor: pointer;
}
#msform input:focus {
border-color: #009688; box-shadow: 0 0 5px rgba(0, 150, 136, 0.5); }
#msform .action-button {
width: 100px;
background: #00192E;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 10px;
cursor: pointer;
padding: 10px 5px;
margin: 40px auto; display: block; width: 590px;
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/arrow-right.svg);
background-repeat: no-repeat;
background-position: left 340px center;
}
#msform .action-button:hover,
#msform .action-button:focus {
background-color: #004986
}
#msform .action-buttons {
width: 130px;
background: #00192E;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 10px;
cursor: pointer;
padding: 10px 5px;
margin: 10px -155px 10px 5px;
float: right;
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/arrow-right.svg);
background-repeat: no-repeat;
background-position: left 117px center;
background-position-y: 19px;
transform: translateX(-10px);
left: 170px;
}
#msform .action-buttons:hover,
#msform .action-buttons:focus {
background-color: #004986
}
#msform .final-action-buttons {
width: 130px;
background: #00192E;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 10px;
cursor: pointer;
padding: 10px 5px;
margin: 10px -155px 10px 5px;
float: right;
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/arrow-right.svg);
background-repeat: no-repeat;
background-position: left 117px center;
background-position-y: 20px;
transform: translateX(-10px);
left: 170px;
}
#msform .final-action-buttons:hover,
#msform .final-action-buttons:focus {
background-color: #004986
}
.form-card-survey-modified{
padding: 15px;
transform: translateX(-20px);
text-align: left;
max-width: 850px;
width: 750px;
}
@media (max-width: 768px) {
#msform .final-action-buttons{
margin: 5% 50% 0% -60%;
}
.radar-chart-container {
display: none;
}
.ml-15 {
margin-left: 80% !important;
}
#msform .action-button-previous {
margin: 10px 5px 10px 0px;
}
#progressbar {
display: none !important;
}
#msform .action-buttons {
margin: 10px 5px 10px 0px;
}
#msform .action-button {
width: 100px;
background-position: left 80px center;
}
#step-popup {
display: none !important;
}
#msform input {
width: 48%;
}
.selected-option {
width: 226px;
}
.maturity-title{
font-size: 35px !important;
margin-top: 10%;
}
.experience-select {
width: 100%;
}
.form-card-survey-modified {
max-width: 100%;
}
.fieldlabels,
.fieldlabels-fin,
.fieldlabels-first {
font-size: 12px;
word-wrap: break-word; word-break: break-word; margin-bottom: 2px;
margin-top: 15px;
}
select {
width: 100%;
}
.custom-select {
width: 100% !important; }
}
.invalid {
border: 1px solid #ccc;
}
.next.action-button:disabled {
background-color: #ccc; color: #666; cursor: not-allowed; opacity: 0.6; }
.next.action-button:disabled:hover {
cursor: not-allowed !important; }
#msform .action-button-previous {
width: 130px;
background: #F6F7F9;
font-weight: bold;
color: #00192E;
border: 1px solid #00192E;
border-radius: 10px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px 10px 0px;
float: left;
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/arrow-left.svg);
background-repeat: no-repeat;
background-position: left 5px center;
background-position-y: 18px;
transform: translateX(-5px);
}
#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
background-color: #D6D7DA
}
.card-survey {
backdrop-filter: blur(10px); border-radius: 1rem; }
.fs-title {
font-size: 20px;
font-family: 'Plus Jakarta Sans', sans-serif;
color: #05375f;
margin-bottom: 10px;
font-weight: 700;
text-align: left
}
.purple-text {
color: #71B7EB;
font-weight: normal
}
.steps {
font-size: 18px; color: #FF7A00; margin-bottom: 8px;
font-family: 'Dancing Script', cursive;
font-weight: 600;
}
.fieldlabels {
color: #00192E;
font-size: 16px;
font-family: 'Plus Jakarta Sans';
font-weight: 600;
}
.fieldlabels-first {
color: #00192E;
font-size: 14px;
font-family: 'Plus Jakarta Sans';
font-weight: 600;
}
.fieldlabels-fin {
color: #00192E;
font-size: 16px;
font-family: 'Plus Jakarta Sans';
font-weight: 600;
}
.fieldlabels-first-fin {
color: #00192E;
font-size: 14px;
font-family: 'Plus Jakarta Sans';
font-weight: 600;
}
.fieldlabels {
display: block; margin-bottom: 8px; }
.fieldlabels-fin {
display: block; margin-bottom: 8px; margin-top: 12px;
}
.progress {
height: 20px
}
.progress-bar {
background-color: #05375f
}
.fit-image {
width: 100%;
object-fit: cover
}
#progressbar {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
color: #C3D4E9;
text-align: center;
}
#progressbar .active {
color: #05375f;
}
#progressbar li {
list-style-type: none;
font-size: 16px;
flex: 1; position: relative;
font-weight: 400;
text-align: center;
}
#progressbar li strong {
display: none; }
#progressbar #account:before {
content: "";
display: inline-block;
width: 35px; height: 35px; background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/communication.svg); background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle; background-size: 20px;
}
#progressbar #personal:before {
content: "";
display: inline-block;
width: 35px; height: 35px; background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/strategy.svg); background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle; background-size: 20px;
}
#progressbar #payment:before {
content: "";
display: inline-block;
width: 35px; height: 35px; background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/charm_organisation.svg); background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle; background-size: 20px;
}
#progressbar #clients:before {
content: "";
display: inline-block;
width: 35px; height: 35px; background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/people.svg); background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle; background-size: 20px;
}
#progressbar #operation:before {
content: "";
display: inline-block;
width: 35px; height: 35px; background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/operations.svg); background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle; background-size: 20px;
}
#progressbar #technologie:before {
content: "";
display: inline-block;
width: 35px; height: 35px; background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/tech.svg); background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle; background-size: 20px;
}
#progressbar li:before {
width: 45px;
height: 45px;
line-height: 45px;
display: block;
font-size: 18px;
background: #ffffff;
border-radius: 50%;
border: 2px solid #C3D4E9;
margin: 0 auto 5px auto;
padding: 2px;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
}
#progressbar li.active:before {
background: #FFFFFF;
border-color: #0287e6;
width: 40px !important; 
height: 40px !important;
}
#progressbar #account.active:before {
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/communication-blue.svg); }
#progressbar #personal.active:before {
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/strategy-blue.svg); }
#progressbar #payment.active:before {
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/charm_organisation-blue.svg); }
#progressbar #clients.active:before {
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/people-blue.svg); }
#progressbar #operation.active:before {
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/operations-blue.svg); }
#progressbar #technologie.active:before {
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/tech-blue.svg); }
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: #C3D4E9; position: absolute;
left: -50%;
top: 20px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none; } #progressbar li.active:after {
background: #0287e6; }
#step-popup {
padding: 5px 10px;
background: #fff;
border: 1px solid #0287e6;
border-radius: 5px;
font-size: 14px;
color: #FFFFFF;
background-color: #0287e6;
display: inline-block; max-width: 150px;
transform: translateX(30px);
text-align: center;
white-space: nowrap;
}
#step-popup::before {
content: '';
position: absolute;
top: -10px; left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 9px solid #0287e6; }
.custom-checkbox {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 15px;
cursor: pointer;
font-size: 14px;
user-select: none;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
border: #00192E solid 1.5px;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 4px;
border: #00192E solid 1px;
}
.custom-checkbox:hover input ~ .checkmark {
background-color: #ccc;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #05375f;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.checkbox-text {
color: #485461;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 13px;
transition: color 0.2s ease, font-size 0.2s ease;
}
.custom-checkbox:hover .checkbox-text {
color: black; font-size: 16px; font-weight: 600;
} .custom-checkbox input:checked + .checkmark + .checkbox-text { font-size: 15px;
font-weight: 600;
}
.custom-select {
position: relative;
display: block; width: 200px; } .selected-option {
padding-top: 7px;
border: 1px solid #ccc;
cursor: pointer;
background-color: white;
width: 580px;
border-radius: 6px;
color: #90A3BF;
font-size: 12px;
background-image: url(//ningen-group.com/wp-content/plugins/multi-form-survey/assets/svg/arrow-down.svg);
background-repeat: no-repeat;
background-position: right 10px center;
padding-left: 10px;
padding-bottom: 7px;
}
.options-container {
display: none; position: absolute;
border: 1px solid #ccc;
background-color: white;
z-index: 1000;
width: 586px;
border-radius: 6px;
max-height: 200px; overflow-y: auto; }
.option {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
}
.option:hover {
background-color: #f0f0f0; }
.flag-icon {
width: 20px; height: auto;
margin-right: 10px; }
.box-options {
display: flex;
flex-wrap: wrap;
gap: 10px; }
.box-option {
display: flex;
align-items: center;
justify-content: center;
padding: 5px 15px;
border: 1px solid #ccc;
border-radius: 15px;
background-color: #ffffff;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
margin-bottom: 10px;
}
.box-option input[type="radio"] {
display: none; }
.box-option span {
font-size: 14px;
color: #90A3BF;
} .box-option input[type="radio"]:checked + span{
font-weight: 700;
color: #050389;
}
.box-option:hover {
background-color: #0b0a46;
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.slide-in-left {
animation: slideInLeft 1.5s ease-out;
}
.maturity-title{
font-family: 'Plus Jakarta Sans';
font-size: 50px;
font-weight: 900;
background: linear-gradient(to right, #00192E, #004E90);
-webkit-background-clip: text;
color: transparent;
margin-bottom: 8px;
}
.title-container {
display: inline-block;
padding: 50px;
}
.result-title{
font-size: 65px;
font-weight: 700;
color: #333;
margin: 0;
z-index: 1; text-align: center;
color: #FF5449;
margin-bottom: 60px;
} #final-container .row {
display: flex;
align-items: center;
justify-content: space-between;
} .progress-circle-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-right: 80px;
} .progress-circle-wrapper {
position: relative;
width: 200px; height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} .circle-title {
font-size: 16px; font-weight: 500;
margin-bottom: 7px;
color: #90A3BF;
}
.progress-circle {
position: relative;
width: 100px; height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px; font-weight: bold;
color: #00192E;
}
.progress-number {
font-size: 70px; }
.outer-circle, .middle-circle, .inner-circle {
position: absolute;
border-radius: 50%;
background-color: transparent;
border: 5px solid #a4afbe56; }
.outer-circle {
width: 280px; height: 280px;
}
.middle-circle {
width: 250px; height: 250px;
}
.inner-circle {
width: 230px; height: 230px;
}
.progress-svg {
position: absolute;
top: -40px;
left: -40px;
transform: rotate(90deg); }
div .row div div svg {
width: 280px !important;
height: 280px !important;
}
.progress-circle-bg {
fill: none;
stroke: #e6e6e6; stroke-width: 10;
}
.progress-circle-fg {
fill: none;
stroke: #74BAED; stroke-width: 10;
stroke-dasharray: 816.4; stroke-dashoffset: 816.4; transition: stroke-dashoffset 0.5s ease;
}
.title-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.circle {
width: 14px; height: 14px; border-radius: 50%;
background-color: orange;
margin-right: 12px;
} .title-message {
position: relative; padding: 20px 25px;
border-radius: 12px; font-size: 14px;
text-align: left;
max-width: 350px;
max-height: 400px;
width: 300px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: none; color: #FFFFFF;
background-color: #007BFF; }
.title-message::before {
content: '';
position: absolute;
top: 24%; left: -10px; transform: translateY(-50%); width: 0;
height: 0;
border-top: 10px solid transparent; border-bottom: 10px solid transparent;
border-right: 10px solid var(--chevron-color, #007BFF); }
.hidden {
display: none !important;
}
.scroll-container {
text-align: center; margin-top: 15px; margin-bottom: 15px; }
.scroll-down-img {
display: block; margin: 0 auto; }
.offer-title {
margin-top: 10px; font-size: 20px; font-weight: bold; } .carousel-price {
display: flex;
justify-content: space-between; flex-wrap: nowrap; }
.pricing-section-1, .pricing-section-2, .pricing-section-3 {
flex: 1 1 30%; margin: 10px; min-width: 250px; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
min-height: 100%;
} .pricing-section-1 {
margin-right: 60px; }
.pricing-section-2 {
margin-left: 5px; margin-right: 5px; }
.pricing-section-3 {
margin-left: 60px; } .left-side-1, .left-side-2, .left-side-3 {
width: 100%; background-color: #fff; padding: 25px; border-radius: 12px; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: flex-start; height: 90%;
}
@media (max-width: 768px) {
.carousel-price {
display: grid;
}
.pricing-section-1 {
margin-right: 10px;
margin-left: 0px;
}
.left-side-1, .left-side-2, .left-side-3 {
width: 100%; background-color: #fff; padding: 25px; border-radius: 12px; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: flex-start; height: 100%;
}
.pricing-section-2 {
margin-left: 0px; margin-right: 10px; margin-top: 20px;
}
.pricing-section-3 {
margin-left: 0px; margin-top: 35px;
}
a.get-started-button {
margin-top: 50px;
} .list-checking{
list-style-type: none; padding-left: 0; margin-top: 10px !important;
}
} .pricing-section-1 p {
font-size: 16px;
color: #333; text-align: center; }
.pricing-section-2 p {
font-size: 16px;
color: #333; text-align: center; }
.pricing-section-3 p {
font-size: 16px;
color: #333; text-align: center; } .offer-subtitle {
font-size: 20px; color: #939393; margin-top: 10px;
margin-bottom: 50px;
} .pricing-small-text-1 {
font-size: 14px; color: #9b9a9a; text-align: left;
}
.pricing-small-text-2 {
font-size: 14px; color: #9b9a9a; text-align: left;
}
.pricing-small-text-3 {
font-size: 14px; color: #9b9a9a; text-align: left;
} .basic-title-1 {
color: #143558;
font-size: 24px;
font-weight: bold;
margin-top: 0px;
text-align: left; 
}
.basic-title-2 {
color: #143558;
font-size: 24px;
font-weight: bold;
margin-top: 0px;
text-align: left; 
}
.basic-title-3 {
color: #143558;
font-size: 24px;
font-weight: bold;
margin-top: 0px;
text-align: left; 
} .pricing-description-1 {
font-size: 16px; color: #939393; text-align: left;
margin-bottom: 10px;
}
.pricing-description-2 {
font-size: 16px; color: #939393; text-align: left;
margin-bottom: 10px;
}
.pricing-description-3 {
font-size: 16px; color: #939393; text-align: left;
margin-bottom: 10px;
} .pricing-price {
font-size: 42px; color: #030000; margin-top: 15px; font-weight: bold; }
.month-text {
font-size: 12px;
color: #7d7b7b;
} .get-started-button {
display: block; width: 70%; margin: 20px auto; padding: 15px; font-size: 18px; text-align: center; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 30px; font-weight: bold; transition: background-color 0.3s; } .get-started-button:hover {
background-color: #0056b3;
color: #fff;
} .right-side-title {
font-size: 20px; color: #333; font-weight: bold; margin-bottom: 15px; text-align: left; } .list-checking{
list-style-type: none; padding-left: 0; margin-top: -10px;
}
.list-checking li {
font-size: 14px; color: #333; margin-bottom: 5px; display: flex; align-items: center; text-align: left;
}
.hidden {
display: none;
} .checkmark-pro {
width: 20px; height: 20px; border-radius: 50%; background-color: #007bff; margin-right: 10px; display: flex;
justify-content: center; align-items: center; }
.checkmark-pro:before {
content: '\2713'; color: white; font-size: 14px; } .full-report-btn-container {
text-align: center; margin-top: 30px; } .full-report-btn {
display: inline-block; padding: 8px 25px; background-color: #014886; color: white; font-size: 14px; font-weight: bold; text-decoration: none; border-radius: 5px; transition: background-color 0.3s; }
.full-report-btn:hover {
background-color: #020911; text-decoration: none; color: white;
}
.text-report{
font-size: 14px;
color: #014886;
font-weight: 600;
} #radarChart ~ .chart-legend {
display: none;
}
.chart-legend, .legend {
display: none !important;
}
.chart-legend, .legend {
display: none !important;
visibility: hidden !important;
height: 0;
}
.side-title{
color: #7d7b7b;
font-size: 15px;
}