* {
    padding: 0;
}

body {
    width: 100vw;
    height: auto;
    overflow-x: hidden;
}

.dashboard-responso {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100vw;
    height: auto;
}

/* .dashboard-responso .div {
  background-color: #ffffff;
  overflow: hidden;
  width: 1408px;
  height: 900px;
  position: relative;
}

.dashboard-responso .overlap {
  position: absolute;
  width: 1082px;
  height: 1024px;
  top: 0;
  left: 0;
} */

.dashboard-responso .LEFT-SIDE-BAR {
    position: absolute;
    width: 20%;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;


}

.dashboard-responso .LOGO {
    position: relative;

    width: 100%;
    height: 46px;
    top: 42px;
    left: 39px;

    /* background-color: black; */
}

.dashboard-responso .icon-3 {
    width: 70%;
}

.dashboard-responso .text {
    position: absolute;
    width: 133px;
    height: 29px;
    top: 8px;
    left: 66px;
}

.dashboard-responso .text-wrapper-17 {
    position: absolute;
    height: 29px;
    top: 0;
    left: 0;
    font-family: "PoetsenOne-Regular", Helvetica;
    font-weight: 400;
    color: #6c64fe;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .TOP {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 80%;
    height: 68%;
    top: 118px;
    left: 39px;


}

.dashboard-responso .BUTTON {
    position: relative;
    width: 213px;
    height: 53px;
    border-radius: 22px;
    border: none;
    /* box-shadow: 0px 4px 4px #00000040, 0px -1px 4px #00000040; */

    transition: all 0.2s ease;
    transform-origin: center bottom;
    background-color: white;
}

.dashboard-responso .BUTTON:hover {
    background-color: #4f48bf;
    /* Change color on hover */
    color: white;
    transform: translateY(-5px);
    /* Move the button slightly upward on hover */
}

.dashboard-responso .BUTTON.clicked,
.dashboard-responso .BUTTON:active {
    background-color: #4f48bf;

    /* Set color for the clicked button */
    transform: scale(0.95) translateY(0);
    /* Click animation: scale down and reset translation */
}

.dashboard-responso #dashboardBtn {
    background-color: #6c64fe;
    /* Default background color for the dashboard button */
}

.dashboard-responso #dashboardBtn.clicked {
    background-color: #6c64fe;
    /* Reset background for the default button */
    transform: none;
    /* Reset transformation */
}

.dashboard-responso #dashboardBtn.hovered {
    background-color: #6c64fe;
    /* Preserve default color on hover over other buttons */
}

