@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* universal style */
body {
  font-family: "Poppins", sans-serif;
  /* background-color: red; */
}

a {
  text-decoration: none;
  color: inherit;
}

/* main-section */
.dashboard {
  position: relative;
  min-height: 100vh;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
}

/* main-section left bg */
/* .dashboard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/body-bg-left.png);
  background-repeat: no-repeat;
  width: 350px;
  height: 100%;
  z-index: 0;
} */

/* main-section right bg */
/* .dashboard::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(../images/body-bg-right.png);
  background-repeat: no-repeat;
  width: 315px;
  height: 100%;
  z-index: 0;
} */

/* left section */
.dashboard-img {
  background-image: url(../images/left-bg.png);
  min-height: 100vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
}

.dashboard-inner {
  position: relative;
}

.dashboard-inner img {
  width: auto;
}

/* .img-1, .img-2, .img-3, .img-4, .img-5, .img-6
{
    width: 100%;
} */
.img-2,
.img-3,
.img-4,
.img-5,
.img-6 {
  position: absolute;
  z-index: 1;
}

.img-2 {
  top: 30px;
  left: -120px;
  z-index: 1;
}

.img-3 {
  top: 210px;
  right: 0;
}

.img-4 {
  top: 300px;
  left: -120px;
}

.img-5 {
  bottom: 40%;
  right: 0;
  height: 100px;
}

.img-6 {
  bottom: 60px;
  left: -120px;
}

/* sign up form */
.wrapper {
  padding: 100px 0 0 0;
  position: relative;
  z-index: 10;
}

@media (max-width: 768px) {
  .wrapper {
      padding: 0px !important;
  }
}
/* heading */
.signup-heading h2 {
  font-size: 42px;
  color: #381f7d;
  font-weight: bold;
  text-transform: uppercase;
}

.signup-heading p {
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  color: #381f7d;
}

/* google button */
.google-signup {
  width: 100%;
  height: 60px;
  margin-top: 30px;
}

.google-signup button {
  border: solid 2px rgb(237, 237, 237);
  border-radius: 32px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 3px 70px 0px rgba(0, 0, 0, 0.07);
  width: inherit;
  height: inherit;
  font-weight: bold;
}

.google-signup button img {
  width: 22px;
  transition: 0.5s ease;
  margin-right: 10px;
}

.google-signup:hover button img {
  transform: rotate(360deg);
}

.email-signup {
  margin-top: 30px;
  text-align: center;
  width: 100%;
  position: relative;
}

.email-signup span {
  font-size: 16px;
  color: #381f7d;
  font-weight: bold;
  z-index: 1;
  position: relative;
  width: max-content;
  background-color: rgb(255, 255, 255);
  padding: 0 20px;
}

.email-signup::after {
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  top: 50%;
  height: 1px;
  z-index: 0;
  background-color: rgb(235, 235, 235);
}

/* form */
form {
  margin-top: 40px;
}

/* form fields */
.form-field {
  margin-bottom: 25px;
  width: 100%;
}

.form-field label {
  font-size: 15px;
  color: #381f7d;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-field label::after {
  content: "*";
  font-size: inherit;
}

.form-field input {
  border: solid 2px rgb(237, 237, 237);
  border-radius: 36px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 3px 70px 0px rgba(0, 0, 0, 0.07);
  height: 70px;
  width: inherit;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  transition: 0.5s ease;
  color: rgb(137, 137, 137);
  padding-left: 30px;
}

.form-field input:focus {
  outline: none;
  border: solid 2px rgb(81, 56, 238);
}

.agree-notif {
  margin-top: 10px;
}

.agree-notif label {
  display: flex;
  align-items: center;
  margin-left: 30px;
}

/* checkbox style */
.agree-notif input[type="checkbox"] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: solid 1px rgb(237, 237, 237);
  background-color: transparent;
  cursor: pointer;
  margin-right: 10px;
}

.agree-notif input[type="checkbox"]:checked {
  background-color: rgb(81, 56, 238);
  text-align: center;
  border-color: rgb(81, 56, 238);
}

