/* Start Spinner popup */

    .loader-card {
        border-radius: 32px;
        background: #FFF;
        width: 705px;
        height: 399px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        overflow: hidden;
        padding: 16px;
    }

    .pu-backdrop, .pu-backdrop-submission {
        height: 100vh;
        width: 100vw;
        position: fixed;
        background: rgba(32, 31, 30, 0.70);
        z-index: 999999;
        top: 0;
        left: 0;
        display: flex;
        padding: 32px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
    }

    .pu-spinner-container {
        display: flex;
        width: 368px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin-top: 105px;
        z-index: 1;
    }

    .pu-spinner__Tail {
        stroke: #0f6cbd;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
        stroke-linecap: round;
        animation-timing-function: cubic-bezier(0.33,0,0.67,1);
        animation-iteration-count: infinite;
        animation-duration: 1.5s;
        animation-name: f1v1ql0f;
    }

    .pu-spinner svg circle {
        r: 14.5px;
        stroke-width: 3px;
        fill: none;
        cy: 50%;
        cx: 50%;
    }

    .pu-spinner__Track {
        stroke: #b4d6fa;
    }

    .pu-spinner svg {
        width: 32px;
        height: 32px;
        background-color: transparent;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-duration: 3s;
        animation-name: fb7n1on;
    }



    @keyframes fb7n1on {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes f1v1ql0f {
        0% {
            stroke-dasharray: 1, 150;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -35;
        }

        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -124;
        }
    }

    .pu-spinner__spinner {
        line-height: 0;
    }

    .pu-spinner {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        gap: 8px;
        line-height: 0;
    }

    .pu-spinner-text {
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        text-align: center;
    }

    .loader-card > img {
        position: absolute;
        bottom: 6px;
        left: 15.5px;
    }

    /* End Spinner popup */

    @media (max-width: 991px) {
        .create-dev-env {
            flex-direction: column;
        }

        .how-it-works-details {
            gap: 32px;
        }

        .how-it-works-step:nth-child(odd):not(:last-child):after {
            left: 77%;
            background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22101%22%20height%3D%2222%22%20viewBox%3D%220%200%20101%2022%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M100.512%201.63894L98.6152%207.09203L94.841%202.72295L100.512%201.63894ZM77.6585%2015.5622L77.4839%2015.0937L77.6585%2015.5622ZM50.3485%2020.3362L50.3523%2019.8362L50.3485%2020.3362ZM23.2513%2015.1447L23.0679%2015.6098L23.2513%2015.1447ZM1.35027%200.518378C3.64504%202.76993%206.13614%204.85532%208.79838%206.75806L8.21691%207.57163C5.51357%205.63951%202.98258%203.52091%200.649918%201.23217L1.35027%200.518378ZM14.6557%2010.4931C17.4468%2012.0747%2020.3807%2013.4752%2023.4348%2014.6796L23.0679%2015.6098C19.9711%2014.3886%2016.995%2012.9681%2014.1627%2011.3631L14.6557%2010.4931ZM23.4348%2014.6796C26.5689%2015.9155%2029.8037%2016.9349%2033.109%2017.7317L32.8747%2018.7038C29.525%2017.8963%2026.2459%2016.8631%2023.0679%2015.6098L23.4348%2014.6796ZM40.2315%2019.0882C43.5673%2019.5589%2046.9505%2019.8101%2050.3523%2019.8362L50.3446%2020.8362C46.8987%2020.8098%2043.4714%2020.5553%2040.0917%2020.0784L40.2315%2019.0882ZM50.3523%2019.8362C53.7642%2019.8624%2057.1672%2019.662%2060.5319%2019.24L60.6563%2020.2322C57.2479%2020.6597%2053.8008%2020.8627%2050.3446%2020.8362L50.3523%2019.8362ZM67.7096%2017.9904C71.0384%2017.2453%2074.3065%2016.278%2077.4839%2015.0937L77.8331%2016.0307C74.6125%2017.2311%2071.3007%2018.2114%2067.9281%2018.9662L67.7096%2017.9904ZM77.4839%2015.0937C80.5938%2013.9345%2083.5918%2012.5769%2086.4543%2011.0352L86.9285%2011.9156C84.0252%2013.4793%2080.9854%2014.8558%2077.8331%2016.0307L77.4839%2015.0937ZM92.4685%207.38994C93.9597%206.3775%2095.4027%205.3103%2096.7932%204.19092L97.4203%204.96988C96.0084%206.10648%2094.5436%207.18979%2093.0302%208.21727L92.4685%207.38994ZM100.512%201.63894L96.3458%2012.4082L89.1023%203.41564L100.512%201.63894ZM77.6585%2015.5622L77.3092%2014.6252L77.6585%2015.5622ZM50.3485%2020.3362L50.3562%2019.3362L50.3485%2020.3362ZM23.2513%2015.1447L22.8845%2016.075L23.2513%2015.1447ZM1.70045%200.161482C3.97627%202.39445%206.44742%204.46322%209.08912%206.35128L7.92618%207.97841C5.20229%206.03161%202.65135%203.8964%200.29974%201.58907L1.70045%200.161482ZM14.9022%2010.0581C17.6727%2011.6281%2020.5855%2013.0185%2023.6182%2014.2144L22.8845%2016.075C19.7663%2014.8453%2016.7691%2013.4148%2013.9162%2011.7981L14.9022%2010.0581ZM23.6182%2014.2144C26.7304%2015.4417%2029.943%2016.4541%2033.2262%2017.2456L32.7575%2019.1899C29.3856%2018.3771%2026.0844%2017.3369%2022.8845%2016.075L23.6182%2014.2144ZM40.3013%2018.5931C43.6152%2019.0607%2046.9763%2019.3103%2050.3562%2019.3362L50.3408%2021.3362C46.8728%2021.3096%2043.4234%2021.0535%2040.0219%2020.5735L40.3013%2018.5931ZM50.3562%2019.3362C53.746%2019.3623%2057.1268%2019.1631%2060.4697%2018.7439L60.7186%2020.7283C57.2882%2021.1585%2053.8191%2021.3629%2050.3408%2021.3362L50.3562%2019.3362ZM67.6004%2017.5024C70.9073%2016.7623%2074.1535%2015.8014%2077.3092%2014.6252L78.0077%2016.4992C74.7655%2017.7077%2071.4318%2018.6944%2068.0373%2019.4542L67.6004%2017.5024ZM77.3092%2014.6252C80.398%2013.4739%2083.3751%2012.1256%2086.2172%2010.595L87.1655%2012.3558C84.2419%2013.9305%2081.1812%2015.3164%2078.0077%2016.4992L77.3092%2014.6252ZM92.1877%206.97627C92.4366%206.80726%2092.6842%206.63673%2092.9303%206.46467L94.0761%208.10398C93.8225%208.28122%2093.5675%208.45688%2093.3111%208.63094L92.1877%206.97627Z%22%20fill%3D%22%238661C5%22%2F%3E%0A%3C%2Fsvg%3E);
        }

        .how-it-works-step:nth-child(even):not(:last-child):after {
            left: 77%;
            background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22101%22%20height%3D%2225%22%20viewBox%3D%220%200%20101%2025%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M100.601%2022.792L99.0456%2017.2321L95.0085%2021.3594L100.601%2022.792ZM77.8302%207.17491L77.6372%207.63617L77.8302%207.17491ZM23.3737%207.71627L23.1712%207.2591L23.3737%207.71627ZM1.3687%2024.1193C3.65065%2021.6201%206.12205%2019.3028%208.75846%2017.185L8.13221%2016.4053C5.456%2018.5551%202.94705%2020.9076%200.630218%2023.4451L1.3687%2024.1193ZM14.6437%2012.9637C17.4836%2011.152%2020.4691%209.54947%2023.5761%208.17345L23.1712%207.2591C20.0182%208.65549%2016.9883%2010.2818%2014.1059%2012.1206L14.6437%2012.9637ZM23.5761%208.17345C26.6994%206.79026%2029.9201%205.64717%2033.2086%204.75062L32.9456%203.78583C29.6088%204.69554%2026.3407%205.85544%2023.1712%207.2591L23.5761%208.17345ZM40.3497%203.20894C43.7087%202.66972%2047.1142%202.37993%2050.5367%202.34591L50.5268%201.34596C47.0544%201.38048%2043.5993%201.67449%2040.1912%202.22158L40.3497%203.20894ZM50.5367%202.34591C53.9614%202.31187%2057.3753%202.53417%2060.7491%203.00708L60.8879%202.01676C57.465%201.53696%2054.0013%201.31142%2050.5268%201.34596L50.5367%202.34591ZM67.9269%204.40705C71.2351%205.23783%2074.4818%206.31615%2077.6372%207.63617L78.0231%206.71364C74.8213%205.3742%2071.527%204.28009%2068.1704%203.43717L67.9269%204.40705ZM77.6372%207.63617C80.7789%208.95047%2083.8047%2010.4937%2086.6901%2012.2492L87.2098%2011.3949C84.2815%209.61333%2081.2111%208.04728%2078.0231%206.71364L77.6372%207.63617ZM92.6794%2016.3526C94.187%2017.5104%2095.6443%2018.732%2097.047%2020.0143L97.7217%2019.2762C96.2979%2017.9746%2094.8187%2016.7346%2093.2885%2015.5595L92.6794%2016.3526ZM100.601%2022.792L97.1167%2011.7834L89.3253%2020.3056L100.601%2022.792ZM77.8302%207.17491L77.4442%208.09744L77.4442%208.09744L77.8302%207.17491ZM23.3737%207.71627L22.9687%206.80193L23.3737%207.71627ZM1.73794%2024.4565C4.00246%2021.9763%206.45507%2019.6766%209.07159%2017.5748L7.81908%2016.0155C5.12298%2018.1813%202.59525%2020.5514%200.260977%2023.1079L1.73794%2024.4565ZM14.9126%2013.3852C17.7313%2011.587%2020.6945%209.99646%2023.7786%208.63062L22.9687%206.80193C19.7927%208.2085%2016.7406%209.84673%2013.837%2011.6991L14.9126%2013.3852ZM23.7786%208.63062C26.8788%207.25766%2030.0757%206.12299%2033.3401%205.23301L32.8141%203.30344C29.4532%204.21972%2026.1613%205.38804%2022.9687%206.80193L23.7786%208.63062ZM40.4289%203.70262C43.7634%203.16734%2047.144%202.87966%2050.5417%202.84589L50.5218%200.845984C47.0245%200.880752%2043.5446%201.17687%2040.1119%201.7279L40.4289%203.70262ZM50.5417%202.84589C53.9414%202.81209%2057.3305%203.03278%2060.6797%203.50224L60.9573%201.5216C57.5098%201.03836%2054.0213%200.811196%2050.5218%200.845984L50.5417%202.84589ZM67.8051%204.892C71.0892%205.71671%2074.3121%206.78712%2077.4442%208.09744L78.2161%206.25238C74.9911%204.90322%2071.673%203.80122%2068.2922%202.95222L67.8051%204.892ZM77.4442%208.09744C80.5628%209.40207%2083.5662%2010.9339%2086.4302%2012.6763L87.4697%2010.9677C84.52%209.17314%2081.4271%207.59568%2078.2161%206.25238L77.4442%208.09744ZM92.3749%2016.7491C92.6973%2016.9968%2093.0175%2017.2473%2093.3352%2017.5008L94.5824%2015.9373C94.255%2015.6762%2093.9252%2015.418%2093.593%2015.1629L92.3749%2016.7491Z%22%20fill%3D%22%238661C5%22%2F%3E%0A%3C%2Fsvg%3E);
        }
    }

    @media (max-width: 768px) {
        .pu-panel {
            padding: 40px 16px;
        }

        .loader-card {
            width: 450px;
        }
    }

    /* END LEARNER PAGE TABS EXPERIENCE */

    .assessment-tab-container {
        
        padding: 24px 32px 48px 32px;
        display: flex;
        /*gap: 32px;*/
        flex-direction: column;
        background: linear-gradient(180deg, rgba(242, 242, 242, 0.4) 0%, rgba(242, 242, 242, 0) 100%), linear-gradient(132.01deg, rgba(255, 255, 255, 0.6) -1.07%, rgba(255, 255, 255, 0) 100%);
        border-radius: 8px;
        border: 1px solid rgba(242, 242, 242, 0.40);
        background: linear-gradient(132deg, rgba(255, 255, 255, 0.60) -1.07%, rgba(255, 255, 255, 0.00) 100%);
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(2px);
    }

    .assessment-header {
        display: flex;
        height: 40px;
        padding-bottom: 16px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        border-bottom: 1px solid #CBCBCB;
        justify-content: space-between;
    }

    .assessment-count-title {
        font-family: Segoe UI;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0px;
        text-align: left;
        font-style: normal;
        color: #000;
        margin-bottom: 0px;
    }

    .ready-for-assignment {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .assess-heading {
        color: #000;
        text-align: center;
        font-family: Segoe UI;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 32px;
        margin: 0px;
    }

    .assess-desc {
        color: #000;
        font-family: Segoe UI;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        margin: 0px;
        line-break: auto;
        text-align: left;
    }

    .pp-mt-8px {
        margin-top: 8px;
    }

    .pp-mt-12px {
        margin-top: 12px;
    }

    .pp-mt-16px {
        margin-top: 16px;
    }

    .pp-mt-48px {
        margin-top: 48px;
    }

    .assess-btn {
        color: #ffffff;
        font-family: Segoe UI;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        display: flex;
        padding: 5px 20px;
        justify-content: center;
        align-items: center;
        border-radius: var(--Medium, 4px);
        background: var(--communication-blue-primary-0078-d-4, #0078D4);
        border: none;
    }

    .champ-feedback-img {
        background: url('https://app.smartcontext.ai/default/https://powerup.microsoft.com/img_champ_feedback.png');
        width: 280px;
        height: 280px;
        flex-shrink: 0;
        margin-right: 64px;
    }

    .assessment-body{
        padding-top: 32px;
    }

    .assessment-body-container {
        display: flex;
        justify-content: space-between
    }

    .evaluate-learner-assessment {
        display: flex;
        gap: 32px;
        padding-top: 16px;
    }

    .assessment-review-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        width: 70%;
    }

    .assessment-evaluate-criteria {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        display: flex;
        padding: 16px 8px 16px 16px;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        background: #F2F2F2;
        width: 30%;
    }

    .assessment-criteria-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .assessment-video {
        max-width: 100%;
        width: 100%;
        height: 344px;
    }

    .assessment-headings-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .champ-feedback-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .evaluate-headings {
        color: #000;
        text-align: center;
        font-family: Segoe UI;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        margin: 0px;
    }

    .evaluate-criteria {
        color: #000;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: Segoe UI;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        display: flex;
        justify-content: space-between;
    }

    .assessment-evaluate-criteria > ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
        text-align: left;
        display: flex;
        gap: 10px;
        flex-direction: column;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 41px;
        height: 22px;
    }

    .switch:focus {
        border: 1px solid black;
    }

    .switch input:focus {
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%),0 0 8px #323130;
        border-color: #323130 !important; /* Border color when focused */
    }

    .switch:focus-within .slider {
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px #323130;
        border-color: #323130; /* Applying border color to slider */
    }


    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: .4s;
        transition: .4s;
        /*border: 1px solid #616161;*/
        border: 1px solid #948e8e;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 16px;
        left: 2px;
        bottom: 3px;
        background-color: #948e8e;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #0F6CBD;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #0F6CBD;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(19px);
        -ms-transform: translateX(19px);
        transform: translateX(19px);
        background-color: #FFFFFF;
        top: 2.4px;
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 12px;
        forced-color-adjust: none;
    }

    .slider.round:before {
        border-radius: 50%;
        forced-color-adjust: none;
    }

    .reject-assessment-btn {
        padding: 5px 20px;
        color: #FFFFFF;
        font-family: Segoe UI;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        border: none;
        line-height: 20px;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        background: #A80000;
    }

    .submit-assessment-btn {
        color: #FFFFFF;
        font-family: Segoe UI;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        padding: 5px 20px;
        justify-content: center;
        align-items: center;
        border-radius: var(--Medium, 4px);
        background: #0078D4;
        border: none;
    }

    .champ-badge-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .ready-for-new-assessment-btn {
        border: none;
        padding: 5px 20px;
        border-radius: 4px;
        background: #0078D4;
        color: #FFFFFF;
        font-family: Segoe UI;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }

    .need-break-btn {
        border-radius: 4px;
        border: 1px solid #D1D1D1;
        background: #ffffff;
        padding: 5px 20px;
        color: #242424;
        font-family: Segoe UI;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }

    .badge-complete-desc {
        color: #000;
        text-align: center;
        font-family: Segoe UI;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }

    .evaluate-criteria>.criteria-text{
        width: 75%;
    }
    .submission-success{
         color: green;
    }

    .assessment-actions{
        display: flex;
        gap: 8px;
    }

    .error-message{
        margin-right: 20px;
        display: flex;
        padding: 10px 12px;
        flex-direction: row;
        align-items: center;
        align-self: stretch;
        border-radius: 4px;
        border: 1px solid #F4BFAB;
        background: #FDF6F3;
        gap: 8px;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }

    textarea {
      resize: none;
      width: 100%;
    }

    
@media (min-width: 330px), (max-width: 639px){
.reject-assessment-btn,.submit-assessment-btn{
    text-wrap: nowrap;   
    height: 100%;
}
}
@media (min-width: 1200px){
    .final-app-assessment{
    width: 1120px;
    }
}