.dashboard-responso .text-wrapper {
    position: absolute;
    width: 123px;
    height: 23px;
    top: 15px;
    left: 50px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .text-wrapper :hover {
    color: white;
}


.settingLog {

    position: relative;
    top: 50px;


}

.settingLog button {
    margin-top: 10px;
}







.dashboard-responso .dashboard-customize {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 14px;
    left: 17px;
}

.dashboard-responso .img {
    position: absolute;
    width: 221px;
    height: 56px;
    top: 65px;
    left: -4px;
    transition: all 0.2s ease;
}

.dashboard-responso .CENTER {
    position: absolute;
    width: 60%;
    /* height: 1024px; */
    /* top: 0;
  left: 325px; */
    display: flex;
    flex-direction: column;
    /* background-color: rgb(78, 20, 135); */
}

.dashboard-responso .RECENT-SECTION {
    position: absolute;
    width: 723px;
    height: 301px;
    top: 586px;
    left: 34px;
}

.dashboard-responso .HEADING {
    position: absolute;
    height: 28px;
    top: -1px;
    left: 0;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 22px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .RECENT-ACTIVITIES {
    position: absolute;
    width: 690px;
    height: 265px;
    top: 36px;
    left: 17px;
}

.dashboard-responso .ACT {
    position: absolute;
    width: 688px;
    height: 81px;
    top: 184px;
    left: 0;
}

.dashboard-responso .group-wrapper {
    position: relative;
    width: 696px;
    height: 89px;
    left: -4px;
    background-image: url(./img/background-2.png);
    background-size: 100% 100%;
}

.dashboard-responso .group {
    position: relative;
    width: 663px;
    height: 50px;
    top: 12px;
    left: 26px;
}

.dashboard-responso .overlap-group-2 {
    position: absolute;
    width: 492px;
    height: 50px;
    top: 0;
    left: 54px;
}

.dashboard-responso .p {
    position: absolute;
    width: 492px;
    height: 48px;
    top: 0;
    left: 0;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .text-wrapper-5 {
    position: absolute;
    height: 14px;
    top: 0;
    left: 0;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .frame {
    position: absolute;
    width: 242px;
    height: 15px;
    top: 35px;
    left: 0;
}

.dashboard-responso .left {
    position: absolute;
    width: 117px;
    height: 15px;
    top: 0;
    left: 1px;
}

.dashboard-responso .text-wrapper-6 {
    position: absolute;
    height: 14px;
    top: 1px;
    left: 0;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .text-wrapper-7 {
    position: absolute;
    height: 14px;
    top: 0;
    left: 59px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .icon-thumbs-up {
    position: absolute;
    width: 15px;
    height: 13px;
    top: 0;
    left: 40px;
}

.dashboard-responso .text-wrapper-8 {
    position: absolute;
    height: 14px;
    top: 0;
    left: 129px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .icon-film {
    position: absolute;
    width: 33px;
    height: 36px;
    top: 9px;
    left: 0;
}

.dashboard-responso .center {
    position: absolute;
    width: 67px;
    height: 34px;
    top: 16px;
    left: 594px;
}

.dashboard-responso .text-wrapper-9 {
    position: absolute;
    width: 65px;
    height: 34px;
    top: 0;
    left: 0;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .overlap-group-wrapper {
    position: absolute;
    width: 688px;
    height: 81px;
    top: 94px;
    left: 0;
}

.dashboard-responso .group-2 {
    position: relative;
    width: 652px;
    height: 55px;
    top: 10px;
    left: 30px;
}

.dashboard-responso .overlap-group-3 {
    position: absolute;
    width: 493px;
    height: 52px;
    top: 0;
    left: 42px;
}

.dashboard-responso .center-2 {
    position: absolute;
    width: 231px;
    height: 16px;
    top: 36px;
    left: 40px;
}

.dashboard-responso .text-wrapper-10 {
    position: absolute;
    height: 14px;
    top: 0;
    left: 20px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .text-wrapper-11 {
    position: absolute;
    height: 14px;
    top: 2px;
    left: 207px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .progressbar {
    display: flex;
    width: 120px;
    height: 8px;
    align-items: center;
    position: absolute;
    top: 5px;
    left: 80px;
    background-color: #bababa;
}

.dashboard-responso .value {
    position: relative;
    align-self: stretch;
    width: 95px;
    background-color: #6c63ff;
}

.dashboard-responso .emoji-green-circle {
    position: absolute;
    width: 13px;
    height: 13px;
    top: 1px;
    left: 0;
}

.dashboard-responso .left-2 {
    top: 36px;
    left: 1px;
    position: absolute;
    height: 14px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .title {
    position: absolute;
    width: 492px;
    height: 48px;
    top: 0;
    left: 1px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .right {
    position: absolute;
    width: 57px;
    height: 36px;
    top: 19px;
    left: 591px;
}

.dashboard-responso .text-wrapper-12 {
    width: 55px;
    height: 36px;
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .icon {
    position: absolute;
    width: 28px;
    height: 32px;
    top: 12px;
    left: -2px;
}

.dashboard-responso .div-wrapper {
    position: absolute;
    width: 689px;
    height: 81px;
    top: 0;
    left: 0;
}

.dashboard-responso .overlap-4 {
    position: relative;
    width: 697px;
    height: 93px;
    top: -4px;
    left: -4px;
}

.dashboard-responso .background {
    position: absolute;
    width: 697px;
    height: 89px;
    top: 4px;
    left: 0;
}

.dashboard-responso .group-3 {
    position: absolute;
    width: 677px;
    height: 75px;
    top: 0;
    left: 18px;
}

.dashboard-responso .overlap-group-4 {
    position: absolute;
    width: 322px;
    height: 39px;
    top: 8px;
    left: 57px;
}

.dashboard-responso .title-2 {
    position: absolute;
    width: 322px;
    height: 20px;
    top: 19px;
    left: 0;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .type {
    position: absolute;
    width: 38px;
    height: 31px;
    top: 0;
    left: 4px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 8px;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .icon-2 {
    position: absolute;
    width: 51px;
    height: 56px;
    top: 0;
    left: 0;
}

.dashboard-responso .left-3 {
    width: 34px;
    top: 57px;
    left: 61px;
    transform: rotate(-0.02deg);
    position: absolute;
    height: 14px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .group-4 {
    position: absolute;
    width: 59px;
    height: 24px;
    top: 37px;
    left: 613px;
    transform: rotate(-0.02deg);
}

.dashboard-responso .text-wrapper-13 {
    width: 57px;
    height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .center-3 {
    position: absolute;
    width: 233px;
    height: 18px;
    top: 57px;
    left: 99px;
}

.dashboard-responso .text-wrapper-14 {
    position: absolute;
    width: 51px;
    height: 14px;
    top: 1px;
    left: 18px;
    transform: rotate(-0.02deg);
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .text-wrapper-15 {
    position: absolute;
    width: 20px;
    height: 14px;
    top: 4px;
    left: 209px;
    transform: rotate(-0.02deg);
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #72819b;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .value-wrapper {
    position: absolute;
    width: 120px;
    height: 8px;
    top: 5px;
    left: 79px;
    background-color: #bababa;
}

.dashboard-responso .value-2 {
    width: 85px;
    height: 8px;
    background-color: #8bc249;
}

.dashboard-responso .icon-cloud-upload {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
}

.dashboard-responso .UPLOAD-SECTION {

    margin-top: 40px;
    width: 115%;
    height: 607px;
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    position: relative;
    right: 130px;


}



.serviceBox {
    margin: auto;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    background-color: #101335;
    border-radius: 20px;
    color: white;
    padding: 10px;
    animation: fadeIn 1s ease-in-out;
    /* Fade-in animation */
    position: relative;
    z-index: 2;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.servicHead h2 {
    margin: auto;
}

.servicHead {
    margin: auto;
    width: 90%;
    height: 20%;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
}

.serviceBody {
    margin: auto;
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
    flex-wrap: wrap;
}

.serviceOption {
    margin: 10px;
    width: 30%;
    height: 45%;
    text-align: left;
    border-radius: 10px;
    transition: all .6s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-around;
    background-color: #0e1138;
    padding: 10px;
    cursor: pointer;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
    overflow: hidden;
    /* To prevent content overflow */
}

.servicename {
    width: 100%;
    margin: auto;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 20%;
}

.servicename img {
    width: 20%;
    height: 100%;
}

.serviceOption .p {
    margin: auto;
    width: 90%;
    height: 50%;
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

.serviceOption button {
    width: 60%;
    background-color: transparent;
    color: white;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 10px;
    font-weight: bold;
    transition: all .3s ease-in-out;
    border: 0.2px solid #ddd;
    border-radius: 30px;
}

/* Hover effect */
.serviceOption:hover {
    background-color: #1380b1;
    /* Color change on hover */
    transform: translateY(-5px);
    /* Slide animation on hover */
    box-shadow: 4px 4px 16px rgba(0, 0, 0, .2);
}

.serviceOption:active {
    transform: scale(.98);
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .center {
        width: 100%;
        padding: 0 10px;
    }

    .serviceBody {
        flex-direction: column;
        align-items: center;
    }

    .serviceOption {
        width: 80%;
    }

    .serviceOption .p {
        font-size: 0.7em;
    }
}

/* Style for quiz container */
/* Adjusted CSS for quiz container */
#quiz-container {
    height: 80%;
    width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: transparent;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    align-content: center;
    display: none;
    /* Initially hidden */

}

#quiz-container #question {
    height: 20%;
    width: 80%;
    text-align: center;
    font-size: 1.4em;
    margin-bottom: 20px;
}

#quiz-container #options {
    height: 40%;
    width: 80%;
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

/* CSS for options */
.option {
    width: 40%;
    height: 20%;
    padding: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/* Default state */
.option {
    background-color: #fff;
    /* Default background color */
    color: #000;
    /* Default text color */
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;

}

/* Hover state */
.option:hover {
    background-color: #007bff;
    /* Background color on hover */
}

/* Selected state */
.selected {
    background-color: #007bff;
    /* Selected background color */
    color: #fff;
    /* Text color when selected */
}

/* Add this CSS to increase the font size of the message */
.message {
    font-size: 28px;
    /* Adjust the font size as needed */
}









#quiz-container .but {
    width: 80%;
    text-align: center;
}

#quiz-container .but button {
    width: 20%;
    background-color: transparent;
    color: white;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 10px;
    font-weight: bold;
    transition: all .3s ease-in-out;
    border: 0.2px solid #ddd;
    border-radius: 30px;
}

#quiz-container .but button:hover {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
}

#progress {
    width: 100%;
    height: 20px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.loading {
    font-size: 20px;
    /* Adjust font size as needed */
    text-align: center;
    margin-top: 20px;
}

.loading-bar {
    width: 100%;
    background-color: #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.loading-progress {
    width: 0;
    height: 20px;
    background-color: #4CAF50;
    /* Green */
    animation: loadingAnimation 10s linear;
}

@keyframes loadingAnimation {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.message {
    font-size: 20px;
    /* Adjust font size as needed */
    text-align: center;
    margin-top: 20px;
}














.dashboard-responso .HEADER {
    /* position: absolute; */
    width: 100%;
    height: 50px;
    margin-top: 30px;
    /* top: 32px;
  left: 0; */
    display: flex;
    /* flex-direction: row; */
    justify-content: space-between;
    /* background-color:rgb(223, 0, 0); */
}

/* .dashboard-responso .overlap-5 {
  position: relative;
  width: 712px;
  height: 50px;
} */

/* .dashboard-responso .NAVBARS {
  position: absolute;
  width: 712px;
  height: 50px;
  top: 0;
  left: 0;
} */

.dashboard-responso .GREETS {
    /* position: absolute;
 
  top: 0;
  left: 0; */
    height: 65px;
    width: 30%;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 28px;
    /* text-align: center; */
    letter-spacing: 0;
    line-height: normal;
    /* background-color: rebeccapurple; */
}

/* 
.dashboard-responso .TAB-2 {

} */

.dashboard-responso .greet {
    position: relative;
    height: 18px;
    top: 0;
    left: 15px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    /* color: transparent; */
    font-size: 14px;
    /* text-align: center; */
    letter-spacing: 0;
    line-height: normal;
    /* opacity: 0; */
    transform: scale(1.1);
    margin-bottom: 6px;
}

.dashboard-responso .span {
    color: #6c63ff;
}

.dashboard-responso .GREETS h1 {
    font-size: 30px;
}

.dashboard-responso .RIGHT-SIDE-NAVBARS {
    /* position: absolute; */
    width: 60%;
    height: 67px;
    /* top: 15px; */
    /* left: 568px; */
    /* background-color: rgb(177, 156, 198); */
    border: none;
    outline: none;
    /* background-color: black; */
    display: flex;
    justify-content: right;
    align-items: center;

    overflow: hidden;

}

.darkmod_button {
    width: 20%;
    height: 40px;
    /* background-color: wheat; */
    display: flex;
    justify-content: center;
}

.darkmod_button img {

    width: 30%;

}

.darkmod_button img :hover {
    rotate: 30deg;
    transform: rotate(180deg);
}

.dashboard-responso .RIGHT-SIDE-NAVBARS .search {
    margin-right: 25%;
    margin-left: 20px;
    width: 40%;
    height: 40px;
    display: flex;
    /* background-color: red; */
}

.search img {
    width: 20px;
    /* font-size: ; */
}

.dashboard-responso .RIGHT-SIDE-NAVBARS #search {
    width: 100%;
    height: 100%;
    /* border: 2px solid; */
    border: none;
    border-radius: 10px;
    padding-left: 10px;
    font-size: 15px;
    outline: none;
    /* padding-right: 10%; */
}

/* .dashboard-responso .THEME-MODE {
  position: absolute;
  width: 48px;
  height: 21px;
  top: 2px;
  left: 0;
}

.dashboard-responso .icon-mode-dark-wrapper {
  position: absolute;
  width: 25px;
  height: 23px;
  top: -1px;
  left: 25px;
  background-color: #ffffff;
  border-radius: 22px;
  border: 1px solid;
  border-color: #000000;
}

.dashboard-responso .icon-mode-dark {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 4px;
  left: 5px;
}

.dashboard-responso .icon-mode-light {
  position: absolute;
  width: 19px;
  height: 19px;
  top: 3px;
  left: -1px;
}




.dashboard-responso .SEARCH-BAR {
  position: absolute;
  width: 88px;
  height: 27px;
  top: 0;
  left: 56px;
  background-color: #ffffff;
  border-radius: 22px;
  border: 1px solid;
  border-color: #000000;
}

.dashboard-responso .icon-search {
  position: absolute;
  width: 13px;
  height: 13px;
  top: 7px;
  left: 68px;
}

 */



/* *888888 */

.dashboard-responso .RIGHT-SIDE-BAR {
    position: absolute;
    width: 316px;
    height: 900px;
    top: 0;
    left: 1092px;
    background-image: url(./img/background.svg);
    background-size: 100% 100%;
}

.dashboard-responso .HISTORY {
    position: absolute;
    width: 260px;
    height: 248px;
    top: 287px;
    left: 2px;
}

.dashboard-responso .ITEMS {
    position: absolute;
    width: 237px;
    height: 212px;
    top: 36px;
    left: 21px;
}

.dashboard-responso .element {
    position: absolute;
    width: 245px;
    height: 57px;
    top: 163px;
    left: -4px;
}

.dashboard-responso .element-2 {
    position: absolute;
    width: 239px;
    height: 48px;
    top: 0;
    left: 0;
}

.dashboard-responso .overlap-group-5 {
    position: relative;
    width: 237px;
    height: 48px;
    background-color: #ffffff;
    border-radius: 22px;
    box-shadow: 0px 4px 4px #0000001a;
}

.dashboard-responso .text-2 {
    width: 154px;
    position: absolute;
    height: 19px;
    top: 14px;
    left: 51px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.dashboard-responso .icon-4 {
    position: absolute;
    width: 28px;
    height: 25px;
    top: 12px;
    left: 19px;
}

.dashboard-responso .element-3 {
    position: absolute;
    width: 239px;
    height: 48px;
    top: 54px;
    left: 0;
}

.dashboard-responso .text-3 {
    width: 143px;
    position: absolute;
    height: 19px;
    top: 14px;
    left: 51px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.dashboard-responso .icon-5 {
    position: absolute;
    width: 35px;
    height: 31px;
    top: 8px;
    left: 12px;
}

.dashboard-responso .element-4 {
    position: absolute;
    width: 239px;
    height: 48px;
    top: 108px;
    left: 0;
}

.dashboard-responso .text-4 {
    width: 173px;
    position: absolute;
    height: 19px;
    top: 14px;
    left: 51px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.dashboard-responso .icon-6 {
    position: absolute;
    width: 32px;
    height: 29px;
    top: 9px;
    left: 17px;
}

.dashboard-responso .HEADING-2 {
    position: absolute;
    width: 74px;
    height: 24px;
    top: 0;
    left: 0;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 22px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.dashboard-responso .TOTAL-CREDIT {
    position: absolute;
    width: 188px;
    height: 23px;
    top: 227px;
    left: 41px;
    font-family: "Outfit", Helvetica;
    font-weight: 400;
    color: #6c63ff;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .EDIT-SECTION {
    position: absolute;
    width: 98px;
    height: 86px;
    top: 86px;
    left: 102px;
}

.dashboard-responso .group-5 {
    position: relative;
    width: 137px;
    height: 145px;
    left: -31px;
}

.dashboard-responso .overlap-7 {
    position: relative;
    width: 135px;
    height: 145px;
}

.dashboard-responso .illustration-male {
    width: 124px;
    height: 115px;
    position: absolute;
    top: 0;
    left: 0;
}

.dashboard-responso .overlap-group-6 {
    position: relative;
    height: 115px;
}

.dashboard-responso .ellipse {
    position: absolute;
    width: 116px;
    height: 106px;
    top: 5px;
    left: 4px;
    background-color: #ffffff;
    border-radius: 57.78px/53.06px;
    border: 3px solid;
    border-color: #6c63ff;
    box-shadow: 0px 4px 4px #0000001a;
}

.dashboard-responso .text-wrapper-18 {
    position: absolute;
    width: 113px;
    height: 34px;
    top: 111px;
    left: 4px;
    font-family: "Alata", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 22px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.dashboard-responso .icon-edit-outline {
    position: absolute;
    width: 31px;
    height: 28px;
    top: 114px;
    left: 104px;
}

.dashboard-responso .NAV {
    position: absolute;
    width: 291px;
    height: 44px;
    top: 37px;
    left: 2px;
}

.dashboard-responso .more-vert {
    position: absolute;
    width: 23px;
    height: 21px;
    top: 11px;
    left: 266px;
}

.dashboard-responso .text-wrapper-19 {
    width: 99px;
    height: 44px;
    font-family: "Alata", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
    position: absolute;
    top: 0;
    left: 0;
}

.complan{
    width: 160px;
    height:50px;
    background-color: transparent;
    color: white;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 10px;
    font-weight: bold;
    transition: all .3s ease-in-out;
    border: 0.2px solid #ddd;
    border-radius: 30px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 10;
    padding: 10px;
    position: fixed;
}

/* Hover effect */
.complan {
    background-color: #1380b1;
    /* Color change on hover */
    transform: translateY(-5px);
    /* Slide animation on hover */
    box-shadow: 4px 4px 16px rgba(0, 0, 0, .2);
}

.complan:active {
    transform: scale(.98);
}


 #container {
    position: absolute;
    z-index: 11;
    top: 50%;
    right: 0%;
     margin: 20px auto;
     background-color: #afafaf;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

  #containerh1 {
     text-align: center;
     color: #333;
 }

  #containerform {
     display: flex;
     flex-direction: column;
 }






 #container label {
     margin-bottom: 5px;
     color: #333;
 }

  #container input[type="text"],
 textarea {
     width: 100%;
     padding: 10px;
     margin-bottom: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-sizing: border-box;
     background-color: #f9f9f9;
     color: #333;
 }

  #container textarea {
     height: 100px;
 }

  #container input[type="submit"] {
     background-color: #007bff;
     color: #fff;
     border: none;
     padding: 10px 20px;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }

 #container  input[type="submit"]:hover {
     background-color: #0056b3;
 }

 @keyframes loading {
     0% {
         width: 0;
     }

     100% {
         width: 100%;
     }
 }

 #submitStatus {
     height: 4px;
     background-color: #007bff;
     margin-top: 10px;
     border-radius: 2px;
     animation: loading 2s forwards;
     /* Adjust animation duration as needed */
     display: none;
     /* Initially hidden */
 }

 #successMessage {
     color: green;
     margin-top: 10px;
     display: none;
     /* Initially hidden */
 }
 #startAssessments{
 top: 85vh;

 }