body {
        font-family: 'Open Sans', sans-serif !important; 
        height: 100%;
        background: #edf0f4 !important; 
    }
    .row { 
		margin-right: 0px !important; 
		margin-left: 0px !important; 
	}
	.input-group {
		position: relative;
		display: table;
		border-collapse: separate;
	}
	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
		float: left;
	}
	label {
		font-size: 20px !important;
		color: #054484 !important;
		font-weight: 700 !important;
	}
		 
	.epiques {
		display: inline-block;
		width: 100%;
		text-align: center;
		padding: 0px 5px;
	}
    .top-header {
        padding: 10px 0px;
        position: relative;
    }
    .menu-icon {
        position: absolute;
        right: 20px;
        cursor: pointer;
        top: 20px;
    }
    .mobile-box-logo {
        text-align: center;
    }
    .title-mob-g {
        font-size: 20px;
        font-family: 'Open Sans', sans-serif !important;
        font-weight: 600;
        color: #000b5a;
    }
    .cat-box ul {
        margin-top: 20px;
    }
    .cat-box ul li {
        display: flex;
        border-radius: 20px;
        align-items: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        padding: 10px;
        margin-bottom: 15px;
        background: #fff;
    }
	.cat-box ul li:hover {
        background: linear-gradient(to right, #061d64, #b81dd4);
    }
	.cat-box ul li:hover .cat-text {
		color: #fff;
	}
	.cat-box ul li a:hover .cat-text {
		color: #fff;
	}
    .cat-box ul li.active span.cat-image {
        border: 3px solid #fff;
    }
    .cat-box ul li.active {
        background: linear-gradient(to right, #061d64, #b81dd4);
    }
    .cat-box ul li.active span.cat-image {
        border: 3px solid #fff;
    }
    span.cat-image {
        width: 100px;
        height: 82px;
        display: inline-flex;
        border: 3px solid #2d417d;
        border-radius: 20px;
        overflow: hidden;
    }
    span.cat-image img {
        width: 100%;
    }
    .cat-box ul li.active .cat-text {
        color: #fff;
    }
    .cat-text {
       font-family: 'Open Sans', sans-serif !important;
		font-weight: 600;
		text-transform: uppercase;
		margin-left: 30px;
		font-size: 20px;
		margin-top: 27px;
		color: #001461;
		float: right;
	}
 
    .back-btn {
        position: absolute;
        left: 15px;
        top: 14px;
    }
    .back-btn a {
        color: #001461;
        font-family: 'Open Sans', sans-serif !important;
    }
    .back-btn a span {
        text-decoration: underline;
        font-family: 'Open Sans', sans-serif !important;
    }
    .que-box {
       box-shadow: 0 0 10px rgb(0 0 0 / 20%);
		background: #fff;
		margin-top: 10px;
		margin-bottom: 20px;
		border-radius: 20px;
		padding: 20px 20px 10px;
 
    }
    .que-image {
        text-align: center;
    }
    .title-back {
        font-family: 'Open Sans', sans-serif !important;
        color: #001461;
        font-size: 26px;
        line-height: 35px;
        font-weight: 600;
        text-align: center;
        padding-top: 21px;
    }
    ul.anwer-list {
        margin-top: 20px;
        margin-bottom: 0px;
        text-align: center;
        padding: 0 10px 10px;
    }
	ul.anwer-list li a{  color: #001461; text-decoration: none;}
	ul.anwer-list li a:hover{  color: #fff; text-decoration: none;}
	ul.anwer-list li:hover a{  color: #fff; text-decoration: none;}
    ul.anwer-list li {
        height: 52px;
        background: #fff;
        width: 100%;
        font-size: 15px;
        margin: 0 auto 15px;
        display: flex;
        cursor: pointer;
        border: 2px solid #dfe1e2;
        justify-content: center;
        align-items: center;
        color: #001461;
        border-radius: 30px;
        font-family: 'Open Sans', sans-serif !important;
    }
    ul.anwer-list li.active {
        background: linear-gradient(to right, #061d64, #b81dd4);
        color: #fff;
		text-decoration: none;
    }ul.anwer-list li:hover {
        background: linear-gradient(to right, #061d64, #b81dd4);
        color: #fff;
		text-decoration: none;
    }
	
    .dot-next ul {
        display: flex;
        justify-content: center;
    }
    .dot-next ul li.active {
        background: #001461;
        border: 1px solid #001461;
    }
    .dot-next ul li {
        height: 9px;
        width: 9px;
        background: #fff;
        border-radius: 100%;
        cursor: pointer;
        margin: 0 4px;
        border: 1px solid #001461;
    }
    .slider-range {
        color: #fff;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 14px;
        display: flex;
        justify-content: center;
        padding: 0px 0px;
    }
    .left-section {
        width: 88px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
        margin-right: 0px;
    }
    .top-serf,
    .bottom-serf {
        font-family: 'Open Sans', sans-serif !important;
    }
    .top-serf,
    .bottom-serf {
        font-family: 'Open Sans', sans-serif !important;
    }
    .range-slider .input-range {
        -webkit-appearance: none;
        height: 200px;
        border-radius: 5px;
        background: #ccc;
        outline: none;
        writing-mode: bt-lr;
        -webkit-appearance: slider-vertical;
		cursor: pointer;
    }
    .right-section {
        min-width: 30px;
        display: flex;
        margin-right: 30px;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
    }
    .top-serf,
    .bottom-serf,
    span.range-value {
        color: #001461;
        font-size: 16px;
        font-weight: 600;
        font-family: 'Open Sans', sans-serif !important;
    }
    .inner-container .start-btn {
        background: linear-gradient(to right, #061d64, #b81dd4);
        color: #fff;
        width: 171px;
        height: 50px;
        line-height: 21px;
        margin-bottom: 50px;
    } 
	.inner-container .start-btn.upgrade-start-btn {
        background: linear-gradient(to right, #b81dd4, #061d64);
        
    }
	.play-btn .fa.fa-eye{
		font-size: 18px;
		color: #0f1d69;
 
	}
    .inner-container .start-btn a {
        font-size: 18px;
        font-family: 'Open Sans', sans-serif !important;
        color: #fff;
		text-decoration: none;
    }
    .input-box-que {
        margin-top: 50px;
    }
    .input-box-que input,
    .input-box-que select {
        height: 52px;
        background: #fff;
        width: 100%;
        font-size: 15px;
        margin: 0 auto 20px;
        display: flex;
        cursor: pointer;
        text-align: center;
        border: 2px solid #dfe1e2;
        justify-content: center;
        align-items: center;
        color: #001461;
        border-radius: 30px !important;
        text-align-last: center;
        font-family: 'Open Sans', sans-serif !important;
    }
    .mr-20 { margin-bottom: 20px;   }
    span.input-group-addon {
        position: absolute;
        right: 0;
        /* padding: 17px; */
        width: 50px;
        border: none;
        background: transparent;
        height: 50px;
        display: flex;
        align-items: center;
    } 
    .start-test {   text-align: center;   }
    .start-bt {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 20px;
        color: #000051;
        margin: 11px;
    }
    .text-mo.mobility {
        font-size: 23px;
        font-weight: 600;
        font-family: 'Open Sans', sans-serif !important;
        color: #2c107b;
        margin: 22px 0px;
    }
    .and {
        font-size: 23px;
        margin: 22px 0px;
        font-family: 'Open Sans', sans-serif !important;
        color: #7e08af;
    }
    .flexibility {
        font-size: 23px;
        font-weight: 600;
        margin: 22px 0px;
        font-family: 'Open Sans', sans-serif !important;
        color: #7e08af;
    }
    .user-box-container {
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        background: #fff;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 20px;
        padding: 20px;
    }
    .wel {
        color: #06206d;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 14px;
        font-style: italic;
		font-weight: 500;
    }
    .content-user-box {
        margin-left: 15px;
    }
    .username {
        color: #001461;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 16px;
        font-weight: bold;
    }
	.user-box-right {float: right;}
	
    .user-box {
       /*  display: flex; */
	    display: inline-flex;
        flex-wrap: wrap;
    }
    .drop-box {
        background: linear-gradient(to right, #061d64, #b81dd4);
        padding: 20px;
        border-radius: 0px 10px 0px 10px;
        color: #fff;
        font-size: 20px;
        font-family: 'Open Sans', sans-serif !important;
        margin-top: 17px;
        justify-content: space-between;
        display: flex;
    }
    .drop-box span {
        font-family: 'Open Sans', sans-serif !important;
    }
    .select-preferred {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 20px;
        color: #000b65;
    }
    .select-preferred span {
        font-family: 'Open Sans', sans-serif !important;
        font-weight: 600;
    }
    .test-box {
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        background: #fff;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 20px;
        padding: 20px;
        margin-top: 20px;
        text-align: center;
    }
    .test-box .content-user-box {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 20px;
        color: #000b65;
        margin: 0;
    }
    .test-box .content-user-box span {
        font-family: 'Open Sans', sans-serif !important;
        font-weight: 600;
        font-style: italic;
    }
    .test-box.grren {
        background: linear-gradient(to right, #061d64, #b81dd4);
        padding: 20px;
        border-radius: 10px;
        color: #fff;
    }
    .test-box.grren .content-user-box {
        color: #fff;
    }
    .full-per-name {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 20px;
        font-weight: 600;
        color: #000b65;
        line-height: 24px;
        text-align: center;
    }
    .full-description {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 14px;
        color: #000b65;
        line-height: 21px;
        text-align: center;
        margin-top: 15px;
    }
    .list-test-cat-box {
        border: 1px solid #000b65;
        border-radius: 15px;
        display: flex;
        align-items: center;
        padding: 10px 20px;
    }
    .list-r {
        align-items: center;
        display: flex;
    }
    .list-r img {
        margin-right: 10px;
    }
    .list-test-cat-content {
        margin-left: 15px;
    }
    .list-test-cat-title {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 18px;
        color: #000b65;
        font-style: italic;
        line-height: 24px;
    }
    .list-test-cat-c {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 14px;
        color: #000b65;
        line-height: 21px;
        /* text-align: center; */
        margin-bottom: 6px;
    }
    .list-test-cat-img {
        width: 70px;
    }
    .list-test-cat-d {
        margin-bottom: 20px;
    }
    .list-test-cat {
        margin-bottom: 15px;
    }
    .width-100 {
        width: 100% !important;
    }
    .full-detied-name {
        font-size: 20px;
        color: #06156b;
        text-transform: uppercase;
        font-family: 'Open Sans', sans-serif !important;
        margin-top: 5px;
        font-weight: 600;
    }
    .tr {
        font-size: 20px;
        color: #06156b;
        font-weight: 600;
        font-family: 'Open Sans', sans-serif !important;
    }
    .full-det {
        padding: 20px 0px;
    }
    .tr-des {
        font-size: 18px;
        color: #06156b;
        font-family: 'Open Sans', sans-serif !important;
        line-height: 21px;
        margin-top: 5px;
        margin-bottom: 7px;
    }
    .full-det ul li {
        font-size: 18px;
        color: #06156b;
        font-family: 'Open Sans', sans-serif !important;
        line-height: 21px;
    }
	.hidden {
		display: block !important;
	}
	/* .que-image img {  height: 130px;   width: 130px;} */
	.que-image img {  width:70px;}
	.start-btn button { background: none;  padding: 2px;}
	.input-group{display: grid !important;}
	.input-group-span span{    width: 100%;}
	.labelTitle{   
	font-family: 'Open Sans', sans-serif !important;
    color: #001461;
    font-size: 18px;
    line-height: 35px;
    font-weight: 100;
    text-align: center;
    padding-top: 4px;}
	
	
/*--- 	 ai css start */ 
	
    .inner-container {
        padding: 0 0px;
    }
    .top-header {
        padding: 10px 0px;
        position: relative;
    }
    .menu-icon {
        position: absolute;
        right: 20px;
        cursor: pointer;
        top: 20px;
    }
    .mobile-box-logo {
        text-align: center;
    }
    .title-mob-g {
        font-size: 20px;
        font-family: 'Open Sans', sans-serif !important;
        font-weight: 600;
        color: #000b5a;
    }
    .cat-box ul {
        margin-top: 20px;
    }
    .cat-box ul li {
        display: flex;
        border-radius: 20px;
        align-items: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        padding: 10px;
        margin-bottom: 15px;
        background: #fff;
    }
    .cat-box ul li.active {
        background: linear-gradient(to right, #061d64, #b81dd4);
    }
    .cat-box ul li.active span.cat-image {
        border: 3px solid #fff;
    }
    span.cat-image {
        width: 100px;
        height: 82px;
        display: inline-flex;
        border: 3px solid #2d417d;
        border-radius: 20px;
        overflow: hidden;
    }
    span.cat-image img {
        width: 100%;
    }
    .cat-box ul li.active .cat-text {
        color: #fff;
    }
    .cat-text {
		 font-family: 'Open Sans', sans-serif !important;
		font-weight: 600;
		text-transform: uppercase;
		margin-left: 30px;
		font-size: 20px;
		margin-top: 0px;
		color: #001461;
    }
    .back-btn {
        position: absolute;
        left: 15px;
        top: 14px;
    }
    .back-btn a {
        color: #001461;
        font-family: 'Open Sans', sans-serif !important;
    }
    .back-btn a span {
        text-decoration: underline;
        font-family: 'Open Sans', sans-serif !important;
    }
  
    .que-image {
        text-align: center;
    }
    .title-back {
        font-family: 'Open Sans', sans-serif !important;
        color: #001461;
        font-size: 26px;
        line-height: 35px;
        font-weight: 600;
        text-align: center;
        padding-top: 21px;
    }
    ul.anwer-list {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
        padding: 0 10px 10px;
    }
    ul.anwer-list li {
        height: 52px;
        background: #fff;
        width: 100%;
        font-size: 15px;
        margin: 0 auto 20px;
        display: flex;
        cursor: pointer;
        border: 2px solid #dfe1e2;
        justify-content: center;
        align-items: center;
        color: #001461;
        border-radius: 30px;
        font-family: 'Open Sans', sans-serif !important;
    }
    ul.anwer-list li.active {
        background: linear-gradient(to right, #061d64, #b81dd4);
        color: #fff;
    }
    .dot-next ul {
        display: flex;
        justify-content: center;
    }
    .dot-next ul li.active {
        background: #001461;
        border: 1px solid #001461;
    }
    .dot-next ul li {
        height: 9px;
        width: 9px;
        background: #fff;
        border-radius: 100%;
        cursor: pointer;
        margin: 0 4px;
        border: 1px solid #001461;
    }
   
    .left-section {
        width: 88px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
        margin-right: 0px;
    }
    .top-serf,
    .bottom-serf {
        font-family: 'Open Sans', sans-serif !important;
    }
    .top-serf,
    .bottom-serf {
        font-family: 'Open Sans', sans-serif !important;
    }
    .range-slider .input-range {
        -webkit-appearance: none;
        height: 200px;
        border-radius: 5px;
        background: #ccc;
        outline: none;
        writing-mode: bt-lr;
        -webkit-appearance: slider-vertical;
    }
    .right-section {
        min-width: 30px;
        display: flex;
        margin-right: 30px;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
    }
    .top-serf,
    .bottom-serf,
    span.range-value {
        color: #001461;
        font-size: 16px;
        font-weight: 600;
        font-family: 'Open Sans', sans-serif !important;
    }
    .inner-container .start-btn {
        background: linear-gradient(to right, #061d64, #b81dd4);
        color: #fff;
        width: 171px;
        height: 50px;
        line-height: 21px;
        margin-bottom: 50px;
    }
    .inner-container .start-btn a {
        font-size: 18px;
        font-family: 'Open Sans', sans-serif !important;
        color: #fff;
    }
    .input-box-que {
        margin-top: 50px;
    }
    .input-box-que input,
    .input-box-que select {
        height: 52px;
        background: #fff;
        width: 100%;
        font-size: 15px;
        margin: 0 auto 20px;
        display: flex;
        cursor: pointer;
        text-align: center;
        border: 2px solid #dfe1e2;
        justify-content: center;
        align-items: center;
        color: #001461;
        border-radius: 30px;
        text-align-last: center;
        font-family: 'Open Sans', sans-serif !important;
    }
    .mr-20 {
        margin-bottom: 20px;
    }
    span.input-group-addon {
        position: absolute;
        right: 0;
        /* padding: 17px; */
        width: 50px;
        border: none;
        background: transparent;
        height: 50px;
        display: flex;
        align-items: center;
    }
    .start-test {
        text-align: center;
    }
    .start-bt {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 20px;
        color: #000051;
        margin: 11px;
    }
    .text-mo.mobility {
        font-size: 23px;
        font-weight: 600;
        font-family: 'Open Sans', sans-serif !important;
        color: #2c107b;
        margin: 22px 0px;
    }
    .and {
        font-size: 23px;
        margin: 22px 0px;
        font-family: 'Open Sans', sans-serif !important;
        color: #7e08af;
    }
    .flexibility {
        font-size: 23px;
        font-weight: 600;
        margin: 22px 0px;
        font-family: 'Open Sans', sans-serif !important;
        color: #7e08af;
    }
    .user-box-container {
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        background: #fff;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 20px;
        padding: 20px;
    }
    .wel {
        color: #b61dd4;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 14px;
        font-style: italic;
    }
    .content-user-box {
        margin-left: 15px;
    }
    .username {
        color: #001461;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 16px;
        font-weight: bold;
    }
   
    .drop-box {
        background: linear-gradient(to right, #061d64, #b81dd4);
        padding: 20px;
        border-radius: 0px 10px 0px 10px;
        color: #fff;
        font-size: 20px;
        font-family: 'Open Sans', sans-serif !important;
        margin-top: 17px;
        justify-content: space-between;
        display: flex;
    }
    .drop-box span {
        font-family: 'Open Sans', sans-serif !important;
    }
    .select-preferred {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 20px;
        color: #000b65;
    }
    .select-preferred span {
        font-family: 'Open Sans', sans-serif !important;
        font-weight: 600;
    }
    .test-box {
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        background: #fff;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 20px;
        padding: 20px;
        margin-top: 20px;
        text-align: center;
    }
    .test-box .content-user-box {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 20px;
        color: #000b65;
        margin: 0;
    }
    .test-box .content-user-box span {
        font-family: 'Open Sans', sans-serif !important;
        font-weight: 600;
        font-style: italic;
    }
    .test-box.grren {
        background: linear-gradient(to right, #061d64, #b81dd4);
        padding: 20px;
        border-radius: 10px;
        color: #fff;
    }
    .test-box.grren .content-user-box {
        color: #fff;
    }
    .full-per-name {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 20px;
        font-weight: 600;
        color: #000b65;
        line-height: 24px;
        text-align: center;
    }
    .full-description {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 14px;
        color: #000b65;
        line-height: 21px;
        text-align: center;
        margin-top: 15px;
    }
    .list-test-cat-box {
        border: 1px solid #000b65;
        border-radius: 15px;
        display: flex;
        align-items: center;
        padding: 10px 20px;
    }
    .list-r {
        align-items: center;
        display: flex;
    }
    .list-r img {
        margin-right: 10px;
    }
    .list-test-cat-content {
        margin-left: 15px;
    }
    .list-test-cat-title {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 18px;
        color: #000b65;
        font-style: italic;
        line-height: 24px;
    }
    .list-test-cat-c {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 14px;
        color: #000b65;
        line-height: 21px;
        /* text-align: center; */
        margin-bottom: 6px;
    }
    .list-test-cat-img {
        width: 70px;
    }
    .list-test-cat-d {
        margin-bottom: 20px;
    }
    .list-test-cat {
        margin-bottom: 15px;
    }
    .width-100 {
        width: 100% !important;
    }
    .full-detied-name {
        font-size: 20px;
        color: #06156b;
        text-transform: uppercase;
        font-family: 'Open Sans', sans-serif !important;
        margin-top: 5px;
        font-weight: 600;
    }
    .tr {
        font-size: 20px;
        color: #06156b;
        font-weight: 600;
        font-family: 'Open Sans', sans-serif !important;
    }
    .full-det {
        padding: 20px 0px;
    }
    .tr-des {
        font-size: 18px;
        color: #06156b;
        font-family: 'Open Sans', sans-serif !important;
        line-height: 21px;
        margin-top: 5px;
        margin-bottom: 7px;
    }
    .full-det ul li {
        font-size: 18px;
        color: #06156b;
        font-family: 'Open Sans', sans-serif !important;
        line-height: 21px;
    }

    .performed-gh ul li {
        font-family: 'Open Sans', sans-serif !important;
        color: #001461;
        font-size: 15px;
        line-height: 35px;
        padding-top: 6px;
    }
    .performed-gh.med ul li {
    display: flex;
    align-items: center;
}
.ri-t  span.risk-text {
    font-size: 20px;
    color: #06156b;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif !important;
    line-height: 0px;
}
.performed-gh.med ul li .ri-l {
    font-family: 'Open Sans', sans-serif !important;
    color: #001461;
    font-size: 15px;
    line-height: 20px;
    padding-top: 6px;
    width: 76%;
}
.ri-t span {
    font-family: 'Open Sans', sans-serif !important;
    color: #e42626;
}

    .performed-gh ul li img {
        margin-right: 15px;
    }
    .danger-box {
    background: linear-gradient(to right, #111c5e, #b2020c);
    text-align: center;
    padding: 15px 10px;
    color: #fff;
    margin-top: 10px;
    border-radius: 20px;
}
.danger-icon{
    margin-bottom: 10px;
}
.t-i {
    font-family: 'Open Sans', sans-serif !important;
        color: #fff;
        line-height: 20px;
        font-size: 15px;
        padding-top: 6px;
}
.vb-i{
    font-family: 'Open Sans', sans-serif !important;
        color: #fff;
        font-weight: 600;
        font-size: 20px;
}
.start-btn.mr-bt {
    margin-bottom: 9px;
}
a.com-list {
    font-family: 'Open Sans', sans-serif !important;
    color: #001461;
    font-size: 15px;
    text-align: center;
    display: block;
    text-decoration: underline;
}
span.med {
    color: #e68100;
}
span.low {
    color: #16ad21;
}


/* new css  */
.top-header-new {
    display: flex;
    justify-content: space-between;
    padding: 10px 0px;
}
.upgrade a{
	font-family: 'Open Sans', sans-serif !important; 
    font-size: 19px;
    -webkit-animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
    -webkit-animation-duration: 1.5s;
    font-weight: bold;
    color: #0c226e;
	text-transform: uppercase;
}
.notifation-btn a {
    margin-right: 7px;
}
.full-performance {
    text-align: center;
    color: #b61dd4;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
}
.date-box {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: #0c226e;
}
.knee-preferred {
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    background: #fff;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 20px;
    padding: 20px;
}
.top-tittle {
    color: #001461;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px;
    font-weight: bold;
}
.md-tittle{
     color: #001461;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
    line-height: 16px;
    
}
.bt-text{
     color: #001461;
     line-height: 16px;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
}
.knee-date-box{
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
    margin-top: 12px;
    font-size: 14px;
   color: #b61dd4;
}
.mr-d {
    margin-left: -27px;
}
.lo-box{
     box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    background: #fff;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 20px;
    padding: 13px 10px;
}
.lo-text{
      color: #001461;
      margin-bottom: 5px;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px;
    font-weight: bold;
}
.top-tittle-nw {
    color: #001461;
    margin-bottom: 5px;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px;
    font-weight: bold;
}
.all-preferred .col-4 {
  
    padding-right: 6px;
    padding-left: 6px;
}
.all-preferred .row{
    margin-right: -7px;
    margin-left: -7px;
}
.play-btn img {
    width: auto !important;
}
.play-btn.text-right {
  
    display: flex;
    justify-content: flex-end;
}
.overall-health .col-5,.overall-health .col-7 {
  
    padding-right: 6px;
    padding-left: 6px;
}
.overall-health .row{
    margin-right: -7px;
    margin-left: -7px;
}
.left-heath-text{
     box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    background: #fff;
  
    
    border-radius: 20px;
    padding: 13px 10px;
}
.right-heath-text{
    background: linear-gradient(to right, #061d64, #b81dd4);
    color: #fff;
    border-radius: 20px;
    padding: 13px 10px;
}
.left-te span.bmi {
 /*    font-weight: bold;
    font-size: 24px; */
}
.health-st-row{width: 100%;}
.health-st-row .left-te {
    display: inline-block;
    align-items: center;
    margin-bottom: 10px;
    text-align: center;
    width: auto;
    padding: 2px 6px;
}
.left-te {
    display: flex;
   align-items: center;
   margin-bottom: 10px; 
    
}
.right-heath-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ght {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 23px;
    line-height: 24px;
}
.left-te span {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 18px;
    text-align: center;
    color: #0c226e;
    margin-left: 10px;
}
.left-te span.bmi{

}
.health-st-main  img {
    width: 50px;
}
.drop-box.Back {
    padding: 10px 20px;
    margin-bottom: 14px;
}
.health-st-main {
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    background: #fff;
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 20px;
   padding: 20px 20px 10px;
}
.performance-metrics {
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    background: #fff;
    border-radius: 20px;
    padding: 13px 10px;
    text-align: center;
}

.nav-tabs .nav-item button {
    background: transparent;
   
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
    padding: 4px 7px;
    text-align: center;
    color: #0c226e;
    
}
.nav-tabs {
    border-bottom: none;
    justify-content: space-between;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
   
    background: linear-gradient(to right, #061d64, #b81dd4);
    color: #fff;
    border-radius: 0px 10px 0px 10px;
}
.posture-box-container {
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    background: #fff;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 20px;
    padding-top: 20px;
    overflow: hidden;
}
.posture-box-v {
    background: #ff9797;
    padding: 12px 11px;
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    color: #ff0000;
    flex-wrap: wrap;
}
.popup-box i {
    margin-left: 7px;
    color: #000;
}
.popup-box{
    cursor: pointer;
     font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
        width: 50%
    font-weight: 600;
}
.spine h3 {
    color: #b61dd4;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px;
     font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}
.spine p {
   
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
   
}
.head-image {
    text-align: center;
    margin: 20px 0px;
}
.spine .modal-title {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 20px;
    padding: 4px 7px;
    text-align: center;
    color: #0c226e;
    font-weight: 600;
}
.spine .modal-dialog {
    max-width: 300px;
    margin: 30px auto;
}
.spine .modal-content {
  padding: 0 10px;
    border-radius: 15px;
    
}
.modal.spine {
    background: transparent;
    z-index: 9999999;
}
.modal-backdrop.show {
    opacity: .8;
}
.modal.spine  .close {
    position: absolute;
    top: -30px;
    color: #fff;
    right: 24px;
    font-size: 30px;
    opacity: 1;
}
.front-posture-box{}
.front-posture-box.text-right{position: relative;}
.front-posture-box.text-right img{width: 160px; height: 330px;}

.left-posture-box{}
.left-posture-box.text-left{}
.left-posture-box.text-left img{width:54px; height: 330px;} 
.left-posture-box.text-lef.left-posture-img img{width:50px; height: 330px;}
 /** posture-problem-circle */
.spain-posture-problem-circle{  
        background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 225px;
    top: 113px
}
.spain-posture-problem-circle-left {
    background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 5px;
    top: 80px;
}
.lower-limb-posture-problem-circle-left {
    background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    /* margin: auto; */
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 26px;
    top: 120px;
}
}.spain-posture-problem-circle-right{  
        background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 225px;
    top: 113px
}
.upper-limb-posture-problem-circle-left{
    background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    /* margin: auto; */
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 283px;
    top: 80px;
}
.upper-limb-posture-problem-circle-right {
    background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    /* margin: auto; */
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 16px;
    top: 54px;
    z-index: 9;
}

.lower-limb-posture-problem-circle-right {
    background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    /* margin: auto; */
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 1px;
    top: 116px;
}
 
.neck-posture-problem-circle{
    background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 237px;
    top: 11px;
    z-index: 999999; 
}
.neck-posture-problem-circle-left {
    background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 23px;
    top: 183px;
    z-index: 999999;
}
.neck-posture-problem-circle-right{
    background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 37px;
    top: 14px;
    z-index: 999999; 
}
.spain-posture-problem-circle-right {
    background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 37px;
    top: 116px;
    z-index: 999999;
}

.side-facing-neck-posture-problem-circle-left{
	background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 12px;
    top: 11px;
    z-index: 999999;
 
}
.side-facing-shoulder-posture-problem-circle-left{
       background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 4px;
    top: 36px;
    z-index: 999999;
}
.side-facing-knee-posture-problem-circle-left{
       background: url(../signupimages/Posture_problem_circle.png);
    padding: 26px 26px;
    margin: auto;
    width: 50px;
    background-position: bottom;
    background-size: 28px;
    position: absolute;
    background-repeat: no-repeat;
    text-align: left;
    float: left;
    left: 15px;
    top: 184px;
    z-index: 999999;
}

.num-per{
    position: relative;
}
.sc-boc {
  color: #000;
    position: absolute;
    top: 55px;
    /* height: 60px; */
    font-family: 'Open Sans', sans-serif !important;
    /* width: 60px; */
    /* background: #fff; */
    /* border-radius: 100%; */
    /* border: 2px solid #a41dc7; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    font-size: 14px;
    left: 31px;
 
}
.lo-img {
    height: 63px;
    width: 63px;
    position: relative;
    margin: auto;
}
.lo-boc {
       display: flex;
    align-items: center;
    top: 0px;
    height: 66px;
    font-family: 'Open Sans', sans-serif !important;
    width: 70px;
    font-size: 13px;
    margin-top: -5px;
    font-weight: 600;
    justify-content: center;
    position: absolute;

}
span.device-num {
     font-family: 'Open Sans', sans-serif !important;
    transform: translate(0px, 6px);
    font-weight: bold;
}
span.device-line {
    transform: rotate(7deg);
    font-size: 25px;
}
@-webkit-keyframes blink {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}
.posture-box .col-md-6 {
    width: 49%;
    display: inline-flex;
}

.field-tempuser-question-23-desc{
	display: block;
 
}
.start-btn button:focus {
    outline: 0px;
    outline: none;
}
.lo-img img{    width: 70px;  height: 69px;}
.left-te img{    width: 27px;}
.num-per img{    width: 100px;}
.knee-preferred a{text-decoration: none;} 

.svg-item {
    width: 100%;
    font-size: 16px;
    margin: 0 auto;
    animation: donutfade 1s;
}

@keyframes donutfade {
  /* this applies to the whole svg item wrapper */
    0% {
        opacity: .2;
    }
    100% {
        opacity: 1;
    }
}

@media (min-width: 992px) {
    .svg-item {
        width: 80%;
    }
}

.donut-ring {
    stroke: #EBEBEB;
}

/* .donut-segment {
    transform-origin: center;
    stroke: #FF6200;
} */

.donut-segment-2 {
    stroke: aqua;
    animation: donut1 3s;
}

.donut-segment-3 {
    stroke: #d9e021;
    animation: donut2 3s;
}

.donut-segment-4 {
    stroke: #ed1e79;
    animation: donut3 3s;
}

.segment-1{fill:#ccc;}
.segment-2{fill:aqua;}
.segment-3{fill:#d9e021;}
.segment-4{fill:#ed1e79;}

.donut-percent {
    animation: donutfadelong 1s;
}

@keyframes donutfadelong {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes donut1 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 69, 31;
    }
}

@keyframes donut2 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 30, 70;
    }
}

@keyframes donut3{
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 1, 99;
    }
}

.donut-text {
    font-family: Arial, Helvetica, sans-serif;
    fill: #FF6200;
}
.donut-text-1 {
    fill: #b81dd4;
}
.donut-text-2 {
    fill: #751da9;
}
.donut-text-3 {
    fill: #0b1d67;
}

.donut-label {
    font-size: 0.28em;
    font-weight: 700;
    line-height: 1;
    fill: #000;
    transform: translateY(0.25em);
}

.donut-percent {
    font-size: 0.5em;
    line-height: 1;
    transform: translateY(0.5em);
    font-weight: bold;
}

.donut-data {
    font-size: 0.12em;
    line-height: 1;
    transform: translateY(0.5em);
    text-align: center;
    text-anchor: middle;
    color:#666;
    fill: #666;
    animation: donutfadelong 1s;
}

.donut-segment-flexibility {
	stroke: #b81dd4; 
}

.donut-segment-stability {
	stroke: #751da9; 
}
.donut-segment-mobility {
	stroke: #0b1d67;
}.

/* ---------- */
/* just for this presentation */
/* html { text-align:center; } */
.svg-item {
  max-width:90%;
  display:inline-block;
}

.performance-metrics .svg-item {
	width: 100%;
	margin: 0 auto;
	animation: donutfade 1s;
}

@keyframes donutfade {
  /* this applies to the whole svg item wrapper */
	0% {
		opacity: .2;
	}
	100% {
		opacity: 1;
	}
}

/*@media (min-width: 992px) {
	.performance-metrics .svg-item {
		width: 80%;
	}
}*/

.performance-metrics .donut-ring {
	stroke: #EBEBEB;
}

 /* .performance-metrics .donut-segment {
	transform-origin: center;
	stroke: #FF6200;
}  */ 

.performance-metrics .donut-segment-2 {
	stroke: #b81dd4;
	animation: donut1 3s;
}.performance-metrics .donut-segment-flexibility {
	stroke: #b81dd4; 
}

.performance-metrics .donut-segment-stability {
	stroke: #751da9; 
}
.performance-metrics .donut-segment-mobility {
	stroke: #0b1d67;
}.

.performance-metrics .donut-segment-3 {
	stroke: #751da9;
	animation: donut2 3s;
} 
.performance-metrics .donut-segment-4 {
	stroke: #251d78;
	animation: donut3 3s;
}
.donut0{animation: donut0 3s;}
.donut1{animation: donut1 3s;}
.donut2{animation: donut2 3s;}
.donut3{animation: donut3 3s;}
.donut4{animation: donut4 3s;}
.donut5{animation: donut5 3s;}
.donut6{animation: donut6 3s;}
.donut7{animation: donut7 3s;}
.donut8{animation: donut8 3s;}
.donut9{animation: donut9 3s;}
.donut10{animation: donut10 3s;} 
@keyframes donut1 {
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 10, 90;
	}
}

@keyframes donut2 {
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 20, 80;
	}
}

@keyframes donut3{
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 30, 70;
	}
}
@keyframes donut4{
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 40, 60;
	}
}
@keyframes donut5{
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 50, 50;
	}
}@keyframes donut6{
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 60, 40;
	}
}@keyframes donut7{
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 70, 30;
	}
}@keyframes donut8{
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 80, 20;
	}
}@keyframes donut9{
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 90, 10;
	}
}@keyframes donut10{
	0% {
		stroke-dasharray: 0, 100;
	}
	100% {
		stroke-dasharray: 100, 0;
	}
}
	

/* ---------- */
/* just for this presentation */
 
.performance-metrics .svg-item {
  max-width:350px;
  display:inline-block;
 /*  position: absolute; */
}
.performance-metrics .svg-item.innerimg {
    max-width: 180px;
    top: 65px;
    left: 67px;
    position: absolute;
}
.performance-metrics-chart {
    position: relative;
    max-width: 310px;
    margin: auto;
}
.health-st {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.performance-metrics .svg-item.circleimg {
    max-width: 241px;
    top: 36px;
    left: 37px;
    position: absolute;
}
.mark-text-flexibility{
	position: absolute;
    left: 375px;
    top: 383px;
    font-size: 20px;
    color: #b81dd4;
    font-weight: 600;
 
}.mark-line-flexibility{
	position: absolute;
    top: 404px;
    z-index: 999999;
    /* border: 1px solid #111; */
    width: 47px;
    left: 321px;
    transform: rotate(0deg);
    background: #111;
    height: 1px;
}.mark-text-stability{
position: absolute;
    left: 304px;
    top: 31px;
    font-size: 20px;
    width: 100px;
    color: #751da9;
    font-weight: bold;
}.mark-line-stability{
		position: absolute;
		top: 45px;
		z-index: 999999;
		/* border: 1px solid #111; */
		width: 95px;
		left: 206px;
		transform: rotate(0deg);
		height: 1px;
		background: #111;
}.mark-text-mobility{
	position: absolute;
    left: 270px;
    top: 31px;
    font-size: 20px;
    width: 100px;
    font-weight: 600;
    color: #0b1d67;
}.mark-line-mobility{
		position: absolute;
		top: 44px;
		z-index: 999999;
		/* border: 0.5px solid; */
		width: 117px;
		left: 144px;
		transform: rotate(0deg);
		height: 1px;
		background: #111;
}
.box-matrix{}
.box-line-flexibility{background: #b81dd4;  padding: 10px;    display: inline-block;}
.box-line-stability{background:#751da9;  padding: 10px;    display: inline-block;}
.box-line-mobility{background: #0b1d67;  padding: 10px;    display: inline-block;}
.box-text-flexibility{display: inline-block;  vertical-align: top; padding: 0px 5px;}
.box-text-flexibility span{ font-size: 15px;  color: #b81dd4;  font-weight: 700; }
.box-text-flexibility.stability span{ font-size: 15px;  color: #751da9;  font-weight: 700; }
.box-text-flexibility.mobility span{ font-size: 15px;  color: #0b1d67;  font-weight: 700; }
.md-tittle-box-add	 {    padding: 22px 10px;
    border: 2px dashed #121d6c;
    margin: 20px 10px;
    border-radius: 20px;}
.md-tittle-box-add	.md-tittle { font-size: 50px;    text-align: center;    }
.md-tittle-box-add-blank{    /* background: #c6c6c6; */   padding: 42px 10px;   margin: 10px 5px;}
.que-image.height img{    width: auto;}
.checkout {
    margin: 30px  0px;
    border: 1px solid #7d7878;
    border-radius: 4px;
    box-shadow: 0px 11px 31.5px 3.5px rgb(0 0 0 / 10%);
    background: #fff;
    padding: 30px  0px;
}