@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
.section-account-counselor .section-account-one .form-password{display: block;}
.header-counselor{position: relative;}
.header-counselor .topnav{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 34px;
    height: 62px;
    padding-left: 90px;
    box-shadow: rgba(122, 122, 122, 0.15) 1.95px 1.95px 2.6px;
    background: #FFFFFF;
}
.header-counselor nav .content-nav1 a{
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    gap: 13px;
    display: flex;
    align-items: center;
}

.download-pdf {
    width: 100%;
    justify-content: center;
}

.header-counselor nav .content-nav2 .user{
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
}
.header-counselor nav .content-nav2{
    display: flex;
    align-items: center;
    gap: 32px;
}
.header-counselor nav .content-nav2 img{cursor: pointer;transition: 0.4s;}
.header-counselor nav .content-nav2 img:hover{transform: scale(0.9);}
.header-counselor nav .content-nav2 .fx-content-nav2{
    display: flex;
    align-items: center;
    gap: 11px;
}
.header-counselor nav .content-nav2 .img-content-nav2{position: relative;}
.header-counselor nav .content-nav2 .img-content-nav2 .online{
    position: absolute;
    width: 12px;
    height: 12px;
    background: #34B53A;
    border-radius: 50%;
    right: 0px;
}
.header-counselor .sideNav{
    background: var(--White, #FFF);
    top: 0px;
    position: fixed;
    width: 60px;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 23px 0px;
    justify-content: start;
    flex-direction: column;
    box-shadow: rgba(122, 122, 122, 0.15) 1.95px 1.95px 2.6px;
    z-index: 90;
}
.header-counselor .sideNav ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding-left: 0px;
    margin-left: 0px;
    padding-top: 120px;
}
.header-counselor .sideNav ul li{opacity: 0.4;transition: 0.4s;}
.header-counselor .sideNav ul li:hover{opacity: 0.8;transform: scale(1.1);}
.header-counselor .sideNav ul li.active{opacity: 1;}
.main-counselor{ background: #F8F8F8;min-height: 90vh;max-height: 100%;position: relative;}
.main-home{padding-top: 44px;padding-bottom: 3rem;padding-left: 99px;}
.main-home .home-one{display: flex;align-items: start;gap: 41px;}
.home-one .home-one-boxs{
    display: flex;
    flex-direction: column;
    gap:29px;
    width: inherit;
}
.home-one .home-one-boxs .home-one-box{
    height: max-content;
    width: 100%;
    padding: 21px;
    border-radius: 7.047px;
    background: var(--counselor-gray-500, #FFF);
}
.home-one .home-one-boxs .home-one-box h5{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 15.502px;
    font-weight: 500;
    margin-bottom: 7.5px;
}
.home-one .home-one-boxs .home-one-box h6{
    color: var(--Blach, #000);
    font-family: 'DM Sans';
    font-size: 9.865px;
    font-weight: 400;
    line-height: 14.093px;
    margin-bottom: 18px;
    opacity: 0.4;
}
.home-one .home-one-boxs .home-one-box p{
    text-align: end;
    color: var(--Dark-Green, #076076);
    font-family: 'DM Sans';
    font-size: 9.865px;
    font-weight: 400;
    line-height: 14.093px;
    margin-bottom: 0px;
}
.home-one .home-one-boxs .home-one-box .user{
    width: 29.891px;
    height: 29.186px;
    object-fit: cover;
    border-radius: 50%;
}
.notification-circle-counselor{
    top: 23px;
    right: 111px;
    left: unset;
}
.progress-blue {
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border: none;
    border-radius: 10px;
    height: 5.637px !important;
    visibility: visible !important;
}
.progress-blue::-webkit-progress-bar {
    background-color: #f0f0f0;
}
.progress-blue::-webkit-progress-bar,
.progress-blue::-webkit-progress-value {
    border-radius: 10px;
}
.progress-blue::-moz-progress-bar {
    border-radius: 10px;
}
.progress-blue1::-webkit-progress-value {
    background: #56b6ff !important;
}
.home-one .home-two-boxs{
    border-radius: 10px;
    background: var(--counselor-gray-500, #FFF);
    width: inherit;
    padding: 30px;
}
.home-one .home-one-box .imgs-home-box{margin-top: 10px;}
.home-one .home-two-head{
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.imgs-home-box .more-skill-radial{
    border-radius: 50%;
    display: flex;
    background: #ADD5D1;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 29px;
    height: 29px;
    cursor: pointer;
}
.imgs-home-box .more-skill-radial span{
    color: white;
    font-family: 'Gotham';
    font-size: 10px;
    font-weight: 400;
    letter-spacing: -1.9px;
    letter-spacing: 1px;
}
.home-one .home-two-head h1{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 22px;
    font-weight: 500;
}
.home-one .home-two-head .dropSelect{position: relative;}
.home-one .home-two-head .dropSelect .fx-dropSelect{
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #E1E1E1;
    width: 154px;
    justify-content: space-between;
    height: 37px;
    padding: 0 14px;
    cursor: pointer;
}
.home-one .home-two-head .dropSelect .fx-dropSelect input{
    color: #000;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    width: 100%;
    cursor: pointer;
}
.home-one .home-two-head .dropSelect .dropdown-select{
    width: 100%;
    position: absolute;
    padding: 24px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: rgba(164, 164, 164, 0.2) 0px 2px 8px 0px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    display: none;
}
.home-one .home-two-head .dropSelect .dropdown-select a{
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    cursor: pointer;
}
.home-one .home-two-boxs .p-last{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    opacity: 0.4;
    margin-top: 24px;
    margin-bottom: 0px;
}
.row-top{padding-top: 49px;}
.progressbar-div{
    display: flex;

    flex-direction: column;
    margin-bottom: 44px;
}
.compareButton {
    border-radius: 10px;
    background: #27ADA0;
    display: flex;
    padding: 14px 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--White, var(--counselor-gray-500, #FFF));
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 700;
    height: 39px;
    align-self: end;
    margin-left: auto;
}
 @keyframes growProgressBar {
  0%, 11% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
} 
@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

div[role="progressbar"] {
    --size: 126px;
    --fg: #00C2CC;
    --bg: #E1F4F2;
    --pgPercentage: var(--value);
    animation: growProgressBar 1s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
            radial-gradient(closest-side, #E1F4F2 89%, transparent 0 99.9%, #E1F4F2 0),
            conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
;
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
}

.progressbar-div .fx-progressbar{margin-top: 8px;gap: 8px;}
.progressbar-div .fx-progressbar h2{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0px;
}
.progressbar-div .fx-progressbar p{
    color: var(--Dark-Green, #076076);
    font-family: 'Gotham';
    font-size: 12px;
    font-weight: 400;
    line-height: 15px; /* 125% */
    margin-bottom: 0px;
}
/*Calendar css*/
.fc-center div{
    display: flex;
    width: 400px;
    justify-content: space-between;
}
/*Calendar css*/
/* Students Page */
.section-students{padding-left: 99px;}
.section-students .fx-students-filter{gap: 18px;padding-top: 23px;padding-bottom: 35px;}
.dropFilter-st{position: relative;}
.dropFilter-st label{
    color: #000;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    margin-bottom: 4px;
}
.dropFilter-st input{
    color: #000;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    width: 100%;
    background-color: transparent;
    cursor: pointer;
}
.fx-dropFilter{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #E1E1E1;
    padding: 6px 14px;
    width: 232px;
    height: 37px;
    cursor: pointer;
}
.dropdown-filter{
    width: 100%;
    position: absolute;
    padding: 24px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: rgba(164, 164, 164, 0.2) 0px 2px 8px 0px;
    display: none;
    z-index: 101;
}
.dropFilter-st .dropdown-filter a{
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
}
.cards-students{padding-right: 34px;}
.section-students .card-student{
    display: inline-flex;
    padding: 25px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 10px;
    background: var(--colors-white-100, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    height: 231px;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 49px;
}
.section-students .card-student .txt-card-student{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.section-students .card-student .txt-card-student p{
    color: var(--Gary, #A1A1A1);
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
}
.h4-student{
    color: var(--Green, var(--counselor-primary, #27ADA0));
    font-family: 'Gotham';
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.h1-student{
    color: #000;
    font-family: 'Gotham';
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0px;
}
.section-student-detail .student-detail-head{
    height: fit-content;
    background-color: #fff;
    width: 100%;
    padding-top: 19px;
    padding-left: 99px;
    padding-right: 34px;
}
.section-student-detail .student-detail-head .fx-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-student-detail .student-detail-head .fx-head img{
    width: 128.906px;
    height: 122px;
}
.section-student-detail .student-detail-head .tabs-students{
    display: flex;
    gap: 45px;
}
.section-student-detail .student-detail-head .tabs-students a{
    color: var(--Gray-20, #C2C2C2);
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    padding:0px 10px 10px 10px;
}
.section-student-detail .student-detail-head .tabs-students a.active{color: var(--Blach, #000);font-weight: bold;}
.section-student-detail .student-detail-head .tabs-students a.active::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 3px solid var(--Blach, #000);
}
.section-student-detail .tab-content{
    padding-left: 99px;
    padding-right: 34px;
    padding-top: 29px;
    padding-bottom: 3rem;
}
.section-student-detail .tab-student-one{
    display: flex;
    align-items: start;gap: 23px;
}
.section-student-detail .tab-student-box{
    border-radius: 8.75px;
    background: var(--counselor-gray-500, #FFF);
    width: 285px;
    height: max-content;
    padding: 28px 20px;
}
.fx-student-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 43px;
}
.fx-student-box h2{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 19.25px;
    font-weight: 500;
}
.fx-student-box button{
    background-color: transparent;
    opacity: 0.5;
}
.section-student-detail .list-tab-student{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.section-student-detail .list-tab-student .student-row{
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom:1px solid #DDD;
}
.section-student-detail .list-tab-student .student-row p{
    margin-bottom: 0px;
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 15.25px;
    font-weight: 400;
    line-height: 17.5px;
}
@property --progress-value {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
@keyframes answered-questions {
    to {
        --progress-value: 25;
    }
}
@keyframes video-progress {
    to {
        --progress-value: 25;
    }
}
.tab-student-box .progress-bar {
    width: 171.5px;
    height: 174.222px;
}
.tab-student-box .progress-bar::before {
    counter-reset: percentage var(--progress-value);
    content: counter(percentage) '%';
    color: var(--Green, var(--counselor-primary, #27ADA0));
    font-family:'DM Sans';
    font-size: 35px;
    font-weight: 500;
}
.tab-student-box .video-watched {
    background:
            radial-gradient(closest-side, #E1F4F2 88%, transparent 83% 100%, #E1F4F2 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E1F4F2 0);
    animation: video-progress 1s 1 forwards;
    margin: auto;
}
.tab-student-box .video-watched::before {
    animation: video-progress 1s 1 forwards;
}
.tab-student-box .fx-color-progress{
    display: flex;
    align-items: center;
    gap: 5.25px;
    margin-top: 49px;
}
.tab-student-box .fx-color-progress div{
    width: 12.25px;
    height: 12.75px;
    border-radius: 50%;
}
.tab-student-two .search-tab{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #C2C2C2;
    width: 147px;
    padding-bottom: 3px;
}
.tab-student-two .search-tab input{width: 100%;background: transparent;}
.tab-student-two .search-tab img{
    width: 13px;
    height: 13px;
}
.tab-student-two .fx-student-img{
    display: flex;
    align-items: center;
    gap: 14px;
}
.tab-student-two .fx-student-img img{cursor: pointer;}
.tab-student-two .student-two-fx{
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 29px;
}
.tab-student-two .student-two-fx .student-two-box{
    width: 18%;
    height: 229px;
    text-decoration: none;
    cursor: pointer;
}
.student-two-fx .box-white-student2 {
    width: 100%;
    height: 154px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.student-two-fx .box-white-student2 .img-name{
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 6px;
}
.student-two-fx .box-white-student2 .img-name h1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: block;
    color: var(--counselor-primary, #27ADA0);
    font-family: 'Gotham';
    font-size: 26px;
    font-weight: 400;
}
.student-two-fx .box-white-student2 .img-name img{
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
}
.student-two-fx .box-white-student2 h5{
    color: #000;
    font-family: 'Gotham';
    font-size: 16.217px;
    font-weight: 700;
}
.student-two-fx .fx-videos-skills{
    gap: 38px;
    border-radius: 6px;
    background: var(--counselor-100, #E1F4F2);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    justify-content: center;
    padding-top: 17px;
    padding-bottom: 15px;
}
.student-two-fx .fx-videos-skills p{
    color: var(--Blach, #000);
    font-family: 'Gotham';
    font-size: 10.811px;
    font-weight: 700;
    margin-bottom: 10px;
}
.videos-student2{
    display: flex;
    flex-direction: column;
}
.videos-student2 span{
    color: #000;
    font-family: 'Gotham';
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
}
.fx-skills-student2{
    display: flex;
    gap: 7px;
}
.fx-skills-student2 .progress-bar {
    width: 23px;
    height: 23px;
}
.fx-skills-student2 .progress-bar::before {
    display: none;
}
.fx-skills-student2 .skill-radial {
    background:
            radial-gradient(closest-side, #E1F4F2 80%, transparent 83% 100%, #E1F4F2 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #fff 0);
    animation: video-progress 1s 1 forwards;
    margin: auto;
}
.fx-skills-student2 .skill-radial::before {
    animation: video-progress 1s 1 forwards;
}
.videos-student2 .progress-blue1::-webkit-progress-value {
    background: #27ADA0 !important;
}
.videos-student2 .progress-blue{width: 51px !important;display: block;height: 4px !important;}
.fx-skills-student2 .more-skill-radial{
    border-radius: 50%;
    border:2px solid  #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 23px;
    height: 23px;
    cursor: pointer;
}
.fx-skills-student2 .more-skill-radial span{
    color: #000;
    font-family: 'Gotham';
    font-size: 10px;
    font-weight: 400;
    letter-spacing: -1.9px;
    letter-spacing: 1px;
}
#progress-content .fx-student-box{padding-bottom: 30px;}
.section-student-detail .fx-student-box2{
    width: 617px;
}
.section-student-detail  .fx-student-box2 .list-tab-student{gap: 21px;}
.section-student-detail  .fx-student-box2 .list-tab-student h6{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 12.483px;
    font-weight: 400;
    line-height: 17.833px;
    margin-bottom: 0px;
}
.section-student-detail  .fx-student-box2 .list-tab-student p{
    color: var(--Dark-Green, #076076);
    font-family: 'DM Sans';
    font-size: 12.483px;
    font-weight: 400;
    line-height: 17.833px;
    margin-bottom: 0px;
}
.section-student-detail  .progress-bar-row {display: flex;flex-direction: column;gap: 8px;}
.section-student-detail  .progress-bar-row .progress-blue1::-webkit-progress-value {
    background: #27ADA0 !important;
}
.section-student-detail  .progress-bar-row .progress-blue{
    width: 100%  !important;
    height: 7.111px !important;
}
.fx-gap-student2{
    margin-top: 28px;
    display: flex;
    gap: 26px;
}
.squiggly-box{
    width: 692px;
    height: 360px;
    border-radius: 10px;
    background: var(--counselor-gray-500, #FFF);
    padding: 30px;
}
.squiggly-box .fx-color-squiggly{
    gap: 40px;
    margin-bottom: 18px;
}
.squiggly-box .fx-color-squiggly .color-squiggly{
    display: flex;
    gap: 6px;
    align-items: center;
}
.squiggly-box .fx-color-squiggly span{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.squiggly-box .fx-color-squiggly  .color-squiggly div{
    border-radius: 50%;
    width: 14px;
    height: 14px;
}
.squiggly-box .fx-student-box{padding-bottom: 0px !important;}
.fx-gap-student2 .top-student{
    border-radius: 10px;
    background: var(--counselor-gray-500, #FFF);
    padding: 30px;
    width: 326px;
    height: 360px;
}
.fx-gap-student2 .top-student .fx-student-box{padding-bottom: 28px;}
.fx-gap-student2 .top-student .fx-student-box button{opacity: 1;}
.fx-gap-student2 .top-student .user{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 3px;
    display: block;
}
.fx-gap-student2 .top-student h5{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 0px;
}
.fx-gap-student2 .top-student span{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 32px;
}
.fx-gap-student2 .top-student .numbers-top-student{gap: 13px;}
.fx-gap-student2 .top-student .numbers-top{
    width: 136px;
    height: 60px;
    border-radius: 11px;
    background: var(--counselor-100, #E1F4F2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.fx-gap-student2 .top-student .numbers-top h6{
    margin-bottom: 0px;
    padding-bottom:0px;
    color: var(--Dark-Green, #076076);
    font-family: 'DM Sans';
    font-size: 22px;
    font-weight: 500;
}
.fx-gap-student2 .top-student .numbers-top p{
    margin-bottom: 0px;
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.student-detail-head .fx-students-1{justify-content: space-between;margin-bottom: 21px;margin-top:8px;}
.student-detail-head .fx-students-2{gap: 145px;}
.student-detail-head .fx-students-3{gap:30px;}
.student-detail-head .fx-students-5{gap: 110px;}
.student-detail-head .fx-students-3 img{
    width: 90px;
    height: 90px;
    border-radius: 90px;
    object-fit: cover;
}

.fx-students-6{gap: 10px;}
.fx-students-6 .border{
    border-radius: 10px;
    border: 1px solid var(--Dark-Green, #076076);
    display: flex;
    padding: 14px 30px;
    align-items: center;
    gap: 10px;
    color: var(--Dark-Green, #076076);
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 700;
}

.fx-students-6 .poke-btn,.fx-students-6 .download-pdf{
    border: 1px solid #27ADA0;
    background: #fff;
    color: #27ADA0;
}

.fx-students-6 .back{
    border-radius: 10px;
    background: var(--Dark-Green, #076076);
    display: flex;
    padding: 14px 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--White, var(--counselor-gray-500, #FFF));
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 700;
}
.p-style{
    color: var(--Blach, #000);
    font-family: 'Gotham';
    font-size: 15.246px;
    font-weight: 700;
}
.fx-students-4 .progress-blue{
    width: 71.923px !important;
    height: 7.051px !important;
}
.fx-students-5 .skills-student2 .progress-bar {
    width: 32.436px;
    height: 32.436px;
}
.fx-students-5 .skills-student2 .progress-bar::before {
    display: none;
}
.fx-students-5 .skills-student2 .skill-radial {
    background:
            radial-gradient(closest-side, #fff 80%, transparent 80% 100%, #fff 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E9E9E9 0);
    animation: video-progress 1s 1 forwards;
    margin: auto;
}
.fx-students-5 .skills-student2 .skill-radial::before {
    animation: video-progress 1s 1 forwards;
}
.content-student-1{
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 35px 53px  35px 21px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}
.content-student-1 .content-student-txt{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.calendar-filter {
    width: 25% !important;
    gap: 25px;
    margin-bottom: 100px
}

.content-student-1 .content-student-txt h5{
    color: var(--Gray-50, #898989);
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0px;
}
.content-student-1 .content-student-txt p{
    color: #000;
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
}
/* Main container styles */
.main-container {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: white;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 41px;
    display: inline-flex;
}

.header-container {
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}

.header-counselor .nav-title {
    color: var(--Green, var(--Counselor-Primary, #27ADA0));
    font-family: Gotham;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-inline-start: 5px;
    display: none;
}

.header-counselor .new-side {
    width: 180px !important;
}

.header-counselor .new-side li {
    width: 100px;
}

.header-counselor .new-side li a {
    text-decoration: none;
}

.header-counselor #bigNavLogo {
    display: none;
}

.title {
    color: #076076;
    font-size: 14px;
    font-family: Gotham;
    font-weight: 700;
    word-wrap: break-word;
}

.skill-container {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
    display: inline-flex;
    flex-wrap: wrap;

}
.skill-box {
    height: 74px;
    width:32.3%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    background: white;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    justify-content: space-between;
    align-items: center;
    display: flex;
}
.skill-box-content {
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
    display: flex;
}
.skill-box-content img {
    width: 55px;
    height: 55px;
    padding-left: 5.62px;
    padding-right: 5.62px;
    padding-top: 8.42px;
    padding-bottom: 8.42px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.skill-box-content div{
    width: 251px;
    height: 45px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 9px;
    display: inline-flex
}
.skill-box .sectionSkillName-head{
    gap: 35px;
    height: 168px;
    padding:0px 130px 0px 130px;
    background: var(--counselor-gray-500, #FFF);
    justify-content: center;
    align-items: center;
}
.skill-box .progress-bar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
            radial-gradient(closest-side, #fff 80%, transparent 80% 100%, #fff 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E9E9E9 0);
    animation: video-progress 1s 1 forwards;
}

.skill-box .progress-bar::before {
    display: none;
}
.char-key-box {
    width: 340px;
    height: 58px;
    padding: 14px 14px 6px 6px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.char-key-box .color-column-chart{
    display: flex;
    gap: 6px;
    width: 100px;
    align-items: center;
}
.char-key-box .color-column-chart div{
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.char-key-box .color-column-chart p{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0px;
}
.student-info-box {
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    background: var(--counselor-gray-500, #FFF);
}
.student-info-header{
    padding-top: 21px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 7px;
}
.accordion-student{
    display: none;
}
.accordion-student.active{
    display: flex;
}
.style-sec{margin-top: 42px;}
.fx-gap-cards{
    gap: 29px;
    width: 100%;
}
.style-sec h3{
    color: var(--colors-black-100, #000);
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 13px;
}
.fx-gap-cards .content-student-1{width: 100%;}
.style-sec .content-student-box{
    justify-content: space-between;
    align-items: center;
    padding: 25px 28px;
    width: 459px;
    height: 290px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}
.style-sec .content-student-txt{
    display: flex;
    gap: 18px;
    flex-direction: column;
    text-align:center;
}
.style-sec .content-student-txt span{
    color: #000;
    font-family: 'Gotham';
    font-size: 18px;
    font-weight: 700;
}
.style-sec .content-student-txt h2{
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-weight: 700;
}
.style-sec .progress-bar {
    width: 127px;
    height: 128px;
}
.style-sec .progress-bar::before {
    counter-reset: percentage var(--progress-value);
    content: counter(percentage) '%';
    color: var(--Green, var(--counselor-primary, #27ADA0));
    font-size: 28px;
    font-weight: 500;
}

.mobile-topnav, .mobile-sidenav, .journey-mobile-page, .journey-items-mobile-page, .submissions-mobile-page, .videos-items-mobile-page {
    display: none !important;
}

.videos-items-web-page, .submissions-web-page {
    display: block !important;
}


@keyframes answered {
    to {
        --progress-value: 25;
    }
}
@keyframes watched {
    to {
        --progress-value: 87;
    }
}
.sideSection{
    position: fixed;
    height: 100vh;
    background: #Fff;
    right: 0px;
    top: 0px;
    z-index: 999;
    width: 573px;
    padding: 16px;
    display: none;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 8rem;
}
.style-sec .answered {
    background: radial-gradient(closest-side,#EFEFEF 83%, transparent 80% 100%), conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #EFEFEF 0);
    animation: answered 1s 1 forwards;
}
.style-sec .answered::before {
    animation: answered 1s 1 forwards;
}
.style-sec .watched {
    background: radial-gradient(closest-side,#EFEFEF 83%, transparent 80% 100%), conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #EFEFEF 0);
    animation: watched 1s 1 forwards;
}
.style-sec .watched::before {
    animation: watched 1s 1 forwards;
}
.style-sec .content-student-box2{
    padding: 32px 23px;
    width: 33%;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}
.style-sec .content-student-box2 .content-box2-txt{
    display: flex;
    gap: 7px;
    align-items: center;
}
.style-sec .content-student-box2 .content-box2-txt p{
    margin-bottom: 0px;
    color: #000;
    font-family: 'Gotham';
    font-size: 20px;
    font-weight: 700;
}
.style-sec .content-student-box2 .content-box2-txt img{
    width: 24px;
    height: 24px;
}
.style-sec .fx-student-box2{
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}
.style-sec .content-student-box2 .p-title{
    color: #000;
    font-family: 'Gotham';
    font-size: 18px;
    font-weight: 700;
    padding-left: 15px;
    padding-right: 15px;
}
.style-sec .fx-student-box2 .border-1{
    height: 1px;
    width: auto;
    background: #E9E9E9;
}
.style-sec .fx-student-box2 a{
    color: var(--Green, var(--counselor-primary, #27ADA0));
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.style-sec .fx-column-boxs{gap: 21px;}
.style-sec .fx-column-boxs .column-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 43px;
    padding: 41px 31px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    width: 296px;
    height: 255px;
    text-align: center;
}
.style-sec .fx-column-boxs .column-box img{
    width: 95px;
    height: 95px;
}
.style-sec .fx-column-boxs .column-box .column-box-txt{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.style-sec .fx-column-boxs .column-box .column-box-txt p{
    color: #000;
    font-family: 'Gotham';
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0px;
}
.style-sec .fx-column-boxs .column-box .column-box-txt span{
    color: #838383;
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 300;
}
.side-compare{
    width: 905px;
    min-height: 100vh;
    max-height: 100%;
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 100;
    background: #F8F8F8;
    overflow: auto;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: none;
}
.fx-side-compare{
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 23px;
    margin-top: 28px;
    border-top: 1px solid #C2C2C2;
}
.side-compare .head-back{
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    margin-bottom: 25px;
    cursor: pointer;
}
.side-compare .head-back span{
    color: #000;
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}
.side-compare .side-compare-white{
    background-color: #fff;
    padding: 20px 17px 0px 17px;
}
.side-compare .side-compare-white a:hover{transform: scale(1);}
.side-compare .side-compare-white .dropdown-filter{z-index: 99;padding: 16px;}
.side-compare .side-compare-padd{padding-left: 1rem;}
.side-compare .side-compare-chart{
    width: 93%;
    height: 450px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    margin: auto;
    display: flex;
    align-items: start;
    gap: 0px;
    padding: 36px 36px 0px 36px;
    margin-top: 28px;
}
.side-compare-chart .div-myChart{
    height: 215px;
    width:100%;
}
.side-compare-chart .div-myChart #myChart{
    width:90% !important;
}
.main-container .div-myChart{

    width:100%;
}
.main-container .div-myChart #myChart2{
    width:100% !important;
    height: 600px !important;
}
.side-compare-chart .txt-chart-colors{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.side-compare-chart .txt-chart-colors{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.side-compare-chart .txt-chart-colors .color-column-chart{
    display: flex;
    gap: 6px;
    width: 150px;
    align-items: center;
}
.side-compare-chart .txt-chart-colors .color-column-chart div{
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.side-compare-chart .txt-chart-colors .color-column-chart p{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0px;
}
.rows-all{display: flex;flex-direction: column;gap:17px;}
.rows-all .row-white{
    border-radius: 6px;
    background: var(--White, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    width: 100%;
    padding: 20px 30px;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}
.rows-all .row-white span{
    color: #000;
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 400;
}

.plan-senario-th {
    color: #565656;
    font-family: Inter;
    font-size: 10.811px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.rows-all .video-tr .title-gap{display: flex;gap: 10px;}
.rows-all .video-tr .title-gap span{font-weight: 700;}
.rows-all .video-tr .fx-skills-student2 .skill-radial{
    background: radial-gradient(closest-side, #fff 80%, transparent 80% 100%, #fff 0),
    conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E9E9E9 0);
}
.rows-all .row-white .fx-skills-student2 button{background: transparent;}
.rows-all .video-tr .btn-row-white{
    color: #000;
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--Orange, #EF7D00);
    background: #FFE5CB;
    display: flex;
    padding:5px 10px;
    align-items: flex-start;
    gap: 10px;
}

.rows-all .video-tr .btn-row-done {
    border: 1px solid var(--Green, var(--counselor-primary, #27ADA0));
    background: #D4EFEC;
}


.cover {
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 98;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
    display: none;
}
.units-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-left: 99px;
    margin-right: 99px;
    position: relative;
}
.units-list .div-line{
    position: absolute;
    left: 19px;
    padding: 40px 0;
    height:100%;
    width: 1px;
}
.units-list .line-horz{
    width: 1px;
    height:100%;
    background: #A1A1A1;
}
.units-list .unit-row{
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    padding: 26px 13px 26px 13px;
}
.units-list .unit-row .head-unit-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0  40px  0 0;
}
.units-list .unit-row .head-unit-row .head-unit-txt{gap: 27px;}
.units-list .unit-row .head-unit-row .head-unit-txt .circle{
    background: #27ADA0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.units-list .unit-row .head-unit-row .head-unit-txt h6{
    margin-bottom: 0px;
    color: var(--Dark-Green, #076076);
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}
.table-style{padding: 0 40px;display: none;  margin-top: 28px;}
.table-style.active{display: block;}
.table-style table{
    border-collapse:separate;
    border-spacing: 0 14px;
    margin-bottom: 0px;
}
.table-style table tr th{
    border-bottom: none;
    padding-bottom: 17px !important;
    padding: 0 20px;
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 11.917px;
    font-weight: 400;
    line-height: 17.025px; /* 142.857% */
}
.table-style tbody tr{
    height: 76px;
    vertical-align: middle;
    background: #F8F8F8;
    margin-bottom: 14px;
    border: 0.851px solid #BCECEE;
    cursor: pointer;
}
.table-style tbody tr td{
    padding: 0 20px;
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 13.62px;
    font-weight: 700;
    border-bottom: 0px;
    border-top: 0.851px solid #BCECEE;
    border-bottom: 0.851px solid #BCECEE;
}
.table-style tbody tr td img{cursor: pointer;}
.table-style table tbody td {display: table-cell}
.table-style table tbody tr td:first-child {
    border-left: 0.851px solid #BCECEE;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.table-style table tbody tr td:last-child {
    border-right: 0.851px solid #BCECEE;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.table-style table tbody tr:last-child{margin-bottom: 0px;}

.rotate0{transform: rotate(0deg) !important;}
.sectionJourney{padding-left: 0px;padding-bottom: 3rem;}
.journey-filter{
    height: 117px;
    background-color: #fff;
    padding-left: 99px;
    margin-bottom: 18px;
}
.section-student-detail .student-journey-head{padding-top: 13px;}
.title-video-div{
    display: flex;
    gap: 18px;
}
.title-video-div .title-video-div1{
    display: flex;
    width: 291px;
    height: 115px;
    padding: 10px 23px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 6px;
    border: 1px solid var(--Gray-20, #C2C2C2);
}
.title-video-div .title-video-div1 .title-video-txt{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.title-video-div .title-video-div1 .title-video-txt h6{
    color: var(--Green, var(--counselor-primary, #27ADA0));
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
}
.title-video-div .title-video-div1 .title-video-txt h3{
    color: #000;
    font-family: 'Gotham';
    font-size: 22px;
    font-weight: 700;margin-bottom: 0px;
}
@keyframes submitted {
    to {
        --progress-value: 35;
    }
}
.title-video-div .title-video-div1 .progress-bar {
    width: 75px;
    height: 76px;
}
.title-video-div .title-video-div1 .progress-bar::before {
    counter-reset: percentage var(--progress-value);
    content: counter(percentage) '%';
    color: var(--Green, var(--counselor-primary, #27ADA0));
    text-align: center;
    font-family: 'DM Sans';
    font-size: 16px;
    font-weight: 500;
}
.title-video-div .title-video-div1 .submitted {
    background:
            radial-gradient(closest-side, #E1F4F2 88%, transparent 83% 100%, #E1F4F2 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E1F4F2 0);
    animation: submitted 1s 1 forwards;
    margin: auto;
}
.title-video-div .title-video-div1 .submitted::before {
    animation: submitted 1s 1 forwards;
}
.title-video-div .title-video-div2 video{
    width: 211px;
    height: 119px;
    object-fit: cover;
    border-radius: 8px;
}
.title-video-div .title-video-div2 .HeaderVideo{
    width: 211px;
    height: 119px;
    object-fit: cover;
    border-radius: 8px;
}
.table-style-submissions{padding: 0px;margin-top: 0px;}
.table-style-submissions .fx-td-gap{gap: 7px;}
.table-style-submissions table h5{
    color: #000;
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0px;
}
.table-style-submissions tbody tr{height: 73px;}
.table-style-submissions tbody tr .view-detail{
    border-radius: 10px;
    background: var(--Dark-Green, #076076);
    display: flex;
    padding: 14px 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--White, var(--counselor-gray-500, #FFF));
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 700;
    margin-left: auto;
}
@keyframes video-row {
    to {--progress-value: 45;}
}
.table-style-submissions .fx-skills-student2 .skill-radial {
    background:
            radial-gradient(closest-side, #fff 80%, transparent 83% 100%, #fff 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E9E9E9 0);
    animation: video-row 1s 1 forwards;
    margin: 0px;
}
.table-style-submissions .fx-skills-student2 .skill-radial::before {
    animation: video-row 1s 1 forwards;
}
.table-style-submissions table tr th{padding-bottom: 0px !important;cursor: pointer;}
.table-style-submissions table tbody tr{
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}
.table-style-submissions table tbody tr td{border: 0px;}
.table-style-submissions table tbody tr td:first-child{border-left: 0px;}
.table-style-submissions table tbody tr td:last-child{border-right: 0px;}
.table-style-submissions .fx-skills-student2 h6{
    color: #000;
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 400;
}
.flex-videoDetails{gap: 48px;}
.videoDetails-boxs{display: flex;gap: 32px;}
.flex-videoDetails h6{
    color: var(--Dark-Green, #076076);
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}
.videoDetails-boxs .videoDetails-boxs-1 .row-st{
    padding:33px 31px 13px 31px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    width: 275px;
    height: max-content;
}
.videoDetails-boxs .videoDetails-boxs-1 .row-st .col-md-4{padding-left: 0px;padding-right: 0px;}
@keyframes skill1 {to {--progress-value: 25;}}
@keyframes skill2 {to {--progress-value: 45;}}
@keyframes skill3 {to {--progress-value: 55;}}
@keyframes skill4 {to {--progress-value: 65;}}
@keyframes skill5 {to {--progress-value: 75;}}
.videoDetails-boxs-1 .progress-bar {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}
.videoDetails-boxs-1 .progress-bar::before {
    color: #000;
    font-family: 'Gotham';
    font-size: 20px;
    font-weight: 700;
}
.videoDetails-boxs-1 .skill1::before {content: '';}
.videoDetails-boxs-1 .skill2::before {content: '2';}
.videoDetails-boxs-1 .skill3::before {content: '3';}
.videoDetails-boxs-1 .skill4::before {content: '4';}
.videoDetails-boxs-1 .skill5::before {content: '5';}
.videoDetails-boxs-1 .skill1 {
    background:
            radial-gradient(closest-side, #fff 80%, transparent 83% 100%, #fff 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E9E9E9 0);
    animation: skill1 1s 1 forwards;
}
.videoDetails-boxs-1 .skill1::before {
    animation: skill1 1s 1 forwards;
}
.videoDetails-boxs-1 .skill2 {
    background:
            radial-gradient(closest-side, #fff 80%, transparent 83% 100%, #fff 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E9E9E9 0);
    animation: skill2 1s 1 forwards;
}
.videoDetails-boxs-1 .skill2::before {
    animation: skill2 1s 1 forwards;
}
.videoDetails-boxs-1 .skill3 {
    background:
            radial-gradient(closest-side, #fff 80%, transparent 83% 100%, #fff 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E9E9E9 0);
    animation: skill3 1s 1 forwards;
}
.videoDetails-boxs-1 .skill3::before {
    animation: skill3 1s 1 forwards;
}
.videoDetails-boxs-1 .skill4 {
    background:
            radial-gradient(closest-side, #fff 80%, transparent 83% 100%, #fff 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E9E9E9 0);
    animation: skill4 1s 1 forwards;
}
.videoDetails-boxs-1 .skill4::before {
    animation: skill4 1s 1 forwards;
}
.videoDetails-boxs-1 .skill5 {
    background:
            radial-gradient(closest-side, #fff 80%, transparent 83% 100%, #fff 0),
            conic-gradient(#27ADA0 calc(var(--progress-value,0) * 1%), #E9E9E9 0);
    animation: skill5 1s 1 forwards;
}
.videoDetails-boxs-1 .skill5::before {
    animation: skill5 1s 1 forwards;
}
.videoDetails-boxs .videoDetails-boxs-2 .learners{
    width: 275px;
    height: 186px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.videoDetails-boxs .videoDetails-boxs-2 .learners h1{
    color: var(--Blach, #000);
    font-family: 'Inter';
    font-size: 60px;
    font-weight: 700;
    letter-spacing: 2px;
}
.videoDetails-2 video{
    width: 479px;
    height: 270px;
    object-fit: cover;
    margin-bottom: 27px;
    border-radius: 8px;
}
.videoDetails-2 #VideoHere{
    width: 479px;
    height: 270px;
    object-fit: cover;
    margin-bottom: 27px;
    border-radius: 8px;
}
.videoDetails-2 h6{
    margin-bottom: 8px;
    color: var(--Dark-Green, #076076);
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 700;
}
.videoDetails-2 p{
    color: #000;
    font-family: 'Inter';
    font-size: 12.587px;
    font-weight: 400;
    width: 488px;
}
.flex-videoDetails .videoDetails-fx{margin-top: 36px;}
.flex-videoDetails .videoDetails-fx h6{margin-bottom: 16px;}
.flex-videoDetails .videoDetails-fx .videoDetails-fx-all{gap: 14px;}
.flex-videoDetails .videoDetails-fx-all .videoDetails-fx-box{
    padding: 29px 31px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    width: 582px;
    height: max-content;
    cursor: pointer;
}
.flex-videoDetails .videoDetails-fx-box .videoDetails-box-click{gap: 15px;}
.flex-videoDetails .videoDetails-fx-box .videoDetails-box-click h5{
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    margin-bottom: 0px;
}
.flex-videoDetails .videoDetails-fx-box .videoDetails-box-click p{
    color: #000;
    font-family: 'Inter';
    font-size: 12.587px;
    font-weight: 400;
    line-height: 23px;
    margin-bottom: 0px;
    width: 390px;
}
.answers-rows{
    margin-top: 36px;
    padding-left: 10px;
    gap: 26px;
    display: none;
}
.answers-rows.active{display: flex;}
.answers-rows .answer-row{padding-bottom: 12px;border-bottom: 1px solid #E9E9E9;}
.answers-rows .answer-row-txt{
    display: flex;
    align-items: center;
    gap: 10px;
}
.answers-rows .answer-row-txt .circle{
    width: 9px;
    height: 9px;
    background: #27ADA0;
    border-radius: 50%;
}
.answers-rows .answer-row-txt p{
    margin-bottom: 0px;
    color: #000;
    font-family: 'Gotham';
    font-size: 12.587px;
    font-weight: 700;
}
.answers-rows span{
    color: var(--Green, var(--counselor-primary, #27ADA0));
    font-family: 'Gotham';
    font-size: 12.587px;
    font-weight: 700;
}
.sectionSkills{
    padding-top: 44px;
    padding-bottom: 3rem;
    padding-left: 99px;
    padding-right: 99px;
}
.skills-fx-cards{
    gap: 22px;
    flex-wrap: wrap;
}
.skills-fx-cards .skills-fx-card{
    display: flex;
    width: 326px;
    height: 250px;
    padding: 37px 25px 25px 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 33px;
    border-radius: 10px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    cursor: pointer;
}
.skills-fx-cards .skills-fx-card img{
    width: 92.69px;
    height: 92.69px;
}
.skills-fx-cards .skills-fx-card h5{
    color: #000;
    font-family: 'Gotham';
    font-size: 12px;
    font-weight: 700;
}
.sectionSkillName .sectionSkillName-head{
    gap: 35px;
    height: 168px;
    padding:0px 130px 0px 130px;
    background: var(--counselor-gray-500, #FFF);
    justify-content: start;
    align-items: center;
}
.sectionSkillName .sectionSkillName-head img{
    width: 92.69px;
    height: 92.69px;
}
.sectionSkillName .sectionSkillName-head-txt{gap: 8px;}
.sectionSkillName h6{
    color: #000;
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
}
.sectionSkillName p{
    color: #818181;
    font-family: 'Gotham';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    margin-bottom: 0px;
}
.sectionSkillName .sectionSkillName-content{
    display: flex;
    gap: 14.7px;
    flex-wrap: wrap;
    padding-top: 37px;
    padding-left: 130px;
    padding-right: 130px;
    padding-bottom: 3rem;
}

.sectionlongDesc-content {
    display: flex;
    gap: 14.7px;
    flex-wrap: wrap;
    padding-top: 0px;
    padding-left: 130px;
    padding-right: 130px;
    padding-bottom: 3rem;
}
    .sectionSkillName .sectionSkillName-content .sectionSkillName-box {
        width: 380.869px;
        height: max-content;
        padding: 16px 24px 10px 24px;
        background: var(--counselor-gray-500, #FFF);
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

.sectionlongDesc-box {
    width: 100%;
    height: max-content;
    padding: 16px 24px 10px 24px;
    background: var(--counselor-gray-500, #FFF);
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.surveys-one {
    display: flex;
    padding:22px 49px 30px 98px;
    align-items: end;
    justify-content: space-between;
    height: 106px;
    width: 100%;
    background: var(--counselor-gray-500, #FFF);
}
.surveys-one .div-search{
    display: flex;
    align-items: center;
    gap: 5px;
    width: 314px;
    height: 45px;
    border-radius: 4px;
    border: 1px solid var(--Green-BG, #E1F4F2);
    padding: 0 11px;
}
.surveys-one .div-search input{
    background: transparent;
    border: none;
    height: max-content;
    color: var(--Green, var(--counselor-primary, #27ADA0));
    font-family: 'Gotham';
    font-size: 12px;
    font-weight: 400;
}
.surveys-one .div-search input::placeholder{
    color: var(--Green, var(--counselor-primary, #27ADA0));
    font-family: 'Gotham';
    font-size: 12px;
    font-weight: 400;
}
.surveys-one button{
    border-radius: 10px;
    background: var(--counselor-primary, #27ADA0);
    display: flex;
    padding: 19px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--White, var(--counselor-gray-500, #FFF));
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
}
.btn-surveys{
    padding-top: 40px;
    margin-left: 103px;
    margin-right: 103px;
    background: transparent;
    width:83%;
}
.btn-surveys:hover{transform: scale(1);}
.btn-surveys img{display: block;margin-left: auto;}
.surveys-content{
    gap: 19px;
    flex-wrap: wrap;
    padding-top: 18px;
    padding-bottom: 3rem;
    padding-left: 103px;
    padding-right: 103px;
}
.surveys-content .surveys-content-box{
    padding: 31px 20px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    height: max-content;
    flex-direction: column;
    align-items: flex-start;
    width: 23%;
    text-decoration: none;
    cursor: pointer;
}
.surveys-content .surveys-content-box span{
    color: var(--Green, var(--counselor-primary, #27ADA0));
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    padding-bottom: 10px;
}
.surveys-content .surveys-content-box h4{
    margin-bottom: 29px;
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 700;
    line-height: 35px;
}
.surveys-content .surveys-content-box .surveys-content-span{
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}
.surveys-content .surveys-content-box .surveys-content-span span{
    padding: 4px 13px;
    border-radius: 7px;
    background: var(--counselor-100, #E1F4F2);
    width: max-content;
}
.sideSurveys{
    display: none;
    padding:12px 39px 12px 19px;
    background: #F8F8F8;
    width: 312px;
    position: fixed;
    min-height: 100vh;
    max-height: 100%;
    overflow: auto;
    z-index: 100;
    top: 0;
    right: 0;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.sideSurveys .left{margin-bottom: 37px;cursor: pointer;}
.sideSurveys h4{
    margin-bottom: 13px;
    color: #000;
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 400;
}
.sideSurveys .sideSurveys-content{gap:12px;}
.sideSurveys .sideSurveys-content  .sideSurveys-box{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 11px 15px;
    gap: 3px;
    border-radius: 6px;
    background: var(--White, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}
.sideSurveys .sideSurveys-content  .sideSurveys-box .fx-sideSurveys-text{gap:11px ;}
.sideSurveys .sideSurveys-content  .sideSurveys-box h4{
    color: #000;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    margin-bottom: 0px;
}
.sideSurveys .sideSurveys-content  .sideSurveys-box p{
    color: #818181;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    margin-bottom: 0px;
}
.surveys-one h1{
    color: #000;
    font-family: 'Inter';
    font-size: 24px;
    font-weight: 700;
}
.surveys-section2{
    padding: 50px 103px 44px 103px;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.surveys-section2 h5{
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 700;
}
.surveys-section2 .surveys-section2-box{
    padding: 22px 26px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    width: 369px;
    height: 70px;
}
.surveys-section2 .surveys-section2-box h1{
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 700;
}
.fx-survey-engagement{gap: 37px;}
.surveys-detail-content{
    gap: 22px;
    flex-direction: column;
    padding: 0px 103px 3rem 103px;
}
.surveys-detail-content .surveys-detail-box{
    padding: 0 28px;
    border: none;
    height: max-content;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
}
.surveys-detail-content .surveys-detail-box .surveys-box-open{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    height: 75px;
}
.surveys-detail-content .surveys-detail-box .surveys-box-open h4{
    color: #000;
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0px;
}
.surveys-detail-content .surveys-detail-box .surveys-box-open img{
    width: 17px;
    height: 9px;
}
.surveys-detail-charts{
    display: none;
    gap: 30px;
    flex-wrap: wrap;
    padding-top: 18px;
    margin-top: 18px;
    border-top:1px solid #E9E9E9;
}
.surveys-detail-charts.active{display: flex;}
.surveys-detail-charts .surveys-chart{
    border-radius: 6px;
    background: var(--White, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    width: 46%;
    height: max-content;
    padding: 15px 19px;
}
.surveys-detail-charts .surveys-chart canvas{margin-top: 23px;}
.surveys-detail-charts .surveys-chart span{
    padding-bottom: 23px;
    color: #000;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 400;
}
.sectionCounselor .list-tabs-acc a.active,
.sectionCounselor .list-tabs-acc a:hover{background-color: #27ADA0;}
.sectionCounselor .form-password button{color: #27ADA0;}
.sectionCounselor .btn-orange,
.sectionCounselor .contant-us button{background: #27ADA0;}
.sectionCounselor .form-tab{margin: 0px;}
.sectionCounselor{gap: 120px;}
.sectionCounselor .section-account-one .list-tabs-acc{gap: 15px;}
.main-calendar{
    padding: 45px 103px;
}
#calendar {
    max-width: 100%;
    margin: 0 auto;
}
.fc-event{
    border-radius: 25px !important;
    padding: 5px 10px !important;
}
.section-compare-head{
    height: 106px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding-left: 60px;
}
.section-compare-head .section-compare-tabs{
    height: 60px;
    border-radius: 9px;
    background: var(--Gray-10, #E9E9E9);
    padding: 5px 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px
}
.section-compare-head .section-compare-tabs button{
    width: 162px;
    height: 50px;
    border-radius: 6px;
    background: var(--Gray-10, #E9E9E9);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    color: var(--Gray-50, #898989);
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
}
.section-compare-head .section-compare-tabs button.active,
.section-compare-head .section-compare-tabs button:hover{
    background: var(--counselor-gray-500, #FFF);
    color: var(--Dark-Green, #076076);
}
.section-compare-content{
    padding-left: 149px;
    padding-right: 149px;
    padding-top: 22px;
}
.section-compare-content .tab-content{
    display: flex;
    gap: 22px;
    padding-bottom: 3rem;
}
.section-compare-content .section-compare-box{
    display: flex;
    flex-direction: column;
    gap: 41px;
}
.section-compare-content .section-compare-box1{width: 271px;position: relative;}
.section-compare-content .section-compare-box2{width: 271px;position: relative;}
.section-compare-content h6,
.section-compare-content label{
    color: #000;
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    margin-bottom: 18px;
}
.section-compare-content .tab-content .section-compare-white{
    padding: 27px 17px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 23px;
}
.section-compare-box3{width: 100%;}
.section-compare-box3 .btn-export{gap: 4px;background: transparent;}
.section-compare-box3 .btn-export span{
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}
.section-compare-chart{
    height: 400px;
    border-radius: 6px;
    background: var(--counselor-gray-500, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    padding: 19px 30px;
}

.section-compare-chart .txt-chart-colors{
    display: flex;
    align-items: center;
    gap: 46px;
    margin-top: 30px;
    padding: 0 20px;
}
.section-compare-chart .txt-chart-colors .color-column-chart{
    display: flex;
    align-items: center;
    gap: 6px;
}
.section-compare-chart .txt-chart-colors .color-column-chart div{
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.section-compare-chart .txt-chart-colors .color-column-chart p{
    margin-bottom: 0px;
    color: var(--colors-black-100, #000);
    font-family: 'DM Sans';
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}
.section-calendar{position: relative;}
.calendar-box{
    border-radius: 6px;
    background: var(--White, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    width: 340px;
    height: 220px;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    top: 0;
}
.calendar-box-1 {
    height: 180px;    
}
.calendar-box .calendar-box-head{
    padding: 13px 18px;
    border-radius: 6px 6px 0px 0px;
    background: var(--counselor-100, #E1F4F2);
}

.calendar-box .calendar-box-head-1 {
    background: #FF9A5133;
}

.calendar-box .calendar-box-head span{font-size: 14px;}
.calendar-box p{
    margin-bottom: 0px;
    color: #000;
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 5px;
}
.calendar-box span{
    color: var(--Gray-50, #898989);
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 400;
}
.calendar-box .calendar-box-white{
    padding: 16px 20px 19px 20px;
}

.calendar-box .calendar-progress{gap: 0px;margin-top: 10px;}
.calendar-box .fx-progress-calendar{gap: 10px;}
.calendar-box .fx-progress-calendar .progress-blue::-webkit-progress-bar {
    background-color: #FFE5CB;
}

.calendar-box .fx-progress-calendar .progress-blue1::-webkit-progress-value {
    background: #EF7D00 !important;
}

.sideNudge {
    display: none;
    padding-top: 20px;
}

.sideNudge .sideNudge-content .sideNudge-box {
    display: flex;
    width: 100%;
    padding: 11px 15px;
    border-radius: 6px;
    background: var(--White, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}

.sideNudge .sideNudge-content .sideNudge-box h4 {
    color: #000;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    margin-bottom: 0px;
}

.nudge-btn {
    width: 20%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.default-section-title {
    color: #1F1F39;
    font-family: Gotham;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 47px;
    max-width: 650px;
    margin-top: 20px;
}

.default-section-desc {
    color: #737373;
    font-family: Gotham;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    max-width: 770px;
    margin-top: 20px;
}

.section-title-cor {
    color: var(--Neutral-Black, #000);
    font-family: Gotham;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px
}

.none-video-path {
    font-family: Gotham;
    font-size: 14px;
    font-weight: 400;
    line-height: 13.4px;
    text-align: left;
    color: #AFAFAF;
}

.voice-title {
    font-family: Gotham;
    font-size: 16px;
    font-weight: 700;
    line-height: 15.31px;
    text-align: center;
    color: #000000;
    margin-bottom: 60px;
}


@media (min-width:2000px) {
    .body-counselor{width: 1600px;margin: auto;}
    .header-counselor .sideNav{height: 85vh;}
}
@media (min-width:2200px){.header-counselor .sideNav{height:70vh;}}
@media (min-width:2800px){.header-counselor .sideNav{height:55vh;}}
@media (min-width:3000px){.header-counselor .sideNav{height:55vh;}}
@media (min-width:3200px){.header-counselor .main-progress.sideNav{height:30vh;}}


@media (max-width:1024px){

    .section-student-detail .student-detail-head {
        overflow-x:scroll;
    }

    .section-account-one {
        margin-inline-start: 100px;
    }
    .privacy {
        margin:0px;
    }

    .fx-gap-cards {
        flex-wrap:wrap;
    }

    .fx-gap-cards > div {
        width: 48% !important;
    }
}

@media (max-width:1000px) {

    .fx-gap-cards > div {
        width: 100% !important;
    }

    .section-account-one {
        margin-inline-start: 0px !important;
    }

    .web-topnav, .header-counselor .sideNav, .journey-web-page, .journey-items-web-page, .videos-items-web-page, .submissions-web-page {
        display: none !important;
    }

    .mobile-topnav .notification-circle {
        position: absolute;
        left: 0px !important;
        top: 0px;
    }

    .mobile-topnav .fa-bars {
        width: 30px;
        height: 30px;
    }

    .mobile-topnav, .header-counselor .mobile-sidenav, .journey-mobile-page, .journey-items-mobile-page, .videos-items-mobile-page, .submissions-mobile-page {
        display: block !important;
    }

    .header-counselor .new-side {
        width: 100% !important;
        overflow-y: scroll;
        padding-bottom: 250px;
    }

    .contant-us button {
        width: 100%;
    }

    .header-counselor .nav-title {
        display: inline !important;
        color: #737373;
        font-weight: 700;
        font-size: 12px;
        line-height: 14px;
    }

    .header-counselor .sideNav ul {
        padding: 20px !important;
        align-items: start !important;
    }

    .sectionSkills, .sectionSkillName .sectionSkillName-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-students {
        padding-right: 35px !important;
        padding-left: 35px !important;
    }

    .sectionJourney {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .journey-filter {
        padding-left: 34px;
        padding-right: 34px;
    }

    .cards-students {
        padding-right: 0px;
    }

    .home-one .home-one-boxs .home-one-box {
        padding: 10px !important;
    }

    .main-home {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .fx-dropFilter, .dropFilter-st {
        width: 100% !important;
    }

    .login-img {
        display: none;
    }

    .home-one > div {
        width: 100%;
    }

    .sectionSkillName .sectionSkillName-head {
        flex-direction: column;
        padding: 20px !important;
        height: auto;
        align-items: start;
    }

    .section-students .fx-students-filter {
        flex-direction: column;
        height: fit-content;
    }

    .mobile-nav-ul li.active .nav-title {
        color: #27ADA0;
        font-size: 12px;
        font-weight: 700;
        line-height: 14px;
        text-align: left;
    }

    .mobile-bottom-nav > div {
        background: #EFEFEF;
        padding: 10px 20px;
        border-radius: 6px;
        justify-content: space-between;
    }

    .nav-profile-menu {
        display: none;
    }

        .nav-profile-menu > div {
            padding: 10px;
            border: 1px solid #EFEFEF;
            border-radius: 6px;
            justify-content: space-between;
        }

    .header-counselor .sideNav ul li:hover {
        transform: scale(1) !important;
    }

    .nav-profile .nav-profile-head > div {
        justify-content: space-between;
    }

    .bottom-nav-title {
        font-size: 14px;
        font-weight: 700;
        text-align: start;
    }

    .header-counselor .topnav {
        padding: 16px;
        padding-left: 10px;
    }

    .nav-compare {
        width: auto !important;
    }

    .mobile-skills-home > div {
        width: 50% !important;
    }

    .calendar-filter, .section-compare-content .tab-content .section-compare-white,
    .main-home .home-one, .surveys-content, .section-student-detail .tab-student-one,
    .tab-student-two .student-two-fx {
        flex-direction: column !important;
    }

    .main-calendar {
        padding: 30px 30px !important;
    }

    .fc-center {
        display: flex !important;
    }

    .calendar-filter .dropdown-filter {
        width: max-content !important;
    }

    .calendar-filter {
        width: 100% !important;
    }

    .section-compare-content {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .section-margin {
        margin: 0px 20px !important;
    }

    .section-compare-chart {
        padding: 25px 0px !important;
    }

    .section-compare-box3 {
        margin: 0px 20px;
    }

    .surveys-one {
        flex-direction: column;
        padding: 25px 0px;
        height: auto;
    }

    .surveys-one {
        padding: 22px 20px 30px 20px !important;
    }

    .send-survey-btn {
        height: 45px;
        width: 100%;
        margin-top: 30px;
    }

    .surveys-content {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

        .surveys-content .surveys-content-box, .surveys-detail-charts .surveys-chart,
        .section-student-detail .tab-student-box, .tab-student-two .student-two-fx .student-two-box {
            width: 100%;
        }

    .surveys-detail-content .surveys-detail-box {
        padding: 10px 15px !important;
    }

    .btn-surveys {
        margin-left: 35px !important;
        margin-right: 35px !important;
    }

    .surveys-detail-content {
        padding: 0px 30px 3rem 30px !important;
    }

    .surveys-section2 {
        padding: 50px 30px 44px 30px !important;
    }

    .fx-survey-engagement, .fx-gap-student2 {
        flex-direction: column !important;
    }

        .surveys-section2 .surveys-section2-box, .tab-student-two .search-tab,
        .fx-gap-student2 .top-student {
            width: 100%;
        }

    .surveys-one {
        align-items: start !important;
    }

    .units-list {
        margin-right: 25px !important;
        margin-left: 25px !important;
    }

        .units-list .unit-row {
            margin-bottom: 30px !important;
        }

    .journey-items-mobile-page > div {
        height: auto;
        padding: 16px 20px;
        width: 100%;
        border-radius: 8px;
        border: 0.85px solid #DBDBDB;
        background: #FFF;
        margin-bottom: 25px;
    }

    .table-style {
        padding: 0px !important;
    }

    .unit-details-title {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        text-align: start;
        color: #7296B6;
    }

    .unit-details-title-data {
        font-size: 14px;
        font-weight: 700;
        line-height: 13px;
        color: #000000;
        max-width: 75px;
        text-align: start;
    }

    .units-list .unit-row .head-unit-row {
        padding: 0px;
    }

    .section-student-detail .student-detail-head {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .section-details-img, .student-image {
        display: none !important;
    }

    .section-student-detail .student-detail-head .fx-head {
        margin-bottom: 25px !important;
        align-items: start;
    }

    .section-student-detail .tab-content {
        padding-left: 34px;
    }

    .tab-student-two .student-two-fx .student-two-box {
        display: flex;
    }

    .student-two-fx .box-white-student2 {
        width: 40%;
    }

    .student-two-fx .fx-videos-skills {
        width: 60%;
        height: 122px;
    }

    .student-two-fx .box-white-student2 {
        height: 122px;
    }

        .student-two-fx .box-white-student2 .img-name, .student-two-fx .box-white-student2 .img-name img {
            width: 55px;
            height: 55px;
        }

        .student-two-fx .box-white-student2 h5 {
            font-size: 14px;
        }

    .videos-student2, .videos-student2 .progress-blue, .squiggly-box {
        width: 100% !important;
    }

    .videos-student2 {
        justify-content: center;
        margin: 0px 20px;
    }

    .tab-student-two .student-two-fx .student-two-box {
        height: auto;
    }

    .vs-details-mob {
        display: flex;
        justify-content: space-between;
    }

    .student-detail-head .fx-students-1, .student-detail-head .fx-students-5, .student-detail-head .fx-students-2 {
        flex-direction: column;
        gap: 25px;
    }

    .fx-students-4 {
        width: 100%;
    }

    .student-detail-head .fx-students-3 img {
        width: 75px;
        height: 75px;
    }

    .h4-student {
        font-size: 16px;
    }

    .student-detail-head .videos-student2 {
        margin: 0px;
    }

    .fx-students-6 .poke-btn, .fx-students-6 .back {
        width: 50%;
        justify-content: center;
    }

    .student-detail-head .fx-students-1 {
        align-items: unset !important;
    }

    .h1-student {
        font-size: 21px;
    }

    .section-student-detail .student-detail-head .tabs-students {
        overflow-x: scroll;
    }

    .student-detail-head .fx-students-5, .student-detail-head .fx-students-2 {
        align-items: unset !important;
    }

    .content-student-1 {
        flex-wrap: wrap;
        padding: 20px 30px;
    }

    .style-sec .content-student-txt {
        text-align: start;
        padding-bottom: 20px;
        border-bottom: 1px solid #2E8DB7;
    }

    .style-sec .border-mob-none {
        border-bottom: none;
    }

    .style-sec .content-student-txt:nth-child(odd) {
        width: 60% !important;
    }

    .style-sec .content-student-txt:nth-child(even) {
        width: 40% !important;
    }

    .style-sec .content-student-txt {
        gap: 5px;
        margin-bottom: 15px;
    }

    .sideSurveys {
        width: 100%;
        padding: 12px 19px;
    }

    .content-student-1 .content-student-txt p {
        font-size: 12px;
        width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 18px;
    }

    .fx-gap-cards, .side-compare-padd {
        flex-direction: column;
    }

    .style-sec .content-student-box, .side-compare, #sideSection, .videoDetails-2 #VideoHere, .videoDetails-2 p, .videoDetails-boxs .videoDetails-boxs-2 .learners, .videoDetails-boxs .videoDetails-boxs-1 .row-st {
        width: 100%;
    }

    .videoDetails-2 #VideoHere {
        height: 100%;
    }

    .fx-gap-cards .content-student-box .content-student-txt {
        text-align: center !important;
        width: 100% !important;
    }

    .style-sec .content-student-box2 {
        padding: 30px 15px;
        width: 100%;
    }

    .main-container .header-container {
        flex-direction: column;
    }

    #progress-content, #videos-content, #monthlies-content {
        padding-left: 20px;
        padding-right: 20px;
    }

        #progress-content .title {
            width: 100%;
            margin-bottom: 10px;
            direction: rtl;
        }

    .skill-box {
        padding-left: 0px;
        width: 100%;
        padding-right: 0px;
    }

    .skill-box-content div {
        width: fit-content;
    }

    .video-mob-box {
        border-radius: 6px;
        border: 1px solid #DBDBDB;
        margin-bottom: 20px;
    }

    .video-head {
        background: #27ADA033;
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
    }

    .video-head-title {
        font-size: 14px;
        font-weight: 400;
        line-height: 13.4px;
        text-align: start;
        color: #737373;
    }

    .video-head-value {
        font-size: 16px;
        font-weight: 700;
        line-height: 25px;
        text-align: start;
        color: #000;
    }

    .truncate {
        width: 220px;
    }

    .video-body {
        color: #fff;
    }

    .video-body-line > div {
        width: 33%;
    }

        .video-body-line > div:first-child {
            margin-inline-end: 20px;
        }

        .video-body-line > div > div:first-child {
            font-size: 16px;
            font-weight: 400;
            line-height: 15.31px;
            text-align: start;
            color: #737373;
        }

        .video-body-line > div > div:last-child {
            font-size: 16px;
            font-weight: 700;
            line-height: 15.31px;
            text-align: start;
            color: #000;
        }

    .video-body-line {
        padding: 15px;
    }

        .video-body-line .progress-bar {
            border-radius: 0%;
        }

    .side-compare-padd .dropFilter3 {
        margin: 0px !important;
    }

    .section-student-detail .fx-head, .section-account {
        flex-direction: column;
    }

        .section-student-detail .fx-head .fx-head-txt {
            margin-bottom: 25px;
        }

    .title-video-div {
        overflow-x: scroll;
        gap: 12px;
        width: 100%;
    }

        .title-video-div .title-video-div1 {
            min-width: 245px;
        }

    .videoDetails-boxs, .flex-videoDetails {
        flex-direction: column-reverse;
    }

    .videoDetails-boxs-1 row {
        margin: 0px !important;
    }

    .flex-videoDetails .videoDetails-fx-all .videoDetails-fx-box {
        width: 100%;
        padding: 25px 10px;
    }

    .flex-videoDetails .videoDetails-fx-box .videoDetails-box-click p, .section-account, .privacy {
        width: 100%;
    }

    #PrivacyModal .modal-dialog {
        min-width: 100% !important;
    }

    .tms-table-popup-title {
        margin-inline-start: 15px;
    }

    .modal-content {
        width: 96% !important;
    }

    .cards-students .student-image {
        display: block !important;
    }

    .row-st {
        display: flex;
        margin-inline-start: 0px !important;
    }

        .row-st > div {
            width: 33.3% !important;
        }

        .row-st .progress-bar-container {
            display: flex;
            justify-content: center;
        }


    .submission-box {
        height: auto;
        padding: 16px 20px;
        width: 100%;
        border-radius: 8px;
        border: 0.85px solid #DBDBDB;
        background: #FFF;
        margin-bottom: 15px;
    }

        .submission-box .view-detail {
            width: 100%;
            border-radius: 10px;
            background: var(--Dark-Green, #076076);
            padding: 14px 30px;
            color: var(--White, var(--counselor-gray-500, #FFF));
            font-family: 'Gotham';
            font-size: 14px;
            font-weight: 700;
            margin-left: auto;
        }

    .audio-div {
        border-radius: 10px;
        border: 1px solid #27ADA033;
        padding: 10px 20px;
        margin-bottom: 20px;
    }

    #submissions-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    #calendarBox1, #calendarBox2 {
        top: 300px !important;
        left: -10px !important;
    }

    .arrow-back-login {
        margin-right: 0px !important;
        margin-left: 0px !important;
        width: 33px;
        margin-top: 0px !important;
    }

    .page-show .arrow-back-login, .list-tabs-acc {
        display: none !important;
    }

    .section-account-one {
        width: 100%;
    }

    .sectionCounselor {
        gap: 10px;
    }


    .section-account-counselor

    .section-account {
        padding: 40px 0px;
    }

    .jq-toast-wrap.bottom-right {
        right: 100px !important;
    }

    .jq-toast-single {
        width: 330px !important;
    }

    .section-compare-box3, .side-compare-chart, .mob-skill-progress {
        width: 700px !important;
    }

    .survey-mob, .progress-mob {
        width: 500px !important;
    }

    .mob-chart {
        overflow-x: scroll;
    }

    .mobile-nav-ul li {
        width: 100% !important;
    }

    .surveys-one .div-search, .skills-fx-cards .skills-fx-card {
        width: 100%;
    }

    a:hover {
        transform: scale(1);
    }

    .fc-day-grid-event > .fc-content {
        overflow-x: scroll !important;
    }

    .progressbar-div .fx-progressbar {
        flex-direction: column;
    }

        .progressbar-div .fx-progressbar p {
            text-align: center;
        }

    .main-calendar {
        min-height: 1000px;
    }

    .content-student-1 .content-student-txt h5 {
        width: max-content !important;
    }

    .fc-more-popover {
        top: 190px !important;
        left: 55px !important;
    }

    .side-compare .side-compare-white .dropFilter3 .dropdown-filter {
        padding-bottom: 150px !important;
    }
}
@media (max-width:1000px) {
    .section-compare-head .section-compare-tabs button{
        width:100% !important
    }
    .section-compare-tabs {
        width: 100% !important
    }
    .section-compare-head{
        padding:unset !important
    }
}

.section-compare-box .fx-dropFilter {
    width:100%!important;
}