.agree-notif input[type="checkbox"]:checked::after {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  content: "\f00c";
  color: rgb(255, 255, 255);
}

.agree-notif label span {
  font-size: 15px;
  color: #381f7d;
  font-weight: bold;
}

.agree-notif label span a {
  color: rgb(81, 56, 238) !important;
}

/* submit button */
.signup-submit {
  width: 100%;
  height: 60px;
  margin-top: 35px;
}

.signup-submit button {
  background-color: rgb(81, 56, 238);
  width: inherit;
  height: inherit;
  border-radius: 32px;
  /*border: solid 2px transparent;*/
  border: none;
  font-size: 16px;
  color: rgb(249, 249, 250);
  font-weight: bold;
  overflow: hidden;
  position: relative;
}

.signup-submit button:hover {
  background-color: rgb(69, 41, 242);
}

.signup-submit button:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-image: linear-gradient(90deg, transparent, #fff, transparent);
  transition: 0.5s ease;
}

.signup-submit button:hover:before {
  left: 100%;
}

.login-notif {
  font-size: 16px;
  color: #381f7d;
  font-weight: bold;
  margin-top: 35px;
  margin-left: 30px;
}

.login-notif span {
  color: rgb(81, 56, 238);
  text-decoration: underline;
  cursor: pointer;
}

/* hide-show signup/login */
.signup {
  display: block;
}

.login {
  display: none;
}

.show-login .signup {
  display: none;
}

.show-login .login {
  display: block;
}

.cursor-pointer {
  cursor: pointer !important;
}

.dashboard-mainmenu .react-tabs__tab--selected {
  border: none !important;
}

.react-tabs__tab--selected a {
  color: #2f57ef !important;
}

.react-tabs__tab--selected span {
  color: #2f57ef !important;
}

.answer-summary {
  padding: 15px;
  border-radius: 5px;
}

.answer-summary::-webkit-scrollbar {
  width: 8px;
}

.answer-summary::-webkit-scrollbar-thumb {
  background-color: #000000;
  border-radius: 10px;
}

.circle-index {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background-color: #c29d68; /* Use your preferred color */
  color: white;
  text-align: center;
  font-weight: bold;
  margin: 0 auto;
}

.allQ-container {
  max-height: 400px; /* Adjust the height as needed */
  max-width: 100%; /* Adjust the width as needed */
  overflow-y: auto; /* Enables vertical scrolling */
  overflow-x: hidden; /* Hides horizontal scrolling, adjust if needed */
  border: 1px solid #ccc; /* Optional: Add a border for better visibility */
  padding: 10px; /* Optional: Add padding for content spacing */
  scrollbar-width: thin; /* Firefox: Makes scrollbar thinner */
  scrollbar-color: #888 #f1f1f1; /* Firefox: Custom scrollbar colors */
}

/* Custom scrollbar for Webkit browsers (Chrome, Safari) */
.allQ-container::-webkit-scrollbar {
  width: 8px; /* Set scrollbar width */
}

.allQ-container::-webkit-scrollbar-thumb {
  background-color: #888; /* Scrollbar thumb color */
  border-radius: 4px; /* Rounded corners */
}

.allQ-container::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Thumb color on hover */
}

.allQ-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* Scrollbar track color */
}
.allQ-container label p {
  font-size: 15px;
}
.pagination{
  gap: 26px;
}
.pagination .selected a {
  background-color: #34374c;
  color: white !important;
}
.page-item.active .page-link{
    background-color: #333 !important;
    color: #333 !important;
 }
 page-item.active .page-link{
  background-color: #34374c !important  ;
  border-color: #34374c !important;
  color: white !important;
}
.page-link{
  color: #34374c !important;
}
.pagination .previous a {
width: 100px !important;
}
.pagination .next a {
width: 100px !important;
}
.back-button:hover {
  background-color: #e9f1ff;
  border-color: #cfe2ff;
  transform: translateX(-2px);
  transition: all 0.2s ease-in-out;
}