.pd {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    .lpa {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .msc {
            margin-right: 20px;
        }

        .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 200px;
            justify-content: center;
            margin: 20px;
            margin-left: 0;
            border-radius: 12px;

            h6,
            h2 {
                margin: 0;
            }
        }

        .m {

            border: solid 2px #df38356b;

            h2 {
                color: #df38356b;
            }

        }

        .a {

            border: solid 2px #df38359a;

            h2 {
                color: #df38359a;
            }

        }

        .h {

            border: solid 2px #df3735;

            h2 {
                color: #df3735;
            }

        }
    }

    .data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;


        .lr {
            background-color: #a8a8a886;
            border-radius: 12px;
            margin-bottom: 20px;
            padding: 20px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;

            .right {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 250px;
                text-align: left;

                h3,
                h6 {
                    margin: 0;
                    color: #df3735;

                }

                img {
                    margin-right: 20px;
                }
            }
        }

        .ppo {
            background-color: #df3735;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 680px;

            h3 {
                width: 50%;
                margin: 0;
                text-align: left;
                color: #fff;
            }
        }
    }
}

.plr {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.bai{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 10% 0;

    .batch{

        .data{
            display: flex;
            align-items: center;
            border: solid 2px #df383577;
            margin-bottom: 10%;
            border-radius: 20px;
            background-color: #df383523;
            height: 50px;
            padding-right: 20px;

            .cer{
                height: 60px;
                width: 60px;
                border-radius: 50%;
                background-color: #df3735;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 10px;
                margin-left: -10px;
            }

            h5{
                margin: 0;
                color: #df3735;
            }
        }
    }
}













.progressbarr {
    position: relative;
    width: 170px;
    height: 170px;
    margin: 1em;
    transform: rotate(-90deg);
}

.progressbar {
    position: relative;
    width: 170px;
    height: 170px;
    margin: 7% 2%;

    h5 {
        width: 100%;
        text-align: center;
        margin: 0;
    }
}

.progressbar__svg {
    position: relative;
    width: 100%;
    height: 100%;
}

.progressbar__svg-circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 10;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    stroke: white;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}

.shadow-html {
    filter: drop-shadow(0 0 5px #df3735);
}


.circle-html {
    -webkit-animation: anim_circle-html 1s ease-in-out forwards;
    animation: anim_circle-html 1s ease-in-out forwards;
}

.shadow-css {
    filter: drop-shadow(0 0 5px #df3735);
}

.circle-css {
    -webkit-animation: anim_circle-css 1s ease-in-out forwards;
    animation: anim_circle-css 1s ease-in-out forwards;
}

.circle-scss {
    -webkit-animation: anim_circle-scss 1s ease-in-out forwards;
    animation: anim_circle-scss 1s ease-in-out forwards;
}

.progressbar__textr {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.25em 0.5em;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 0.25em;
    transform: translate(-50%, -50%) rotate(90deg);
}

.progressbar__text {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.25em 0.5em;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 0.25em;
    transform: translate(-50%, -50%);
}

@-webkit-keyframes anim_circle-html {
    to {
        stroke-dashoffset: 162;
    }
}

@keyframes anim_circle-html {
    to {
        stroke-dashoffset: 162;
    }
}

@-webkit-keyframes anim_circle-css {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes anim_circle-css {
    to {
        stroke-dashoffset: 0;
    }
}