*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --EC-MetricBoard-v1-green:#12B886;
    --EC-MetricBoard-v1-purple:#9C36B5;
    --EC-MetricBoard-v1-red:#F03E3E;
    --EC-MetricBoard-v1-orange:#FAB005;
    --EC-MetricBoard-v1-main:#343A40;
}
.EC-MetricBoard-v1{
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__items{
    display: flex;
    gap: 15px;
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__item{
    display: flex;
    align-items: center;
    padding: 13px 9px 14px 9px;
    border-radius: 10px;
    width: 100%;
    max-width: 290px;
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__item.green{
    border: 1px solid var(--EC-MetricBoard-v1-green);
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__item.orange{
    border: 1px solid var(--EC-MetricBoard-v1-orange);
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__item.purple{
    border: 1px solid var(--EC-MetricBoard-v1-purple);
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__item.red{
    border: 1px solid var(--EC-MetricBoard-v1-red);
}
.EC-MetricBoard-v1 i{
    margin-right: 18px;
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-score ,
.EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-average ,
.EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-deviation,
.EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-deviation-gray {
    background-repeat: no-repeat;
    background-position: center;
    width: 49px;
    height: 49px;
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-score {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 49 49' fill='none'%3E%3Cpath d='M8.57019 22.1594V32.1537C8.57019 35.8136 8.57019 35.8136 12.029 38.1463L21.5407 43.6362C22.9685 44.4607 25.3012 44.4607 26.7289 43.6362L36.2407 38.1463C39.6995 35.8136 39.6995 35.8136 39.6995 32.1537V22.1594C39.6995 18.4995 39.6995 18.4995 36.2407 16.1668L26.7289 10.677C25.3012 9.85247 22.9685 9.85247 21.5407 10.677L12.029 16.1668C8.57019 18.4995 8.57019 18.4995 8.57019 22.1594Z' stroke='%2312B886' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M35.1949 15.3411V10.0523C35.1949 6.03047 33.1839 4.01953 29.1621 4.01953H19.1074C15.0855 4.01953 13.0746 6.03047 13.0746 10.0523V15.2003' stroke='%2312B886' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25.4017 22.1035L26.5479 23.8932C26.7289 24.1748 27.1311 24.4563 27.4328 24.5367L29.4839 25.0596C30.7508 25.3813 31.0927 26.4672 30.2682 27.4727L28.9208 29.1015C28.7198 29.363 28.5589 29.8255 28.579 30.1472L28.6996 32.2587C28.7801 33.5658 27.8551 34.2294 26.6485 33.7468L24.6778 32.9625C24.3761 32.8419 23.8734 32.8419 23.5718 32.9625L21.601 33.7468C20.3945 34.2294 19.4695 33.5457 19.5499 32.2587L19.6705 30.1472C19.6907 29.8255 19.5298 29.3429 19.3287 29.1015L17.9814 27.4727C17.1569 26.4672 17.4987 25.3813 18.7656 25.0596L20.8168 24.5367C21.1385 24.4563 21.5407 24.1546 21.7016 23.8932L22.8478 22.1035C23.5718 21.0176 24.6979 21.0176 25.4017 22.1035Z' stroke='%2312B886' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-average {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 49 49' fill='none'%3E%3Cpath d='M13.8372 36.4986V32.3359' stroke='%239C36B5' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M24.1313 36.4971V28.1719' stroke='%239C36B5' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M34.4255 36.5002V23.9922' stroke='%239C36B5' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M34.429 11.7617L33.504 12.8476C28.3761 18.8402 21.4987 23.0833 13.837 24.9937' stroke='%239C36B5' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M28.5342 11.7617H34.4262V17.6336' stroke='%239C36B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.0985 44.2382H30.1641C40.2188 44.2382 44.2407 40.2164 44.2407 30.1617V18.0961C44.2407 8.0414 40.2188 4.01953 30.1641 4.01953H18.0985C8.04384 4.01953 4.02197 8.0414 4.02197 18.0961V30.1617C4.02197 40.2164 8.04384 44.2382 18.0985 44.2382Z' stroke='%239C36B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-deviation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 49 49' fill='none'%3E%3Cpath d='M24.1314 30.1617C31.628 30.1617 37.7052 24.3096 37.7052 17.0906C37.7052 9.87165 31.628 4.01953 24.1314 4.01953C16.6348 4.01953 10.5576 9.87165 10.5576 17.0906C10.5576 24.3096 16.6348 30.1617 24.1314 30.1617Z' stroke='%23F03E3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.1216 27.1862L15.1016 42.0269C15.1016 43.8367 16.3685 44.7215 17.937 43.9775L23.3263 41.4236C23.7687 41.2024 24.5127 41.2024 24.9551 41.4236L30.3646 43.9775C31.913 44.7014 33.2 43.8367 33.2 42.0269V26.8242' stroke='%23F03E3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.3069 21.1968L20.1882 14.0781' stroke='%23F03E3E' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.2283 14.1602L20.1096 21.2789' stroke='%23F03E3E' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-deviation-gray {
    background-image: url("data:image/svg+xml,%3Csvg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8382 25.3364C27.0687 25.3364 32.1196 20.4726 32.1196 14.4729C32.1196 8.47314 27.0687 3.60938 20.8382 3.60938C14.6077 3.60938 9.55688 8.47314 9.55688 14.4729C9.55688 20.4726 14.6077 25.3364 20.8382 25.3364Z' stroke='%23868E96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.3502 22.8633L13.3335 35.1976C13.3335 36.7018 14.3864 37.4372 15.69 36.8188L20.1691 34.6962C20.5368 34.5124 21.1552 34.5124 21.5229 34.6962L26.0187 36.8188C27.3056 37.4204 28.3753 36.7018 28.3753 35.1976V22.5625' stroke='%23868E96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__info-item{
    border-left: 0.5px solid #343A40;
    padding-left: 15px;
}
.EC-MetricBoard-v1 p {
    color: var(--EC-MetricBoard-v1-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 31px;
    margin-bottom: 0;
}
.EC-MetricBoard-v1 span {
    font-size: 22px;
    font-weight: 700;
    line-height: 44px;
    display: inline-block;
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__item.green span{
    color: var(--EC-MetricBoard-v1-green);
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__item.purple span{
    color: var(--EC-MetricBoard-v1-purple);
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__item.orange span{
    color: var(--EC-MetricBoard-v1-orange);
}
.EC-MetricBoard-v1 .EC-MetricBoard-v1__item.red span{
    color: var(--EC-MetricBoard-v1-red);
}
/* **** tablet style *** */
@media screen and (max-width:768px) {
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__item {
        padding: 4px;
    }
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__info-item {
        padding-left: 10px;
    }
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__item {
        max-width: 100%;
    }
    .EC-MetricBoard-v1 p {
        font-size: 14px;
        line-height: 20px;
    }
    .EC-MetricBoard-v1 span {
        font-size: 22px;
        font-weight: 700;
        line-height: 37px;
    }
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-score ,
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-average ,
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-deviation,
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-deviation-gray {
        background-repeat: no-repeat;
        background-position: center;
        width: 39px;
        height: 39px;
    }
    .EC-MetricBoard-v1 i {
        margin-right: 5px;
    }
}
/* ***** mobile style **** */
@media screen and (max-width:576px) {
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__items {
        gap: 15px;
        flex-direction: column;
    }
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-score ,
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-average ,
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-deviation,
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__icon-deviation-gray {
        background-repeat: no-repeat;
        background-position: center;
        width: 49px;
        height: 49px;
    }
    .EC-MetricBoard-v1 .EC-MetricBoard-v1__item {
        padding: 17px 10px 17px 22px;
    }
    .EC-MetricBoard-v1 i {
        margin-right: 12px;
    }
    .EC-MetricBoard-v1 {
        padding: 16px 0;
    }
}

/* ********* RTL style ****** */
[dir="rtl"] .EC-MetricBoard-v1 i {
    margin-right: 0px;
    margin-left: 15px;
}
[dir="rtl"] .EC-MetricBoard-v1 .EC-MetricBoard-v1__info-item {
    border-left: none;
    border-right: 0.5px solid #343A40;
    padding-left: 0px;
    padding-right: 15px;
}
@media screen and (max-width:768px) {
    [dir="rtl"] .EC-MetricBoard-v1 i {
        margin-right: 0px;
        margin-left: 5px;
    }
}
@media screen and (max-width:576px) {
    [dir="rtl"] .EC-MetricBoard-v1 .EC-MetricBoard-v1__item {
        padding: 17px 16px 17px 10px;
        width: auto;
    }
    [dir="rtl"] .EC-MetricBoard-v1 i {
        margin-right: 0px;
        margin-left: 18px;
    }
}