@media screen and (orientation: landscape) {
  :root {
    --lightBackground: #fff;
    --lightBackground1: #fef7eb;
    --darkBackground: #171b25;
    --navBarLight: #091a22;
    --lightModeText: #091a22;
    --darkModeText: #838383;
    --limeYellow: #dff945;
    --bluegraysteel: #3b4c63;
  }

  .topBarProfileDiv_light {
    color: var(--navBarLight);
  }

  .topBarProfileDiv_dark {
    color: var(--darkModeText);
  }

  .topBarProfileDivContent_light {
    background-color: var(--lightBackground);
    color: #fff;
  }

  .topBarProfileDivContent_dark {
    background-color: var(--darkBackground);
    color: #fff;
  }

  .topBarProfileDivContent_light button {
    background: none;
    border: 0.5px solid rgba(9, 26, 34, 0.2);
  }

  .topBarProfileDivContent_dark button {
    background: none;
    color: var(--darkModeText);
    border: 0.5px solid var(--bluegraysteel);
  }

  .homeFeaturesParagraph {
    font-size: 16px;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .homeFeaturesParagraph_light {
    color: #333;
  }

  .homeFeaturesParagraph_dark {
    color: var(--darkModeText);
  }

  .howItWorksMainDiv p,
  .ourMissionCard p {
    font-size: 16px;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto;
  }

  .cancelCreationModeDivEditTopic {
    cursor: pointer;
    color: #606060;
    font-size: 0.8rem;
    margin-left: 20px;
  }

  .cancelCreationModeDivEditTopic_dark {
    cursor: pointer;
    color: var(--darkModeText);
    font-size: 0.8rem;
    margin-left: 20px;
  }

  .cancelCreationModeButton_dark {
    color: var(--darkModeText);
  }

  .cancelCreationModeButton_dark:hover {
    color: orangered;
    cursor: pointer;
  }

  .cardCreationIndexPageNumber {
    font-size: 24px;
    font-weight: 700;
    color: var(--darkModeText);
    margin: 0px 10px;
  }

  .cardCreationIndexPageNumberArrow {
    color: var(--darkModeText);
    font-weight: 100;
    cursor: pointer;
  }

  .groupQuizButton {
    background-color: #b5c5cd;
    color: #122e3b;
  }

  .loginDiv,
  .registrationDiv {
    width: 100%;
    margin-top: 20vh;
  }

  .loginDiv_dark,
  .registrationDiv_dark {
    width: 100%;
    min-height: calc(100vh - 50px);
    margin-top: 50px;
    background-color: var(--darkBackground);
    color: var(--darkModeText);
  }

  .loginTelescopeDiv {
    width: 100%;
  }

  .loginTelescope {
    opacity: 0.9;
  }

  .registrationSelect {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    outline: none;
    border: none;
    background-color: #3aa9e826;
  }

  .loginHeading span {
    color: #3aa9e8;
  }

  .googleLoginDiv {
    width: 250px;
    margin: 10px auto;
    justify-content: space-around;
    align-items: center;
  }

  .googleSignInDiv {
    width: 150px;
    height: 44px;
    background-color: #b5c5cd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* margin-top: 2rem; */
    padding: 10px;
    cursor: pointer;
  }

  .googleSignInDiv:hover {
    background-color: #122e3b;
  }

  .loginMiddleDiv,
  .registrationMiddleDiv,
  .loginMiddleDiv_dark,
  .registrationMiddleDiv_dark {
    width: 100%;
  }

  .loginCard {
    width: 90%;
    max-width: 600px;
    height: 450px;
    border-radius: 20px;
    background: #ffffff;
    border: 0.3px solid #b5c5cd;
  }

  .loginCard_dark {
    width: 90%;
    max-width: 600px;
    height: 450px;
    border-radius: 20px;
    background: linear-gradient(90deg, #10131b 0%, #122e3b 135.64%);
    border: 0.3px solid #b5c5cd;
    margin-bottom: 20px;
  }

  .registrationCard {
    width: 90%;
    max-width: 600px;
    min-height: 450px;
    padding: 10px 0px;
    border-radius: 20px;
    background: #ffffff;
    border: 0.3px solid #b5c5cd;
    margin-bottom: 20px;
  }

  .registrationCard_dark {
    width: 90%;
    max-width: 600px;
    min-height: 450px;
    padding: 10px 0px;
    border-radius: 20px;
    background: linear-gradient(90deg, #10131b 0%, #122e3b 135.64%);
    border: 0.3px solid #b5c5cd;
    margin-bottom: 20px;
  }

  .emailLabel,
  .passwordLabel {
    width: 250px;
    font-size: 12px;
  }

  .loginCardInputDiv input,
  .registrationDiv input {
    background-color: #b5c5cd;
    width: 250px;
    height: 40px;
    margin-bottom: 10px;
    border: none;
    padding-left: 10px;
    margin-bottom: 20px;
  }

  .loginCardInputDiv_dark input,
  .registrationDiv_dark input {
    background-color: #b5c5cd;
    width: 250px;
    height: 40px;
    margin-bottom: 10px;
    border: none;
    padding-left: 10px;
    margin-bottom: 20px;
  }

  .loginCardInputDiv_dark input:focus,
  .registrationDiv_dark input:focus {
    outline: none;
  }

  .loginCardButton,
  .registrationButton {
    background-color: #122e3b;
    width: 175px;
    height: 40px;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    font-size: 12px;
  }

  .orLoginRegisterDiv {
    margin: 20px auto;
  }

  .orLoginButton {
    width: 150px;
    height: 40px;
    background-color: #ffb038;
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    border-radius: 5px;
  }

  .how_it_works_main_div {
    margin-top: 50px;
    width: 100%;
    min-height: calc(100vh - 50px);
  }

  .cardsLibraryHeaderDiv {
    width: 80%;
  }

  .privacyPolicyDiv,
  .termsOfServiceDiv {
    width: 100%;
    min-height: calc(100vh - 50px);
    margin-top: 50px;
    background-color: #091a22;
    color: #fff;
  }

  .privacyPolicyDiv p,
  .termsOfServiceDiv section {
    width: 80%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.5;
  }

  .homefooterLink,
  .footerIcon {
    cursor: pointer;
  }

  #deckViewModalDeleteConfirmation1 {
    width: 500px;
    height: 400px;
    background-color: #fff;
  }

  .deckViewModalDeleteConfirmationButton {
    border-radius: 5px;
    margin: 0px 10px;
  }

  .flipEditCardPreview {
    color: #122e3b;
    font-weight: 100;
    margin-left: 15px;
    cursor: pointer;
  }

  .flipEditCardPreview_dark {
    color: var(--darkModeText);
    font-weight: 100;
    margin-left: 15px;
    cursor: pointer;
  }

  .flipEditCardPreview_dark:hover {
    color: #122e3b;
    background-color: inherit;
  }

  .editorAreaDiv,
  .answerAreaDiv {
    width: 100%;
    height: 100%;
    padding: auto;
  }

  .pageNotFoundDiv {
    width: 100%;
    min-height: calc(100vh - 50px);
    background-color: #091a22;
    color: #fff;
    margin-top: 50px;
  }

  .pageNotFoundGoHomeButton {
    color: #00100f;
    width: 220px;
    height: 45px;
    background: #6cb1a9;
    border: 1px solid #ffffff;
    border-radius: 30px;
    font-size: 1rem;
  }

  .flashCardsSettingsModalDiv {
    width: 100%;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
  }

  .flashCardsSettingsModalDiv1a {
    width: 100%;
  }

  .aboutUsDiv {
    width: 100%;
    min-height: calc(100vh - 50px);
    margin-top: 50px;
  }

  .aboutUsDiv_light {
    background-color: #091a22;
    color: #fff;
  }

  .aboutUsDiv_dark {
    background-color: var(--darkBackground);
    color: #fff;
  }

  .aboutUsP {
    width: 50%;
  }

  .aboutUsCard {
    width: 500px;
    padding: 20px;
    border-radius: 10px;
    margin: 20px auto;
  }

  .aboutUsCard_light {
    background-color: #b9c5cc;
    color: #10131a;
  }

  .aboutUsCard_dark {
    background-color: #122e3b;
    color: var(--darkModeText);
  }

  .aboutUsButton {
    width: 150px;
    height: 40px;
    border-radius: 0px;
    font-size: 1rem;
    margin: 0px 10px;
  }

  .aboutUsButton_dark,
  .aboutUsButton_light {
    border: 1px solid #fff;
    color: var(--darkModeText);
  }

  .aboutUsButton_dark_active,
  .aboutUsButton_light_active {
    border: 1px solid #fff;
    background-color: #ddcb26;
    color: #0f1417;
  }

  .base1 {
    word-break: normal;
  }

  .mord {
    font-style: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
    margin-right: 0 !important;
  }

  .toggleColorModeDiv {
    margin-right: 50px;
  }

  #topBar {
    width: 100%;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
  }

  .topBar_light {
    background-color: var(--lightBackground);
    color: var(--lightModeText);
  }

  .topBar_dark {
    background-color: var(--darkBackground);
    color: var(--darkModeText);
  }

  #topBarLeftDiv {
    height: 50px;
    padding: 0;
    justify-content: flex-start;
    width: 40%;
  }

  #topBarMiddleDiv {
    height: 50px;
    padding: 0;
    justify-content: center;
    width: 20%;
    font-size: 10px;
  }

  #topBarRightDiv {
    height: 50px;
    padding: 0;
    justify-content: flex-end;
    width: 40%;
  }

  #registerButton {
    background-color: var(--limeYellow);
  }

  .dropdownPostLogin_light {
    background-color: var(--lightBackground);
    color: var(--lightModeText);
  }

  .dropdownPostLogin_dark {
    background-color: var(--darkBackground);
    color: var(--darkModeText);
  }

  .flashCardsSuggestionsDiv_light {
    background-color: #f5f5f5;
  }

  .flashCardsSuggestionsDiv_dark {
    background-color: var(--darkBackground);
  }

  .flashCardsSuggestionsDiv1a_light,
  .flashCardsSuggestionsDiv1b_light,
  .flashCardsSuggestionsDiv2a_light,
  .flashCardsSuggestionsDiv2b_light {
    color: var(--darkModeText);
    border: 3px solid white;
  }

  .flashCardsSuggestionsDiv1a_dark,
  .flashCardsSuggestionsDiv1b_dark,
  .flashCardsSuggestionsDiv2a_dark,
  .flashCardsSuggestionsDiv2b_dark {
    border: 3px solid #10131a;
  }

  .flashCardsSuggestionsDiv1a_dark p,
  .flashCardsSuggestionsDiv1b_dark p,
  .flashCardsSuggestionsDiv2a_dark p,
  .flashCardsSuggestionsDiv2b_dark p {
    color: var(--darkModeText);
  }

  .flashCardsRecentDiv1_dark {
    background-color: var(--darkBackground);
    color: var(--darkModeText);
  }

  .flashCardsRecentDiv1_light {
    background-color: #f5f5f5;
  }

  .flashCardsRecentDiv1_dark p {
    color: var(--darkModeText);
  }

  .flashCardsLibraryDiv_light {
    background-color: #f5f5f5;
    color: var(--darkModeText);
  }

  .flashCardsLibraryDiv_dark {
    color: var(--darkModeText);
  }

  .flashCardsLibraryDiv_dark > div {
    background-color: var(--darkBackground);
  }

  .cardsLibraryMainDiv_dark h1,
  .classroomCardsLibraryMainDiv_dark h1 {
    color: var(--darkModeText);
  }

  .cardsLibraryMainDiv_dark h3,
  .classroomCardsLibraryMainDiv_dark h3 {
    color: var(--darkModeText);
  }

  .cardsLibraryDisplayCardsDiv_dark {
    background-color: var(--darkBackground);
  }

  .cardsLibraryDisplayCardsDiv_light {
    background-color: #f8f8f8;
  }

  .classroomCardsLibraryDisplayCardsDiv_dark {
    background-color: var(--darkBackground);
  }

  .cardsLibraryExitButton_dark {
    color: var(--darkModeText);
  }

  .createTitleInput_light,
  .createDescriptionInput_light {
    border: none;
    background-color: #d9d9d9;
    border-bottom: 1px solid #122e3b;
    border-radius: 0;
    -webkit-border-radius: 0;
  }

  .createTitleInput_dark,
  .createDescriptionInput_dark {
    border: none;
    background-color: inherit;
    border-bottom: 1px solid #fff;
    color: var(--darkModeText);
    border-radius: 0;
    -webkit-border-radius: 0;
  }

  .createTitleInput:focus,
  .createDescriptionInput:focus {
    outline: none;
    border-bottom: 1px solid #122e3b;
    border-radius: 0;
    -webkit-border-radius: 0;
  }

  .createTitleInput_dark:focus,
  .createDescriptionInput_dark:focus {
    outline: none;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    -webkit-border-radius: 0;
  }

  .home_light {
    background-color: var(--lightBackground);
  }

  .home_dark {
    background-color: var(--darkBackground);
  }

  #ilearnStemCardsLogo {
    width: 50px;
    margin-left: 10px;
  }

  .registerButton2_light {
    color: #00100f;
    background: #6cb1a9;
    border: 1px solid #ffffff;
  }

  .registerButton2_dark {
    color: #00100f;
    background: #ddcb26;
    border: 1px solid #ffffff;
  }

  .previewButton2_light {
    color: #00100f;
    border: 1px solid #263238;
  }

  .previewButton2_dark {
    color: var(--darkModeText);
    border: 1px solid #fff;
  }

  .homeFeaturesMainDiv_light {
    background-color: #fff;
  }

  .homeFeaturesMainDiv_dark {
    background-color: var(--darkBackground);
    color: #fff;
  }

  .howItWorksMainDiv_light {
    background-color: var(--lightBackground1);
  }

  .howItWorksMainDiv_dark {
    background-color: var(--bluegraysteel);
    box-shadow: 0px 4px 4px 0px #00000040;
    color: #fff;
  }

  .pricingDiv_light {
    background-color: #fff;
  }

  .pricingDiv_light h1 {
    color: #263238;
  }

  .pricingDiv_dark {
    background-color: var(--darkBackground);
  }

  .pricingDiv_dark h1 {
    color: #fff;
  }

  .ourMissionDiv_light {
    background-color: var(--lightBackground1);
  }

  .ourMissionDiv_dark {
    background-color: var(--bluegraysteel);
    color: #fff;
  }

  .groupStudyMainDiv_light {
    background-color: #fff;
  }

  .groupStudyMainDiv_dark {
    background-color: #10131a;
    box-shadow: 0px 4px 4px 0px #00000040;
  }

  .groupStudyTopDiv_light {
    background-color: var(--navBarLight);
  }

  .groupStudyTopDiv_dark {
    background-color: var(--darkBackground);
  }

  .groupStudyHeading,
  .groupStudyTopDiv1_invites {
    color: #f5f5f5;
  }

  .groupStudyFooter1 {
    width: 50%;
    justify-content: space-evenly;
    margin-right: 0;
    padding: 5px 0;
  }

  .groupStudyFooter1 .groupFooterIconDiv {
    width: 25%;
    height: 100%;
    padding: 5px 0;
  }

  .groupStudyFooter2 {
    width: 50%;
    justify-content: space-evenly;
    margin-left: 0;
    padding: 5px 0;
  }

  .groupStudyFooter2 .groupFooterIconDiv {
    width: 25%;
    height: 100%;
    padding: 5px 0;
  }

  .speakers {
    width: 50px;
  }

  .flashCardsMainPageDiv_dark {
    background-color: #10131a;
    box-shadow: 0px 4px 4px 0px #00000040;
  }

  .flashCardsMainPageHeader_light {
    background-color: #fff;
  }

  .flashCardsMainPageHeader_dark {
    background-color: inherit;
  }

  /**** Taratai AI ****/

  .tarataiAIMainDiv {
    width: 100%;
    height: calc(100vh - 50px);
    margin-top: 50px;
  }

  .tarataiAIMainDiv_dark {
    background-color: var(--darkBackground);
    color: var(--darkModeText);
  }

  .tarataiAIMainDiv_light {
    background-color: var(--lightBackground);
    color: var(--lightModeText);
  }

  .tarataiAIImg {
    margin-top: 10px;
    margin-bottom: 0;
  }

  .tarataiAIMiddleDiv_light {
    background: #fff;
  }

  .tarataiAIOuterMiddleDiv {
    width: 100%;
    margin-bottom: 0;
  }

  .tarataiAIUploadText_light {
    color: #122e3b;
  }

  .tarataiAIUploadText_dark {
    color: var(--darkModeText);
  }

  .tarataiAIMiddleContentDiv_light {
    background: #f5f5f5;
    color: var(--darkModeText);
  }

  .tarataiAIMiddleContentDiv_dark {
    background: var(--bluegraysteel);
    color: #fff;
  }

  .tarataiAITitle_light {
    color: #f5f5f5;
  }

  .tarataiAITitle_dark {
    color: #f5f5f5;
  }

  .tarataiAITopDiv {
    width: 100%;
    height: 100px;
  }

  .tarataiAITopDiv_dark {
    background: var(--darkBackground);
  }

  .tarataiAITopDiv_light {
    background: var(--navBarLight);
  }

  /**** END OF Taratai AI ****/

  /*** The Toggle Switch ***/

  .toggleSwitch {
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    width: 50px;
    height: 25px;
    border: 1px solid #938b8b;
    background-color: #fff;
  }

  .toggleKnob {
    width: 23px;
    height: 23px;
    background-color: #dff945;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    position: relative;
    left: 0px;
    transition: 1s;
  }

  .toggleKnob:hover {
    cursor: pointer;
  }

  .toggleKnobOn {
    transform: translateX(100%);
  }

  /** END OF The Toggle Switch ***/
  .groupStudyMiddleDiv1Button_light {
    background-color: #dff945;
    color: #060606;
  }

  .groupStudyMiddleDiv1Button_dark {
    background-color: #dff945;
    color: #060606;
  }

  .groupStudyFooter_light {
    background: var(--navBarLight);
    color: var(--darkModeText);
  }

  .groupStudyFooter_dark {
    background-color: var(--darkBackground);
    color: var(--darkModeText);
  }

  .groupFooterIconDiv :hover {
    cursor: pointer;
    opacity: 0.7;
  }

  .addParticipantsScreenModal {
    width: 100%;
    min-height: 100vh;
    background-color: inherit;
    overflow-y: scroll;
    z-index: 5;
    color: var(--darkModeText);
    padding-bottom: 50px;
  }

  .addParticipantsScreenModalContentDiv {
    width: 100%;
    min-height: 100vh;
    background-color: inherit;
  }

  .groupAddParticipantsDiv_light {
    color: var(--darkModeText);
    border: 1px solid #dddddd;
  }

  .groupAddParticipantsDiv_dark {
    color: var(--darkModeText);
    border: 1px solid var(--darkBackground);
  }

  .groupStudyFriendListItemDiv1_light,
  .groupStudyFriendListItemButton_light {
    background-color: #f5f5f5;
  }

  .groupStudyFriendListItemDiv1_dark,
  .groupStudyFriendListItemButton_dark {
    background-color: var(--darkBackground);
  }

  .groupStudyFriendsCount:hover {
    cursor: pointer;
  }

  .groupStudyFriendsCountChosen,
  .groupStudyAddFriendsButtonChosen {
    border: 1px solid #dff945;
  }

  .groupStudyAddFriendsScreen {
    width: 100%;
    margin-top: 30px;
  }

  .groupStudyAddFriendsScreen1,
  .groupStudyAddFriendsScreen2 {
    height: 40px;
    margin-right: 10px;
    margin-left: 10px;
  }

  .groupStudyAddFriendsScreen1 {
    width: 250px;
  }

  .groupStudyAddFriendsScreen2 {
    width: 150px;
    border-radius: 7px;
    font-size: 10px;
  }

  .groupStudyAddFriendsScreen1_light,
  .groupStudyAddFriendsScreen2_light,
  .groupStudyAddFriendsScreen1_light input {
    background-color: #f5f5f5;
    border: none;
    outline: none;
  }

  .groupStudyAddFriendsScreen1_dark,
  .groupStudyAddFriendsScreen2_dark,
  .groupStudyAddFriendsScreen1_dark input {
    background-color: var(--darkBackground);
    border: none;
    outline: none;
  }

  .groupStudyAddFriendsScreen1_dark input {
    color: var(--darkModeText);
  }

  .groupStudyMiddleDiv1 {
    color: var(--darkModeText);
  }

  .avatar_light {
    background-color: #f5f5f5;
  }

  .avatar_dark {
    background-color: var(--darkBackground);
  }

  .inviteScreenModal {
    width: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    z-index: 5;
    color: var(--darkModeText);
    padding-bottom: 50px;
    background-color: inherit;
  }

  .inviteScreenModalContentDiv {
    width: 100%;
  }

  .inviteScreenModalContentDivTable {
    width: 60%;
  }

  .inviteScreenModalContentDiv_light {
    background-color: inherit;
  }

  .inviteScreenModalContentDiv_dark {
    background-color: inherit;
  }

  #accept_invite_button {
    background-color: #dff945;
    color: #060606;
    width: 80px;
    border-radius: 5px;
    margin-right: 10px;
  }

  #accept_invite_button:hover {
    background-color: #b5c5cd;
  }

  #reject_invite_button {
    background-color: #b5c5cd;
    color: #060606;
    width: 80px;
    border-radius: 5px;
    margin-left: 10px;
  }

  #reject_invite_button:hover {
    background-color: #dff945;
  }

  .inviteScreenModalContentTableRow {
    padding: 50px 0;
    height: 100px;
  }

  .inviteScreenModalContentTableTd {
    height: 100px;
  }

  .inviteScreenModalContentTableTd span,
  .inviteScreenModalContentTableTdDiv {
    height: 100px;
  }

  .streamIndicatorDiv {
    width: 180px;
    height: 40px;
  }

  .streamIndicatorDiv_light {
    background-color: var(--navBarLight);
  }

  .streamIndicatorDiv_dark {
    background-color: var(--darkBackground);
  }

  .groupStudySettingsModal {
    width: 40%;
    height: 400px;
    max-width: 600px;
    position: fixed;
    top: 30%;
    left: 40%;
    z-index: 10;
    opacity: 1;
    padding: 0;
  }

  .groupStudySettingsModalContentDivHeader {
    height: 100px;
    background-color: inherit;
  }

  .groupStudySettingsModalContentDiv {
    height: 200px;
    background-color: inherit;
  }

  .closeSettingsDiv {
    width: 100%;
    padding-right: 10px;
    padding-top: 10px;
    background-color: inherit;
  }

  .groupStudySettingsModal_light {
    background-color: #fff;
    color: var(--darkModeText);
    border-radius: 10px;
  }

  .groupStudySettingsModal_dark {
    background-color: var(--darkBackground);
    color: var(--darkModeText);
    border-radius: 10px;
  }

  .groupStudySettingsModal span {
    font-size: 25px;
  }

  .groupStudySettingsModal input {
    width: 20px;
    height: 20px;
    margin-left: 15px;
  }

  .groupStudySettingsModalContentDiv div {
    margin: 15px auto;
  }

  .flashCardMainCreationDivFooterButtonDiv1 {
    color: #d0d0d0;
  }

  .menu_competitions_img {
    width: 30px;
    margin-left: 10px;
  }

  /**** HOME TOP ****/
  .welcomeP_light {
    color: var(--lightModeText);
    opacity: 0.6;
  }

  .welcomeP_dark {
    color: #fbfbfb;
    opacity: 0.9;
  }

  .welcomeHeader2 {
    color: #d07627;
    font-weight: 400;
  }

  .welcomeHeader_light {
    color: var(--lightModeText);
  }

  .welcomeHeader_dark {
    color: #fbfbfb;
  }

  .getStarted_light {
    background-color: var(--limeYellow);
  }

  .getStarted_dark {
    background-color: var(--limeYellow);
  }

  .previewButton_light {
    border: 1px solid var(--lightModeText);
    color: var(--lightModeText);
  }

  .previewButton_dark {
    border: 1px solid var(--darkModeText);
    color: var(--darkModeText);
  }

  .home1BottomDiv {
    z-index: 5;
  }

  .home1BottomDiv1_light {
    background: linear-gradient(90deg, #ed497c 0%, #eebbcb 137.54%);
    box-shadow: 0px 4px 20px 1px #ffc8c8;
  }

  .home1BottomDiv2_light {
    background: linear-gradient(90deg, #122e3b 0%, #b9c5cc 137.54%);
    box-shadow: 0px 4px 20px 1px #d9d9d9;
  }

  .home1BottomDiv3_light {
    background: linear-gradient(89.06deg, #f1ae5c 24.48%, #edeebb 190.71%);
    box-shadow: 0px 4px 20px 1px #e8e8e8;
  }

  .home1BottomDiv4_light {
    background: linear-gradient(90deg, #7cccec 0%, #e0f5ff 137.54%);
    box-shadow: 0px 4px 20px 1px #e6e6e6;
  }

  .home1BottomDiv1_dark {
    background: linear-gradient(90deg, #ed497c 0%, #eebbcb 137.54%);
  }

  .home1BottomDiv2_dark {
    background: linear-gradient(90deg, #122e3b 0%, #b9c5cc 137.54%);
  }

  .home1BottomDiv3_dark {
    background: linear-gradient(89.06deg, #f1ae5c 24.48%, #edeebb 190.71%);
  }

  .home1BottomDiv4_dark {
    background: linear-gradient(90deg, #7cccec 0%, #e0f5ff 137.54%);
  }
  /**** END OF HOME TOP ****/

  .ourMissionButton_light {
    background-color: var(--limeYellow);
    color: var(--lightModeText);
  }

  .ourMissionButton_dark {
    background-color: var(--limeYellow);
    color: var(--lightModeText);
  }

  .libraryButton {
    background-color: var(--limeYellow);
    color: var(--lightModeText);
  }

  .tarataiAISubmitButton {
    background-color: var(--limeYellow);
    color: var(--lightModeText);
  }

  .topBarProfileDivContent,
  .dropdownPostLogin {
    z-index: 10;
  }

  .dropdownPostLoginButton_light,
  .toggleColorModeDiv_light {
    border: 0.1px solid rgba(9, 26, 34, 0.2);
  }

  .dropdownPostLoginButton_dark,
  .toggleColorModeDiv_dark {
    border: 0.1px solid rgba(131, 131, 131, 0.2);
  }

  .mobileNavButton_light {
    color: #091a22;
  }

  .mobileNavButton_dark {
    color: var(--darkModeText);
  }

  .pointer {
    cursor: pointer;
  }

  /*** Competitions Page ***/

  .competitionsMainPage {
    width: 100%;
    min-height: calc(100vh - 50px);
    margin-top: 50px;
  }

  .competitionsMainPage_light {
    background-color: var(--lightBackground);
    color: var(--lightModeText);
  }

  .competitionsMainPage_dark {
    background-color: var(--darkBackground);
    color: var(--darkModeText);
  }

  .competitionsPageHeader_light {
    background-color: var(--lightBackground);
    color: var(--lightModeText);
    box-shadow: 0px 4px 4px 0px #0000001a;
    border: 1px solid #eeeeee;
  }

  .competitionsPageHeader_dark {
    background-color: var(--bluegraysteel);
    color: #fff;
  }

  .competitionsPageTabs_light {
    background-color: var(--lightBackground);
    color: var(--lightModeText);
  }

  .competitionsPageTabs_dark {
    background-color: var(--darkBackground);
    color: var(--darkModeText);
  }

  .ai-competition-card_light {
    background-color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #10b981; /* Green border */
  }

  .ai-competition-card_dark {
    background-color: var(--bluegraysteel);
    color: #fff;
    box-shadow: 0px 4px 4px 0px #0000001a;
    border-left: 4px solid #10b981; /* Green border */
  }

  .competition-description_light {
    color: var(--darkModeText);
  }

  .competition-description_dark {
    color: #fff;
    opacity: 0.9;
  }

  .multiplier-label_light {
    color: #6b7280; /* Light gray */
  }

  .multiplier-label_dark {
    color: #9ca3af; /* Dark gray */
  }

  .stats-card_light {
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .stats-card_dark {
    background: var(--bluegraysteel);
    box-shadow: 0px 4px 4px 0px #0000001a;
  }

  .stats-title_light {
    color: #1f2937;
  }

  .stats-title_dark {
    color: #f3f4f6;
  }

  .stats-card_dark span {
    color: #fff;
    opacity: 0.8;
  }

  .achievement-card_light {
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .achievement-card_dark {
    background: var(--bluegraysteel);
    box-shadow: 0px 4px 4px 0px #0000001a;
  }

  .achievement-title_light {
    color: #1f2937; /* Dark gray */
  }

  .achievement-title_dark {
    color: #fff; /* Light gray */
  }

  .achievement-title_light span {
    color: #4b5563; /* Medium gray */
  }

  .achievement-title_dark span,
  .achievement-card_dark span {
    color: #fff; /* Light gray */
    opacity: 0.8;
  }

  .practice-ai-card_light {
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .practice-ai-card_dark {
    background: var(--bluegraysteel);
    box-shadow: 0px 4px 4px 0px #0000001a;
    color: #fff;
  }

  .practice-ai-card_dark h3 {
    color: #fff;
    opacity: 0.8;
  }

  .leaderboard-container_light {
    width: 100%;
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .leaderboard-container_dark {
    width: 100%;
    background: var(--bluegraysteel);
    box-shadow: 0px 4px 4px 0px #0000001a;
    color: #fff;
  }

  .competitions-question-screen_light {
    background-color: #efefef;
  }

  .competitions-question-screen_dark {
    background-color: inherit;
  }

  /** End of Competitions ***/

  /* Small devices (landscape phones) */
  @media (max-width: 767.9px) {
    #dropdown {
      height: auto;
      width: 100%;
      align-self: center;
      background-color: #091a22;
      z-index: 2;
      padding-bottom: 2rem;
      position: absolute;
      top: 49px;
      left: 0;
    }

    #dropdown h6 {
      width: 130px;
      text-align: center;
      color: #fff;
      border: 1px solid;
      align-self: center;
    }

    #ilearnStemCardsLogo {
      height: 50px;
      float: left;
      margin-left: 30px;
    }

    .profileMainDiv {
      width: 100%;
      height: 100vh;
      background-color: var(--lightBackground);
      color: var(--lightModeText);
      padding: 20px;
      margin-top: 50px;
    }

    .profileMainDiv_dark {
      width: 100%;
      height: 100vh;
      background-color: var(--darkBackground);
      color: var(--darkModeText);
      padding: 20px;
      margin-top: 50px;
    }

    .lightOrDarkModeChoiceDiv {
      margin-top: 50px;
    }

    .lightOrDarkModeChoice {
      width: 400px;
      /* border: 1px solid #D8D8D8; */
    }

    .lightModeChoice {
      margin-right: 50px;
    }

    .darkModeChoice {
      margin-left: 50px;
    }

    .lightModeChoice label,
    .darkModeChoice label {
      margin-left: 5px;
    }

    #dropdownPostLogin {
      width: 100%;
      min-height: calc(100vh - 50px);
      position: absolute;
      top: 50px;
      padding: 20px 0;
    }

    .dropdownPostLoginMobileDiv button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 200px;
      height: 40px;
      margin: 5px auto;
    }

    .toggleColorModeDiv {
      width: 200px;
      height: 40px;
      margin: auto;
    }

    #logo {
      height: 30px;
      float: left;
    }

    #topBarLeftDiv {
      width: 20%;
    }

    #topBarMiddleDiv {
      width: 60%;
    }

    #topBarRightDiv {
      width: 0%;
      display: none;
    }

    #topBarMobileDiv {
      width: 20%;
      height: 50px;
    }

    .topBarButtons h6 {
      font-size: 0.75rem;
    }

    #registerButton {
      border-radius: 20px;
      width: 120px;
      height: 30px;
    }

    #mobileNavButton {
      font-size: 1.2rem;
      position: relative;
      margin-right: 1rem;
    }

    .topBarProfileDiv {
      width: 150px;
      font-size: 0.8rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
      margin-right: 0rem;
    }

    .topBarProfileDivInner {
      border: none;
      outline: none;
      padding: 0 0.3rem;
    }

    .topBarProfileDivInner:hover {
      cursor: pointer;
    }

    .topBarProfileDivContent {
      position: absolute;
      border-radius: 0px 0px 5px 5px;
      min-width: 150px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 0;
    }

    .topBarProfileDivContent button {
      font-size: 0.9rem;
      width: 100%;
      margin-top: 0.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .topBarProfileDivContentButtonDiv {
      width: 150px;
    }

    .topBarProfileDivContent i {
      font-size: 0.8rem;
      margin-left: 5px;
    }

    .menu_study_cards_img,
    .menu_group_study_img,
    .menu_live_competitions_img {
      width: 30px;
      margin-left: 10px;
    }

    /**** HOME TOP ****/
    .home {
      width: 100%;
      height: calc(100vh - 50px);
      padding: 0;
      margin-top: 50px;
    }

    .home1 {
      width: 50%;
      flex-direction: column;
      align-items: center;
    }

    .home2 {
      width: 50%;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .backgroundImageDiv {
      width: 25%;
      height: 60%;
      position: absolute;
      left: 0;
      top: 15%;
      border-bottom-right-radius: 300px;
      z-index: 0;
    }

    .backgroundImageDiv_light {
      background-color: var(--lightBackground1);
    }

    .backgroundImageDiv_dark {
      background-color: #3b4c63;
    }

    .backgroundImageDiv2 {
      width: 25%;
      height: 65%;
      position: absolute;
      right: 10px;
      top: 15%;
      z-index: 0;
      border-top-right-radius: 350px;
      border-bottom-left-radius: 50px;
    }

    .backgroundImageDiv2_light {
      background-color: var(--lightBackground1);
    }

    .backgroundImageDiv2_dark {
      background-color: #3b4c63;
    }

    .study-connect-interact-svg {
      margin-top: 0px;
      z-index: 5;
      width: 250px;
    }

    .welcomeHeader {
      z-index: 5;
      font-size: 18px;
      margin-top: -2rem;
    }

    .welcomeP {
      z-index: 5;
      font-size: 10px;
      margin: 0rem auto 1.5rem auto;
      width: 60%;
      font-weight: 400;
    }

    .home1Buttons button {
      width: 120px;
      height: 40px;
      border-radius: 50px;
      z-index: 5;
      margin: 0px 20px 20px 20px;
    }

    .home1BottomDiv {
      /* width: 100%; */
      height: 80px;
      position: absolute;
      bottom: 0px;
      margin-left: 20px;
      /* display: none; */
      /* border: 2px solid red; */
    }

    .home1BottomDiv div {
      width: 60px;
      height: 60px;
      margin: 0px 5px;
      border-radius: 20px;
      color: #fff;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      font-size: 8px;
    }

    .home1BottomDivHeader {
      font-size: 9px;
      margin-bottom: 0px;
    }

    .home1BottomDivP {
      display: none;
    }

    .homePageMainImage {
      width: 70%;
      z-index: 5;
      /* opacity: 0.9; */
    }

    /**** END OF HOME TOP ****/

    /**** HOME FEATURES ****/

    .homeFeaturesMainDiv {
      width: 100%;
      padding: 5rem 0px;
    }

    .homeFeaturesMainDiv h3 {
      font-size: 16px;
      font-weight: bold;
    }

    .homeFeaturesDiv1,
    .homeFeaturesDiv2 {
      width: 100%;
      justify-content: space-around;
    }

    .homeFeaturesDiv1 {
      margin-bottom: 2rem;
    }

    .homeFeaturesDiv2 {
      margin-top: 2rem;
    }

    .homeFeaturesStudyCardsDiv,
    .homeFeaturesGroupStudyDiv,
    .homeFeaturesLiveCompetitionsDiv,
    .homeFeaturesRankingsDiv {
      width: 30%;
    }

    .homeFeaturesMainDiv img,
    .homeFeaturesMainDiv span {
      height: 50px;
      width: 50px;
      margin: 1rem auto;
    }

    .homeFeaturesMainDiv span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
    }

    .homeFeaturesParagraph {
      font-size: 13px;
      max-width: 520px;
    }

    /**** END OF HOME FEATURES ****/

    /**** HOW IT WORKS ****/

    .howItWorksMainDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
    }

    .howItWorksCard {
      width: 100%;
    }

    .howItWorksMainDiv h1,
    .howItWorksMainDiv span {
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .howItWorksCard p {
      width: 100%;
      font-size: 13px;
      max-width: 520px;
      margin: 2rem auto;
    }

    /**** END OF HOW IT WORKS ****/

    /**** PRICING ****/

    #pricingDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
      font-size: 12px;
    }

    #pricingDiv h1 {
      font-weight: bold;
    }

    #pricingDivCards {
      width: 80%;
      max-width: 300px;
      flex-direction: column;
      justify-content: space-around;
      margin-top: 2rem;
    }

    #freeCard {
      flex: 1;
      border: 1px solid #828282;
      border-radius: 7px;
      color: #585858;
      margin-bottom: 2rem;
    }

    #freeCard h4 {
      width: 80%;
      height: 60px;
      background: #d9d9d9;
      border: 1px solid #b0aeae;
      border-radius: 7px;
    }

    #monthlyCard {
      flex: 1;
      background: #d9d9d9;
      border-radius: 7px;
      color: #585858;
      margin-bottom: 2rem;
    }

    #monthlyCard h4 {
      width: 80%;
      height: 60px;
      background: #d9d9d9;
      border: 1px solid #b0aeae;
      border-radius: 7px;
    }

    #yearlyCard {
      flex: 1;
      background: #263238;
      border-radius: 7px;
      color: #ffffff;
    }

    #yearlyCard h4 {
      width: 80%;
      height: 60px;
      background: #f8d149;
      border: 1px solid #ffe177;
      border-radius: 7px;
      color: #263238;
    }

    /**** END OF PRICING ****/

    /*** OUR MISSION ***/

    #ourMissionDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
    }

    #ourMissionDiv h1 {
      font-weight: bold;
    }

    .ourMissionCard {
      width: 100%;
    }

    .ourMissionCardInnerDiv {
      width: 100%;
      flex-direction: column;
    }

    .ourMissionCardImgDiv {
      width: 40%;
    }

    .ourMissionCardImgDiv img {
      width: 80%;
    }

    .ourMissionCardInnerDiv1 {
      width: 60%;
    }

    .ourMissionCard p {
      font-size: 13px;
      max-width: 520px;
      margin: 2rem auto;
    }

    .ourMissionButtonDiv {
      width: 100%;
      padding: 2rem 0;
    }

    .ourMissionButtonDiv button {
      width: 250px;
      height: 60px;
      border-radius: 30px;
      font-size: 1rem;
    }

    /**** END OF OUR MISSION ****/

    /**** FOOTER ****/
    .homePageFooter {
      width: 100%;
      min-height: 50vh;
      background-color: var(--lightBackground);
      color: var(--lightModeText);
      padding: 2rem;
      font-size: 8px;
    }

    .homePageFooter_dark {
      width: 100%;
      min-height: 50vh;
      background-color: var(--darkBackground);
      padding: 2rem;
      color: #ffffff;
      font-size: 8px;
    }

    #footerSubscribeDiv {
      width: 25%;
      min-height: 50vh;
    }

    #footerCompanyAndResources {
      width: 50%;
      min-height: 50vh;
      justify-content: space-around;
      align-items: center;
    }

    #footerServicesDiv {
      width: 25%;
      min-height: 50vh;
      justify-content: center;
      align-items: center;
    }

    #iconsRow {
      width: 200px;
      margin-top: 2rem;
    }

    #iconsRow img {
      width: 30px;
      margin: 0 0.5rem;
      filter: brightness(1.75);
    }

    #homeFinalFooterEmailButton {
      color: #00100f;
      width: 50px;
      height: 18px;
      background: #6cb1a9;
      border: 1px solid #ffffff;
      font-size: 0.6rem;
    }

    /**** END OF FOOTER ****/

    /********* Login or Register Page *********/
    .loginOrRegisterPage {
      margin-top: 50px;
      background-color: whitesmoke;
    }

    #loginPageMainDiv {
      width: 100%;
      background-color: whitesmoke;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
    }

    #cardLoginDiv {
      width: 60%;
      max-width: 375px;
      padding: 0;
    }

    #cardRegister,
    #cardLogin {
      width: 40%;
      max-width: 350px;
      height: auto;
      padding: 1rem 0;
    }

    #cardRegister {
      padding: 1.5rem;
    }

    .cardRegisterImageDiv,
    .cardLoginImageDiv {
      width: 100%;
      height: 100px;
    }

    #cardRegister img,
    #cardLogin img {
      height: 100px;
    }

    #registerCardButton {
      background-color: #091a22;
      color: #fff;
      display: block;
      margin: 1rem auto;
    }

    #loginCardButton {
      background-color: #091a22;
      color: #fff;
      display: block;
      margin: 1rem auto;
      font-size: 0.8rem;
    }

    #registerInputs,
    #loginInputs {
      width: 100%;
      padding: 0;
    }

    .loginInputsDiv,
    .registerInputsDiv {
      width: 100%;
      margin-top: 1rem;
    }

    .backspaceDiv {
      width: 20%;
      height: 2rem;
    }

    .backspaceDiv:hover {
      cursor: pointer;
    }

    .registerInputsDiv input,
    .loginInputsDiv input {
      width: 100%;
      height: 2rem;
      border: 0.25px solid lightgray;
      font-size: 0.6rem;
    }

    #cardRegister input:focus,
    #loginInputs input:focus {
      outline: 0.5px solid gray;
    }

    .formikOuterErrorDiv {
      width: 100%;
      height: 1rem;
    }

    .formikErrorDiv {
      font-size: 0.7rem;
    }

    .switchLoginAndRegister {
      font-size: 0.8rem;
    }

    #loginWithGoogleButton {
      background-color: #fff;
      margin: 1rem auto;
      border: 1px solid lightgray;
    }

    /********* End of Login or Register Page ************/

    /********* Main Portal Page ************/

    #portalMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      background-color: #fff;
      padding: 0;
    }

    .portalMainDivHeader {
      width: 100%;
      height: 100px;
      background-color: #091a22;
      color: #fff;
      padding: 1rem 2rem;
    }

    .portalMainDivHeader .menuDropDown {
      cursor: pointer;
      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
    }

    .notAndInboxDiv {
      min-width: 250px;
    }

    .notAndInboxDiv .icon {
      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
    }

    .portalMainDivBody {
      background-color: #091a22;
      width: 100%;
      min-height: calc(100vh);
    }

    .portalMainDivBody0 {
      width: 100%;
      height: 300px;
    }

    .portalMainDivBody1 {
      width: 100%;
      height: 300px;
      background-color: #fff;
      padding: 0 20%;
    }

    .portalMainDivBody1 div {
      cursor: pointer;
    }

    .newsfeedHeader {
      width: 70%;
      margin-top: 5rem;
    }

    .portalMainDivBody2 {
      width: 70%;
      min-height: 60vh;
      background-color: #fff;
      margin-bottom: 5rem;
    }

    /********* End of Main Portal Page ************/

    /************* STUDYCARDS PAGE ***************/

    .flashCardsMainPageDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .flashCardsMainPageHeader {
      width: 100%;
      min-height: 200px;
      margin-bottom: 2rem;
    }

    .flashCardsMainPageHeaderBack {
      color: yellow;
      margin-left: 2rem;
      margin-top: 50px;
      border: 2px solid var(--limeYellow);
    }

    .flashCardsMainPageHeaderBack_dark {
      color: #ffffff;
      margin-left: 20rem;
      margin-top: 1rem;
    }

    .flashCardsMainPageHeaderBack img {
      margin-left: 0.3rem;
    }

    .flashCardsMainPageHeader2 {
      color: #b5c5cd;
    }

    .flashCardsMainPageHeader3 {
      width: 100%;
      min-height: 100px;
    }

    .flashCardsMainPageHeader3_dark {
      width: 100%;
      min-height: 100px;
    }

    .flashCardsMainPageHeader3a,
    .flashCardsMainPageHeader3a_dark {
      width: 60%;
      height: 90px;
      justify-content: space-around;
      color: #d9d9d9;
      padding: 0 0.2rem;
    }

    .flashCardsMainPageHeader3b {
      width: 40%;
      height: 90px;
      justify-content: center;
      padding: 0 1rem;
    }

    .searchIconButtonTop {
      width: 50px;
      height: 50px;
    }

    #arrow_drop_down_flashcard_1 {
      color: #9d9d9d;
    }

    .flashCardsMainPageHeader3aButton1 {
      color: #122e3b;
      width: 150px;
      height: 50px;
      background-color: #f8f8f8;
      margin-right: 1rem;
      border-radius: 7px 7px 0 0;
    }

    .flashCardsMainPageHeader3aDropDown {
      min-width: 150px;
      height: 200px;
      position: absolute;
      z-index: 2;
      margin-top: 50px;
      background-color: #f8f8f8;
      border-radius: 0 0 7px 7px;
    }

    .flashCardsMainPageHeader3aDropDown button {
      width: 100px;
      margin: 0.5rem auto;
      font-size: 0.8rem;
    }

    .flashCardsMainPageHeader3aButton2 {
      background-color: #e0f945;
      border-radius: 7px;
      color: #122e3b;
      width: 100px;
      height: 50px;
      margin-left: 1rem;
    }

    .flashCardsMainPageHeader3b span {
      /* width: 250px; */
      height: 50px;
      border: 1px solid #ffffff;
      border-radius: 7px;
      color: #fff;
      font-size: 10px;
      padding: 0 10px;
    }

    .flashCardsMainPageHeader3b span:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardMainPageBody {
      width: 100%;
    }

    .flashCardSearchDiv {
      width: 80%;
      min-height: 600px;
    }

    .flashCardSearchDiv1 {
      width: 100%;
      min-height: 250px;
      background-color: #f5f5f5;
    }

    .flashCardSearchDiv1a {
      width: 100%;
      height: 60px;
    }

    .flashCardSearchDiv1aa {
      width: 90%;
    }

    .flashCardSearchDiv1aa div {
      height: 60px;
      width: 80%;
      background-color: #fff;
      border-radius: 7px;
    }

    .searchInput {
      width: 80%;
      height: 60px;
      border: none;
    }

    .searchIconButton {
      height: 60px;
      background-color: #fff;
    }

    .searchInputLabel {
      margin-right: 1rem;
    }

    .flashCardSearchDiv1b {
      width: 150px;
      height: 2.5rem;
      border: 1px solid #122e3b;
      margin-top: 2rem;
      color: #122e3b;
    }

    .flashCardSearchDiv1b i {
      color: rgba(18, 46, 59, 1);
      margin-left: 0.75rem;
      font-size: 1rem;
    }

    .flashCardsSearchByDiv3 {
      width: 100%;
      min-height: 200px;
      border: 1px solid #b6b6b6;
      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
      border-radius: 7px;
    }

    .flashCardsSearchByDiv3 i {
      color: rgba(128, 128, 128, 0.3);
    }

    .flashCardsSearchByDiv3 i:hover {
      cursor: pointer;
    }

    .flashCardsSearchByDiv3a {
      width: 150px;
      height: 150px;
      padding: 1rem;
      text-align: center;
      color: #808080;
    }

    .flashCardsSearchByDiv3b {
      width: 150px;
      height: 150px;
      background: #f8f8f8;
      border: 1px solid #d8d8d8;
      border-radius: 7px;
      color: #808080;
      font-size: 0.8rem;
      padding: 0 0.5rem 0.5rem 0.5rem;
    }

    .flashCardsSearchByDiv3b:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardsSearchByDiv3b1 {
      width: 100%;
      height: 100px;
    }

    .flashCardsSearchByDiv3b2 {
      width: 100%;
      height: 50px;
    }

    .flashCardsSuggestionsDiv {
      width: 95%;
      min-height: 300px;
    }

    .flashCardsSuggestionsDiv1,
    .flashCardsSuggestionsDiv2 {
      flex: 1;
      width: 50%;
    }

    .flashCardsSuggestionsDiv1a,
    .flashCardsSuggestionsDiv1b,
    .flashCardsSuggestionsDiv2a,
    .flashCardsSuggestionsDiv2b {
      height: 100%;
      width: 50%;
    }

    .flashCardsSuggestionsDiv1a p,
    .flashCardsSuggestionsDiv1b p,
    .flashCardsSuggestionsDiv2a p,
    .flashCardsSuggestionsDiv2b p {
      width: 80%;
      padding: 1rem;
      font-size: 0.8rem;
      font-weight: 400;
      text-align: center;
    }

    .flashCardsSuggestionsDiv1a span {
      font-size: 1.5rem;
      transform: rotate(90deg);
    }

    .flashCardsSuggestionsDiv1a_top,
    .flashCardsSuggestionsDiv1b_top,
    .flashCardsSuggestionsDiv2a_top,
    .flashCardsSuggestionsDiv2b_top {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1a_middle,
    .flashCardsSuggestionsDiv1b_middle,
    .flashCardsSuggestionsDiv2a_middle,
    .flashCardsSuggestionsDiv2b_middle {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1a_bottom,
    .flashCardsSuggestionsDiv1b_bottom,
    .flashCardsSuggestionsDiv2a_bottom,
    .flashCardsSuggestionsDiv2b_bottom {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1bBox {
      width: 80px;
      height: 80px;
      background-color: rgba(18, 46, 59, 0.6);
      border: 1px solid #25556b;
      position: absolute;
    }

    .flashCardsSuggestionsDiv1bBox:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .flashCardsSuggestionsDiv1bBox1 {
      margin-top: 20px;
      margin-left: 20px;
    }

    .flashCardsSuggestionsDiv1bBox2 {
      margin-left: -20px;
    }

    .flashCardsSuggestionsDiv1bBox3 {
      margin-top: 10px;
      margin-left: 0px;
    }

    .flashCardsSuggestionsDiv1bSpan {
      color: rgba(255, 255, 255, 0.8);
      position: absolute;
      top: 370px;
      margin-left: 20px;
      width: 70px;
      text-align: center;
      font-size: 0.6rem;
      opacity: 0.8;
    }

    .flashCardsSuggestionsDivRoundNum {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #6b6969;
      background-color: #bababa;
      margin-bottom: 1rem;
    }

    .flashCardsSuggestionsDiv1bDiv,
    .flashCardsSuggestionsDiv2bDiv {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #6b6969;
      background-color: #bababa;
      margin-bottom: 1rem;
    }

    .flashCardsSuggestionsDiv2aDiv {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #6b6969;
      background-color: #bababa;
      margin-top: 250px;
    }

    .flashCardsSuggestionsDiv2a span,
    .flashCardsSuggestionsDiv2b span {
      margin-top: 1rem;
    }

    .annie {
      width: 60px;
      position: absolute;
      margin-left: -30px;
    }

    .john {
      width: 60px;
      position: relative;
      margin-right: -30px;
    }

    .annie:hover,
    .john:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    #add_circle {
      font-size: 5rem;
    }

    #add_circle:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardsRecentDiv {
      width: 95%;
      min-height: 300px;
      margin: 5rem auto;
      color: var(--darkModeText);
    }

    .flashCardsRecentDiv1 {
      width: 100%;
      min-height: 300px;
    }

    .flashCardsLibraryDiv {
      width: 95%;
      min-height: 300px;
      margin-top: 0rem;
    }

    .flashCardsLibraryDiv1 {
      width: 100%;
      min-height: 350px;
      overflow-x: auto;
    }

    .flashCardsSearchByDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
    }

    .flashCardsSearchByDiv_dark {
      width: 80%;
      min-height: 300px;
      margin-top: 5rem;
      color: #0b99db;
    }

    .flashCardsSearchByDiv2 {
      width: 100%;
      min-height: 100px;
      border: 1px dashed #7e7e7e;
      border-radius: 7px;
      color: #808080;
    }

    .flashCardsSearchByDiv2_dark {
      width: 100%;
      min-height: 100px;
      border: 1px dashed #dff945;
      border-radius: 7px;
      color: #808080;
    }

    .flashCardsSearchByDiv2_dark span {
      color: #dff945;
    }

    .flashCardsSearchByDiv2 i {
      color: rgba(128, 128, 128, 0.4);
    }

    .flashCardsSearchByDiv2 i:hover {
      cursor: pointer;
    }

    #searchClose {
      align-self: flex-end;
    }

    .searchAllText {
      font-size: 0.6rem;
      color: #808080;
      text-decoration: underline;
    }

    .searchAllText:hover {
      cursor: pointer;
    }

    .flashCardsSearchByDiv2Button1,
    .flashCardsSearchByDiv2Button2,
    .flashCardsSearchByDiv2Button3,
    .flashCardsSearchByDiv2Button4 {
      width: 100px;
      border-radius: 7px;
      font-size: 0.7rem;
    }

    .flashCardsSearchByDiv2Button1 {
      background: #cbac7f;
      border: 1px solid #d8d8d8;
      color: #fff;
    }

    .flashCardsSearchByDiv2Button2 {
      background: #e9caca;
      border: 1px solid #d8d8d8;
      color: #808080;
    }

    .flashCardsSearchByDiv2Button3 {
      background: #87a8d9;
      border: 1px solid #d8d8d8;
      color: #fff;
    }

    .flashCardsSearchByDiv2Button4 {
      background: #e0f2c9;
      border: 1px solid #d8d8d8;
      color: #808080;
    }

    .flashCardsPopularDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsPopularDiv1 {
      width: 100%;
      min-height: 200px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .flashCardsTextBooksDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsTextBooksDiv1 {
      width: 100%;
      min-height: 200px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .flashCardsHighestRatedDiv {
      width: 80%;
      min-height: 500px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsHighestRatedOuterCardsDiv {
      width: 100%;
      background-color: #f5f5f5;
      padding: 0;
    }

    .flashCardsHighestRatedOuterCardsDiv i {
      opacity: 0.7;
    }

    .flashCardsHighestRatedOuterCardsDiv i:hover {
      cursor: pointer;
      opacity: 0.3;
    }

    .flashCardsHighestRatedDiv1 {
      width: 100%;
      min-height: 400px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .highestRatedCard {
      width: 80%;
      min-height: 260px;
      border: 1px solid #d8d8d8;
      border-radius: 7px;
      padding: 0;
    }

    .highestRatedCardHeader {
      width: 100%;
      height: 2rem;
      margin-bottom: 1rem;
    }

    .highestRatedCardImgDiv {
      width: 100%;
    }

    .highestRatedCardImgDiv img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .highestRatedCardData {
      width: 100%;
      font-size: 0.5rem;
      margin-top: 2rem;
    }

    .highestRatedCardData1 {
      width: 70%;
    }

    .highestRatedCardButtonsDiv {
      width: 100%;
      margin: 1rem 0;
    }

    .highestRatedCardButton1 {
      width: 50px;
      background-color: #d9d9d9;
      border-radius: 20px;
    }

    .highestRatedCardButton2 {
      width: 50px;
      border: 1px solid #d8d8d8;
      border-radius: 20px;
    }

    .highestRatedCardHeaderNotifications {
      opacity: 1;
      color: #0076ff;
    }

    .flashCardMainCreationDiv {
      width: 100%;
      background-color: #fff;
      min-height: 100vh;
      border-radius: 7px;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
    }

    .flashCardMainCreationDiv_dark {
      width: 100%;
      background-color: var(--darkBackground);
      min-height: 100vh;
      border-radius: 7px;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
    }

    .flashCardMainCreationDiv_inner {
      width: 98%;
      min-height: 100vh;
      border: 1px solid #9f9f9f;
    }

    .cancelCreationModeDiv {
      width: 100%;
    }

    .cancelCreationModeButton:hover {
      cursor: pointer;
      color: red;
    }

    .flashCardMainCreationDiv1 {
      width: 95%;
      min-height: 350px;
      background-color: #d9d9d9;
      border: 1px solid #d9d9d9;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      margin-bottom: 50px;
    }

    .flashCardMainCreationDiv1_dark {
      width: 90%;
      min-height: 350px;
      border: 1px solid #d9d9d9;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      margin-bottom: 50px;
      background: linear-gradient(90deg, #10131b 0%, #122e3b 135.64%);
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1a {
      width: 100%;
      height: 50px;
    }

    .flashCardMainCreationDiv1aa {
      width: 10%;
    }

    .flashCardMainCreationDiv1ab {
      width: 80%;
      color: #000000;
    }

    .flashCardMainCreationDiv1ab_dark {
      width: 80%;
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1ac {
      width: 10%;
      color: #122e3b;
      opacity: 0.8;
      font-weight: 100;
    }

    .flashCardMainCreationDiv1ac_dark {
      width: 10%;
      color: var(--darkModeText);
      opacity: 0.8;
      font-weight: 100;
    }

    .createBodyDiv {
      width: 100%;
    }

    .createTitleDiv,
    .createDescriptionDiv {
      width: 100%;
      padding: 0 5rem;
    }

    .createTitleDiv span,
    .createDescriptionDiv span {
      width: 100px;
      font-size: 12px;
    }

    .createTitleInput,
    .createDescriptionInput {
      width: 90%;
    }

    .createDescriptionDiv {
      margin-top: 2rem;
    }

    .createFineTuneDiv {
      width: 100%;
      margin-top: 3rem;
      flex-direction: column;
      padding: 0 5rem;
    }

    .createFineTuneDiv1 {
      width: 100%;
      justify-content: space-around;
    }

    .createFineTuneDiv1aDiv1,
    .createFineTuneDiv1aDiv2 {
      flex-direction: column;
      align-items: flex-start;
    }

    .createFineTuneDiv2 {
      width: 100%;
      color: #717070;
    }

    .createFineTuneDiv2 span,
    .createFineTuneDiv2 label {
      font-size: 0.7rem;
    }

    .createFineTuneDiv1a {
      margin-bottom: 3rem;
    }

    .createFineTuneDiv1aDiv1 span,
    .createFineTuneDiv1aDiv2 span {
      font-size: 0.8rem;
      color: #717070;
    }

    .createCardsLevelGrades,
    .createCardsSubjSelect {
      border: none;
      background-color: inherit;
      font-size: 0.8rem;
      border-bottom: 1px solid gray;
      margin-left: 1rem;
      color: rgba(0, 0, 0, 0.6);
      width: 120px;
    }

    .createCardsLevelGrades_dark,
    .createCardsSubjSelect_dark {
      border: none;
      background-color: var(--darkBackground);
      font-size: 1rem;
      border-bottom: 1px solid gray;
      margin-left: 1rem;
      color: var(--darkModeText);
      width: 120px;
    }

    .createFineTuneDiv1a select:focus {
      border: none;
      outline: none;
      border-bottom: 1px solid gray;
    }

    .createFineTuneDiv1a select:hover {
      cursor: pointer;
    }

    .createFineTuneDiv1b {
      margin-bottom: 2rem;
    }

    .createFineTuneDiv1bDiv1 {
      flex-direction: column;
      align-items: flex-start;
    }

    .bookChapterInput {
      font-size: 0.7rem;
      background-color: inherit;
      border: none;
      border-bottom: 1px solid gray;
    }

    .bookChapterInput:focus {
      outline: none;
      border-bottom: 1px solid gray;
    }

    .createFineTuneDiv1bTextBook {
      font-size: 0.7rem;
    }

    .createFineTuneDiv1bNoSpan {
      font-size: 0.5rem;
      margin: 0 1rem;
    }

    .createFineTuneDiv1bYesSpan {
      font-size: 0.5rem;
      margin: 0 1rem;
    }

    .createFineTuneDiv2a {
      width: 40%;
      height: 130px;
      border: 1px solid #c9c9c9;
      border-radius: 7px;
    }

    .createFineTuneDiv2a1 {
      width: 100%;
    }

    .previewCard {
      width: 95%;
      min-height: 350px;
      border-radius: 7px;
      margin: 10px auto;
    }

    .previewCardHeader {
      width: 100%;
      height: 70px;
      border-bottom: 1px dashed #d0d0d0;
      padding: 0 1rem;
      font-size: 16px;
      color: #d0d0d0;
    }

    .previewCardHeader_1,
    .previewCardHeader_2 {
      width: 50%;
    }

    .previewCardHeader_1 {
      flex-direction: column;
    }

    .previewCardHeader_1_span {
      font-size: 12px;
    }

    .previewCardHeader_2 {
      align-items: center;
    }

    .previewCardBody {
      width: 100%;
      height: 280px;
      padding: 10px;
    }

    .createNewCardTemplate {
      width: 95%;
      min-height: 500px;
      background: #f8f8f8;
      border: 1px solid #d9d9d9;
      border-radius: 7px;
      color: #b4b4b4;
      margin: 10px auto 50px auto;
    }

    .createNewCardTemplateHeader {
      width: 100%;
      height: 70px;
      border-bottom: 1px dashed #d0d0d0;
      padding: 0 1rem;
    }

    .createNewCardTemplateHeaderNumber {
      width: 60px;
      height: 50px;
      background: #d9d9d9;
      border-radius: 7px;
      font-weight: 700;
      font-size: 24px;
      line-height: 32px;
      color: var(--darkModeText);
    }

    .createNewCardTemplateHeaderRight {
      width: 70%;
    }

    .createNewCardTemplateHeaderRight span,
    .createNewCardTemplateHeaderRight i {
      font-weight: 100;
    }

    .createNewCardTemplateHeaderRight span:hover,
    .createNewCardTemplateHeaderRight i:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .createNewCardTemplateBody {
      width: 100%;
      height: 420px;
    }

    .createNewCardTemplateBody1 {
      width: 100%;
      padding: 0 0.5rem;
    }

    #editorTextArea,
    #answerTextArea {
      width: 100%;
      min-width: 100%;
      min-height: 250px;
      margin: 2px auto 10px auto;
      border: 0.2px solid #d0d0d0;
      outline: none;
    }

    #editorTextArea:focus,
    #answerTextArea:focus {
      border: 0.2px solid #d0d0d0;
    }

    .createNewCardTemplateBody1a {
      width: 100%;
      height: 150px;
    }

    .createNewCardTemplateBody2 {
      width: 35%;
    }

    .createNewCardTemplateBody2a {
      width: 140px;
      height: 140px;
      border: 1px dashed #000000;
      border-radius: 7px;
    }

    .createNewCardTemplateBody2b {
      width: 140px;
      height: 140px;
      background-color: #d9d9d9;
      border: 1px solid #c0c0c0;
      border-radius: 7px;
    }

    .createNewCardTemplateBody2a:hover,
    .createNewCardTemplateBody2b:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .createFlashCardNewCardButton {
      border: 1px solid #122e3b;
      border-radius: 7px;
      background-color: inherit;
      height: 50px;
      font-weight: 500;
      font-size: 16px;
      margin: 5rem auto;
    }

    .createFlashCardNewCardButton_dark {
      border: 1px solid #fff;
      border-radius: 7px;
      background-color: inherit;
      width: 200px;
      height: 50px;
      font-weight: 500;
      font-size: 16px;
      margin: 5rem auto;
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1Button {
      border: 1px solid #e0f945;
      border-radius: 7px;
      margin: 2rem auto;
    }

    .flashCardMainCreationDivFooterButtonDiv {
      flex-direction: row;
    }

    .flashCardMainCreationDivFooterButtonDiv1 {
      flex-direction: row;
      align-items: center;
    }

    .newFlashCardDeckSave {
      height: 50px;
      /* width: 50px; */
      margin-right: 20px;
      background-color: #e0f945;
      border-radius: 7px;
    }

    .newFlashCardDeckCancel {
      height: 50px;
      /* width: 150px; */
      margin-left: 20px;
      background-color: #e83d3d;
      border-radius: 7px;
      color: #fff;
    }

    .flashCardsSuggestionsDiv1bSpan:hover {
      cursor: pointer;
    }

    .cardsLibraryMainDiv {
      width: 100%;
      min-height: calc(var(--screen-y) - 50px);
      margin-top: -2rem;
    }

    .classroomCardsLibraryMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 0;
    }

    .cardsLibraryMainDiv h1,
    .classroomCardsLibraryMainDiv h1 {
      width: 90%;
      font-weight: 100;
      font-size: 14px;
    }

    .cardsLibraryMainDiv h3,
    .classroomCardsLibraryMainDiv h3 {
      width: 80%;
      font-weight: 100;
      font-size: 12px;
    }

    .cardsLibraryDisplayCardsDiv {
      width: 80%;
      height: 350px;
      margin: 0.2rem auto 3rem auto;
    }

    .classroomCardsLibraryDisplayCardsDiv {
      width: 95%;
      height: 350px;
      background-color: inherit;
    }

    .cardsLibraryDisplayCardsDivLeft,
    .cardsLibraryDisplayCardsDivRight {
      width: 5%;
      height: 350px;
    }

    .cardsLibraryDisplayCardsDivMiddle {
      width: 90%;
      height: 350px;
      overflow-x: auto;
    }

    .miniCardSetCard {
      width: 300px;
      height: 200px;
      background-color: #fff;
      border-radius: 7px;
      margin-right: 20px;
      opacity: 1;
      color: #091a22;
    }

    .miniCardSetCardMiddle2Text {
      width: 70%;
      font-size: 0.7rem;
      word-wrap: break-word;
    }

    .miniCardSetCardTop {
      width: 100%;
      height: 40px;
    }

    .miniCardSetCardMiddle1 {
      width: 100%;
      height: 50px;
    }

    .miniCardSetCardMiddle2 {
      width: 100%;
      height: 50px;
    }

    .miniCardSetCardFooter {
      width: 80%;
      height: 60px;
    }

    .cardsLibraryDisplayCardsArrow {
      font-size: 3rem;
      color: rgba(0, 0, 0, 0.2);
      z-index: 2;
    }

    .cardsLibraryDisplayCardsArrow:hover {
      cursor: pointer;
    }

    .classroomCardsLibraryDisplayCardsArrow {
      font-size: 3rem;
      font-weight: 100;
      z-index: 2;
      color: #fff;
    }

    /*** END OF STUDYCARDS PAGE ******************/

    /**** DECK VIEW PAGE ****/

    #deckViewModal {
      width: 100%;
      min-height: 80vh;
      background-color: #b5c5cd;
      z-index: 25;
      opacity: 1;
    }

    #deckViewModal1 {
      width: 100%;
      background-color: #b5c5cd;
    }

    #deckViewModalTopDiv {
      width: 90%;
      background-color: #b5c5cd;
      margin-top: 10px;
    }

    .deckViewMainDiv {
      width: 100%;
      height: 80vh;
      background-color: #b5c5cd;
    }

    .deckViewMainDiv1 {
      width: 90%;
      padding: 0;
      background-color: #b5c5cd;
    }

    .deckViewMainDivHeader {
      width: 100%;
      color: #122e3b;
      padding: 20px;
      padding-left: 20px;
    }

    .deckViewMainDivHeader h1 {
      font-size: 25px;
    }

    .deckViewMainDivHeader span {
      font-size: 0.8rem;
    }

    .filled_icon {
      font-variation-settings: "FILL" 1, "wght" 100, "GRAD" 200, "opsz" 48;
    }

    .deckViewModalCloseButton {
      border: 0.2px solid rgba(128, 128, 128, 0.5);
      border-radius: 7px;
    }

    .card {
      width: 100%;
      height: 500px;
      overflow-y: auto;
      background-color: #fff;
    }

    .card h3 {
      width: 80%;
    }

    .deckViewNavButtons {
      margin-top: 2rem;
      padding: 0.5rem;
    }

    .deckViewNavButtonsLeft,
    .deckViewNavButtonsRight {
      width: 100px;
      height: 60px;
      background-color: #122e3b;
      border-radius: 7px;
    }

    .deckViewNavButtonsLeft span,
    .deckViewNavButtonsRight span {
      font-size: 40px;
      color: #b5c5cd;
    }

    .deckViewNavButtonsCenter span {
      font-size: 40px;
      font-weight: 100;
      color: #122e3b;
    }

    .deckViewNavButtonsCenter {
      width: 100px;
      height: 60px;
      margin: 0;
      background-color: none;
    }

    .deckViewNavButtonsCenter:hover {
      background-color: none;
      cursor: pointer;
      opacity: 0.7;
    }

    .cardContent {
      width: 100%;
      height: 450px;
      padding: 0.5rem;
    }

    #cardTextTop {
      position: absolute;
      margin-bottom: 400px;
    }

    #cardText {
      align-self: center;
    }

    .card_display {
      overflow-x: hidden !important;
      font-size: 12px;
      width: 100%;
      height: 100%;
      padding: 0px 10px;
      margin-top: 50px;
    }

    /**** END OF DECK VIEW PAGE ***/

    /*** Group Study Page ***/

    .groupStudyMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      font-size: 10px;
      margin-top: 50px;
    }

    .classroomGroupStudyMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      font-size: 10px;
      margin-top: 50px;
    }

    .groupStudyTopDiv {
      width: 100%;
      height: 100px;
    }

    .groupStudyTopDiv1 {
      width: 20%;
      font-size: 15px;
    }

    .groupStudyTopDiv2 {
      width: 60%;
    }

    .groupStudyTopDiv3 {
      width: 20%;
    }

    .groupStudyMiddleDiv {
      width: 80%;
      height: calc(100vh - 100px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-radius: 7px;
    }

    .groupStudyMiddleDiv1Button {
      width: 200px;
      height: 60px;
      font-size: 13px;
      border-radius: 5px;
    }

    .addParticipantsIcon {
      width: 13px;
      height: 13px;
    }

    .groupStudyFooter {
      width: 95%;
      height: 50px;
      justify-content: space-around;
      padding: 2px 0;
      border-radius: 30px;
      font-size: 6px;
      margin-bottom: 2px;
    }

    .groupStudyFooter span {
      display: none;
    }

    .groupAddParticipantsDivHeader {
      margin-top: 10px;
    }

    .myAvatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupAddParticipantsDivHeader1 {
      width: 100%;
      margin-top: 20px;
      padding: 0px 10px;
    }

    .groupAddParticipantsDivHeader1:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .groupStudyAddFriendsTop {
      width: 100%;
      margin-top: 15px;
    }

    .groupStudyFriendsCount {
      width: 200px;
      height: 40px;
      border-radius: 7px;
    }

    .groupStudyFriendsList {
      min-width: 80%;
      margin: 10px auto;
    }

    .groupStudyFriendListItemDiv {
      width: 100%;
      margin: 5px auto;
    }

    .groupStudyFriendListItemDiv1 {
      width: 40%;
      height: 50px;
      border-radius: 7px;
      padding: 15px 10px;
    }

    .groupStudyFriendListItemDiv2 {
      width: 40%;
      height: 50px;
    }

    .groupStudyFriendListItemButton {
      width: 50px;
      height: 50px;
      border-radius: 7px;
    }

    .myFriends_Avatar {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupStudyMiddleDiv1 {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }

    .groupAddParticipantsDiv {
      width: 500px;
      height: 600px;
      padding-bottom: 20px;
      border-radius: 7px;
      background-color: inherit;
      margin-bottom: 150px;
      overflow-y: auto;
    }

    .avatarMainDiv {
      width: 181px;
      height: 220px;
      padding: 1px;
      border: 0.5px solid lightgray;
    }

    .avatar {
      width: 180px;
      height: 180px;
      font-size: 12px;
    }

    .joinStreamButton,
    .endStreamButton {
      width: 180px;
      height: 40px;
    }

    .avatar__img {
      width: 50px;
      height: 100px;
    }

    .groupStudySettingsModal {
      width: 250px;
      height: 300px;
      position: fixed;
      /** center on page**/
      top: calc(50% - 150px);
      left: calc(50% - 125px);
      z-index: 10;
      opacity: 1;
      padding: 0;
    }

    /** End of Group Study Page **/

    /*** Settings Page for Color theme ***/
    .settingsDemoMainDiv {
      width: 100%;
    }

    .settingsMobileOuterDiv {
      width: 400px;
      height: 700px;
      border: 2px solid #b5c5cd;
      margin-top: 20px;
    }

    .settingsMobileInner1Div,
    .settingsMobileInner2Div {
      width: 100%;
      height: 50%;
    }

    .settingsMobileInner1DivScreen {
      width: 90%;
      height: 90%;
      border: 1px solid grey;
    }

    /*** End of Settings Page for Color theme ***/

    /*** Taratai AI Page ***/
    .tarataiAIMainDiv {
      font-size: 11px;
    }

    .tarataiAITopDiv {
      display: none;
    }

    .tarataiAIMiddleDiv {
      width: 90%;
    }

    .tarataiAIMiddleHeaderDiv {
      width: 100%;
      margin-top: 10px;
    }

    .tarataiAIMiddleContentDiv {
      width: 70%;
      height: 150px;
      margin: 10px auto;
    }

    .tarataiAIMiddleFooterDiv {
      width: 100%;
    }

    .tarataiAIUploadButton,
    .tarataiAIWriteTextButton {
      width: 170px;
      height: 50px;
      border-radius: 7px;
      border: 1px solid #838383;
      color: var(--darkModeText);
      margin: 0px 10px;
    }

    .tarataiAISubmitButton {
      width: 200px;
      height: 60px;
      border-radius: 7px;
    }

    /*** End of Taratai AI Page ***/

    /*** COMPETITIONS PAGE ***/
    .competitionsPageHeader {
      width: 90%;
      height: 150px;
      border-radius: 10px;
      margin-top: 50px;
    }

    .competitionsPageHeader1 {
      width: 50%;
      height: 150px;
    }

    .competitionsPageHeader1 > h1 {
      font-size: 22px;
      font-weight: 700;
    }

    .competitionsPageHeader1 span {
      font-size: 12px;
      font-weight: 400;
    }

    .competitionsPageHeader2 {
      width: 50%;
      height: 150px;
    }

    .competitionsPageHeader2PointsBox {
      width: 80px;
      height: 80px;
      border-radius: 10px;
      background: linear-gradient(90deg, #fac015 0%, #f97616 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2RanksBox {
      width: 100px;
      height: 80px;
      margin: 0px 10px;
      border-radius: 10px;
      background: linear-gradient(90deg, #659ff9 0%, #a05df7 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2WinRateBox {
      width: 80px;
      height: 80px;
      border-radius: 10px;
      background: linear-gradient(90deg, #46db84 0%, #16baa5 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2 div {
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .competitionsPageTabs {
      width: 90%;
      height: 80px;
      margin-top: 80px;
    }

    .competitionsPageTabs button {
      width: 400px;
      height: 50px;
      border-radius: 10px;
      cursor: pointer;
    }

    .competitionsPageTabs_not_active {
      background-color: inherit;
      border: none;
    }

    .competitionsPageTabs_active {
      border: none;
    }

    /* AI Competition Card Styles */

    .competitionsOptions {
      width: 100%;
    }

    .ai-competition-card {
      width: 90%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .bot-icon {
      width: 32px;
      height: 32px;
      color: #10b981; /* Green color */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .multiplier-section {
      text-align: right;
    }

    .multiplier-label {
      font-size: 14px;
      margin-bottom: 2px;
    }

    .multiplier-value {
      font-size: 18px;
      font-weight: bold;
      color: #ea580c; /* Orange */
    }

    .competition-controls {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .subject-select,
    .topic-select {
      flex: 1;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-select:focus,
    .topic-select:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .subject-select:disabled,
    .topic-select:disabled {
      background-color: #f9fafb;
      color: #9ca3af;
      cursor: not-allowed;
    }

    .start-button {
      padding: 12px 24px;
      background: #10b981; /* Green */
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .start-button:hover:not(:disabled) {
      background: #059669; /* Darker green */
    }

    .start-button:disabled {
      background: #9ca3af; /* Gray */
      cursor: not-allowed;
    }

    .play-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    /* Friend Competition Card Styles */

    .friend-competition-card {
      width: 90%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .users-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Hover effect for future when feature becomes available */
    .friend-competition-card.available {
      opacity: 1;
      border-left-color: #3b82f6; /* Blue border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .friend-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .friend-competition-card.available .users-icon {
      color: #3b82f6; /* Blue color when available */
    }

    /* .friend-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .friend-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Random User Competition Card Styles */

    .random-user-competition-card {
      width: 90%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .zap-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Styles for when feature becomes available */
    .random-user-competition-card.available {
      opacity: 1;
      border-left-color: #7c3aed; /* Purple border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .random-user-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .random-user-competition-card.available .zap-icon {
      color: #7c3aed; /* Purple color when available */
    }

    /* .random-user-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .random-user-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Special highlight for full multiplier feature */
    .random-user-competition-card.available .coming-soon-message {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fde68a 100%
      ); /* Golden gradient */
      color: #92400e; /* Dark yellow/brown text */
      border: 1px solid #f59e0b; /* Golden border */
      font-weight: 600;
    }

    /* Animation for the Zap icon when available */
    .random-user-competition-card.available .zap-icon {
      animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.5));
      }
      50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.8));
      }
    }

    /* Quick Stats Sidebar Styles */

    .sidebar-container {
      width: 100%;
      gap: 24px; /* space-y-6 equivalent */
    }

    .stats-card {
      width: 90%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .stats-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .performance-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .performance-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .performance-subject {
      font-size: 14px;
    }

    .performance-points {
      font-weight: bold;
      font-size: 14px;
    }

    .performance-points.positive {
      color: #059669; /* Green for good performance */
    }

    .performance-points.negative {
      color: #dc2626; /* Red for poor performance */
    }

    /* Additional visual enhancements */
    .performance-item {
      padding: 8px 0;
      border-bottom: 1px solid #f3f4f6;
      transition: background-color 0.2s ease;
    }

    .performance-item:last-child {
      border-bottom: none;
    }

    .performance-item:hover {
      background-color: #f9fafb;
      border-radius: 6px;
      padding: 8px 12px;
      margin: 0 -12px;
    }

    /* Optional: Progress indicators for performance trends */
    .performance-item.trending-up::before {
      content: "↗";
      color: #059669;
      margin-right: 4px;
      font-weight: bold;
    }

    .performance-item.trending-down::before {
      content: "↘";
      color: #dc2626;
      margin-right: 4px;
      font-weight: bold;
    }

    /* Optional: Badge-style points display */
    .performance-points {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .performance-points.positive {
      background-color: #d1fae5; /* Light green background */
      color: #065f46; /* Dark green text */
    }

    .performance-points.negative {
      background-color: #fee2e2; /* Light red background */
      color: #991b1b; /* Dark red text */
    }

    /* Achievement Progress Card Styles */

    .achievement-card {
      width: 90%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .achievement-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .achievement-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .achievement-item {
      display: flex;
      flex-direction: column;
    }

    .achievement-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .achievement-name {
      font-size: 14px;
      font-weight: 500;
    }

    .achievement-progress-text {
      font-size: 14px;
      font-weight: 500;
    }

    .progress-bar-container {
      width: 100%;
      background: #e5e7eb; /* Light gray background */
      border-radius: 9999px; /* Fully rounded */
      height: 8px;
      overflow: hidden;
      position: relative;
    }

    .progress-bar {
      height: 100%;
      border-radius: 9999px; /* Fully rounded */
      transition: width 0.5s ease-in-out;
      position: relative;
    }

    .progress-bar.blue {
      background: #3b82f6; /* Blue */
    }

    .progress-bar.yellow {
      background: #eab308; /* Yellow */
    }

    /* Additional color options for other achievements */
    .progress-bar.green {
      background: #10b981; /* Green */
    }

    .progress-bar.purple {
      background: #8b5cf6; /* Purple */
    }

    .progress-bar.red {
      background: #ef4444; /* Red */
    }

    .progress-bar.orange {
      background: #f97316; /* Orange */
    }

    /* Animation effect for progress bars */
    .progress-bar {
      animation: progressFill 1s ease-out;
    }

    @keyframes progressFill {
      from {
        width: 0%;
      }
      to {
        width: var(--target-width, 0%);
      }
    }

    /* Hover effects */
    /* .achievement-item:hover .achievement-name {
      color: #1f2937;  
      font-weight: 600;
    } */

    .achievement-item:hover .progress-bar {
      filter: brightness(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Progress bar glow effect */
    .progress-bar::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
      );
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }

    /* Achievement completion celebration */
    /* .achievement-item.completed .achievement-name {
      color: #059669;
      font-weight: 700;
    } */

    /* .achievement-item.completed .achievement-progress-text {
      color: #059669;
      font-weight: 700;
    } */

    .achievement-item.completed .progress-bar {
      background: linear-gradient(90deg, #10b981, #34d399);
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* Near completion highlighting */
    .achievement-item.near-completion .progress-bar {
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    }

    /* .achievement-item.near-completion .achievement-name {
      color: #1d4ed8;
      font-weight: 600;
    } */

    /* Practice Tab Styles */

    .practice-tab-container {
      gap: 24px;
      width: 100%;
    }

    /* Practice vs AI Card */
    .practice-ai-card {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .practice-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .bot-icon-blue {
      width: 32px;
      height: 32px;
      color: #3b82f6; /* Blue */
      margin-right: 12px;
    }

    .practice-title {
      font-size: 20px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0 0 4px 0;
    }

    .practice-description {
      margin: 0;
      font-size: 14px;
    }

    .practice-controls {
      display: flex;
      flex-direction: column;
      gap: 16px; /* space-y-4 equivalent */
    }

    .subject-dropdown {
      width: 100%;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-dropdown:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .start-practice-button {
      width: 100%;
      background: #3b82f6; /* Blue */
      color: white;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .start-practice-button:hover {
      background: #2563eb; /* Darker blue */
    }

    /* Practice vs Friends Card (Disabled) */
    .practice-friends-card {
      width: 60%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      opacity: 0.75; /* Dimmed appearance */
      margin: 50px auto;
    }

    .users-icon-gray {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray */
      margin-right: 12px;
    }

    .practice-title-disabled {
      font-size: 20px;
      font-weight: bold;
      color: #4b5563; /* Medium gray for disabled state */
      margin: 0 0 4px 0;
    }

    .practice-description-disabled {
      color: #6b7280; /* Light gray for disabled state */
      margin: 0;
      font-size: 14px;
    }

    .coming-soon-notice {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Enhanced hover effects for available card */
    .practice-ai-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Loading state for practice button */
    .start-practice-button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .start-practice-button.loading {
      position: relative;
      color: transparent;
    }

    .start-practice-button.loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    /* Future enhancement: When friends practice becomes available */
    .practice-friends-card.available {
      opacity: 1;
      border-left: 4px solid #10b981; /* Green accent */
    }

    .practice-friends-card.available .users-icon-gray {
      color: #10b981; /* Green when available */
    }

    .practice-friends-card.available .practice-title-disabled {
      color: #1f2937; /* Dark gray when available */
    }

    .practice-friends-card.available .practice-description-disabled {
      color: #4b5563; /* Medium gray when available */
    }

    .practice-friends-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Leaderboard Tab Styles */

    .leaderboard-container {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .leaderboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .leaderboard-title {
      font-size: 24px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0;
    }

    .subject-filter {
      padding: 8px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-filter:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .leaderboard-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .leaderboard-item.top-three {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fed7aa 100%
      ); /* Yellow to orange gradient */
    }

    .leaderboard-item.regular {
      background: #f9fafb; /* Light gray */
    }

    .student-info {
      display: flex;
      align-items: center;
    }

    .rank-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      margin-right: 16px;
      font-size: 14px;
    }

    .rank-badge.gold {
      background: #eab308; /* Gold/Yellow */
    }

    .rank-badge.silver {
      background: #9ca3af; /* Silver/Gray */
    }

    .rank-badge.bronze {
      background: #fb923c; /* Bronze/Orange */
    }

    .rank-badge.regular-rank {
      background: #3b82f6; /* Blue */
    }

    .student-details {
      display: flex;
      flex-direction: column;
    }

    .student-name {
      font-weight: 600;
      color: #1f2937; /* Dark gray */
      font-size: 16px;
    }

    .student-level {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    .score-info {
      text-align: right;
    }

    .score-points {
      font-weight: bold;
      font-size: 18px;
      color: #1f2937; /* Dark gray */
    }

    .score-label {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    /* Hover effects */
    .leaderboard-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .leaderboard-item.top-three:hover {
      background: linear-gradient(135deg, #fef3c7 0%, #fdba74 100%);
    }

    .leaderboard-item.regular:hover {
      background: #f3f4f6;
    }

    /* Medal icons for top 3 */
    .rank-badge.gold::after {
      content: "🥇";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.silver::after {
      content: "🥈";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.bronze::after {
      content: "🥉";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    /* Animation for rank changes */
    .leaderboard-item {
      animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Special highlighting for current user */
    .leaderboard-item.current-user {
      border: 2px solid #3b82f6;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    }

    .leaderboard-item.current-user .student-name {
      color: #1d4ed8;
      font-weight: 700;
    }

    /* Loading skeleton animation */
    .leaderboard-item.loading {
      background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }

    /* Empty state styling */
    .leaderboard-empty {
      text-align: center;
      padding: 40px 20px;
      color: #6b7280;
    }

    .leaderboard-empty h4 {
      font-size: 18px;
      margin-bottom: 8px;
      color: #374151;
    }

    .leaderboard-empty p {
      font-size: 14px;
      margin: 0;
    }
  }

  /* Medium devices (tablets) */
  @media (min-width: 768px) and (max-width: 992px) {
    #dropdown {
      height: auto;
      width: 100%;
      align-self: center;
      background-color: #091a22;
      z-index: 2;
      padding-bottom: 2rem;
      position: absolute;
      top: 49px;
      left: 0;
    }

    #dropdown h6 {
      width: 130px;
      text-align: center;
      color: #fff;
      border: 1px solid;
      align-self: center;
    }

    #logo {
      height: 30px;
      float: left;
    }

    #topBarLeftDiv {
      width: 20%;
    }

    #topBarMiddleDiv {
      width: 60%;
    }

    #topBarRightDiv {
      width: 0%;
      display: none;
    }

    #topBarMobileDiv {
      width: 20%;
      height: 50px;
    }

    #dropdownPostLogin {
      width: 100%;
      min-height: calc(110vh - 50px);
      position: absolute;
      top: 50px;
      padding: 0;
    }

    .dropdownPostLoginMobileDiv button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 200px;
      height: 40px;
      margin: 5px auto;
    }

    .toggleColorModeDiv {
      width: 200px;
      height: 40px;
      margin: auto;
    }

    .topBarButtons h6 {
      font-size: 0.75rem;
    }

    #ilearnStemCardsLogo {
      height: 50px;
      float: left;
      margin-left: 30px;
    }

    .profileMainDiv {
      width: 100%;
      height: 100vh;
      background-color: var(--lightBackground);
      color: var(--lightModeText);
      padding: 20px;
      margin-top: 50px;
    }

    .profileMainDiv_dark {
      width: 100%;
      height: 100vh;
      background-color: var(--darkBackground);
      color: var(--darkModeText);
      padding: 20px;
      margin-top: 50px;
    }

    .lightOrDarkModeChoiceDiv {
      margin-top: 50px;
    }

    .lightOrDarkModeChoice {
      width: 400px;
      /* border: 1px solid #D8D8D8; */
    }

    .lightModeChoice {
      margin-right: 50px;
    }

    .darkModeChoice {
      margin-left: 50px;
    }

    .lightModeChoice label,
    .darkModeChoice label {
      margin-left: 5px;
    }

    #registerButton {
      border-radius: 20px;
      width: 120px;
      height: 30px;
    }

    #mobileNavButton {
      font-size: 1.2rem;
      position: relative;
      margin-right: 1rem;
    }

    .topBarProfileDiv {
      width: 150px;
      font-size: 0.9rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
      margin-right: 2rem;
    }

    .topBarProfileDivInner {
      border: none;
      outline: none;
      padding: 0 0.3rem;
    }

    .topBarProfileDivInner:hover {
      cursor: pointer;
    }

    .topBarProfileDivContent {
      position: absolute;
      border-radius: 0px 0px 5px 5px;
      min-width: 120px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 0;
    }

    .topBarProfileDivContent button {
      font-size: 0.9rem;
      width: 100%;
      margin-top: 0.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .topBarProfileDivContentButtonDiv {
      width: 150px;
    }

    .topBarProfileDivContent i {
      font-size: 0.8rem;
      margin-left: 5px;
    }

    .menu_study_cards_img,
    .menu_group_study_img,
    .menu_live_competitions_img {
      width: 30px;
      margin-left: 10px;
    }

    /**** HOME TOP ****/
    .home {
      width: 100%;
      height: calc(100vh - 50px);
      padding: 0;
      margin-top: 50px;
    }

    .home1 {
      width: 50%;
      flex-direction: column;
      align-items: center;
    }

    .home2 {
      width: 50%;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .backgroundImageDiv {
      width: 25%;
      height: 60%;
      position: absolute;
      left: 0;
      top: 15%;
      border-bottom-right-radius: 300px;
      z-index: 0;
    }

    .backgroundImageDiv_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv_dark {
      background-color: #3b4c63;
    }

    .backgroundImageDiv2 {
      width: 25%;
      height: 65%;
      position: absolute;
      right: 10px;
      top: 15%;
      z-index: 0;
      border-top-right-radius: 350px;
      border-bottom-left-radius: 50px;
    }

    .backgroundImageDiv2_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv2_dark {
      background-color: var(--bluegraysteel);
    }

    .study-connect-interact-svg {
      margin-top: 0px;
      z-index: 5;
      width: 250px;
    }

    .welcomeHeader {
      z-index: 5;
      font-size: 18px;
      margin-top: -2rem;
    }

    .welcomeP {
      z-index: 5;
      font-size: 10px;
      margin: 0rem auto 1.5rem auto;
      width: 60%;
      font-weight: 400;
    }

    .home1Buttons button {
      width: 120px;
      height: 40px;
      border-radius: 50px;
      z-index: 5;
      margin: 0px 20px 20px 20px;
    }

    .home1BottomDiv {
      /* width: 100%; */
      height: 120px;
      position: absolute;
      bottom: 0px;
      margin-left: 20px;
      /* display: none; */
      /* border: 2px solid red; */
    }

    .home1BottomDiv div {
      width: 80px;
      height: 80px;
      margin: 0px 2px;
      border-radius: 20px;
      color: #fff;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      font-size: 8px;
    }

    .home1BottomDivHeader {
      font-size: 13px;
      margin-bottom: 0px;
    }

    .home1BottomDivP {
      display: none;
    }

    .homePageMainImage {
      width: 70%;
      z-index: 5;
      /* opacity: 0.9; */
    }

    /**** END OF HOME TOP ****/

    /**** END OF HOME TOP ****/

    /**** HOME FEATURES ****/

    .homeFeaturesMainDiv {
      width: 100%;
      padding: 5rem 0;
    }

    .homeFeaturesMainDiv h3 {
      font-size: 20px;
      font-weight: bold;
    }

    .homeFeaturesDiv1,
    .homeFeaturesDiv2 {
      width: 90%;
      justify-content: space-around;
    }

    .homeFeaturesDiv1 {
      margin-bottom: 2rem;
    }

    .homeFeaturesDiv2 {
      margin-top: 2rem;
    }

    .homeFeaturesStudyCardsDiv,
    .homeFeaturesGroupStudyDiv,
    .homeFeaturesLiveCompetitionsDiv,
    .homeFeaturesRankingsDiv {
      width: 30%;
    }

    .homeFeaturesMainDiv img,
    .homeFeaturesMainDiv span {
      height: 50px;
      width: 50px;
      margin: 1rem auto;
    }

    .homeFeaturesMainDiv span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
    }

    .homeFeaturesParagraph {
      font-size: 14px;
      max-width: 560px;
    }

    /**** END OF HOME FEATURES ****/

    /**** HOW IT WORKS ****/

    .howItWorksMainDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
    }

    .howItWorksCard {
      width: 100%;
    }

    .howItWorksMainDiv h1,
    .howItWorksMainDiv span {
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .howItWorksCard p {
      width: 100%;
      font-size: 14px;
      max-width: 560px;
      margin: 2rem auto;
    }

    /**** END OF HOW IT WORKS ****/

    /**** PRICING ****/

    #pricingDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
      font-size: 10px;
    }

    #pricingDiv h1 {
      font-weight: bold;
    }

    #pricingDivCards {
      width: 80%;
      justify-content: space-around;
      margin-top: 2rem;
    }

    #freeCard {
      flex: 1;
      border: 1px solid #828282;
      border-radius: 7px;
      margin-right: 1rem;
      color: #585858;
    }

    #freeCard h4 {
      width: 80%;
      height: 60px;
      background: #d9d9d9;
      border: 1px solid #b0aeae;
      border-radius: 7px;
    }

    #monthlyCard {
      flex: 1;
      background: #d9d9d9;
      border-radius: 7px;
      margin: 0 1rem;
      color: #585858;
    }

    #monthlyCard h4 {
      width: 80%;
      height: 60px;
      background: #d9d9d9;
      border: 1px solid #b0aeae;
      border-radius: 7px;
    }

    #yearlyCard {
      flex: 1;
      background: #263238;
      border-radius: 7px;
      margin-left: 1rem;
      color: #ffffff;
    }

    #yearlyCard h4 {
      width: 80%;
      height: 60px;
      background: #f8d149;
      border: 1px solid #ffe177;
      border-radius: 7px;
      color: #263238;
    }

    /**** END OF PRICING ****/

    /*** OUR MISSION ***/

    #ourMissionDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
    }

    #ourMissionDiv h1 {
      font-weight: bold;
    }

    .ourMissionCard {
      width: 100%;
    }

    .ourMissionCardInnerDiv {
      width: 100%;
      flex-direction: column;
    }

    .ourMissionCardImgDiv {
      width: 40%;
    }

    .ourMissionCardImgDiv img {
      width: 80%;
    }

    .ourMissionCardInnerDiv1 {
      width: 60%;
    }

    .ourMissionCard p {
      font-size: 14px;
      max-width: 560px;
      margin: 2rem auto;
    }

    .ourMissionButtonDiv {
      width: 100%;
      padding: 2rem 0;
    }

    .ourMissionButtonDiv button {
      width: 250px;
      height: 60px;
      border-radius: 30px;
      font-size: 1rem;
    }

    /**** END OF OUR MISSION ****/

    /**** FOOTER ****/
    .homePageFooter {
      width: 100%;
      min-height: 40vh;
      background-color: var(--lightBackground);
      color: var(--lightModeText);
      padding: 2rem;
      font-size: 12px;
    }

    .homePageFooter_dark {
      width: 100%;
      min-height: 40vh;
      background-color: var(--darkBackground);
      padding: 2rem;
      color: #ffffff;
      font-size: 12px;
    }

    #footerSubscribeDiv {
      width: 25%;
      min-height: 50vh;
    }

    #footerCompanyAndResources {
      width: 50%;
      min-height: 50vh;
      justify-content: space-around;
      align-items: center;
    }

    #footerServicesDiv {
      width: 25%;
      min-height: 50vh;
      justify-content: center;
      align-items: center;
    }

    #iconsRow {
      width: 200px;
      margin-top: 2rem;
    }

    #iconsRow img {
      width: 30px;
      margin: 0 0.5rem;
      filter: brightness(1.75);
    }

    #homeFinalFooterEmailButton {
      color: #00100f;
      width: 50px;
      height: 23px;
      background: #6cb1a9;
      border: 1px solid #ffffff;
      font-size: 0.6rem;
    }

    /**** END OF FOOTER ****/

    /********* Login or Register Page *********/
    .loginOrRegisterPage {
      margin-top: 50px;
      background-color: whitesmoke;
      padding: 10px;
    }

    #loginPageMainDiv {
      width: 100%;
      background-color: whitesmoke;
      align-items: center;
      justify-content: center;
    }

    #cardLoginDiv {
      width: 40%;
      max-width: 375px;
      padding: 0;
    }

    #cardRegister,
    #cardLogin {
      width: 40%;
      max-width: 350px;
      height: auto;
      padding: 1rem 0;
    }

    #cardRegister {
      padding: 1.5rem;
    }

    .cardRegisterImageDiv,
    .cardLoginImageDiv {
      width: 100%;
      height: 100px;
    }

    #cardRegister img,
    #cardLogin img {
      height: 100px;
    }

    #registerCardButton {
      background-color: #091a22;
      color: #fff;
      display: block;
      margin: 1rem auto;
    }

    #loginCardButton {
      background-color: #091a22;
      color: #fff;
      display: block;
      margin: 1rem auto;
      font-size: 0.8rem;
    }

    #registerInputs,
    #loginInputs {
      width: 100%;
      padding: 0;
    }

    .loginInputsDiv,
    .registerInputsDiv {
      width: 100%;
      margin-top: 1rem;
    }

    .backspaceDiv {
      width: 20%;
      height: 2rem;
    }

    .backspaceDiv:hover {
      cursor: pointer;
    }

    .registerInputsDiv input,
    .loginInputsDiv input {
      width: 100%;
      height: 2rem;
      border: 0.25px solid lightgray;
      font-size: 0.6rem;
    }

    #cardRegister input:focus,
    #loginInputs input:focus {
      outline: 0.5px solid gray;
    }

    .formikOuterErrorDiv {
      width: 100%;
      height: 1rem;
    }

    .formikErrorDiv {
      font-size: 0.7rem;
    }

    .switchLoginAndRegister {
      font-size: 0.8rem;
    }

    #loginWithGoogleButton {
      background-color: #fff;
      margin: 1rem auto;
      border: 1px solid lightgray;
    }

    /********* End of Login or Register Page ************/

    /********* Main Portal Page ************/

    #portalMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      background-color: #fff;
      padding: 0;
    }

    .portalMainDivHeader {
      width: 100%;
      height: 100px;
      background-color: #091a22;
      color: #fff;
      padding: 1rem 2rem;
    }

    .portalMainDivHeader .menuDropDown {
      cursor: pointer;
      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
    }

    .notAndInboxDiv {
      min-width: 300px;
    }

    .notAndInboxDiv .icon {
      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
    }

    .portalMainDivBody {
      background-color: #091a22;
      width: 100%;
      min-height: calc(100vh);
    }

    .portalMainDivBody0 {
      width: 100%;
      height: 300px;
    }

    .portalMainDivBody1 {
      width: 100%;
      height: 300px;
      background-color: #fff;
      padding: 0 20%;
    }

    .portalMainDivBody1 div {
      cursor: pointer;
    }

    .newsfeedHeader {
      width: 70%;
      margin-top: 5rem;
    }

    .portalMainDivBody2 {
      width: 70%;
      min-height: 60vh;
      background-color: #fff;
      margin-bottom: 5rem;
    }

    /********* End of Main Portal Page ************/

    /************* STUDYCARDS PAGE ***************/

    .flashCardsMainPageDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .flashCardsMainPageHeader {
      width: 100%;
      min-height: 200px;
      margin-bottom: 2rem;
    }

    .flashCardsMainPageHeaderBack {
      color: #ffffff;
      margin-left: 20rem;
      margin-top: 1rem;
    }

    .flashCardsMainPageHeaderBack_dark {
      color: #ffffff;
      margin-left: 20rem;
      margin-top: 1rem;
    }

    .flashCardsMainPageHeaderBack img {
      margin-left: 0.3rem;
    }

    .flashCardsMainPageHeader2 {
      color: #b5c5cd;
    }

    .flashCardsMainPageHeader3 {
      width: 100%;
      min-height: 100px;
    }

    .flashCardsMainPageHeader3_dark {
      width: 100%;
      min-height: 100px;
    }

    .flashCardsMainPageHeader3a,
    .flashCardsMainPageHeader3a_dark {
      width: 50%;
      height: 90px;
      color: #d9d9d9;
    }

    .flashCardsMainPageHeader3b {
      height: 90px;
      width: 30%;
      justify-content: flex-end;
      padding: 0 1rem;
    }

    .searchIconButtonTop {
      width: 50px;
      height: 50px;
      margin-left: -3rem;
    }

    #arrow_drop_down_flashcard_1 {
      color: #9d9d9d;
    }

    .flashCardsMainPageHeader3aButton1 {
      color: #122e3b;
      width: 150px;
      height: 50px;
      background-color: #f8f8f8;
      margin-right: 1rem;
      border-radius: 7px 7px 0 0;
    }

    .flashCardsMainPageHeader3aDropDown {
      min-width: 150px;
      height: 200px;
      position: absolute;
      z-index: 2;
      margin-top: 50px;
      background-color: #f8f8f8;
      border-radius: 0 0 7px 7px;
    }

    .flashCardsMainPageHeader3aDropDown button {
      width: 100px;
      margin: 0.5rem auto;
      font-size: 0.8rem;
    }

    .flashCardsMainPageHeader3aButton2 {
      background-color: #e0f945;
      border-radius: 7px;
      color: #122e3b;
      width: 100px;
      height: 50px;
      margin-left: 1rem;
    }

    .flashCardsMainPageHeader3b span {
      width: 180px;
      height: 40px;
      font-size: 0.8rem;
      border: 1px solid #ffffff;
      border-radius: 7px;
      color: #fff;
    }

    .flashCardsMainPageHeader3b span:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardMainPageBody {
      width: 100%;
    }

    .flashCardSearchDiv {
      width: 80%;
      min-height: 600px;
    }

    .flashCardSearchDiv1 {
      width: 100%;
      min-height: 250px;
      background-color: #f5f5f5;
    }

    .flashCardSearchDiv1a {
      width: 100%;
      height: 60px;
    }

    .flashCardSearchDiv1aa {
      width: 90%;
    }

    .flashCardSearchDiv1aa div {
      height: 60px;
      width: 80%;
      background-color: #fff;
      border-radius: 7px;
    }

    .searchInput {
      width: 80%;
      height: 60px;
      border: none;
    }

    .searchIconButton {
      height: 60px;
      background-color: #fff;
    }

    .searchInputLabel {
      margin-right: 1rem;
    }

    .flashCardSearchDiv1b {
      width: 150px;
      height: 2.5rem;
      border: 1px solid #122e3b;
      margin-top: 2rem;
      color: #122e3b;
    }

    .flashCardSearchDiv1b i {
      color: rgba(18, 46, 59, 1);
      margin-left: 0.75rem;
      font-size: 1rem;
    }

    .flashCardsSearchByDiv3 {
      width: 100%;
      min-height: 200px;
      border: 1px solid #b6b6b6;
      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
      border-radius: 7px;
    }

    .flashCardsSearchByDiv3 i {
      color: rgba(128, 128, 128, 0.3);
    }

    .flashCardsSearchByDiv3 i:hover {
      cursor: pointer;
    }

    .flashCardsSearchByDiv3a {
      width: 150px;
      height: 150px;
      padding: 1rem;
      text-align: center;
      color: #808080;
    }

    .flashCardsSearchByDiv3b {
      width: 150px;
      height: 150px;
      background: #f8f8f8;
      border: 1px solid #d8d8d8;
      border-radius: 7px;
      color: #808080;
      font-size: 0.8rem;
      padding: 0 0.5rem 0.5rem 0.5rem;
    }

    .flashCardsSearchByDiv3b:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardsSearchByDiv3b1 {
      width: 100%;
      height: 100px;
    }

    .flashCardsSearchByDiv3b2 {
      width: 100%;
      height: 50px;
    }

    .flashCardsSuggestionsDiv {
      width: 90%;
      height: 300px;
    }

    .flashCardsSuggestionsDiv1,
    .flashCardsSuggestionsDiv2 {
      height: 100%;
      width: 50%;
    }

    .flashCardsSuggestionsDiv1a,
    .flashCardsSuggestionsDiv1b,
    .flashCardsSuggestionsDiv2a,
    .flashCardsSuggestionsDiv2b {
      height: 100%;
      width: 50%;
    }

    .flashCardsSuggestionsDiv1a p,
    .flashCardsSuggestionsDiv1b p,
    .flashCardsSuggestionsDiv2a p,
    .flashCardsSuggestionsDiv2b p {
      width: 80%;
      padding: 1rem;
      font-size: 0.9rem;
      font-weight: 400;
      text-align: center;
    }

    .flashCardsSuggestionsDiv1a span {
      font-size: 2rem;
      transform: rotate(90deg);
    }

    .flashCardsSuggestionsDiv1a_top,
    .flashCardsSuggestionsDiv1b_top,
    .flashCardsSuggestionsDiv2a_top,
    .flashCardsSuggestionsDiv2b_top {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1a_middle,
    .flashCardsSuggestionsDiv1b_middle,
    .flashCardsSuggestionsDiv2a_middle,
    .flashCardsSuggestionsDiv2b_middle {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1a_bottom,
    .flashCardsSuggestionsDiv1b_bottom,
    .flashCardsSuggestionsDiv2a_bottom,
    .flashCardsSuggestionsDiv2b_bottom {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1bBox {
      width: 70px;
      height: 70px;
      background-color: rgba(18, 46, 59, 0.6);
      border: 1px solid #25556b;
      position: absolute;
    }

    .flashCardsSuggestionsDiv1bBox:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .flashCardsSuggestionsDiv1bBox1 {
      margin-top: 20px;
      margin-right: -20px;
      z-index: 5;
    }

    .flashCardsSuggestionsDiv1bBox2 {
      margin-top: 0px;
      margin-left: 0px;
    }

    .flashCardsSuggestionsDiv1bBox3 {
      margin-top: -20px;
      margin-left: -20px;
    }

    .flashCardsSuggestionsDiv1bSpan {
      color: rgba(255, 255, 255, 0.8);
      position: absolute;
      top: 420px;
      margin-left: 30px;
      font-size: 0.6rem;
      width: 70px;
      text-align: center;
      z-index: 5;
    }

    .flashCardsSuggestionsDivRoundNum {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #6b6969;
      background-color: #bababa;
      margin-bottom: 1rem;
    }

    .flashCardsSuggestionsDiv2aDiv {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #6b6969;
      background-color: #bababa;
      margin-top: 350px;
    }

    .flashCardsSuggestionsDiv2a span,
    .flashCardsSuggestionsDiv2b span {
      margin-top: 1rem;
    }

    #add_circle {
      font-size: 5rem;
    }

    #add_circle:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardsRecentDiv {
      width: 90%;
      min-height: 300px;
      margin: 5rem auto;
      color: var(--darkModeText);
    }

    .flashCardsRecentDiv1 {
      width: 100%;
      min-height: 300px;
    }

    .flashCardsLibraryDiv {
      width: 90%;
      min-height: 300px;
      margin-top: 0rem;
    }

    .flashCardsLibraryDiv1 {
      width: 100%;
      min-height: 350px;
      overflow-x: auto;
    }

    .flashCardsSearchByDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
    }

    .flashCardsSearchByDiv2 {
      width: 100%;
      min-height: 100px;
      border: 1px dashed #7e7e7e;
      border-radius: 7px;
      color: #808080;
    }

    .flashCardsSearchByDiv2 i {
      color: rgba(128, 128, 128, 0.4);
    }

    .flashCardsSearchByDiv2 i:hover {
      cursor: pointer;
    }

    #searchClose {
      align-self: flex-end;
    }

    .searchAllText {
      font-size: 0.6rem;
      color: #808080;
      text-decoration: underline;
    }

    .searchAllText:hover {
      cursor: pointer;
    }

    .flashCardsSearchByDiv2Button1,
    .flashCardsSearchByDiv2Button2,
    .flashCardsSearchByDiv2Button3,
    .flashCardsSearchByDiv2Button4 {
      width: 100px;
      border-radius: 7px;
      font-size: 0.7rem;
    }

    .flashCardsSearchByDiv2Button1 {
      background: #cbac7f;
      border: 1px solid #d8d8d8;
      color: #fff;
    }

    .flashCardsSearchByDiv2Button2 {
      background: #e9caca;
      border: 1px solid #d8d8d8;
      color: #808080;
    }

    .flashCardsSearchByDiv2Button3 {
      background: #87a8d9;
      border: 1px solid #d8d8d8;
      color: #fff;
    }

    .flashCardsSearchByDiv2Button4 {
      background: #e0f2c9;
      border: 1px solid #d8d8d8;
      color: #808080;
    }

    .flashCardsPopularDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsPopularDiv1 {
      width: 100%;
      min-height: 200px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .flashCardsTextBooksDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsTextBooksDiv1 {
      width: 100%;
      min-height: 200px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .flashCardsHighestRatedDiv {
      width: 80%;
      min-height: 500px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsHighestRatedOuterCardsDiv {
      width: 100%;
      background-color: #f5f5f5;
      padding: 0 2rem;
    }

    .flashCardsHighestRatedOuterCardsDiv i {
      opacity: 0.7;
    }

    .flashCardsHighestRatedOuterCardsDiv i:hover {
      cursor: pointer;
      opacity: 0.3;
    }

    .flashCardsHighestRatedDiv1 {
      width: 100%;
      min-height: 400px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .highestRatedCard {
      width: 200px;
      min-height: 260px;
      border: 1px solid #d8d8d8;
      border-radius: 7px;
      padding: 0;
    }

    .highestRatedCardHeader {
      width: 100%;
      height: 2rem;
      margin-bottom: 1rem;
    }

    .highestRatedCardImgDiv {
      width: 100%;
    }

    .highestRatedCardImgDiv img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .highestRatedCardData {
      width: 100%;
      font-size: 0.6rem;
      margin-top: 2rem;
    }

    .highestRatedCardData1 {
      width: 70%;
    }

    .highestRatedCardButtonsDiv {
      width: 100%;
      margin-top: 1rem;
    }

    .highestRatedCardButton1 {
      width: 80px;
      background-color: #d9d9d9;
      border-radius: 20px;
    }

    .highestRatedCardButton2 {
      width: 80px;
      border: 1px solid #d8d8d8;
      border-radius: 20px;
    }

    .highestRatedCardHeaderNotifications {
      opacity: 1;
      color: #0076ff;
    }

    .flashCardMainCreationDiv {
      width: 100%;
      background-color: #fff;
      min-height: 100vh;
      border-radius: 7px;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
    }

    .flashCardMainCreationDiv_dark {
      width: 100%;
      background-color: var(--darkBackground);
      min-height: 100vh;
      border-radius: 7px;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
    }

    .flashCardMainCreationDiv_inner {
      width: 98%;
      /* max-width: 7px; */
      min-height: 100vh;
      border: 1px solid #9f9f9f;
    }

    .cancelCreationModeDiv {
      width: 100%;
    }

    .cancelCreationModeButton:hover {
      cursor: pointer;
      color: red;
    }

    .flashCardMainCreationDiv1 {
      width: 90%;
      min-height: 350px;
      background-color: #d9d9d9;
      border: 1px solid #d9d9d9;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      margin-bottom: 50px;
    }

    .flashCardMainCreationDiv1_dark {
      width: 90%;
      min-height: 350px;
      border: 1px solid #d9d9d9;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      margin-bottom: 50px;
      background: linear-gradient(90deg, #10131b 0%, #122e3b 135.64%);
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1a {
      width: 100%;
      height: 50px;
    }

    .flashCardMainCreationDiv1aa {
      width: 10%;
    }

    .flashCardMainCreationDiv1ab {
      width: 80%;
      color: #000000;
    }

    .flashCardMainCreationDiv1ab_dark {
      width: 80%;
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1ac {
      width: 10%;
      color: #122e3b;
      opacity: 0.8;
      font-weight: 100;
    }

    .flashCardMainCreationDiv1ac_dark {
      width: 10%;
      color: var(--darkModeText);
      opacity: 0.8;
      font-weight: 100;
    }

    .createBodyDiv {
      width: 100%;
    }

    .createTitleDiv,
    .createDescriptionDiv {
      width: 100%;
      padding: 0 2rem;
    }

    .createTitleDiv span,
    .createDescriptionDiv span {
      width: 120px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }

    .createTitleInput,
    .createDescriptionInput {
      width: 90%;
    }

    .createDescriptionDiv {
      margin-top: 2rem;
    }

    .createFineTuneDiv {
      width: 100%;
      flex-direction: column;
      margin-top: 3rem;
      padding: 0 1rem;
    }

    .createFineTuneDiv1 {
      width: 100%;
      justify-content: space-around;
      margin: 2rem auto;
      padding: 2rem;
    }

    .createFineTuneDiv2 {
      width: 100%;
      color: #717070;
      margin: 2rem auto;
    }

    .createFineTuneDiv2 span,
    .createFineTuneDiv2 label {
      font-size: 0.7rem;
    }

    .createFineTuneDiv1a {
      margin-bottom: 2rem;
    }

    .createFineTuneDiv1aDiv1 span,
    .createFineTuneDiv1aDiv2 span {
      font-size: 0.8rem;
      color: #717070;
    }

    .createCardsLevelGrades,
    .createCardsSubjSelect {
      border: none;
      background-color: inherit;
      font-size: 0.8rem;
      border-bottom: 1px solid gray;
      margin-left: 1rem;
      color: rgba(0, 0, 0, 0.6);
      width: 120px;
    }

    .createCardsLevelGrades_dark,
    .createCardsSubjSelect_dark {
      border: none;
      background-color: var(--darkBackground);
      font-size: 1rem;
      border-bottom: 1px solid gray;
      margin-left: 1rem;
      color: var(--darkModeText);
      width: 120px;
    }

    .createFineTuneDiv1a select:focus {
      border: none;
      outline: none;
      border-bottom: 1px solid gray;
    }

    .createFineTuneDiv1a select:hover {
      cursor: pointer;
    }

    .bookChapterInput {
      font-size: 0.7rem;
      background-color: inherit;
      border: none;
      border-bottom: 1px solid gray;
    }

    .bookChapterInput:focus {
      outline: none;
      border-bottom: 1px solid gray;
    }

    .createFineTuneDiv1bTextBook {
      font-size: 0.7rem;
    }

    .createFineTuneDiv1bNoSpan {
      font-size: 0.5rem;
      margin: 0 1rem;
    }

    .createFineTuneDiv1bYesSpan {
      font-size: 0.5rem;
      margin-left: 1rem;
    }

    .createFineTuneDiv2a {
      width: 40%;
      height: 130px;
      border: 1px solid #c9c9c9;
      border-radius: 7px;
    }

    .createFineTuneDiv2a1 {
      width: 100%;
    }

    .previewCard {
      width: 90%;
      min-height: 350px;
      border-radius: 7px;
      margin: 10px auto;
    }

    .previewCardHeader {
      width: 100%;
      height: 70px;
      border-bottom: 1px dashed #d0d0d0;
      padding: 0 1rem;
      font-size: 16px;
      color: #d0d0d0;
    }

    .previewCardHeader_1,
    .previewCardHeader_2 {
      width: 50%;
    }

    .previewCardHeader_1 {
      flex-direction: column;
    }

    .previewCardHeader_1_span {
      font-size: 12px;
    }

    .previewCardHeader_2 {
      align-items: center;
    }

    .previewCardBody {
      width: 100%;
      height: 280px;
      padding: 10px;
    }

    .createNewCardTemplate {
      width: 90%;
      min-height: 500px;
      background: #f8f8f8;
      border: 1px solid #d9d9d9;
      border-radius: 7px;
      color: #b4b4b4;
      margin: 10px auto 50px auto;
    }

    .createNewCardTemplateHeader {
      width: 100%;
      height: 70px;
      border-bottom: 1px dashed #d0d0d0;
      padding: 0 1rem;
    }

    .createNewCardTemplateHeaderNumber {
      width: 60px;
      height: 50px;
      background: #d9d9d9;
      border-radius: 7px;
      font-weight: 700;
      font-size: 24px;
      line-height: 32px;
      color: var(--darkModeText);
    }

    .createNewCardTemplateHeaderRight {
      width: 70%;
    }

    .createNewCardTemplateHeaderRight span,
    .createNewCardTemplateHeaderRight i {
      font-weight: 100;
    }

    .createNewCardTemplateHeaderRight span:hover,
    .createNewCardTemplateHeaderRight i:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .createNewCardTemplateBody {
      width: 100%;
      min-height: 420px;
    }

    .createNewCardTemplateBody1 {
      width: 100%;
      min-height: 420px;
      padding: 1rem 0.5rem;
    }

    #editorTextArea,
    #answerTextArea {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      min-height: 250px;
      margin: 2px auto 10px auto;
      border: 0.2px solid #d0d0d0;
      outline: none;
    }

    #editorTextArea:focus,
    #answerTextArea:focus {
      border: 0.2px solid #d0d0d0;
    }

    .createNewCardTemplateBody1a {
      width: 100%;
      height: 150px;
    }

    .createNewCardTemplateBody2 {
      width: 35%;
    }

    .createNewCardTemplateBody2a {
      width: 140px;
      height: 140px;
      border: 1px dashed #000000;
      border-radius: 7px;
    }

    .createNewCardTemplateBody2b {
      width: 140px;
      height: 140px;
      background-color: #d9d9d9;
      border: 1px solid #c0c0c0;
      border-radius: 7px;
    }

    .createNewCardTemplateBody2a:hover,
    .createNewCardTemplateBody2b:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .createFlashCardNewCardButton {
      border: 1px solid #122e3b;
      border-radius: 7px;
      background-color: inherit;
      width: 350px;
      height: 60px;
      font-weight: 500;
      font-size: 24px;
      margin: 5rem auto;
    }

    .createFlashCardNewCardButton_dark {
      border: 1px solid #fff;
      border-radius: 7px;
      background-color: inherit;
      width: 250px;
      height: 60px;
      font-weight: 500;
      font-size: 24px;
      margin: 5rem auto;
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1Button {
      border: 1px solid #e0f945;
      border-radius: 7px;
      margin: 2rem auto;
    }

    .flashCardMainCreationDivFooterButtonDiv {
      flex-direction: row;
    }

    .flashCardMainCreationDivFooterButtonDiv1 {
      flex-direction: row;
      align-items: center;
    }

    .newFlashCardDeckSave {
      height: 60px;
      width: 150px;
      margin-right: 2rem;
      background-color: #e0f945;
      border-radius: 7px;
    }

    .newFlashCardDeckCancel {
      height: 60px;
      width: 150px;
      margin-left: 2rem;
      background-color: #e83d3d;
      border-radius: 7px;
      color: #fff;
    }

    .flashCardsSuggestionsDiv1bSpan:hover {
      cursor: pointer;
    }

    .cardsLibraryMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: -2rem;
    }

    .classroomCardsLibraryMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 0;
    }

    .cardsLibraryMainDiv h1,
    .classroomCardsLibraryMainDiv h1 {
      width: 90%;
      font-weight: 100;
    }

    .cardsLibraryMainDiv h3,
    .classroomCardsLibraryMainDiv h3 {
      width: 80%;
      font-weight: 100;
    }

    .cardsLibraryDisplayCardsDiv {
      width: 80%;
      height: 350px;
      margin: 0.2rem auto 3rem auto;
    }

    .classroomCardsLibraryDisplayCardsDiv {
      width: 95%;
      height: 350px;
      background-color: inherit;
    }

    .cardsLibraryDisplayCardsDivLeft,
    .cardsLibraryDisplayCardsDivRight {
      width: 5%;
      height: 350px;
    }

    .cardsLibraryDisplayCardsDivMiddle {
      width: 90%;
      height: 350px;
      overflow-x: auto;
    }

    .miniCardSetCard {
      width: 320px;
      height: 230px;
      background-color: #fff;
      border-radius: 7px;
      margin-right: 20px;
      opacity: 1;
      color: #091a22;
    }

    .miniCardSetCardMiddle2Text {
      width: 70%;
      font-size: 0.7rem;
      word-wrap: break-word;
    }

    .miniCardSetCardTop {
      width: 100%;
      height: 40px;
    }

    .miniCardSetCardMiddle1 {
      width: 100%;
      height: 50px;
    }

    .miniCardSetCardMiddle2 {
      width: 100%;
      height: 50px;
    }

    .miniCardSetCardFooter {
      width: 80%;
      height: 60px;
    }

    .cardsLibraryDisplayCardsArrow {
      font-size: 3rem;
      color: rgba(0, 0, 0, 0.2);
      z-index: 2;
    }

    .cardsLibraryDisplayCardsArrow:hover {
      cursor: pointer;
    }

    .classroomCardsLibraryDisplayCardsArrow {
      font-size: 3rem;
      font-weight: 100;
      z-index: 2;
      color: #fff;
    }

    /*** END OF STUDYCARDS PAGE ******************/

    /**** DECK VIEW PAGE ****/

    #deckViewModal {
      width: 100%;
      min-height: 80vh;
      background-color: #b5c5cd;
      z-index: 25;
      opacity: 1;
    }

    #deckViewModal1 {
      width: 100%;
      background-color: #b5c5cd;
    }

    #deckViewModalTopDiv {
      width: 800px;
      background-color: #b5c5cd;
    }

    .deckViewMainDiv {
      width: 100%;
      height: 80vh;
      background-color: #b5c5cd;
    }

    .deckViewMainDiv1 {
      padding: 50px;
      background-color: #b5c5cd;
    }

    .deckViewMainDivHeader {
      width: 100%;
      color: #122e3b;
      padding: 5px;
      padding-left: 100px;
    }

    .filled_icon {
      font-variation-settings: "FILL" 1, "wght" 100, "GRAD" 200, "opsz" 48;
    }

    .deckViewModalCloseButton {
      border: 0.2px solid rgba(128, 128, 128, 0.5);
      border-radius: 7px;
    }

    .card {
      width: 800px;
      height: 500px;
      overflow-y: auto;
      background-color: #fff;
    }

    .card h3 {
      width: 80%;
    }

    .deckViewNavButtons {
      margin-top: 2rem;
      padding: 0.5rem;
    }

    .deckViewNavButtonsLeft,
    .deckViewNavButtonsRight {
      width: 100px;
      height: 60px;
      background-color: #122e3b;
      border-radius: 7px;
    }

    .deckViewNavButtonsLeft span,
    .deckViewNavButtonsRight span {
      font-size: 40px;
      color: #b5c5cd;
    }

    .deckViewNavButtonsCenter span {
      font-size: 40px;
      font-weight: 100;
      color: #122e3b;
    }

    .deckViewNavButtonsCenter {
      width: 100px;
      height: 60px;
      margin: 0;
      background-color: none;
    }

    .deckViewNavButtonsCenter:hover {
      background-color: none;
      cursor: pointer;
      opacity: 0.7;
    }

    .cardContent {
      width: 100%;
      height: 450px;
      padding: 0.5rem;
    }

    #cardTextTop {
      position: absolute;
      margin-bottom: 400px;
    }

    #cardText {
      align-self: center;
    }

    .card_display {
      overflow-x: hidden !important;
      font-size: 14px;
      width: 100%;
      height: 100%;
      padding: 0px 15px;
      margin-top: 50px;
    }

    .card_display {
      overflow-x: hidden !important;
      font-size: 12px;
      padding: 0;
      margin-top: 50px;
    }

    /**** END OF DECK VIEW PAGE ***/

    /*** Group Study Page ***/

    .groupStudyMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      font-size: 12px;
      margin-top: 50px;
    }

    .classroomGroupStudyMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      font-size: 12px;
      margin-top: 50px;
    }

    .groupStudyTopDiv {
      width: 100%;
      height: 100px;
    }

    .groupStudyTopDiv1 {
      width: 20%;
      font-size: 15px;
    }

    .groupStudyTopDiv2 {
      width: 60%;
    }

    .groupStudyTopDiv3 {
      width: 20%;
    }

    .groupStudyMiddleDiv {
      width: 80%;
      height: 70vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 7px;
      padding: 10px;
    }

    .groupStudyMiddleDiv1Button {
      width: 250px;
      height: 60px;
      font-size: 15px;
      border-radius: 5px;
    }

    .addParticipantsIcon {
      width: 15px;
      height: 15px;
    }

    .groupStudyFooter {
      width: 90%;
      justify-content: space-around;
      padding: 10px 0;
      border-radius: 45px;
      font-size: 6px;
      margin: 5px auto;
    }

    .groupStudyFooter span {
      display: none;
    }

    .groupAddParticipantsDivHeader {
      margin-top: 10px;
    }

    .myAvatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupAddParticipantsDivHeader1 {
      width: 100%;
      margin-top: 20px;
      padding: 0px 10px;
    }

    .groupAddParticipantsDivHeader1:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .groupStudyAddFriendsTop {
      width: 100%;
      margin-top: 15px;
    }

    .groupStudyFriendsCount {
      width: 200px;
      height: 40px;
      border-radius: 7px;
    }

    .groupStudyFriendsList {
      min-width: 80%;
      margin: 10px auto;
    }

    .groupStudyFriendListItemDiv {
      width: 100%;
      margin: 5px auto;
    }

    .groupStudyFriendListItemDiv1 {
      width: 40%;
      height: 50px;
      border-radius: 7px;
      padding: 15px 10px;
    }

    .groupStudyFriendListItemDiv2 {
      width: 40%;
      height: 50px;
    }

    .groupStudyFriendListItemButton {
      width: 50px;
      height: 50px;
      border-radius: 7px;
    }

    .myFriends_Avatar {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupStudyMiddleDiv1 {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }

    .groupAddParticipantsDiv {
      width: 500px;
      height: 600px;
      padding-bottom: 20px;
      border-radius: 7px;
      background-color: inherit;
      margin-bottom: 150px;
      overflow-y: auto;
    }

    .avatarMainDiv {
      width: 181px;
      height: 220px;
      padding: 1px;
      border: 0.5px solid lightgray;
    }

    .avatar {
      width: 180px;
      height: 180px;
      font-size: 12px;
    }

    .joinStreamButton,
    .endStreamButton {
      width: 180px;
      height: 40px;
    }

    .avatar__img {
      width: 50px;
      height: 100px;
    }

    .groupStudySettingsModal {
      width: 400px;
      height: 300px;
      position: fixed;
      /** center on page**/
      top: calc(50% - 150px);
      left: calc(50% - 200px);
      z-index: 10;
      opacity: 1;
      padding: 0;
    }

    /** End of Group Study Page **/

    /*** Settings Page for Color theme ***/
    .settingsDemoMainDiv {
      width: 100%;
    }

    .settingsMobileOuterDiv {
      width: 400px;
      height: 700px;
      border: 2px solid #b5c5cd;
      margin-top: 20px;
    }

    .settingsMobileInner1Div,
    .settingsMobileInner2Div {
      width: 100%;
      height: 50%;
    }

    .settingsMobileInner1DivScreen {
      width: 90%;
      height: 90%;
      border: 1px solid grey;
    }

    /*** End of Settings Page for Color theme ***/

    /*** Taratai AI Page ***/

    .tarataiAIMainDiv {
      font-size: 12px;
    }

    .tarataiAITopDiv {
      display: none;
    }

    .tarataiAIMiddleDiv {
      width: 90%;
    }

    .tarataiAIMiddleHeaderDiv {
      width: 100%;
      margin-top: 10px;
    }

    .tarataiAIMiddleContentDiv {
      width: 60%;
      height: 150px;
      margin: 10px auto;
    }

    .tarataiAIMiddleFooterDiv {
      width: 100%;
    }

    .tarataiAIUploadButton,
    .tarataiAIWriteTextButton {
      width: 140px;
      height: 50px;
      border-radius: 7px;
      border: 1px solid #838383;
      color: var(--darkModeText);
      margin: 0px 10px;
    }

    .tarataiAISubmitButton {
      width: 160px;
      height: 60px;
      border-radius: 7px;
    }

    /*** End of Taratai AI Page ***/

    /*** COMPETITIONS PAGE ***/
    .competitionsPageHeader {
      width: 80%;
      height: 150px;
      border-radius: 10px;
      margin-top: 50px;
    }

    .competitionsPageHeader1 {
      width: 80%;
      height: 150px;
    }

    .competitionsPageHeader1 > h1 {
      font-size: 32px;
      font-weight: 700;
    }

    .competitionsPageHeader1 span {
      font-size: 16px;
      font-weight: 400;
    }

    .competitionsPageHeader2 {
      width: 40%;
      height: 150px;
    }

    .competitionsPageHeader2PointsBox {
      width: 110px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #fac015 0%, #f97616 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2RanksBox {
      width: 130px;
      height: 100px;
      margin: 0px 10px;
      border-radius: 10px;
      background: linear-gradient(90deg, #659ff9 0%, #a05df7 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2WinRateBox {
      width: 110px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #46db84 0%, #16baa5 100%);
      padding: 10px;
      cursor: pointer;
      margin-right: 20px;
    }

    .competitionsPageHeader2 div {
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .competitionsPageTabs {
      width: 80%;
      height: 80px;
      margin-top: 80px;
    }

    .competitionsPageTabs button {
      width: 400px;
      height: 50px;
      border-radius: 10px;
      cursor: pointer;
    }

    .competitionsPageTabs_not_active {
      background-color: inherit;
      border: none;
    }

    .competitionsPageTabs_active {
      border: none;
    }

    /* AI Competition Card Styles */

    .competitionsOptions {
      width: 100%;
    }

    .ai-competition-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .bot-icon {
      width: 32px;
      height: 32px;
      color: #10b981; /* Green color */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .multiplier-section {
      text-align: right;
    }

    .multiplier-label {
      font-size: 14px;
      margin-bottom: 2px;
    }

    .multiplier-value {
      font-size: 18px;
      font-weight: bold;
      color: #ea580c; /* Orange */
    }

    .competition-controls {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .subject-select,
    .topic-select {
      flex: 1;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-select:focus,
    .topic-select:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .subject-select:disabled,
    .topic-select:disabled {
      background-color: #f9fafb;
      color: #9ca3af;
      cursor: not-allowed;
    }

    .start-button {
      padding: 12px 24px;
      background: #10b981; /* Green */
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .start-button:hover:not(:disabled) {
      background: #059669; /* Darker green */
    }

    .start-button:disabled {
      background: #9ca3af; /* Gray */
      cursor: not-allowed;
    }

    .play-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    /* Friend Competition Card Styles */

    .friend-competition-card {
      width: 80%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .users-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Hover effect for future when feature becomes available */
    .friend-competition-card.available {
      opacity: 1;
      border-left-color: #3b82f6; /* Blue border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .friend-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .friend-competition-card.available .users-icon {
      color: #3b82f6; /* Blue color when available */
    }

    /* .friend-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .friend-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Random User Competition Card Styles */

    .random-user-competition-card {
      width: 80%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .zap-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Styles for when feature becomes available */
    .random-user-competition-card.available {
      opacity: 1;
      border-left-color: #7c3aed; /* Purple border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .random-user-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .random-user-competition-card.available .zap-icon {
      color: #7c3aed; /* Purple color when available */
    }

    /* .random-user-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .random-user-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Special highlight for full multiplier feature */
    .random-user-competition-card.available .coming-soon-message {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fde68a 100%
      ); /* Golden gradient */
      color: #92400e; /* Dark yellow/brown text */
      border: 1px solid #f59e0b; /* Golden border */
      font-weight: 600;
    }

    /* Animation for the Zap icon when available */
    .random-user-competition-card.available .zap-icon {
      animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.5));
      }
      50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.8));
      }
    }

    /* Quick Stats Sidebar Styles */

    .sidebar-container {
      width: 100%;
      gap: 24px; /* space-y-6 equivalent */
    }

    .stats-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .stats-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .performance-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .performance-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .performance-subject {
      font-size: 14px;
    }

    .performance-points {
      font-weight: bold;
      font-size: 14px;
    }

    .performance-points.positive {
      color: #059669; /* Green for good performance */
    }

    .performance-points.negative {
      color: #dc2626; /* Red for poor performance */
    }

    /* Additional visual enhancements */
    .performance-item {
      padding: 8px 0;
      border-bottom: 1px solid #f3f4f6;
      transition: background-color 0.2s ease;
    }

    .performance-item:last-child {
      border-bottom: none;
    }

    .performance-item:hover {
      background-color: #f9fafb;
      border-radius: 6px;
      padding: 8px 12px;
      margin: 0 -12px;
    }

    /* Optional: Progress indicators for performance trends */
    .performance-item.trending-up::before {
      content: "↗";
      color: #059669;
      margin-right: 4px;
      font-weight: bold;
    }

    .performance-item.trending-down::before {
      content: "↘";
      color: #dc2626;
      margin-right: 4px;
      font-weight: bold;
    }

    /* Optional: Badge-style points display */
    .performance-points {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .performance-points.positive {
      background-color: #d1fae5; /* Light green background */
      color: #065f46; /* Dark green text */
    }

    .performance-points.negative {
      background-color: #fee2e2; /* Light red background */
      color: #991b1b; /* Dark red text */
    }

    /* Achievement Progress Card Styles */

    .achievement-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .achievement-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .achievement-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .achievement-item {
      display: flex;
      flex-direction: column;
    }

    .achievement-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .achievement-name {
      font-size: 14px;
      font-weight: 500;
    }

    .achievement-progress-text {
      font-size: 14px;
      font-weight: 500;
    }

    .progress-bar-container {
      width: 100%;
      background: #e5e7eb; /* Light gray background */
      border-radius: 9999px; /* Fully rounded */
      height: 8px;
      overflow: hidden;
      position: relative;
    }

    .progress-bar {
      height: 100%;
      border-radius: 9999px; /* Fully rounded */
      transition: width 0.5s ease-in-out;
      position: relative;
    }

    .progress-bar.blue {
      background: #3b82f6; /* Blue */
    }

    .progress-bar.yellow {
      background: #eab308; /* Yellow */
    }

    /* Additional color options for other achievements */
    .progress-bar.green {
      background: #10b981; /* Green */
    }

    .progress-bar.purple {
      background: #8b5cf6; /* Purple */
    }

    .progress-bar.red {
      background: #ef4444; /* Red */
    }

    .progress-bar.orange {
      background: #f97316; /* Orange */
    }

    /* Animation effect for progress bars */
    .progress-bar {
      animation: progressFill 1s ease-out;
    }

    @keyframes progressFill {
      from {
        width: 0%;
      }
      to {
        width: var(--target-width, 0%);
      }
    }

    /* Hover effects */
    /* .achievement-item:hover .achievement-name {
      color: #1f2937;  
      font-weight: 600;
    } */

    .achievement-item:hover .progress-bar {
      filter: brightness(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Progress bar glow effect */
    .progress-bar::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
      );
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }

    /* Achievement completion celebration */
    /* .achievement-item.completed .achievement-name {
      color: #059669;
      font-weight: 700;
    } */

    /* .achievement-item.completed .achievement-progress-text {
      color: #059669;
      font-weight: 700;
    } */

    .achievement-item.completed .progress-bar {
      background: linear-gradient(90deg, #10b981, #34d399);
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* Near completion highlighting */
    .achievement-item.near-completion .progress-bar {
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    }

    /* .achievement-item.near-completion .achievement-name {
      color: #1d4ed8;
      font-weight: 600;
    } */

    /* Practice Tab Styles */

    .practice-tab-container {
      gap: 24px;
      width: 100%;
    }

    /* Practice vs AI Card */
    .practice-ai-card {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .practice-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .bot-icon-blue {
      width: 32px;
      height: 32px;
      color: #3b82f6; /* Blue */
      margin-right: 12px;
    }

    .practice-title {
      font-size: 20px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0 0 4px 0;
    }

    .practice-description {
      margin: 0;
      font-size: 14px;
    }

    .practice-controls {
      display: flex;
      flex-direction: column;
      gap: 16px; /* space-y-4 equivalent */
    }

    .subject-dropdown {
      width: 100%;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-dropdown:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .start-practice-button {
      width: 100%;
      background: #3b82f6; /* Blue */
      color: white;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .start-practice-button:hover {
      background: #2563eb; /* Darker blue */
    }

    /* Practice vs Friends Card (Disabled) */
    .practice-friends-card {
      width: 60%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      opacity: 0.75; /* Dimmed appearance */
      margin: 50px auto;
    }

    .users-icon-gray {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray */
      margin-right: 12px;
    }

    .practice-title-disabled {
      font-size: 20px;
      font-weight: bold;
      color: #4b5563; /* Medium gray for disabled state */
      margin: 0 0 4px 0;
    }

    .practice-description-disabled {
      color: #6b7280; /* Light gray for disabled state */
      margin: 0;
      font-size: 14px;
    }

    .coming-soon-notice {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Enhanced hover effects for available card */
    .practice-ai-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Loading state for practice button */
    .start-practice-button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .start-practice-button.loading {
      position: relative;
      color: transparent;
    }

    .start-practice-button.loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    /* Future enhancement: When friends practice becomes available */
    .practice-friends-card.available {
      opacity: 1;
      border-left: 4px solid #10b981; /* Green accent */
    }

    .practice-friends-card.available .users-icon-gray {
      color: #10b981; /* Green when available */
    }

    .practice-friends-card.available .practice-title-disabled {
      color: #1f2937; /* Dark gray when available */
    }

    .practice-friends-card.available .practice-description-disabled {
      color: #4b5563; /* Medium gray when available */
    }

    .practice-friends-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Leaderboard Tab Styles */

    .leaderboard-container {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .leaderboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .leaderboard-title {
      font-size: 24px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0;
    }

    .subject-filter {
      padding: 8px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-filter:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .leaderboard-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .leaderboard-item.top-three {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fed7aa 100%
      ); /* Yellow to orange gradient */
    }

    .leaderboard-item.regular {
      background: #f9fafb; /* Light gray */
    }

    .student-info {
      display: flex;
      align-items: center;
    }

    .rank-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      margin-right: 16px;
      font-size: 14px;
    }

    .rank-badge.gold {
      background: #eab308; /* Gold/Yellow */
    }

    .rank-badge.silver {
      background: #9ca3af; /* Silver/Gray */
    }

    .rank-badge.bronze {
      background: #fb923c; /* Bronze/Orange */
    }

    .rank-badge.regular-rank {
      background: #3b82f6; /* Blue */
    }

    .student-details {
      display: flex;
      flex-direction: column;
    }

    .student-name {
      font-weight: 600;
      color: #1f2937; /* Dark gray */
      font-size: 16px;
    }

    .student-level {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    .score-info {
      text-align: right;
    }

    .score-points {
      font-weight: bold;
      font-size: 18px;
      color: #1f2937; /* Dark gray */
    }

    .score-label {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    /* Hover effects */
    .leaderboard-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .leaderboard-item.top-three:hover {
      background: linear-gradient(135deg, #fef3c7 0%, #fdba74 100%);
    }

    .leaderboard-item.regular:hover {
      background: #f3f4f6;
    }

    /* Medal icons for top 3 */
    .rank-badge.gold::after {
      content: "🥇";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.silver::after {
      content: "🥈";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.bronze::after {
      content: "🥉";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    /* Animation for rank changes */
    .leaderboard-item {
      animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Special highlighting for current user */
    .leaderboard-item.current-user {
      border: 2px solid #3b82f6;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    }

    .leaderboard-item.current-user .student-name {
      color: #1d4ed8;
      font-weight: 700;
    }

    /* Loading skeleton animation */
    .leaderboard-item.loading {
      background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }

    /* Empty state styling */
    .leaderboard-empty {
      text-align: center;
      padding: 40px 20px;
      color: #6b7280;
    }

    .leaderboard-empty h4 {
      font-size: 18px;
      margin-bottom: 8px;
      color: #374151;
    }

    .leaderboard-empty p {
      font-size: 14px;
      margin: 0;
    }
  }

  /* Large devices (desktops, landscape tablets) */
  @media (min-width: 992px) and (max-width: 1200px) {
    #dropdown {
      height: 30vh;
      background-color: #091a22;
      z-index: 1;
      padding: 0;
    }

    #dropdown h6 {
      text-align: center;
      padding: 1rem;
      background-color: #fff;
      margin: 0 auto 1rem auto;
    }

    #logo {
      height: 40px;
      float: left;
    }

    #topBarLeftDiv {
      width: 41%;
    }

    #topBarMiddleDiv {
      width: 18%;
    }

    #topBarRightDiv {
      width: 41%;
      font-size: 12px;
    }

    .dropdownPostLoginMobileDiv button {
      display: none;
    }

    #ilearnStemCardsLogo {
      height: 50px;
      float: left;
      margin-left: 30px;
    }

    .profileMainDiv {
      width: 100%;
      height: 100vh;
      background-color: var(--lightBackground);
      color: var(--lightModeText);
      padding: 20px;
      margin-top: 50px;
    }

    .profileMainDiv_dark {
      width: 100%;
      height: 100vh;
      background-color: var(--darkBackground);
      color: var(--darkModeText);
      padding: 20px;
      margin-top: 50px;
    }

    .lightOrDarkModeChoiceDiv {
      margin-top: 50px;
    }

    .lightOrDarkModeChoice {
      width: 400px;
      /* border: 1px solid #D8D8D8; */
    }

    .lightModeChoice {
      margin-right: 50px;
    }

    .darkModeChoice {
      margin-left: 50px;
    }

    .lightModeChoice label,
    .darkModeChoice label {
      margin-left: 5px;
    }

    .dropdownPostLogin {
      width: 100%;
      height: calc(100vh - 50px);
      position: absolute;
      top: 50px;
      color: #fff;
      background-color: #091a22;
      padding-top: 20px;
    }

    .dropdownPostLogin_dark {
      width: 100%;
      height: calc(100vh - 50px);
      position: absolute;
      top: 50px;
      color: #fff;
      background-color: var(--darkBackground);
      padding-top: 20px;
      z-index: 2;
    }

    .topBarButtons h6 {
      font-size: 0.75rem;
    }

    #registerButton {
      border-radius: 20px;
      width: 120px;
      height: 30px;
    }

    #mobileNavButton {
      font-size: 1.2rem;
      position: relative;
      margin-right: 1rem;
    }

    .topBarProfileDiv {
      width: 180px;
      font-size: 0.9rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
      margin-right: 2rem;
      cursor: pointer;
    }

    .topBarProfileDivInner {
      border: none;
      outline: none;
      padding: 0 0.3rem;
    }

    .topBarProfileDivContent {
      position: absolute;
      border-radius: 0px 0px 5px 5px;
      min-width: 180px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 0;
    }

    .topBarProfileDivContent button {
      font-size: 0.8rem;
      width: 100%;
      height: 40px;
      margin-top: 0.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .toggleColorModeDiv {
      width: 100%;
      height: 40px;
      margin: auto;
    }

    .topBarProfileDivContentButtonDiv {
      width: 150px;
    }

    .topBarProfileDivContent i {
      font-size: 20px;
      margin-left: 5px;
    }

    .menu_study_cards_img,
    .menu_group_study_img,
    .menu_live_competitions_img {
      width: 30px;
      margin-left: 10px;
    }

    /**** HOME TOP ****/
    .home {
      width: 100%;
      height: calc(100vh - 50px);
      padding: 0;
      margin-top: 50px;
    }

    .home1 {
      width: 50%;
      flex-direction: column;
      align-items: center;
    }

    .home2 {
      width: 50%;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .backgroundImageDiv {
      width: 25%;
      height: 65%;
      position: absolute;
      left: 0;
      top: 10%;
      border-bottom-right-radius: 300px;
      z-index: 0;
    }

    .backgroundImageDiv_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv_dark {
      background-color: #3b4c63;
    }

    .backgroundImageDiv2 {
      width: 25%;
      height: 65%;
      position: absolute;
      right: 50px;
      top: 10%;
      z-index: 0;
      border-top-right-radius: 350px;
      border-bottom-left-radius: 50px;
    }

    .backgroundImageDiv2_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv2_dark {
      background-color: var(--bluegraysteel);
    }

    .study-connect-interact-svg {
      margin-top: 10%;
      z-index: 5;
      width: 500px;
    }

    .welcomeHeader {
      z-index: 5;
      font-size: 1.75rem;
      margin-top: 0rem;
    }

    .welcomeP {
      z-index: 5;
      font-size: 12px;
      margin: 0rem auto 1.5rem auto;
      width: 60%;
      font-weight: 400;
    }

    .home1Buttons button {
      width: 200px;
      height: 50px;
      border-radius: 50px;
      z-index: 5;
      margin: 0px 20px 20px 20px;
    }

    .home1BottomDiv {
      /* width: 100%; */
      height: 220px;
      position: absolute;
      bottom: 0px;
      margin-left: 20px;
      /* border: 2px solid red; */
    }

    .home1BottomDiv div {
      width: 120px;
      height: 150px;
      margin: 0px 5px;
      border-radius: 20px;
      color: #fff;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      font-size: 10px;
    }

    .home1BottomDivHeader {
      font-size: 15px;
      margin-bottom: 15px;
    }

    .homePageMainImage {
      width: 70%;
      z-index: 5;
      /* opacity: 0.9; */
    }

    /**** HOME FEATURES ****/

    .homeFeaturesMainDiv {
      width: 100%;
      padding: 2rem 0;
    }

    .homeFeaturesMainDiv h3 {
      font-weight: bold;
    }

    .homeFeaturesDiv1,
    .homeFeaturesDiv2 {
      width: 90%;
      justify-content: space-around;
    }

    .homeFeaturesDiv1 {
      margin-bottom: 2rem;
    }

    .homeFeaturesDiv2 {
      margin-top: 2rem;
    }

    .homeFeaturesStudyCardsDiv,
    .homeFeaturesGroupStudyDiv,
    .homeFeaturesLiveCompetitionsDiv,
    .homeFeaturesRankingsDiv {
      width: 30%;
    }

    .homeFeaturesMainDiv img,
    .homeFeaturesMainDiv span {
      height: 50px;
      width: 50px;
      margin: 1rem auto;
    }

    .homeFeaturesMainDiv span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
    }

    .homeFeaturesParagraph {
      font-size: 15px;
      max-width: 600px;
    }

    /**** END OF HOME FEATURES ****/

    /**** HOW IT WORKS ****/

    .howItWorksMainDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
    }

    .howItWorksCard {
      width: 100%;
    }

    .howItWorksMainDiv h1,
    .howItWorksMainDiv span {
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .howItWorksCard p {
      width: 100%;
      font-size: 15px;
      max-width: 600px;
      margin: 2rem auto;
    }

    /**** END OF HOW IT WORKS ****/

    /**** PRICING ****/

    #pricingDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
      font-size: 12px;
    }

    #pricingDiv h1 {
      font-weight: bold;
    }

    #pricingDivCards {
      width: 80%;
      justify-content: space-around;
      margin-top: 2rem;
    }

    #freeCard {
      flex: 1;
      border: 1px solid #828282;
      border-radius: 7px;
      margin-right: 1rem;
      color: #585858;
    }

    #freeCard h4 {
      width: 80%;
      height: 60px;
      background: #d9d9d9;
      border: 1px solid #b0aeae;
      border-radius: 7px;
    }

    #monthlyCard {
      flex: 1;
      background: #d9d9d9;
      border-radius: 7px;
      margin: 0 1rem;
      color: #585858;
    }

    #monthlyCard h4 {
      width: 80%;
      height: 60px;
      background: #d9d9d9;
      border: 1px solid #b0aeae;
      border-radius: 7px;
    }

    #yearlyCard {
      flex: 1;
      background: #263238;
      border-radius: 7px;
      margin-left: 1rem;
      color: #ffffff;
    }

    #yearlyCard h4 {
      width: 80%;
      height: 60px;
      background: #f8d149;
      border: 1px solid #ffe177;
      border-radius: 7px;
      color: #263238;
    }

    /**** END OF PRICING ****/

    /*** OUR MISSION ***/

    #ourMissionDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
    }

    #ourMissionDiv h1 {
      font-weight: bold;
    }

    .ourMissionCard {
      width: 100%;
    }

    .ourMissionCardInnerDiv {
      width: 100%;
    }

    .ourMissionCardImgDiv {
      width: 40%;
    }

    .ourMissionCardImgDiv img {
      width: 80%;
    }

    .ourMissionCardInnerDiv1 {
      width: 60%;
    }

    .ourMissionCard p {
      font-size: 15px;
      max-width: 400px;
      margin: 2rem auto;
    }

    .ourMissionButtonDiv {
      width: 100%;
      padding: 2rem 0;
    }

    .ourMissionButtonDiv button {
      width: 250px;
      height: 60px;
      border-radius: 30px;
      font-size: 1rem;
    }

    /**** END OF OUR MISSION ****/

    /**** FOOTER ****/
    .homePageFooter {
      width: 100%;
      min-height: 40vh;
      background-color: var(--lightBackground);
      color: var(--lightModeText);
      padding: 2rem;
      font-size: 12px;
    }

    .homePageFooter_dark {
      width: 100%;
      min-height: 40vh;
      background-color: var(--darkBackground);
      padding: 2rem;
      color: #ffffff;
      font-size: 12px;
    }

    #footerSubscribeDiv {
      width: 25%;
      min-height: 50vh;
    }

    #footerCompanyAndResources {
      width: 50%;
      min-height: 50vh;
      justify-content: space-around;
      align-items: center;
    }

    #footerServicesDiv {
      width: 25%;
      min-height: 50vh;
      justify-content: center;
      align-items: center;
    }

    #iconsRow {
      width: 200px;
      margin-top: 2rem;
    }

    #iconsRow img {
      width: 30px;
      margin: 0 0.5rem;
      filter: brightness(1.75);
    }

    #homeFinalFooterEmailButton {
      color: #00100f;
      width: 50px;
      height: 23px;
      background: #6cb1a9;
      border: 1px solid #ffffff;
      font-size: 0.6rem;
    }

    /**** END OF FOOTER ****/

    /********* Login or Register Page *********/
    .loginOrRegisterPage {
      margin-top: 50px;
      height: calc(1 * var(--screen-y) - 50px);
      background-color: whitesmoke;
    }

    #loginPageMainDiv {
      width: 100%;
      background-color: whitesmoke;
      align-items: center;
      justify-content: center;
    }

    #cardLoginDiv {
      width: 40%;
      max-width: 375px;
      padding: 0;
    }

    #cardRegister,
    #cardLogin {
      width: 40%;
      max-width: 350px;
      height: auto;
      padding: 1rem 0;
    }

    #cardRegister {
      padding: 1.5rem;
    }

    .cardRegisterImageDiv,
    .cardLoginImageDiv {
      width: 100%;
      height: 100px;
    }

    #cardRegister img,
    #cardLogin img {
      height: 100px;
    }

    #registerCardButton {
      background-color: #091a22;
      color: #fff;
      display: block;
      margin: 1rem auto;
    }

    #loginCardButton {
      background-color: #091a22;
      color: #fff;
      display: block;
      margin: 1rem auto;
      font-size: 0.8rem;
    }

    #registerInputs,
    #loginInputs {
      width: 100%;
      padding: 0;
    }

    .loginInputsDiv,
    .registerInputsDiv {
      width: 100%;
      margin-top: 1rem;
    }

    .backspaceDiv {
      width: 20%;
      height: 2rem;
    }

    .backspaceDiv:hover {
      cursor: pointer;
    }

    .registerInputsDiv input,
    .loginInputsDiv input {
      width: 100%;
      height: 2rem;
      border: 0.25px solid lightgray;
      font-size: 0.6rem;
    }

    #cardRegister input:focus,
    #loginInputs input:focus {
      outline: 0.5px solid gray;
    }

    .formikOuterErrorDiv {
      width: 100%;
      height: 1rem;
    }

    .formikErrorDiv {
      font-size: 0.7rem;
    }

    .switchLoginAndRegister {
      font-size: 0.8rem;
    }

    #loginWithGoogleButton {
      background-color: #fff;
      margin: 1rem auto;
      border: 1px solid lightgray;
    }

    /********* Main Portal Page ************/

    #portalMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      background-color: #fff;
      padding: 0;
    }

    .portalMainDivHeader {
      width: 100%;
      height: 150px;
      background-color: #091a22;
      color: #fff;
      padding: 1rem 2rem;
    }

    .portalMainDivHeader .menuDropDown {
      cursor: pointer;
      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
    }

    .notAndInboxDiv {
      min-width: 300px;
    }

    .notAndInboxDiv .icon {
      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
    }

    .portalMainDivBody {
      background-color: #091a22;
      width: 100%;
      min-height: calc(100vh);
    }

    .portalMainDivBody0 {
      width: 100%;
      height: 300px;
    }

    .portalMainDivBody1 {
      width: 100%;
      height: 300px;
      background-color: #fff;
      padding: 0 20%;
    }

    .portalMainDivBody1 div {
      cursor: pointer;
    }

    .newsfeedHeader {
      width: 70%;
      margin-top: 5rem;
    }

    .portalMainDivBody2 {
      width: 70%;
      min-height: 60vh;
      background-color: #fff;
      margin-bottom: 5rem;
    }

    /********* End of Main Portal Page ************/

    /************* STUDYCARDS PAGE ***************/

    .flashCardsMainPageDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .flashCardsMainPageHeader {
      width: 100%;
      min-height: 200px;
      margin-bottom: 2rem;
    }

    .flashCardsMainPageHeaderBack {
      color: #ffffff;
      margin-left: 20rem;
      margin-top: 1rem;
    }

    .flashCardsMainPageHeaderBack_dark {
      color: #ffffff;
      margin-left: 20rem;
      margin-top: 1rem;
    }

    .flashCardsMainPageHeaderBack img {
      margin-left: 0.3rem;
    }

    .flashCardsMainPageHeader2 {
      color: #b5c5cd;
    }

    .flashCardsMainPageHeader3 {
      width: 100%;
      min-height: 100px;
    }

    .flashCardsMainPageHeader3_dark {
      width: 100%;
      min-height: 100px;
    }

    .flashCardsMainPageHeader3a,
    .flashCardsMainPageHeader3a_dark {
      width: 100%;
      height: 90px;
      justify-content: space-around;
      color: #d9d9d9;
      padding: 0 2rem;
    }

    #arrow_drop_down_flashcard_1 {
      color: #9d9d9d;
    }

    .flashCardsMainPageHeader3aButton1 {
      color: #122e3b;
      width: 150px;
      height: 50px;
      background-color: #f8f8f8;
      margin-right: 1rem;
      border-radius: 7px 7px 0 0;
    }

    .flashCardsMainPageHeader3aDropDown {
      min-width: 150px;
      height: 200px;
      position: absolute;
      z-index: 2;
      margin-top: 50px;
      background-color: #f8f8f8;
      border-radius: 0 0 7px 7px;
    }

    .flashCardsMainPageHeader3aDropDown button {
      width: 100px;
      margin: 0.5rem auto;
      font-size: 0.8rem;
    }

    .flashCardsMainPageHeader3aButton2 {
      background-color: #e0f945;
      border-radius: 7px;
      color: #122e3b;
      width: 100px;
      height: 50px;
      margin-left: 1rem;
    }

    .flashCardsMainPageHeader3b {
      width: 40%;
      height: 90px;
      justify-content: flex-end;
      padding: 0 7rem;
    }

    .flashCardsMainPageHeader3b span {
      width: 250px;
      height: 50px;
      border: 1px solid #ffffff;
      border-radius: 7px;
      color: #fff;
    }

    .flashCardsMainPageHeader3b span:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardMainPageBody {
      width: 100%;
    }

    .flashCardSearchDiv {
      width: 80%;
      min-height: 600px;
    }

    .flashCardSearchDiv1 {
      width: 100%;
      min-height: 250px;
      background-color: #f5f5f5;
    }

    .flashCardSearchDiv1a {
      width: 100%;
      height: 60px;
    }

    .flashCardSearchDiv1aa {
      width: 90%;
    }

    .flashCardSearchDiv1aa div {
      height: 60px;
      width: 80%;
      background-color: #fff;
      border-radius: 7px;
    }

    .searchInput {
      width: 80%;
      height: 60px;
      border: none;
    }

    .searchIconButton {
      height: 60px;
      background-color: #fff;
    }

    .searchInputLabel {
      margin-right: 1rem;
    }

    .flashCardSearchDiv1b {
      width: 150px;
      height: 2.5rem;
      border: 1px solid #122e3b;
      margin-top: 2rem;
      color: #122e3b;
    }

    .flashCardSearchDiv1b i {
      color: rgba(18, 46, 59, 1);
      margin-left: 0.75rem;
      font-size: 1rem;
    }

    .flashCardsSearchByDiv3 {
      width: 100%;
      min-height: 200px;
      border: 1px solid #b6b6b6;
      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
      border-radius: 7px;
    }

    .flashCardsSearchByDiv3 i {
      color: rgba(128, 128, 128, 0.3);
    }

    .flashCardsSearchByDiv3 i:hover {
      cursor: pointer;
    }

    .flashCardsSearchByDiv3a {
      width: 150px;
      height: 150px;
      padding: 1rem;
      text-align: center;
      color: #808080;
    }

    .flashCardsSearchByDiv3b {
      width: 150px;
      height: 150px;
      background: #f8f8f8;
      border: 1px solid #d8d8d8;
      border-radius: 7px;
      color: #808080;
      font-size: 0.8rem;
      padding: 0 0.5rem 0.5rem 0.5rem;
    }

    .flashCardsSearchByDiv3b:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardsSearchByDiv3b1 {
      width: 100%;
      height: 100px;
    }

    .flashCardsSearchByDiv3b2 {
      width: 100%;
      height: 50px;
    }

    .flashCardsSuggestionsDiv {
      width: 90%;
      height: 300px;
    }

    .flashCardsSuggestionsDiv1,
    .flashCardsSuggestionsDiv2 {
      height: 100%;
      width: 50%;
    }

    .flashCardsSuggestionsDiv1a,
    .flashCardsSuggestionsDiv1b,
    .flashCardsSuggestionsDiv2a,
    .flashCardsSuggestionsDiv2b {
      height: 100%;
      width: 50%;
    }

    .flashCardsSuggestionsDiv1a p,
    .flashCardsSuggestionsDiv1b p,
    .flashCardsSuggestionsDiv2a p,
    .flashCardsSuggestionsDiv2b p {
      width: 80%;
      padding: 1rem;
      font-size: 0.9rem;
      font-weight: 400;
      text-align: center;
    }

    .flashCardsSuggestionsDiv1a span {
      font-size: 2rem;
      transform: rotate(90deg);
    }

    .flashCardsSuggestionsDiv1a_top,
    .flashCardsSuggestionsDiv1b_top,
    .flashCardsSuggestionsDiv2a_top,
    .flashCardsSuggestionsDiv2b_top {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1a_middle,
    .flashCardsSuggestionsDiv1b_middle,
    .flashCardsSuggestionsDiv2a_middle,
    .flashCardsSuggestionsDiv2b_middle {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1a_bottom,
    .flashCardsSuggestionsDiv1b_bottom,
    .flashCardsSuggestionsDiv2a_bottom,
    .flashCardsSuggestionsDiv2b_bottom {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1bBox {
      width: 70px;
      height: 70px;
      background-color: rgba(18, 46, 59, 0.6);
      border: 1px solid #25556b;
      position: absolute;
    }

    .flashCardsSuggestionsDiv1bBox:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .flashCardsSuggestionsDiv1bBox1 {
      margin-top: 20px;
      margin-right: -20px;
      z-index: 5;
    }

    .flashCardsSuggestionsDiv1bBox2 {
      margin-top: 0px;
      margin-left: 0px;
    }

    .flashCardsSuggestionsDiv1bBox3 {
      margin-top: -20px;
      margin-left: -20px;
    }

    .flashCardsSuggestionsDiv1bSpan {
      color: rgba(255, 255, 255, 0.8);
      position: absolute;
      top: 420px;
      margin-left: 30px;
      font-size: 0.6rem;
      width: 70px;
      text-align: center;
      z-index: 5;
    }

    .flashCardsSuggestionsDivRoundNum {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #6b6969;
      background-color: #bababa;
      margin-bottom: 1rem;
    }

    .flashCardsSuggestionsDiv2aDiv {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #6b6969;
      background-color: #bababa;
      margin-top: 350px;
    }

    .flashCardsSuggestionsDiv2a span,
    .flashCardsSuggestionsDiv2b span {
      margin-top: 1rem;
    }

    #add_circle {
      font-size: 5rem;
    }

    #add_circle:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardsRecentDiv {
      width: 90%;
      min-height: 300px;
      margin: 5rem auto;
      color: var(--darkModeText);
    }

    .flashCardsRecentDiv1 {
      width: 100%;
      min-height: 300px;
    }

    .flashCardsLibraryDiv {
      width: 90%;
      min-height: 300px;
      margin-top: 0rem;
    }

    .flashCardsLibraryDiv1 {
      width: 100%;
      min-height: 350px;
      overflow-x: auto;
    }

    .flashCardsSearchByDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
    }

    .flashCardsSearchByDiv2 {
      width: 100%;
      min-height: 100px;
      border: 1px dashed #7e7e7e;
      border-radius: 7px;
      color: #808080;
    }

    .flashCardsSearchByDiv2 i {
      color: rgba(128, 128, 128, 0.4);
    }

    .flashCardsSearchByDiv2 i:hover {
      cursor: pointer;
    }

    #searchClose {
      align-self: flex-end;
    }

    .searchAllText {
      font-size: 0.6rem;
      color: #808080;
      text-decoration: underline;
    }

    .searchAllText:hover {
      cursor: pointer;
    }

    .flashCardsSearchByDiv2Button1,
    .flashCardsSearchByDiv2Button2,
    .flashCardsSearchByDiv2Button3,
    .flashCardsSearchByDiv2Button4 {
      width: 100px;
      border-radius: 7px;
      font-size: 0.7rem;
    }

    .flashCardsSearchByDiv2Button1 {
      background: #cbac7f;
      border: 1px solid #d8d8d8;
      color: #fff;
    }

    .flashCardsSearchByDiv2Button2 {
      background: #e9caca;
      border: 1px solid #d8d8d8;
      color: #808080;
    }

    .flashCardsSearchByDiv2Button3 {
      background: #87a8d9;
      border: 1px solid #d8d8d8;
      color: #fff;
    }

    .flashCardsSearchByDiv2Button4 {
      background: #e0f2c9;
      border: 1px solid #d8d8d8;
      color: #808080;
    }

    .flashCardsPopularDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsPopularDiv1 {
      width: 100%;
      min-height: 200px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .flashCardsTextBooksDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsTextBooksDiv1 {
      width: 100%;
      min-height: 200px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .flashCardsHighestRatedDiv {
      width: 80%;
      min-height: 500px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsHighestRatedOuterCardsDiv {
      width: 100%;
      background-color: #f5f5f5;
      padding: 0 2rem;
    }

    .flashCardsHighestRatedOuterCardsDiv i {
      opacity: 0.7;
    }

    .flashCardsHighestRatedOuterCardsDiv i:hover {
      cursor: pointer;
      opacity: 0.3;
    }

    .flashCardsHighestRatedDiv1 {
      width: 100%;
      min-height: 400px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .highestRatedCard {
      width: 200px;
      min-height: 260px;
      border: 1px solid #d8d8d8;
      border-radius: 7px;
      padding: 0;
    }

    .highestRatedCardHeader {
      width: 100%;
      height: 2rem;
      margin-bottom: 1rem;
    }

    .highestRatedCardImgDiv {
      width: 100%;
    }

    .highestRatedCardImgDiv img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .highestRatedCardData {
      width: 100%;
      font-size: 0.6rem;
      margin-top: 2rem;
    }

    .highestRatedCardData1 {
      width: 70%;
    }

    .highestRatedCardButtonsDiv {
      width: 100%;
      margin-top: 1rem;
    }

    .highestRatedCardButton1 {
      width: 80px;
      background-color: #d9d9d9;
      border-radius: 20px;
    }

    .highestRatedCardButton2 {
      width: 80px;
      border: 1px solid #d8d8d8;
      border-radius: 20px;
    }

    .highestRatedCardHeaderNotifications {
      opacity: 1;
      color: #0076ff;
    }

    .flashCardMainCreationDiv {
      width: 100%;
      background-color: #fff;
      min-height: 100vh;
      border-radius: 7px;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
    }

    .flashCardMainCreationDiv_dark {
      width: 100%;
      background-color: var(--darkBackground);
      min-height: 100vh;
      border-radius: 7px;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
    }

    .flashCardMainCreationDiv_inner {
      width: 90%;
      max-width: 990px;
      min-height: 100vh;
      border: 1px solid #9f9f9f;
    }

    .cancelCreationModeDiv {
      width: 100%;
    }

    .cancelCreationModeButton:hover {
      cursor: pointer;
      color: red;
    }

    .flashCardMainCreationDiv1 {
      width: 90%;
      max-width: 900px;
      background-color: #d9d9d9;
      border: 1px solid #d9d9d9;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      margin-bottom: 50px;
    }

    .flashCardMainCreationDiv1_dark {
      width: 90%;
      max-width: 900px;
      border: 1px solid #d9d9d9;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      margin-bottom: 50px;
      background: linear-gradient(90deg, #10131b 0%, #122e3b 135.64%);
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1a {
      width: 100%;
      height: 50px;
    }

    .flashCardMainCreationDiv1aa {
      width: 10%;
    }

    .flashCardMainCreationDiv1ab {
      width: 80%;
      color: #000000;
    }

    .flashCardMainCreationDiv1ab_dark {
      width: 80%;
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1ac {
      width: 10%;
      color: #122e3b;
      opacity: 0.8;
      font-weight: 100;
    }

    .flashCardMainCreationDiv1ac_dark {
      width: 10%;
      color: var(--darkModeText);
      opacity: 0.8;
      font-weight: 100;
    }

    .createBodyDiv {
      width: 100%;
    }

    .createTitleDiv,
    .createDescriptionDiv {
      width: 100%;
      padding: 0 5rem;
    }

    .createTitleDiv span,
    .createDescriptionDiv span {
      width: 120px;
      display: flex;
      align-items: center;
    }

    .createTitleInput,
    .createDescriptionInput {
      width: 90%;
    }

    .createDescriptionDiv {
      margin-top: 2rem;
    }

    .createFineTuneDiv {
      width: 100%;
      margin-top: 3rem;
      flex-direction: column;
      padding: 0 3rem;
    }

    .createFineTuneDiv1 {
      width: 100%;
      justify-content: space-around;
      margin: 2rem auto;
      padding: 0 3rem;
    }

    .createFineTuneDiv2 {
      width: 100%;
      color: #717070;
    }

    .createFineTuneDiv2 span,
    .createFineTuneDiv2 label {
      font-size: 0.7rem;
    }

    .createFineTuneDiv1a {
      margin-bottom: 2rem;
    }

    .createFineTuneDiv1aDiv1 span,
    .createFineTuneDiv1aDiv2 span {
      font-size: 0.8rem;
      color: #717070;
    }

    .createCardsLevelGrades,
    .createCardsSubjSelect {
      border: none;
      background-color: inherit;
      font-size: 0.8rem;
      border-bottom: 1px solid gray;
      margin-left: 1rem;
      color: rgba(0, 0, 0, 0.6);
      width: 120px;
    }

    .createCardsLevelGrades_dark,
    .createCardsSubjSelect_dark {
      border: none;
      background-color: var(--darkBackground);
      font-size: 1rem;
      border-bottom: 1px solid gray;
      margin-left: 1rem;
      color: var(--darkModeText);
      width: 120px;
    }

    .createFineTuneDiv1a select:focus {
      border: none;
      outline: none;
      border-bottom: 1px solid gray;
    }

    .createFineTuneDiv1a select:hover {
      cursor: pointer;
    }

    .bookChapterInput {
      font-size: 0.7rem;
      background-color: inherit;
      border: none;
      border-bottom: 1px solid gray;
    }

    .bookChapterInput:focus {
      outline: none;
      border-bottom: 1px solid gray;
    }

    .createFineTuneDiv1bTextBook {
      font-size: 0.7rem;
    }

    .createFineTuneDiv1bNoSpan {
      font-size: 0.5rem;
      margin: 0 1rem;
    }

    .createFineTuneDiv1bYesSpan {
      font-size: 0.5rem;
      margin-left: 1rem;
    }

    .createFineTuneDiv2a {
      width: 40%;
      height: 130px;
      border: 1px solid #c9c9c9;
      border-radius: 7px;
    }

    .createFineTuneDiv2a1 {
      width: 100%;
    }

    .previewCard {
      width: 90%;
      max-width: 900px;
      min-height: 350px;
      border-radius: 7px;
      margin: 10px auto;
    }

    .previewCardHeader {
      width: 100%;
      height: 70px;
      border-bottom: 1px dashed #d0d0d0;
      padding: 0 1rem;
      font-size: 16px;
      color: #d0d0d0;
    }

    .previewCardHeader_1,
    .previewCardHeader_2 {
      width: 50%;
    }

    .previewCardHeader_1 {
      flex-direction: column;
    }

    .previewCardHeader_1_span {
      font-size: 10px;
    }

    .previewCardHeader_2 {
      align-items: center;
    }

    .previewCardBody {
      width: 100%;
      height: 280px;
      padding: 10px;
    }

    .createNewCardTemplate {
      width: 90%;
      max-width: 900px;
      min-height: 500px;
      background: #f8f8f8;
      border: 1px solid #d9d9d9;
      border-radius: 7px;
      color: #b4b4b4;
      margin: 10px auto 50px auto;
    }

    .createNewCardTemplateHeader {
      width: 100%;
      height: 70px;
      border-bottom: 1px dashed #d0d0d0;
      padding: 0 1rem;
    }

    .createNewCardTemplateHeaderNumber {
      width: 60px;
      height: 50px;
      background: #d9d9d9;
      border-radius: 7px;
      font-weight: 700;
      font-size: 24px;
      line-height: 32px;
      color: var(--darkModeText);
    }

    .createNewCardTemplateHeaderRight {
      width: 70%;
    }

    .createNewCardTemplateHeaderRight span,
    .createNewCardTemplateHeaderRight i {
      font-weight: 100;
    }

    .createNewCardTemplateHeaderRight span:hover,
    .createNewCardTemplateHeaderRight i:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .createNewCardTemplateBody {
      width: 100%;
      height: 420px;
    }

    .createNewCardTemplateBody1 {
      width: 100%;
      padding: 0 0.5rem;
    }

    .editorAreaDiv {
      margin: auto;
    }

    #editorTextArea,
    #answerTextArea {
      width: 98%;
      min-width: 780px;
      max-width: 780px;
      min-height: 250px;
      max-height: 250px;
      margin: 2px auto 10px auto;
      border: #0076ff 2px solid;
      border: 0.2px solid #d0d0d0;
      outline: none;
    }

    #editorTextArea:focus,
    #answerTextArea:focus {
      border: 0.2px solid #d0d0d0;
    }

    .createNewCardTemplateBody1a {
      width: 100%;
      height: 150px;
    }

    .createNewCardTemplateBody2 {
      width: 35%;
    }

    .createNewCardTemplateBody2a {
      width: 140px;
      height: 140px;
      border: 1px dashed #000000;
      border-radius: 7px;
    }

    .createNewCardTemplateBody2b {
      width: 140px;
      height: 140px;
      background-color: #d9d9d9;
      border: 1px solid #c0c0c0;
      border-radius: 7px;
    }

    .createNewCardTemplateBody2a:hover,
    .createNewCardTemplateBody2b:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .createFlashCardNewCardButton {
      border: 1px solid #122e3b;
      border-radius: 7px;
      background-color: inherit;
      width: 350px;
      height: 80px;
      font-weight: 500;
      font-size: 24px;
      margin: 5rem auto;
    }

    .createFlashCardNewCardButton_dark {
      border: 1px solid #fff;
      border-radius: 7px;
      background-color: inherit;
      width: 350px;
      height: 80px;
      font-weight: 500;
      font-size: 24px;
      margin: 5rem auto;
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1Button {
      border: 1px solid #e0f945;
      border-radius: 7px;
      margin: 2rem auto;
    }

    .flashCardMainCreationDivFooterButtonDiv {
      flex-direction: row;
    }

    .flashCardMainCreationDivFooterButtonDiv1 {
      flex-direction: row;
      align-items: center;
    }

    .newFlashCardDeckSave {
      height: 80px;
      width: 150px;
      margin-right: 2rem;
      background-color: #e0f945;
      border-radius: 7px;
    }

    .newFlashCardDeckCancel {
      height: 80px;
      width: 150px;
      margin-left: 2rem;
      background-color: #e83d3d;
      border-radius: 7px;
      color: #fff;
    }

    .flashCardsSuggestionsDiv1bSpan:hover {
      cursor: pointer;
    }

    .cardsLibraryMainDiv {
      width: 100%;
      min-height: calc(var(--screen-y) - 50px);
      margin-top: -2rem;
    }

    .classroomCardsLibraryMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 0;
    }

    .cardsLibraryMainDiv h1,
    .classroomCardsLibraryMainDiv h1 {
      width: 90%;
      font-weight: 100;
    }

    .cardsLibraryMainDiv h3,
    .classroomCardsLibraryMainDiv h3 {
      width: 80%;
      font-weight: 100;
    }

    .cardsLibraryDisplayCardsDiv {
      width: 80%;
      height: 350px;
      margin: 0.2rem auto 3rem auto;
    }

    .classroomCardsLibraryDisplayCardsDiv {
      width: 95%;
      height: 350px;
      background-color: inherit;
    }

    .cardsLibraryDisplayCardsDivLeft,
    .cardsLibraryDisplayCardsDivRight {
      width: 5%;
      height: 350px;
    }

    .cardsLibraryDisplayCardsDivMiddle {
      width: 90%;
      height: 350px;
      overflow-x: auto;
    }

    .miniCardSetCard {
      width: 420px;
      height: 230px;
      background-color: #fff;
      border-radius: 7px;
      margin-right: 20px;
      opacity: 1;
      color: #091a22;
    }

    .miniCardSetCardMiddle2Text {
      width: 70%;
      font-size: 0.7rem;
      word-wrap: break-word;
    }

    .miniCardSetCardTop {
      width: 100%;
      height: 40px;
    }

    .miniCardSetCardMiddle1 {
      width: 100%;
      height: 50px;
    }

    .miniCardSetCardMiddle2 {
      width: 100%;
      height: 50px;
    }

    .miniCardSetCardFooter {
      width: 80%;
      height: 60px;
    }

    .cardsLibraryDisplayCardsArrow {
      font-size: 3rem;
      color: rgba(0, 0, 0, 0.2);
      z-index: 2;
    }

    .cardsLibraryDisplayCardsArrow:hover {
      cursor: pointer;
    }

    .classroomCardsLibraryDisplayCardsArrow {
      font-size: 3rem;
      font-weight: 100;
      z-index: 2;
      color: #fff;
    }

    /*** END OF STUDYCARDS PAGE ******************/

    /**** DECK VIEW PAGE ****/

    #deckViewModal {
      width: 100%;
      min-height: 80vh;
      background-color: #b5c5cd;
      z-index: 25;
      opacity: 1;
    }

    #deckViewModal1 {
      width: 100%;
      background-color: #b5c5cd;
    }

    #deckViewModalTopDiv {
      width: 800px;
      background-color: #b5c5cd;
    }

    .deckViewMainDiv {
      width: 100%;
      height: 80vh;
      background-color: #b5c5cd;
    }

    .deckViewMainDiv1 {
      padding: 50px;
      background-color: #b5c5cd;
    }

    .deckViewMainDivHeader {
      width: 100%;
      color: #122e3b;
      padding: 5px;
      padding-left: 100px;
    }

    .filled_icon {
      font-variation-settings: "FILL" 1, "wght" 100, "GRAD" 200, "opsz" 48;
    }

    .deckViewModalCloseButton {
      border: 0.2px solid rgba(128, 128, 128, 0.5);
      border-radius: 7px;
    }

    .card {
      width: 800px;
      height: 500px;
      overflow-y: auto;
      background-color: #fff;
    }

    .card h3 {
      width: 80%;
    }

    .deckViewNavButtons {
      margin-top: 2rem;
      padding: 0.5rem;
    }

    .deckViewNavButtonsLeft,
    .deckViewNavButtonsRight {
      width: 100px;
      height: 60px;
      background-color: #122e3b;
      border-radius: 7px;
    }

    .deckViewNavButtonsLeft span,
    .deckViewNavButtonsRight span {
      font-size: 40px;
      color: #b5c5cd;
    }

    .deckViewNavButtonsCenter span {
      font-size: 40px;
      font-weight: 100;
      color: #122e3b;
    }

    .deckViewNavButtonsCenter {
      width: 100px;
      height: 60px;
      margin: 0;
      background-color: none;
    }

    .deckViewNavButtonsCenter:hover {
      background-color: none;
      cursor: pointer;
      opacity: 0.7;
    }

    .cardContent {
      width: 100%;
      height: 450px;
      padding: 0.5rem;
    }

    #cardTextTop {
      position: absolute;
      margin-bottom: 400px;
    }

    #cardText {
      align-self: center;
    }

    .card_display {
      overflow-x: hidden !important;
      font-size: 12px;
      padding: 0;
      margin-top: 50px;
    }

    .card_display {
      overflow-x: hidden !important;
      font-size: 14px;
      height: 100%;
      width: 100%;
      padding: 0;
      margin-top: 50px;
    }

    /**** END OF DECK VIEW PAGE ***/

    /*** symbolsKeyboard popup ***/

    .symbolsKeyboard {
      position: absolute;
      z-index: 2;
      text-align: center;
      min-height: 400px;
      border: 1px solid #d2cccc;
      padding: 0 10px;
      width: 80%;
      background-color: #fff;
      margin-left: 10%;
    }

    .symbolsKeyboardHeader0 {
      width: 100%;
      height: 50px;
      cursor: move;
      margin-bottom: 10px;
    }

    .symbolsKeyboardHeader0CloseButton {
      background-color: #fa7878;
      color: #000000;
      border-radius: 50%;
      font-variation-settings: "FILL" 0, "wght" 100, "GRAD" -25, "opsz" 20;
    }

    .symbolsKeyboardHeader0Title {
      width: 80%;
    }

    .symbolsKeyboardHeader {
      width: 90%;
      height: 50px;
      z-index: 1;
      margin-bottom: 10px;
      border-radius: 10px;
      background: rgba(38, 50, 56, 1);
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      color: #fff;
      font-family: Inter;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      padding: 0px;
    }

    .symbolsKeyboardHeader button {
      height: 100%;
      width: 20%;
    }

    .symbolsKeyboardHeaderButtonLeft {
      border-radius: 10px 0px 0px 10px;
    }

    .symbolsKeyboardHeaderButtonRight {
      border-radius: 0px 10px 10px 0px;
    }

    .symbolsKeyboardHeader button:hover {
      cursor: pointer;
      opacity: 0.5;
    }

    .symbolsKeyboardBody {
      width: 100%;
      height: 300px;
      overflow-y: auto;
    }

    .symbolsKeyboardBody button {
      width: 10%;
      padding: 10px;
    }

    .symbolsKeyboardBody button:hover {
      cursor: pointer;
      opacity: 0.5;
    }

    .greekMathSymbolsRowDiv {
      width: 100%;
    }

    .newTextInputIcon {
      border: 1px solid #d3d3d3;
      background-color: #fff;
      margin: 0 10px;
    }

    /*** End of symbolsKeyboard popup ***/

    /*** Group Study Page ***/

    .groupStudyMainDiv {
      width: 100%;
      height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .classroomGroupStudyMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .groupStudyTopDiv {
      width: 100%;
      height: 100px;
    }

    .groupStudyTopDiv1 {
      width: 20%;
      font-size: 15px;
    }

    .groupStudyTopDiv2 {
      width: 60%;
    }

    .groupStudyTopDiv3 {
      width: 20%;
    }

    .groupStudyMiddleDiv {
      width: 80%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 7px;
      padding: 0;
    }

    .groupStudyMiddleDiv1Button {
      width: 300px;
      height: 80px;
      font-size: 20px;
      border-radius: 5px;
    }

    .addParticipantsIcon {
      width: 20px;
      height: 20px;
    }

    .groupStudyFooter {
      width: 90%;
      justify-content: space-around;
      padding: 10px 0;
      border-radius: 45px;
      font-size: 8px;
      margin-bottom: 20px;
    }

    .groupAddParticipantsDivHeader {
      margin-top: 10px;
    }

    .groupStudyFooter span {
      display: none;
    }

    .myAvatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupAddParticipantsDivHeader1 {
      width: 100%;
      margin-top: 20px;
      padding: 0px 10px;
    }

    .groupAddParticipantsDivHeader1:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .groupStudyAddFriendsTop {
      width: 100%;
      margin-top: 15px;
    }

    .groupStudyFriendsCount {
      width: 200px;
      height: 40px;
      border-radius: 7px;
    }

    .groupStudyFriendsList {
      min-width: 80%;
      margin: 10px auto;
    }

    .groupStudyFriendListItemDiv {
      width: 100%;
      margin: 5px auto;
    }

    .groupStudyFriendListItemDiv1 {
      width: 40%;
      height: 50px;
      border-radius: 7px;
      padding: 15px 10px;
    }

    .groupStudyFriendListItemDiv2 {
      width: 40%;
      height: 50px;
    }

    .groupStudyFriendListItemButton {
      width: 50px;
      height: 50px;
      border-radius: 7px;
    }

    .myFriends_Avatar {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupStudyMiddleDiv1 {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }

    .groupAddParticipantsDiv {
      width: 550px;
      height: 600px;
      padding-bottom: 20px;
      border-radius: 7px;
      background-color: inherit;
      margin-bottom: 50px;
      overflow-y: auto;
    }

    .avatarMainDiv {
      width: 181px;
      height: 220px;
      padding: 1px;
      border: 0.5px solid lightgray;
    }

    .avatar {
      width: 180px;
      height: 180px;
      font-size: 12px;
    }

    .joinStreamButton,
    .endStreamButton {
      width: 180px;
      height: 40px;
    }

    .avatar__img {
      width: 50px;
      height: 100px;
    }

    .groupStudySettingsModal {
      width: 400px;
      height: 300px;
      position: fixed;
      /** center on page**/
      top: calc(50% - 150px);
      left: calc(50% - 200px);
      z-index: 10;
      opacity: 1;
      padding: 0;
    }

    /** End of Group Study Page **/

    /*** Settings Page for Color theme ***/
    .settingsDemoMainDiv {
      width: 100%;
    }

    .settingsMobileOuterDiv {
      width: 400px;
      height: 700px;
      border: 2px solid #b5c5cd;
      margin-top: 20px;
    }

    .settingsMobileInner1Div,
    .settingsMobileInner2Div {
      width: 100%;
      height: 50%;
    }

    .settingsMobileInner1DivScreen {
      width: 90%;
      height: 90%;
      border: 1px solid grey;
    }

    /*** End of Settings Page for Color theme ***/

    /*** Taratai AI Page ***/

    .tarataiAIMiddleDiv {
      width: 90%;
    }

    .tarataiAIMiddleHeaderDiv {
      width: 100%;
      margin-top: 20px;
    }

    .tarataiAIMiddleContentDiv {
      width: 60%;
      height: 200px;
      margin: 20px auto;
    }

    .tarataiAIMiddleFooterDiv {
      width: 100%;
    }

    .tarataiAIUploadButton,
    .tarataiAIWriteTextButton {
      width: 170px;
      height: 50px;
      border-radius: 7px;
      border: 1px solid #838383;
      color: var(--darkModeText);
      margin: 0px 10px;
    }

    .tarataiAISubmitButton {
      width: 200px;
      height: 60px;
      border-radius: 7px;
    }

    /*** End of Taratai AI Page ***/

    /*** COMPETITIONS PAGE ***/
    .competitionsPageHeader {
      width: 80%;
      height: 150px;
      border-radius: 10px;
      margin-top: 50px;
    }

    .competitionsPageHeader1 {
      width: 80%;
      height: 150px;
    }

    .competitionsPageHeader1 > h1 {
      font-size: 32px;
      font-weight: 700;
    }

    .competitionsPageHeader1 span {
      font-size: 16px;
      font-weight: 400;
    }

    .competitionsPageHeader2 {
      width: 40%;
      height: 150px;
    }

    .competitionsPageHeader2PointsBox {
      width: 110px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #fac015 0%, #f97616 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2RanksBox {
      width: 130px;
      height: 100px;
      margin: 0px 10px;
      border-radius: 10px;
      background: linear-gradient(90deg, #659ff9 0%, #a05df7 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2WinRateBox {
      width: 110px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #46db84 0%, #16baa5 100%);
      padding: 10px;
      cursor: pointer;
      margin-right: 20px;
    }

    .competitionsPageHeader2 div {
      color: #fff;
      font-size: 15px;
      font-weight: 700;
    }

    .competitionsPageTabs {
      width: 80%;
      height: 80px;
      margin-top: 80px;
    }

    .competitionsPageTabs button {
      width: 400px;
      height: 50px;
      border-radius: 10px;
      cursor: pointer;
    }

    .competitionsPageTabs_not_active {
      background-color: inherit;
      border: none;
    }

    .competitionsPageTabs_active {
      border: none;
    }

    /* AI Competition Card Styles */

    .competitionsOptions {
      width: 100%;
    }

    .ai-competition-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .bot-icon {
      width: 32px;
      height: 32px;
      color: #10b981; /* Green color */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .multiplier-section {
      text-align: right;
    }

    .multiplier-label {
      font-size: 14px;
      margin-bottom: 2px;
    }

    .multiplier-value {
      font-size: 18px;
      font-weight: bold;
      color: #ea580c; /* Orange */
    }

    .competition-controls {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .subject-select,
    .topic-select {
      flex: 1;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-select:focus,
    .topic-select:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .subject-select:disabled,
    .topic-select:disabled {
      background-color: #f9fafb;
      color: #9ca3af;
      cursor: not-allowed;
    }

    .start-button {
      padding: 12px 24px;
      background: #10b981; /* Green */
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .start-button:hover:not(:disabled) {
      background: #059669; /* Darker green */
    }

    .start-button:disabled {
      background: #9ca3af; /* Gray */
      cursor: not-allowed;
    }

    .play-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    /* Friend Competition Card Styles */

    .friend-competition-card {
      width: 80%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .users-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Hover effect for future when feature becomes available */
    .friend-competition-card.available {
      opacity: 1;
      border-left-color: #3b82f6; /* Blue border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .friend-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .friend-competition-card.available .users-icon {
      color: #3b82f6; /* Blue color when available */
    }

    /* .friend-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .friend-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Random User Competition Card Styles */

    .random-user-competition-card {
      width: 80%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .zap-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Styles for when feature becomes available */
    .random-user-competition-card.available {
      opacity: 1;
      border-left-color: #7c3aed; /* Purple border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .random-user-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .random-user-competition-card.available .zap-icon {
      color: #7c3aed; /* Purple color when available */
    }

    /* .random-user-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .random-user-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Special highlight for full multiplier feature */
    .random-user-competition-card.available .coming-soon-message {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fde68a 100%
      ); /* Golden gradient */
      color: #92400e; /* Dark yellow/brown text */
      border: 1px solid #f59e0b; /* Golden border */
      font-weight: 600;
    }

    /* Animation for the Zap icon when available */
    .random-user-competition-card.available .zap-icon {
      animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.5));
      }
      50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.8));
      }
    }

    /* Quick Stats Sidebar Styles */

    .sidebar-container {
      width: 100%;
      gap: 24px; /* space-y-6 equivalent */
    }

    .stats-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .stats-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .performance-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .performance-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .performance-subject {
      font-size: 14px;
    }

    .performance-points {
      font-weight: bold;
      font-size: 14px;
    }

    .performance-points.positive {
      color: #059669; /* Green for good performance */
    }

    .performance-points.negative {
      color: #dc2626; /* Red for poor performance */
    }

    /* Additional visual enhancements */
    .performance-item {
      padding: 8px 0;
      border-bottom: 1px solid #f3f4f6;
      transition: background-color 0.2s ease;
    }

    .performance-item:last-child {
      border-bottom: none;
    }

    .performance-item:hover {
      background-color: #f9fafb;
      border-radius: 6px;
      padding: 8px 12px;
      margin: 0 -12px;
    }

    /* Optional: Progress indicators for performance trends */
    .performance-item.trending-up::before {
      content: "↗";
      color: #059669;
      margin-right: 4px;
      font-weight: bold;
    }

    .performance-item.trending-down::before {
      content: "↘";
      color: #dc2626;
      margin-right: 4px;
      font-weight: bold;
    }

    /* Optional: Badge-style points display */
    .performance-points {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .performance-points.positive {
      background-color: #d1fae5; /* Light green background */
      color: #065f46; /* Dark green text */
    }

    .performance-points.negative {
      background-color: #fee2e2; /* Light red background */
      color: #991b1b; /* Dark red text */
    }

    /* Achievement Progress Card Styles */

    .achievement-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .achievement-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .achievement-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .achievement-item {
      display: flex;
      flex-direction: column;
    }

    .achievement-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .achievement-name {
      font-size: 14px;
      font-weight: 500;
    }

    .achievement-progress-text {
      font-size: 14px;
      font-weight: 500;
    }

    .progress-bar-container {
      width: 100%;
      background: #e5e7eb; /* Light gray background */
      border-radius: 9999px; /* Fully rounded */
      height: 8px;
      overflow: hidden;
      position: relative;
    }

    .progress-bar {
      height: 100%;
      border-radius: 9999px; /* Fully rounded */
      transition: width 0.5s ease-in-out;
      position: relative;
    }

    .progress-bar.blue {
      background: #3b82f6; /* Blue */
    }

    .progress-bar.yellow {
      background: #eab308; /* Yellow */
    }

    /* Additional color options for other achievements */
    .progress-bar.green {
      background: #10b981; /* Green */
    }

    .progress-bar.purple {
      background: #8b5cf6; /* Purple */
    }

    .progress-bar.red {
      background: #ef4444; /* Red */
    }

    .progress-bar.orange {
      background: #f97316; /* Orange */
    }

    /* Animation effect for progress bars */
    .progress-bar {
      animation: progressFill 1s ease-out;
    }

    @keyframes progressFill {
      from {
        width: 0%;
      }
      to {
        width: var(--target-width, 0%);
      }
    }

    /* Hover effects */
    /* .achievement-item:hover .achievement-name {
      color: #1f2937;  
      font-weight: 600;
    } */

    .achievement-item:hover .progress-bar {
      filter: brightness(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Progress bar glow effect */
    .progress-bar::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
      );
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }

    /* Achievement completion celebration */
    /* .achievement-item.completed .achievement-name {
      color: #059669;
      font-weight: 700;
    } */

    /* .achievement-item.completed .achievement-progress-text {
      color: #059669;
      font-weight: 700;
    } */

    .achievement-item.completed .progress-bar {
      background: linear-gradient(90deg, #10b981, #34d399);
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* Near completion highlighting */
    .achievement-item.near-completion .progress-bar {
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    }

    /* .achievement-item.near-completion .achievement-name {
      color: #1d4ed8;
      font-weight: 600;
    } */

    /* Practice Tab Styles */

    .practice-tab-container {
      gap: 24px;
      width: 100%;
    }

    /* Practice vs AI Card */
    .practice-ai-card {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .practice-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .bot-icon-blue {
      width: 32px;
      height: 32px;
      color: #3b82f6; /* Blue */
      margin-right: 12px;
    }

    .practice-title {
      font-size: 20px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0 0 4px 0;
    }

    .practice-description {
      margin: 0;
      font-size: 14px;
    }

    .practice-controls {
      display: flex;
      flex-direction: column;
      gap: 16px; /* space-y-4 equivalent */
    }

    .subject-dropdown {
      width: 100%;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-dropdown:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .start-practice-button {
      width: 100%;
      background: #3b82f6; /* Blue */
      color: white;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .start-practice-button:hover {
      background: #2563eb; /* Darker blue */
    }

    /* Practice vs Friends Card (Disabled) */
    .practice-friends-card {
      width: 60%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      opacity: 0.75; /* Dimmed appearance */
      margin: 50px auto;
    }

    .users-icon-gray {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray */
      margin-right: 12px;
    }

    .practice-title-disabled {
      font-size: 20px;
      font-weight: bold;
      color: #4b5563; /* Medium gray for disabled state */
      margin: 0 0 4px 0;
    }

    .practice-description-disabled {
      color: #6b7280; /* Light gray for disabled state */
      margin: 0;
      font-size: 14px;
    }

    .coming-soon-notice {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Enhanced hover effects for available card */
    .practice-ai-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Loading state for practice button */
    .start-practice-button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .start-practice-button.loading {
      position: relative;
      color: transparent;
    }

    .start-practice-button.loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    /* Future enhancement: When friends practice becomes available */
    .practice-friends-card.available {
      opacity: 1;
      border-left: 4px solid #10b981; /* Green accent */
    }

    .practice-friends-card.available .users-icon-gray {
      color: #10b981; /* Green when available */
    }

    .practice-friends-card.available .practice-title-disabled {
      color: #1f2937; /* Dark gray when available */
    }

    .practice-friends-card.available .practice-description-disabled {
      color: #4b5563; /* Medium gray when available */
    }

    .practice-friends-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Leaderboard Tab Styles */

    .leaderboard-container {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .leaderboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .leaderboard-title {
      font-size: 24px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0;
    }

    .subject-filter {
      padding: 8px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-filter:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .leaderboard-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .leaderboard-item.top-three {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fed7aa 100%
      ); /* Yellow to orange gradient */
    }

    .leaderboard-item.regular {
      background: #f9fafb; /* Light gray */
    }

    .student-info {
      display: flex;
      align-items: center;
    }

    .rank-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      margin-right: 16px;
      font-size: 14px;
    }

    .rank-badge.gold {
      background: #eab308; /* Gold/Yellow */
    }

    .rank-badge.silver {
      background: #9ca3af; /* Silver/Gray */
    }

    .rank-badge.bronze {
      background: #fb923c; /* Bronze/Orange */
    }

    .rank-badge.regular-rank {
      background: #3b82f6; /* Blue */
    }

    .student-details {
      display: flex;
      flex-direction: column;
    }

    .student-name {
      font-weight: 600;
      color: #1f2937; /* Dark gray */
      font-size: 16px;
    }

    .student-level {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    .score-info {
      text-align: right;
    }

    .score-points {
      font-weight: bold;
      font-size: 18px;
      color: #1f2937; /* Dark gray */
    }

    .score-label {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    /* Hover effects */
    .leaderboard-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .leaderboard-item.top-three:hover {
      background: linear-gradient(135deg, #fef3c7 0%, #fdba74 100%);
    }

    .leaderboard-item.regular:hover {
      background: #f3f4f6;
    }

    /* Medal icons for top 3 */
    .rank-badge.gold::after {
      content: "🥇";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.silver::after {
      content: "🥈";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.bronze::after {
      content: "🥉";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    /* Animation for rank changes */
    .leaderboard-item {
      animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Special highlighting for current user */
    .leaderboard-item.current-user {
      border: 2px solid #3b82f6;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    }

    .leaderboard-item.current-user .student-name {
      color: #1d4ed8;
      font-weight: 700;
    }

    /* Loading skeleton animation */
    .leaderboard-item.loading {
      background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }

    /* Empty state styling */
    .leaderboard-empty {
      text-align: center;
      padding: 40px 20px;
      color: #6b7280;
    }

    .leaderboard-empty h4 {
      font-size: 18px;
      margin-bottom: 8px;
      color: #374151;
    }

    .leaderboard-empty p {
      font-size: 14px;
      margin: 0;
    }
  }
  /* Large devices (desktops, 992px and up with min height of 1000px) */
  @media (min-width: 992px) and (max-width: 1200px) and (min-height: 800px) {
    /**** HOME TOP ****/
    .home {
      width: 100%;
      height: calc(100vh - 50px);
      padding: 0;
      margin-top: 50px;
    }

    .home1 {
      width: 50%;
      flex-direction: column;
      align-items: center;
    }

    .home2 {
      width: 50%;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .backgroundImageDiv {
      width: 25%;
      height: 65%;
      position: absolute;
      left: 0;
      top: 10%;
      border-bottom-right-radius: 300px;
      z-index: 0;
    }

    .backgroundImageDiv_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv_dark {
      background-color: #3b4c63;
    }

    .backgroundImageDiv2 {
      width: 25%;
      height: 65%;
      position: absolute;
      right: 50px;
      top: 10%;
      z-index: 0;
      border-top-right-radius: 350px;
      border-bottom-left-radius: 50px;
    }

    .backgroundImageDiv2_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv2_dark {
      background-color: var(--bluegraysteel);
    }

    .study-connect-interact-svg {
      margin-top: 15%;
      z-index: 5;
      width: 500px;
    }

    .welcomeHeader {
      z-index: 5;
      font-size: 2rem;
      margin-top: 0rem;
    }

    .welcomeP {
      z-index: 5;
      font-size: 12px;
      margin: 0rem auto 3.5rem auto;
      width: 60%;
      font-weight: 400;
    }

    .home1Buttons button {
      width: 220px;
      height: 60px;
      border-radius: 50px;
      z-index: 5;
      margin: 0px 20px 20px 20px;
    }

    .home1BottomDiv {
      /* width: 100%; */
      height: 300px;
      position: absolute;
      bottom: 0px;
      margin-left: 20px;
      /* border: 2px solid red; */
    }

    .home1BottomDiv div {
      width: 140px;
      height: 160px;
      margin: 0px 5px;
      border-radius: 20px;
      color: #fff;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      font-size: 10px;
    }

    .home1BottomDivHeader {
      font-size: 15px;
      margin-bottom: 15px;
    }

    .homePageMainImage {
      width: 70%;
      z-index: 5;
      /* opacity: 0.9; */
    }

    /*** COMPETITIONS PAGE ***/
    .competitionsPageHeader {
      width: 80%;
      height: 150px;
      border-radius: 10px;
      margin-top: 50px;
    }

    .competitionsPageHeader1 {
      width: 80%;
      height: 150px;
    }

    .competitionsPageHeader1 > h1 {
      font-size: 32px;
      font-weight: 700;
    }

    .competitionsPageHeader1 span {
      font-size: 16px;
      font-weight: 400;
    }

    .competitionsPageHeader2 {
      width: 40%;
      height: 150px;
    }

    .competitionsPageHeader2PointsBox {
      width: 110px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #fac015 0%, #f97616 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2RanksBox {
      width: 130px;
      height: 100px;
      margin: 0px 10px;
      border-radius: 10px;
      background: linear-gradient(90deg, #659ff9 0%, #a05df7 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2WinRateBox {
      width: 110px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #46db84 0%, #16baa5 100%);
      padding: 10px;
      cursor: pointer;
      margin-right: 20px;
    }

    .competitionsPageHeader2 div {
      color: #fff;
      font-size: 15px;
      font-weight: 700;
    }

    .competitionsPageTabs {
      width: 80%;
      height: 80px;
      margin-top: 80px;
    }

    .competitionsPageTabs button {
      width: 400px;
      height: 50px;
      border-radius: 10px;
      cursor: pointer;
    }

    .competitionsPageTabs_not_active {
      background-color: inherit;
      border: none;
    }

    .competitionsPageTabs_active {
      border: none;
    }

    /* AI Competition Card Styles */

    .competitionsOptions {
      width: 100%;
    }

    .ai-competition-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .bot-icon {
      width: 32px;
      height: 32px;
      color: #10b981; /* Green color */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .multiplier-section {
      text-align: right;
    }

    .multiplier-label {
      font-size: 14px;
      margin-bottom: 2px;
    }

    .multiplier-value {
      font-size: 18px;
      font-weight: bold;
      color: #ea580c; /* Orange */
    }

    .competition-controls {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .subject-select,
    .topic-select {
      flex: 1;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-select:focus,
    .topic-select:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .subject-select:disabled,
    .topic-select:disabled {
      background-color: #f9fafb;
      color: #9ca3af;
      cursor: not-allowed;
    }

    .start-button {
      padding: 12px 24px;
      background: #10b981; /* Green */
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .start-button:hover:not(:disabled) {
      background: #059669; /* Darker green */
    }

    .start-button:disabled {
      background: #9ca3af; /* Gray */
      cursor: not-allowed;
    }

    .play-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    /* Friend Competition Card Styles */

    .friend-competition-card {
      width: 80%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .users-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Hover effect for future when feature becomes available */
    .friend-competition-card.available {
      opacity: 1;
      border-left-color: #3b82f6; /* Blue border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .friend-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .friend-competition-card.available .users-icon {
      color: #3b82f6; /* Blue color when available */
    }

    /* .friend-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .friend-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Random User Competition Card Styles */

    .random-user-competition-card {
      width: 80%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .zap-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Styles for when feature becomes available */
    .random-user-competition-card.available {
      opacity: 1;
      border-left-color: #7c3aed; /* Purple border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .random-user-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .random-user-competition-card.available .zap-icon {
      color: #7c3aed; /* Purple color when available */
    }

    /* .random-user-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .random-user-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Special highlight for full multiplier feature */
    .random-user-competition-card.available .coming-soon-message {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fde68a 100%
      ); /* Golden gradient */
      color: #92400e; /* Dark yellow/brown text */
      border: 1px solid #f59e0b; /* Golden border */
      font-weight: 600;
    }

    /* Animation for the Zap icon when available */
    .random-user-competition-card.available .zap-icon {
      animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.5));
      }
      50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.8));
      }
    }

    /* Quick Stats Sidebar Styles */

    .sidebar-container {
      width: 100%;
      gap: 24px; /* space-y-6 equivalent */
    }

    .stats-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .stats-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .performance-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .performance-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .performance-subject {
      font-size: 14px;
    }

    .performance-points {
      font-weight: bold;
      font-size: 14px;
    }

    .performance-points.positive {
      color: #059669; /* Green for good performance */
    }

    .performance-points.negative {
      color: #dc2626; /* Red for poor performance */
    }

    /* Additional visual enhancements */
    .performance-item {
      padding: 8px 0;
      border-bottom: 1px solid #f3f4f6;
      transition: background-color 0.2s ease;
    }

    .performance-item:last-child {
      border-bottom: none;
    }

    .performance-item:hover {
      background-color: #f9fafb;
      border-radius: 6px;
      padding: 8px 12px;
      margin: 0 -12px;
    }

    /* Optional: Progress indicators for performance trends */
    .performance-item.trending-up::before {
      content: "↗";
      color: #059669;
      margin-right: 4px;
      font-weight: bold;
    }

    .performance-item.trending-down::before {
      content: "↘";
      color: #dc2626;
      margin-right: 4px;
      font-weight: bold;
    }

    /* Optional: Badge-style points display */
    .performance-points {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .performance-points.positive {
      background-color: #d1fae5; /* Light green background */
      color: #065f46; /* Dark green text */
    }

    .performance-points.negative {
      background-color: #fee2e2; /* Light red background */
      color: #991b1b; /* Dark red text */
    }

    /* Achievement Progress Card Styles */

    .achievement-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .achievement-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .achievement-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .achievement-item {
      display: flex;
      flex-direction: column;
    }

    .achievement-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .achievement-name {
      font-size: 14px;
      font-weight: 500;
    }

    .achievement-progress-text {
      font-size: 14px;
      font-weight: 500;
    }

    .progress-bar-container {
      width: 100%;
      background: #e5e7eb; /* Light gray background */
      border-radius: 9999px; /* Fully rounded */
      height: 8px;
      overflow: hidden;
      position: relative;
    }

    .progress-bar {
      height: 100%;
      border-radius: 9999px; /* Fully rounded */
      transition: width 0.5s ease-in-out;
      position: relative;
    }

    .progress-bar.blue {
      background: #3b82f6; /* Blue */
    }

    .progress-bar.yellow {
      background: #eab308; /* Yellow */
    }

    /* Additional color options for other achievements */
    .progress-bar.green {
      background: #10b981; /* Green */
    }

    .progress-bar.purple {
      background: #8b5cf6; /* Purple */
    }

    .progress-bar.red {
      background: #ef4444; /* Red */
    }

    .progress-bar.orange {
      background: #f97316; /* Orange */
    }

    /* Animation effect for progress bars */
    .progress-bar {
      animation: progressFill 1s ease-out;
    }

    @keyframes progressFill {
      from {
        width: 0%;
      }
      to {
        width: var(--target-width, 0%);
      }
    }

    /* Hover effects */
    /* .achievement-item:hover .achievement-name {
      color: #1f2937;  
      font-weight: 600;
    } */

    .achievement-item:hover .progress-bar {
      filter: brightness(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Progress bar glow effect */
    .progress-bar::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
      );
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }

    /* Achievement completion celebration */
    /* .achievement-item.completed .achievement-name {
      color: #059669;
      font-weight: 700;
    } */

    /* .achievement-item.completed .achievement-progress-text {
      color: #059669;
      font-weight: 700;
    } */

    .achievement-item.completed .progress-bar {
      background: linear-gradient(90deg, #10b981, #34d399);
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* Near completion highlighting */
    .achievement-item.near-completion .progress-bar {
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    }

    /* .achievement-item.near-completion .achievement-name {
      color: #1d4ed8;
      font-weight: 600;
    } */

    /* Practice Tab Styles */

    .practice-tab-container {
      gap: 24px;
      width: 100%;
    }

    /* Practice vs AI Card */
    .practice-ai-card {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .practice-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .bot-icon-blue {
      width: 32px;
      height: 32px;
      color: #3b82f6; /* Blue */
      margin-right: 12px;
    }

    .practice-title {
      font-size: 20px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0 0 4px 0;
    }

    .practice-description {
      margin: 0;
      font-size: 14px;
    }

    .practice-controls {
      display: flex;
      flex-direction: column;
      gap: 16px; /* space-y-4 equivalent */
    }

    .subject-dropdown {
      width: 100%;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-dropdown:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .start-practice-button {
      width: 100%;
      background: #3b82f6; /* Blue */
      color: white;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .start-practice-button:hover {
      background: #2563eb; /* Darker blue */
    }

    /* Practice vs Friends Card (Disabled) */
    .practice-friends-card {
      width: 60%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      opacity: 0.75; /* Dimmed appearance */
      margin: 50px auto;
    }

    .users-icon-gray {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray */
      margin-right: 12px;
    }

    .practice-title-disabled {
      font-size: 20px;
      font-weight: bold;
      color: #4b5563; /* Medium gray for disabled state */
      margin: 0 0 4px 0;
    }

    .practice-description-disabled {
      color: #6b7280; /* Light gray for disabled state */
      margin: 0;
      font-size: 14px;
    }

    .coming-soon-notice {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Enhanced hover effects for available card */
    .practice-ai-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Loading state for practice button */
    .start-practice-button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .start-practice-button.loading {
      position: relative;
      color: transparent;
    }

    .start-practice-button.loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    /* Future enhancement: When friends practice becomes available */
    .practice-friends-card.available {
      opacity: 1;
      border-left: 4px solid #10b981; /* Green accent */
    }

    .practice-friends-card.available .users-icon-gray {
      color: #10b981; /* Green when available */
    }

    .practice-friends-card.available .practice-title-disabled {
      color: #1f2937; /* Dark gray when available */
    }

    .practice-friends-card.available .practice-description-disabled {
      color: #4b5563; /* Medium gray when available */
    }

    .practice-friends-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Leaderboard Tab Styles */

    .leaderboard-container {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .leaderboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .leaderboard-title {
      font-size: 24px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0;
    }

    .subject-filter {
      padding: 8px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-filter:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .leaderboard-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .leaderboard-item.top-three {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fed7aa 100%
      ); /* Yellow to orange gradient */
    }

    .leaderboard-item.regular {
      background: #f9fafb; /* Light gray */
    }

    .student-info {
      display: flex;
      align-items: center;
    }

    .rank-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      margin-right: 16px;
      font-size: 14px;
    }

    .rank-badge.gold {
      background: #eab308; /* Gold/Yellow */
    }

    .rank-badge.silver {
      background: #9ca3af; /* Silver/Gray */
    }

    .rank-badge.bronze {
      background: #fb923c; /* Bronze/Orange */
    }

    .rank-badge.regular-rank {
      background: #3b82f6; /* Blue */
    }

    .student-details {
      display: flex;
      flex-direction: column;
    }

    .student-name {
      font-weight: 600;
      color: #1f2937; /* Dark gray */
      font-size: 16px;
    }

    .student-level {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    .score-info {
      text-align: right;
    }

    .score-points {
      font-weight: bold;
      font-size: 18px;
      color: #1f2937; /* Dark gray */
    }

    .score-label {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    /* Hover effects */
    .leaderboard-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .leaderboard-item.top-three:hover {
      background: linear-gradient(135deg, #fef3c7 0%, #fdba74 100%);
    }

    .leaderboard-item.regular:hover {
      background: #f3f4f6;
    }

    /* Medal icons for top 3 */
    .rank-badge.gold::after {
      content: "🥇";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.silver::after {
      content: "🥈";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.bronze::after {
      content: "🥉";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    /* Animation for rank changes */
    .leaderboard-item {
      animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Special highlighting for current user */
    .leaderboard-item.current-user {
      border: 2px solid #3b82f6;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    }

    .leaderboard-item.current-user .student-name {
      color: #1d4ed8;
      font-weight: 700;
    }

    /* Loading skeleton animation */
    .leaderboard-item.loading {
      background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }

    /* Empty state styling */
    .leaderboard-empty {
      text-align: center;
      padding: 40px 20px;
      color: #6b7280;
    }

    .leaderboard-empty h4 {
      font-size: 18px;
      margin-bottom: 8px;
      color: #374151;
    }

    .leaderboard-empty p {
      font-size: 14px;
      margin: 0;
    }
  } /**End of min-height 800px*/

  /* Extra large devices (large desktops) */
  @media (min-width: 1200px) {
    #dropdown {
      height: 30vh;
      background-color: #091a22;
      z-index: 1;
      padding: 0;
    }

    #dropdown h6 {
      text-align: center;
      padding: 1rem;
      background-color: #fff;
      margin: 0 auto 1rem auto;
    }

    #ilearnStemCardsLogo {
      height: 50px;
      float: left;
      margin-left: 30px;
    }

    .profileMainDiv {
      width: 100%;
      height: 100vh;
      background-color: var(--lightBackground);
      color: var(--lightModeText);
      padding: 20px;
      margin-top: 50px;
    }

    .profileMainDiv_dark {
      width: 100%;
      height: 100vh;
      background-color: var(--darkBackground);
      color: var(--darkModeText);
      padding: 20px;
      margin-top: 50px;
    }

    .lightOrDarkModeChoiceDiv {
      margin-top: 50px;
    }

    .lightOrDarkModeChoice {
      width: 400px;
    }

    .lightModeChoice {
      margin-right: 50px;
    }

    .darkModeChoice {
      margin-left: 50px;
    }

    .lightModeChoice label,
    .darkModeChoice label {
      margin-left: 5px;
    }

    .dropdownPostLogin {
      width: 100%;
      height: calc(100vh - 50px);
      position: absolute;
      top: 50px;
      color: #fff;
      background-color: #091a22;
      padding-top: 20px;
    }

    .dropdownPostLogin_dark {
      width: 100%;
      height: calc(100vh - 50px);
      position: absolute;
      top: 50px;
      color: #fff;
      background-color: var(--darkBackground);
      padding-top: 20px;
      z-index: 2;
    }

    .topBarButtons h6 {
      font-size: 0.75rem;
    }

    #registerButton {
      border-radius: 20px;
      width: 120px;
      height: 30px;
    }

    #mobileNavButton {
      font-size: 1.2rem;
      position: relative;
      margin-right: 1rem;
    }

    .topBarProfileDiv {
      width: 200px;
      font-size: 0.9rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
      margin-right: 2rem;
    }

    .topBarProfileDivInner {
      border: none;
      outline: none;
      min-width: 150px;
      padding: 0 0.3rem;
    }

    .topBarProfileDivInner:hover {
      cursor: pointer;
    }

    .topBarProfileDivContent {
      position: absolute;
      border-radius: 0px 0px 5px 5px;
      min-width: 180px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 0;
    }

    .topBarProfileDivContent button {
      font-size: 0.9rem;
      width: 100%;
      height: 40px;
      margin-top: 0.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .toggleColorModeDiv {
      width: 100%;
      height: 40px;
      margin: auto;
    }

    .topBarProfileDivContentButtonDiv {
      width: 150px;
    }

    .topBarProfileDivContent i {
      font-size: 20px;
      margin-left: 5px;
    }

    .menu_study_cards_img,
    .menu_group_study_img,
    .menu_live_competitions_img {
      width: 30px;
      margin-left: 10px;
    }

    /**** HOME TOP ****/
    .home {
      width: 100%;
      height: calc(100vh - 50px);
      padding: 0;
      margin-top: 50px;
    }

    .home1 {
      width: 50%;
      flex-direction: column;
      align-items: center;
    }

    .home2 {
      width: 50%;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .backgroundImageDiv {
      width: 18%;
      height: 55%;
      position: absolute;
      left: 0;
      top: 10%;
      border-bottom-right-radius: 300px;
      z-index: 0;
    }

    .backgroundImageDiv_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv_dark {
      background-color: var(--bluegraysteel);
    }

    .backgroundImageDiv2 {
      width: 18%;
      height: 70%;
      position: absolute;
      right: 50px;
      top: 10%;
      z-index: 0;
      border-top-right-radius: 350px;
      border-bottom-left-radius: 50px;
    }

    .backgroundImageDiv2_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv2_dark {
      background-color: var(--bluegraysteel);
    }

    .study-connect-interact-svg {
      margin-top: 80px;
      z-index: 5;
      width: 600px;
    }

    .welcomeHeader {
      z-index: 5;
      font-size: 2.2em;
      margin-top: 0rem;
    }

    .welcomeP {
      z-index: 5;
      font-size: 1rem;
      margin: 0rem auto 1.5rem auto;
      width: 50%;
      font-weight: 400;
    }

    .home1Buttons button {
      width: 200px;
      height: 50px;
      border-radius: 50px;
      z-index: 5;
      margin: 0px 20px 20px 20px;
    }

    .home1BottomDiv {
      /* width: 100%; */
      height: 400px;
      position: absolute;
      bottom: 5px;
      /* border: 2px solid red; */
    }

    .home1BottomDiv div {
      width: 140px;
      height: 160px;
      margin: 0px 5px;
      border-radius: 20px;
      color: #fff;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      font-size: 10px;
    }

    .home1BottomDivHeader {
      font-size: 15px;
      margin-bottom: 15px;
    }

    .homePageMainImage {
      width: 70%;
      z-index: 5;
      /* opacity: 0.9; */
    }

    /**** END OF HOME TOP ****/

    /**** HOME FEATURES ****/

    .homeFeaturesMainDiv {
      width: 100%;
      padding: 5rem 0;
    }

    .homeFeaturesMainDiv h3 {
      font-weight: bold;
    }

    .homeFeaturesDiv1,
    .homeFeaturesDiv2 {
      width: 80%;
      justify-content: space-around;
    }

    .homeFeaturesDiv1 {
      margin-bottom: 2rem;
    }

    .homeFeaturesDiv2 {
      margin-top: 2rem;
    }

    .homeFeaturesStudyCardsDiv,
    .homeFeaturesGroupStudyDiv,
    .homeFeaturesLiveCompetitionsDiv,
    .homeFeaturesRankingsDiv {
      width: 30%;
    }

    .homeFeaturesMainDiv img,
    .homeFeaturesMainDiv span {
      height: 80px;
      width: 80px;
      margin: 1rem auto;
    }

    .homeFeaturesMainDiv span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 80px;
    }

    /**** END OF HOME FEATURES ****/

    /**** HOW IT WORKS ****/

    .howItWorksMainDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
    }

    .howItWorksCard {
      width: 100%;
    }

    .howItWorksMainDiv h1,
    .howItWorksMainDiv span {
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .howItWorksCard p {
      width: 100%;
      margin: 2rem auto;
    }

    /**** END OF HOW IT WORKS ****/

    /**** PRICING ****/

    #pricingDiv {
      width: 100%;
      min-height: calc(55vh);
      padding: 5rem 0;
      font-size: 14px;
    }

    #pricingDiv h1 {
      font-weight: bold;
    }

    #pricingDivCards {
      width: 60%;
      justify-content: space-around;
      margin-top: 2rem;
    }

    #freeCard {
      flex: 1;
      border: 1px solid #828282;
      border-radius: 7px;
      margin-right: 1rem;
      color: #585858;
    }

    #freeCard h4 {
      width: 80%;
      height: 60px;
      background: #d9d9d9;
      border: 1px solid #b0aeae;
      border-radius: 7px;
    }

    #monthlyCard {
      flex: 1;
      background: #d9d9d9;
      border-radius: 7px;
      margin: 0 1rem;
      color: #585858;
    }

    #monthlyCard h4 {
      width: 80%;
      height: 60px;
      background: #d9d9d9;
      border: 1px solid #b0aeae;
      border-radius: 7px;
    }

    #yearlyCard {
      flex: 1;
      background: #263238;
      border-radius: 7px;
      margin-left: 1rem;
      color: #ffffff;
    }

    #yearlyCard h4 {
      width: 80%;
      height: 60px;
      background: #f8d149;
      border: 1px solid #ffe177;
      border-radius: 7px;
      color: #263238;
    }

    /**** END OF PRICING ****/

    /*** OUR MISSION ***/

    #ourMissionDiv {
      width: 100%;
      min-height: calc(50vh);
      padding: 5rem 0;
    }

    #ourMissionDiv h1 {
      font-weight: bold;
    }

    .ourMissionCard {
      width: 100%;
    }

    .ourMissionCardInnerDiv {
      width: 100%;
    }

    .ourMissionCardImgDiv {
      width: 40%;
    }

    .ourMissionCardImgDiv img {
      width: 80%;
    }

    .ourMissionCardInnerDiv1 {
      width: 60%;
    }

    .ourMissionCard p {
      margin: 2rem auto;
    }

    .ourMissionButtonDiv {
      width: 100%;
      padding: 2rem 0;
    }

    .ourMissionButtonDiv button {
      width: 250px;
      height: 60px;
      border-radius: 30px;
      font-size: 1rem;
    }

    /**** END OF OUR MISSION ****/

    /**** FOOTER ****/
    .homePageFooter {
      width: 100%;
      min-height: 30vh;
      background-color: var(--lightBackground);
      padding: 0;
      color: var(--lightModeText);
      font-size: 14px;
      padding: 3rem;
    }

    .homePageFooter_dark {
      width: 100%;
      min-height: 30vh;
      background-color: var(--darkBackground);
      padding: 0;
      color: #ffffff;
      font-size: 12px;
      padding: 3rem;
    }

    #footerSubscribeDiv {
      width: 25%;
      min-height: 50vh;
    }

    #footerCompanyAndResources {
      width: 50%;
      min-height: 50vh;
      justify-content: space-around;
      align-items: center;
    }

    #footerServicesDiv {
      width: 25%;
      min-height: 50vh;
      justify-content: center;
      align-items: center;
    }

    #iconsRow {
      width: 200px;
      margin-top: 2rem;
    }

    #iconsRow img {
      width: 30px;
      margin: 0 0.5rem;
      filter: brightness(1.75);
    }

    #homeFinalFooterEmailButton {
      color: var(--lightModeText);
      width: 50px;
      height: 30px;
      background: #6cb1a9;
      border: 1px solid #ffffff;
      font-size: 0.6rem;
      border-radius: 0px 5px 5px 0px;
    }

    /**** END OF FOOTER ****/

    /********* Login or Register Page *********/
    .loginOrRegisterPage {
      margin-top: 50px;
      height: calc(1 * var(--screen-y) - 50px);
      background-color: whitesmoke;
    }

    #loginPageMainDiv {
      width: 100%;
      background-color: whitesmoke;
      align-items: center;
      justify-content: center;
    }

    #cardLoginDiv {
      width: 40%;
      max-width: 375px;
      padding: 0;
    }

    #cardRegister,
    #cardLogin {
      width: 100%;
      max-width: 350px;
      height: auto;
      padding: 1rem 0;
    }

    #cardRegister {
      padding: 1.5rem;
    }

    .cardRegisterImageDiv,
    .cardLoginImageDiv {
      width: 100%;
      height: 100px;
    }

    #cardRegister img,
    #cardLogin img {
      height: 100px;
    }

    #registerCardButton {
      background-color: #091a22;
      color: #fff;
      display: block;
      margin: 1rem auto;
    }

    #loginCardButton {
      background-color: #091a22;
      color: #fff;
      display: block;
      margin: 1rem auto;
      font-size: 0.8rem;
    }

    #registerInputs,
    #loginInputs {
      width: 60%;
      padding: 0;
    }

    .loginInputsDiv,
    .registerInputsDiv {
      width: 100%;
      margin-top: 1rem;
    }

    .backspaceDiv {
      width: 0%;
      height: 2rem;
    }

    .backspaceDiv:hover {
      cursor: pointer;
    }

    .registerInputsDiv input,
    .loginInputsDiv input {
      width: 80%;
      height: 2rem;
      border: 0.25px solid lightgray;
      font-size: 0.6rem;
    }

    #cardRegister input:focus,
    #loginInputs input:focus {
      outline: 0.5px solid gray;
    }

    .formikOuterErrorDiv {
      width: 100%;
      height: 1rem;
    }

    .formikErrorDiv {
      font-size: 0.7rem;
    }

    .switchLoginAndRegister {
      font-size: 0.8rem;
    }

    #loginWithGoogleButton {
      background-color: #fff;
      margin: 1rem auto;
      border: 1px solid lightgray;
    }

    /********* End of Login or Register Page ************/

    /********* Main Portal Page ************/

    #portalMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      background-color: #fff;
      padding: 0;
    }

    .portalMainDivHeader {
      width: 100%;
      height: 150px;
      background-color: #091a22;
      color: #fff;
      padding: 1rem 2rem;
    }

    .portalMainDivHeader .menuDropDown {
      cursor: pointer;
      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
    }

    .notAndInboxDiv {
      min-width: 300px;
    }

    .notAndInboxDiv .icon {
      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
    }

    .portalMainDivBody {
      background-color: #091a22;
      width: 100%;
      min-height: calc(100vh);
    }

    .portalMainDivBody0 {
      width: 100%;
      height: 300px;
    }

    .portalMainDivBody1 {
      width: 100%;
      height: 300px;
      background-color: #fff;
      padding: 0 20%;
    }

    .portalMainDivBody1 div {
      cursor: pointer;
    }

    .newsfeedHeader {
      width: 70%;
      margin-top: 5rem;
    }

    .portalMainDivBody2 {
      width: 70%;
      min-height: 60vh;
      background-color: #fff;
      margin-bottom: 5rem;
    }

    /********* End of Main Portal Page ************/

    /************* STUDYCARDS PAGE ***************/

    .flashCardsMainPageDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .flashCardsMainPageHeader {
      width: 100%;
      min-height: 200px;
      margin-bottom: 2rem;
    }

    .flashCardsMainPageHeaderBack {
      color: #ffffff;
      margin-left: 20rem;
      margin-top: 1rem;
    }

    .flashCardsMainPageHeaderBack_dark {
      color: #ffffff;
      margin-left: 20rem;
      margin-top: 1rem;
    }

    /* .flashCardsMainPageHeaderBack img {
            margin-left: 0.3rem;
        } */

    .flashCardsMainPageHeader2 {
      color: #b5c5cd;
    }

    .flashCardsMainPageHeader3 {
      width: 100%;
      min-height: 100px;
    }

    .flashCardsMainPageHeader3_dark {
      width: 100%;
      min-height: 100px;
    }

    .flashCardsMainPageHeader3a,
    .flashCardsMainPageHeader3a_dark {
      width: 100%;
      height: 90px;
      justify-content: space-around;
      color: #d9d9d9;
      padding: 0 2rem;
    }

    #arrow_drop_down_flashcard_1 {
      color: #9d9d9d;
    }

    .flashCardsMainPageHeader3aButton1 {
      color: #122e3b;
      width: 150px;
      height: 50px;
      background-color: #f8f8f8;
      margin-right: 1rem;
      border-radius: 7px 7px 0 0;
    }

    .flashCardsMainPageHeader3aDropDown {
      min-width: 150px;
      height: 200px;
      position: absolute;
      z-index: 2;
      margin-top: 50px;
      background-color: #f8f8f8;
      border-radius: 0 0 7px 7px;
    }

    .flashCardsMainPageHeader3aDropDown button {
      width: 100px;
      margin: 0.5rem auto;
      font-size: 0.8rem;
    }

    .flashCardsMainPageHeader3aButton2 {
      background-color: #e0f945;
      border-radius: 7px;
      color: #122e3b;
      width: 100px;
      height: 50px;
      margin-left: 1rem;
    }

    .flashCardsMainPageHeader3b {
      width: 40%;
      height: 90px;
      justify-content: flex-end;
      padding: 0 7rem;
    }

    .flashCardsMainPageHeader3b span {
      width: 250px;
      height: 50px;
      border: 1px solid #ffffff;
      border-radius: 7px;
      color: #fff;
    }

    .flashCardsMainPageHeader3b span:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardMainPageBody {
      width: 100%;
    }

    .flashCardSearchDiv {
      width: 80%;
      min-height: 600px;
    }

    .flashCardSearchDiv1 {
      width: 100%;
      min-height: 250px;
      background-color: #f5f5f5;
    }

    .flashCardSearchDiv1a {
      width: 100%;
      height: 60px;
    }

    .flashCardSearchDiv1aa {
      width: 90%;
    }

    .flashCardSearchDiv1aa div {
      height: 60px;
      width: 80%;
      background-color: #fff;
      border-radius: 7px;
    }

    .searchInput {
      width: 80%;
      height: 60px;
      border: none;
    }

    .searchIconButton {
      height: 60px;
      background-color: #fff;
    }

    .searchInputLabel {
      margin-right: 1rem;
    }

    .flashCardSearchDiv1b {
      width: 150px;
      height: 2.5rem;
      border: 1px solid #122e3b;
      margin-top: 2rem;
      color: #122e3b;
    }

    .flashCardSearchDiv1b i {
      color: rgba(18, 46, 59, 1);
      margin-left: 0.75rem;
      font-size: 1rem;
    }

    .flashCardsSearchByDiv3 {
      width: 100%;
      min-height: 200px;
      border: 1px solid #b6b6b6;
      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
      border-radius: 7px;
    }

    .flashCardsSearchByDiv3 i {
      color: rgba(128, 128, 128, 0.3);
    }

    .flashCardsSearchByDiv3 i:hover {
      cursor: pointer;
    }

    .flashCardsSearchByDiv3a {
      width: 150px;
      height: 150px;
      padding: 1rem;
      text-align: center;
      color: #808080;
    }

    .flashCardsSearchByDiv3b {
      width: 150px;
      height: 150px;
      background: #f8f8f8;
      border: 1px solid #d8d8d8;
      border-radius: 7px;
      color: #808080;
      font-size: 0.8rem;
      padding: 0 0.5rem 0.5rem 0.5rem;
    }

    .flashCardsSearchByDiv3b:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardsSearchByDiv3b1 {
      width: 100%;
      height: 100px;
    }

    .flashCardsSearchByDiv3b2 {
      width: 100%;
      height: 50px;
    }

    .flashCardsSuggestionsDiv {
      width: 80%;
      height: 300px;
      margin-top: 50px;
    }

    .flashCardsSuggestionsDiv1,
    .flashCardsSuggestionsDiv2 {
      height: 100%;
      width: 50%;
    }

    .flashCardsSuggestionsDiv1a,
    .flashCardsSuggestionsDiv1b,
    .flashCardsSuggestionsDiv2a,
    .flashCardsSuggestionsDiv2b {
      height: 100%;
      width: 50%;
    }

    .flashCardsSuggestionsDiv1a p,
    .flashCardsSuggestionsDiv1b p,
    .flashCardsSuggestionsDiv2a p,
    .flashCardsSuggestionsDiv2b p {
      width: 80%;
      padding: 1rem;
      font-size: 1.2rem;
      font-weight: 400;
      text-align: center;
    }

    .flashCardsSuggestionsDiv1a span {
      font-size: 2rem;
      transform: rotate(90deg);
    }

    .flashCardsSuggestionsDiv1a_top,
    .flashCardsSuggestionsDiv1b_top,
    .flashCardsSuggestionsDiv2a_top,
    .flashCardsSuggestionsDiv2b_top {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1a_middle,
    .flashCardsSuggestionsDiv1b_middle,
    .flashCardsSuggestionsDiv2a_middle,
    .flashCardsSuggestionsDiv2b_middle {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1a_bottom,
    .flashCardsSuggestionsDiv1b_bottom,
    .flashCardsSuggestionsDiv2a_bottom,
    .flashCardsSuggestionsDiv2b_bottom {
      height: 30%;
      width: 100%;
    }

    .flashCardsSuggestionsDiv1bBox {
      width: 100px;
      height: 100px;
      background-color: rgba(18, 46, 59, 0.6);
      border: 1px solid #25556b;
      position: absolute;
    }

    .flashCardsSuggestionsDiv1bBox:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .flashCardsSuggestionsDiv1bBox1 {
      margin-top: 20px;
      margin-right: -20px;
      z-index: 5;
    }

    .flashCardsSuggestionsDiv1bBox2 {
      margin-top: 0px;
      margin-left: 0px;
    }

    .flashCardsSuggestionsDiv1bBox3 {
      margin-top: -20px;
      margin-left: -20px;
    }

    .flashCardsSuggestionsDiv1bSpan {
      color: rgba(255, 255, 255, 0.8);
      position: absolute;
      top: 420px;
      margin-left: 30px;
      font-size: 0.6rem;
      width: 70px;
      text-align: center;
      z-index: 5;
    }

    .flashCardsSuggestionsDivRoundNum {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #6b6969;
      background-color: #bababa;
      margin-bottom: 1rem;
    }

    .flashCardsSuggestionsDiv2aDiv {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #6b6969;
      background-color: #bababa;
      margin-top: 350px;
    }

    .flashCardsSuggestionsDiv2a span,
    .flashCardsSuggestionsDiv2b span {
      margin-top: 1rem;
    }

    .annie {
      width: 100px;
      position: absolute;
      margin-left: -50px;
    }

    .john {
      width: 100px;
      position: relative;
      margin-right: -50px;
    }

    .annie:hover,
    .john:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    #add_circle {
      font-size: 5rem;
    }

    #add_circle:hover {
      cursor: pointer;
      opacity: 0.9;
    }

    .flashCardsRecentDiv {
      width: 80%;
      min-height: 300px;
      margin: 5rem auto;
      color: var(--darkModeText);
    }

    .flashCardsRecentDiv1 {
      width: 100%;
      min-height: 300px;
    }

    .flashCardsLibraryDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
      margin-bottom: 100px;
    }

    .flashCardsLibraryDiv1 {
      min-width: 100%;
      min-height: 350px;
      overflow-x: auto;
    }

    .flashCardsSearchByDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
    }

    .flashCardsSearchByDiv_dark {
      width: 80%;
      min-height: 300px;
      margin-top: 5rem;
      color: #0b99db;
    }

    .flashCardsSearchByDiv2 {
      width: 100%;
      min-height: 100px;
      border: 1px dashed #7e7e7e;
      border-radius: 7px;
      color: #808080;
    }

    .flashCardsSearchByDiv2_dark {
      width: 100%;
      min-height: 100px;
      border: 1px dashed #dff945;
      border-radius: 7px;
      color: #808080;
    }

    .flashCardsSearchByDiv2_dark span {
      color: #dff945;
    }

    .flashCardsSearchByDiv2 i {
      color: rgba(128, 128, 128, 0.4);
    }

    .flashCardsSearchByDiv2 i:hover {
      cursor: pointer;
    }

    #searchClose {
      align-self: flex-end;
    }

    .searchAllText {
      font-size: 0.6rem;
      color: #808080;
      text-decoration: underline;
    }

    .searchAllText:hover {
      cursor: pointer;
    }

    .flashCardsSearchByDiv2Button1,
    .flashCardsSearchByDiv2Button2,
    .flashCardsSearchByDiv2Button3,
    .flashCardsSearchByDiv2Button4 {
      width: 100px;
      border-radius: 7px;
      font-size: 0.7rem;
    }

    .flashCardsSearchByDiv2Button1 {
      background: #cbac7f;
      border: 1px solid #d8d8d8;
      color: #fff;
    }

    .flashCardsSearchByDiv2Button2 {
      background: #e9caca;
      border: 1px solid #d8d8d8;
      color: #808080;
    }

    .flashCardsSearchByDiv2Button3 {
      background: #87a8d9;
      border: 1px solid #d8d8d8;
      color: #fff;
    }

    .flashCardsSearchByDiv2Button4 {
      background: #e0f2c9;
      border: 1px solid #d8d8d8;
      color: #808080;
    }

    .flashCardsPopularDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsPopularDiv1 {
      width: 100%;
      min-height: 200px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .flashCardsTextBooksDiv {
      width: 80%;
      min-height: 300px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsTextBooksDiv1 {
      width: 100%;
      min-height: 200px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .flashCardsHighestRatedDiv {
      width: 80%;
      min-height: 500px;
      margin-top: 0rem;
      color: #808080;
    }

    .flashCardsHighestRatedOuterCardsDiv {
      width: 100%;
      background-color: #f5f5f5;
      padding: 0 2rem;
    }

    .flashCardsHighestRatedOuterCardsDiv i {
      opacity: 0.7;
    }

    .flashCardsHighestRatedOuterCardsDiv i:hover {
      cursor: pointer;
      opacity: 0.3;
    }

    .flashCardsHighestRatedDiv1 {
      width: 100%;
      min-height: 400px;
      background-color: #f5f5f5;
      color: #808080;
    }

    .highestRatedCard {
      width: 200px;
      min-height: 260px;
      border: 1px solid #d8d8d8;
      border-radius: 7px;
      padding: 0;
    }

    .highestRatedCardHeader {
      width: 100%;
      height: 2rem;
      margin-bottom: 1rem;
    }

    .highestRatedCardImgDiv {
      width: 100%;
    }

    .highestRatedCardImgDiv img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .highestRatedCardData {
      width: 100%;
      font-size: 0.6rem;
      margin-top: 2rem;
    }

    .highestRatedCardData1 {
      width: 70%;
    }

    .highestRatedCardButtonsDiv {
      width: 100%;
      margin-top: 1rem;
    }

    .highestRatedCardButton1 {
      width: 80px;
      background-color: #d9d9d9;
      border-radius: 20px;
    }

    .highestRatedCardButton2 {
      width: 80px;
      border: 1px solid #d8d8d8;
      border-radius: 20px;
    }

    .highestRatedCardHeaderNotifications {
      opacity: 1;
      color: #0076ff;
    }

    .flashCardMainCreationDiv {
      width: 100%;
      background-color: #fff;
      min-height: 100vh;
      border-radius: 7px;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
    }

    .flashCardMainCreationDiv_dark {
      width: 100%;
      background-color: var(--darkBackground);
      min-height: 100vh;
      border-radius: 7px;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
    }

    .flashCardMainCreationDiv_inner {
      width: 80%;
      max-width: 1200px;
      min-height: 100vh;
      border: 1px solid #9f9f9f;
    }

    .cancelCreationModeDiv {
      width: 100%;
    }

    .cancelCreationModeButton:hover {
      cursor: pointer;
      color: red;
    }

    .flashCardMainCreationDiv1 {
      width: 90%;
      min-height: 200px;
      background-color: #d9d9d9;
      border: 1px solid #d9d9d9;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      margin-bottom: 50px;
    }

    .flashCardMainCreationDiv1_dark {
      width: 90%;
      min-height: 200px;
      border: 1px solid #d9d9d9;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      margin-bottom: 50px;
      background: linear-gradient(90deg, #10131b 0%, #122e3b 135.64%);
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1a {
      width: 100%;
      height: 50px;
    }

    .flashCardMainCreationDiv1aa {
      width: 10%;
    }

    .flashCardMainCreationDiv1ab {
      width: 80%;
      color: #000000;
    }

    .flashCardMainCreationDiv1ab_dark {
      width: 80%;
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1ac {
      width: 10%;
      color: #122e3b;
      opacity: 0.8;
      font-weight: 100;
    }

    .flashCardMainCreationDiv1ac_dark {
      width: 10%;
      color: var(--darkModeText);
      opacity: 0.8;
      font-weight: 100;
    }

    .createBodyDiv {
      width: 100%;
    }

    .createTitleDiv,
    .createDescriptionDiv {
      width: 100%;
      padding: 0 5rem;
    }

    .createTitleDiv span,
    .createDescriptionDiv span {
      width: 120px;
      font-size: 14px;
    }

    .createTitleInput,
    .createDescriptionInput {
      width: 90%;
    }

    .createDescriptionDiv {
      margin-top: 2rem;
    }

    .createFineTuneDiv {
      width: 100%;
      margin-top: 3rem;
      flex-direction: column;
      padding: 0 5rem;
    }

    .createFineTuneDiv1 {
      width: 100%;
      justify-content: space-around;
      margin: 2rem auto;
    }

    .createFineTuneDiv2 {
      width: 100%;
      color: #717070;
    }

    .createFineTuneDiv2 span,
    .createFineTuneDiv2 label {
      font-size: 0.7rem;
    }

    .createFineTuneDiv1a {
      margin-bottom: 2rem;
    }

    .createFineTuneDiv1aDiv1 span,
    .createFineTuneDiv1aDiv2 span {
      font-size: 0.8rem;
      color: #717070;
    }

    .createCardsLevelGrades,
    .createCardsSubjSelect {
      border: none;
      background-color: inherit;
      font-size: 1rem;
      border-bottom: 1px solid gray;
      margin-left: 1rem;
      color: rgba(0, 0, 0, 0.6);
      width: 120px;
    }

    .createCardsLevelGrades_dark,
    .createCardsSubjSelect_dark {
      border: none;
      background-color: var(--darkBackground);
      font-size: 1rem;
      border-bottom: 1px solid gray;
      margin-left: 1rem;
      color: var(--darkModeText);
      width: 120px;
    }

    .createFineTuneDiv1a select:focus {
      border: none;
      outline: none;
      border-bottom: 1px solid gray;
    }

    .createFineTuneDiv1a select:hover {
      cursor: pointer;
    }

    .bookChapterInput {
      font-size: 0.7rem;
      background-color: inherit;
      border: none;
      border-bottom: 1px solid gray;
    }

    .bookChapterInput:focus {
      outline: none;
      border-bottom: 1px solid gray;
    }

    .createFineTuneDiv1bTextBook {
      font-size: 0.7rem;
    }

    .createFineTuneDiv1bNoSpan {
      font-size: 0.5rem;
      margin: 0 1rem;
    }

    .createFineTuneDiv1bYesSpan {
      font-size: 0.5rem;
      margin-left: 1rem;
    }

    .createFineTuneDiv2a {
      width: 40%;
      height: 130px;
      border: 1px solid #c9c9c9;
      border-radius: 7px;
    }

    .createFineTuneDiv2a1 {
      width: 100%;
    }

    .previewCard {
      width: 90%;
      min-height: 350px;
      border-radius: 7px;
      margin: 10px auto;
    }

    .previewCardHeader {
      width: 100%;
      height: 70px;
      border-bottom: 1px dashed #d0d0d0;
      padding: 0 1rem;
      font-size: 16px;
      color: #d0d0d0;
    }

    .previewCardHeader_1,
    .previewCardHeader_2 {
      width: 50%;
    }

    .previewCardHeader_1 {
      flex-direction: column;
    }

    .previewCardHeader_1_span {
      font-size: 12px;
    }

    .previewCardHeader_2 {
      align-items: center;
    }

    .previewCardBody {
      width: 100%;
      /* height: 500px; */
      padding: 10px 50px;
    }

    .createNewCardTemplate {
      width: 90%;
      min-height: 500px;
      background: #f8f8f8;
      border: 1px solid #d9d9d9;
      border-radius: 7px;
      color: #b4b4b4;
      margin: 10px auto 50px auto;
    }

    .createNewCardTemplateHeader {
      width: 100%;
      height: 70px;
      border-bottom: 1px dashed #d0d0d0;
      padding: 0 1rem;
    }

    .createNewCardTemplateHeaderNumber {
      width: 60px;
      height: 50px;
      background: #d9d9d9;
      border-radius: 7px;
      font-weight: 700;
      font-size: 24px;
      line-height: 32px;
      color: var(--darkModeText);
    }

    .createNewCardTemplateHeaderRight {
      width: 70%;
    }

    .createNewCardTemplateHeaderRight span,
    .createNewCardTemplateHeaderRight i {
      font-weight: 100;
    }

    .createNewCardTemplateHeaderRight span:hover,
    .createNewCardTemplateHeaderRight i:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .createNewCardTemplateBody {
      width: 100%;
      height: 500px;
      overflow-y: auto;
    }

    .createNewCardTemplateBody1 {
      width: 100%;
      padding: 0 0.5rem;
      height: 100%;
    }

    #editorTextArea,
    #answerTextArea {
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      min-height: 300px;
      max-height: 300px;
      margin: 2px auto 10px auto;
      border: 0.2px solid #d0d0d0;
      outline: none;
    }

    #editorTextArea:focus,
    #answerTextArea:focus {
      border: 0.2px solid #d0d0d0;
    }

    .createNewCardTemplateBody2a {
      width: 140px;
      height: 140px;
      border: 1px dashed #000000;
      border-radius: 7px;
    }

    .createNewCardTemplateBody2b {
      width: 140px;
      /* height: 140px; */
      background-color: #d9d9d9;
      border: 1px solid #c0c0c0;
      border-radius: 7px;
    }

    .createNewCardTemplateBody2a:hover,
    .createNewCardTemplateBody2b:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .createFlashCardNewCardButton {
      border: 1px solid #122e3b;
      border-radius: 7px;
      background-color: inherit;
      width: 350px;
      height: 80px;
      font-weight: 500;
      font-size: 24px;
      margin: 5rem auto;
    }

    .createFlashCardNewCardButton_dark {
      border: 1px solid #fff;
      border-radius: 7px;
      background-color: inherit;
      width: 350px;
      height: 80px;
      font-weight: 500;
      font-size: 24px;
      margin: 5rem auto;
      color: var(--darkModeText);
    }

    .flashCardMainCreationDiv1Button {
      border: 1px solid #e0f945;
      border-radius: 7px;
      margin: 2rem auto;
    }

    .flashCardMainCreationDivFooterButtonDiv {
      flex-direction: row;
    }

    .flashCardMainCreationDivFooterButtonDiv1 {
      flex-direction: row;
      align-items: center;
    }

    .newFlashCardDeckSave {
      height: 80px;
      width: 150px;
      margin-right: 2rem;
      background-color: #e0f945;
      border-radius: 7px;
    }

    .newFlashCardDeckCancel {
      height: 80px;
      width: 150px;
      margin-left: 2rem;
      background-color: #e83d3d;
      border-radius: 7px;
      color: #fff;
    }

    .flashCardsSuggestionsDiv1bSpan:hover {
      cursor: pointer;
    }

    .cardsLibraryMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
    }

    .cardsLibraryMainDiv_dark {
      background-color: #060606;
    }

    .classroomCardsLibraryMainDiv,
    .classroomCardsLibraryMainDiv_dark {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 0;
    }

    .cardsLibraryMainDiv h1,
    .classroomCardsLibraryMainDiv h1 {
      width: 90%;
      font-weight: 100;
    }

    .cardsLibraryMainDiv h3,
    .classroomCardsLibraryMainDiv h3 {
      width: 80%;
      font-weight: 100;
    }

    .cardsLibraryDisplayCardsDiv {
      width: 90%;
      height: 350px;
      margin: 0.2rem auto 3rem auto;
    }

    .classroomCardsLibraryDisplayCardsDiv {
      width: 80%;
      height: 350px;
      background-color: #10131b;
    }

    .cardsLibraryDisplayCardsDivLeft,
    .cardsLibraryDisplayCardsDivRight {
      width: 5%;
      height: 350px;
    }

    .cardsLibraryDisplayCardsDivMiddle {
      width: 90%;
      height: 350px;
      overflow-x: auto;
    }

    .miniCardSetCard {
      width: 420px;
      height: 230px;
      background-color: #fff;
      border-radius: 7px;
      margin-right: 20px;
      opacity: 1;
      color: #091a22;
    }

    .miniCardSetCardMiddle2Text {
      width: 70%;
      font-size: 0.7rem;
      word-wrap: break-word;
    }

    .miniCardSetCardTop {
      width: 100%;
      height: 40px;
    }

    .miniCardSetCardMiddle1 {
      width: 100%;
      height: 50px;
    }

    .miniCardSetCardMiddle2 {
      width: 100%;
      height: 50px;
    }

    .miniCardSetCardFooter {
      width: 80%;
      height: 60px;
    }

    .cardsLibraryDisplayCardsArrow {
      font-size: 3rem;
      color: rgba(0, 0, 0, 0.2);
      z-index: 2;
    }

    .classroomCardsLibraryDisplayCardsArrow {
      font-size: 3rem;
      font-weight: 100;
      z-index: 2;
      color: #fff;
    }

    .cardsLibraryDisplayCardsArrow:hover {
      cursor: pointer;
    }

    /*** END OF STUDYCARDS PAGE ******************/

    /**** DECK VIEW PAGE ****/

    #deckViewModal {
      width: 100%;
      min-height: 80vh;
      /* background-color: #B5C5CD; */
      z-index: 25;
      opacity: 1;
    }

    #deckViewModal1 {
      width: 100%;
      /* background-color: #B5C5CD; */
    }

    #deckViewModalTopDiv {
      width: 1200px;
      /* background-color: #B5C5CD; */
    }

    .deckViewMainDiv {
      width: 100%;
      height: 80vh;
      /* background-color: #B5C5CD; */
    }

    .deckViewMainDiv1 {
      padding: 50px;
      /* background-color: #B5C5CD; */
    }

    .deckViewMainDivHeader {
      width: 100%;
      color: #122e3b;
      padding: 20px;
      padding-left: 300px;
    }

    .filled_icon {
      font-variation-settings: "FILL" 1, "wght" 100, "GRAD" 200, "opsz" 48;
    }

    .deckViewModalNoteButton {
      border: 0.2px solid rgba(128, 128, 128, 0.5);
      border-radius: 7px;
      color: #091a22;
    }

    .deckViewModalDeleteButton {
      color: #091a22;
      font-weight: 100;
      margin-left: 10px;
    }

    .deckViewModalCloseButton {
      border: 0.2px solid rgba(128, 128, 128, 0.5);
      border-radius: 7px;
      color: #091a22;
    }

    .card {
      width: 1200px;
      height: 500px;
      overflow-y: auto;
      background-color: #fff;
    }

    .card h3 {
      width: 80%;
    }

    .deckViewNavButtons {
      margin-top: 2rem;
      padding: 0.5rem;
    }

    .deckViewNavButtonsLeft,
    .deckViewNavButtonsRight {
      width: 100px;
      height: 60px;
      background-color: #122e3b;
      border-radius: 7px;
    }

    .deckViewNavButtonsLeft span,
    .deckViewNavButtonsRight span {
      font-size: 40px;
      color: #b5c5cd;
    }

    .deckViewNavButtonsCenter span {
      font-size: 40px;
      font-weight: 100;
      color: #122e3b;
    }

    .deckViewNavButtonsCenter {
      width: 100px;
      height: 60px;
      margin: 0;
      background-color: none;
    }

    .deckViewNavButtonsCenter:hover {
      background-color: none;
      cursor: pointer;
      opacity: 0.7;
    }

    .cardContent {
      width: 100%;
      height: 450px;
      padding: 0.5rem;
    }

    #cardTextTop {
      position: absolute;
    }

    #cardText {
      align-self: center;
    }

    .card_display {
      overflow-x: hidden !important;
      font-size: 16px;
      padding: 0px 50px;
      width: 100%;
      height: 100%;
      margin-top: 50px;
    }

    /**** END OF DECK VIEW PAGE ***/
    optgroup {
      font-size: 0.75rem;
    }

    .createBodyDiv select {
      font-size: 0.75rem;
    }

    .mq-editable-field {
      padding: 10px;
      font-size: 20px;
      margin-top: 5px;
      color: #000000;
    }

    .symbolsKeyboard {
      position: absolute;
      z-index: 1;
      text-align: center;
      height: 400px;
      border-radius: 10px;
      border: 1px solid #d2cccc;
      background: linear-gradient(
        180deg,
        #efefef 0%,
        rgba(201, 201, 201, 0) 100%
      );
      padding: 0 10px;
      width: 400px;
    }

    .symbolsKeyboardHeader0 {
      width: 100%;
      height: 50px;
      cursor: move;
      margin-bottom: 10px;
    }

    .symbolsKeyboardHeader0CloseButton {
      background-color: #fa7878;
      color: #000000;
      border-radius: 50%;
      font-variation-settings: "FILL" 0, "wght" 100, "GRAD" -25, "opsz" 20;
    }

    .symbolsKeyboardHeader0Title {
      width: 80%;
    }

    .symbolsKeyboardHeader {
      width: 90%;
      height: 50px;
      z-index: 1;
      margin-bottom: 10px;
      border-radius: 10px;
      background: rgba(38, 50, 56, 1);
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      color: #fff;
      font-family: Inter;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      padding: 0px;
    }

    .symbolsKeyboardHeader button {
      height: 100%;
      width: 20%;
    }

    .symbolsKeyboardHeaderButtonLeft {
      border-radius: 10px 0px 0px 10px;
    }

    .symbolsKeyboardHeaderButtonRight {
      border-radius: 0px 10px 10px 0px;
    }

    .symbolsKeyboardHeader button:hover {
      cursor: pointer;
      opacity: 0.5;
    }

    .symbolsKeyboardBody {
      width: 100%;
      height: 300px;
      overflow-y: auto;
    }

    .symbolsKeyboardBody button {
      width: 10%;
      padding: 10px;
    }

    .symbolsKeyboardBody button:hover {
      cursor: pointer;
      opacity: 0.5;
    }

    .greekMathSymbolsRowDiv {
      width: 100%;
    }

    .newTextInputIcon {
      border: 1px solid #d3d3d3;
      background-color: #fff;
      margin: 0 10px;
    }

    /*** Group Study Page ***/

    .groupStudyMainDiv {
      width: 100%;
      height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .classroomGroupStudyMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .groupStudyTopDiv {
      width: 100%;
      height: 100px;
    }

    .groupStudyTopDiv1 {
      width: 20%;
      font-size: 15px;
    }

    .groupStudyTopDiv2 {
      width: 60%;
    }

    .groupStudyTopDiv3 {
      width: 20%;
    }

    .groupStudyMiddleDiv {
      width: 100%;
      height: 80vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 7px;
      padding: 10px;
    }

    .groupStudyMiddleDiv1Button {
      width: 400px;
      height: 100px;
      font-size: 25px;
      border-radius: 5px;
    }

    .addParticipantsIcon {
      width: 25px;
      height: 25px;
    }

    .groupStudyFooter {
      width: 80%;
      max-width: 1000px;
      justify-content: space-around;
      padding: 10px 0;
      border-radius: 45px;
      font-size: 10px;
      margin: 20px auto;
    }

    .groupAddParticipantsDivHeader {
      margin-top: 10px;
    }

    .myAvatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupAddParticipantsDivHeader1 {
      width: 100%;
      margin-top: 20px;
      padding: 0px 10px;
    }

    .groupAddParticipantsDivHeader1:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .groupStudyAddFriendsTop {
      width: 100%;
      margin-top: 15px;
    }

    .groupStudyFriendsCount {
      width: 200px;
      height: 40px;
      border-radius: 7px;
    }

    .groupStudyFriendsList {
      min-width: 80%;
      margin: 10px auto;
    }

    .groupStudyFriendListItemDiv {
      width: 100%;
      margin: 5px auto;
    }

    .groupStudyFriendListItemDiv1 {
      width: 40%;
      height: 50px;
      border-radius: 7px;
      padding: 15px 10px;
    }

    .groupStudyFriendListItemDiv2 {
      width: 40%;
      height: 50px;
    }

    .groupStudyFriendListItemButton {
      width: 50px;
      height: 50px;
      border-radius: 7px;
    }

    .myFriends_Avatar {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupStudyMiddleDiv1 {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }

    .groupAddParticipantsDiv {
      width: 550px;
      height: 600px;
      padding-bottom: 20px;
      border-radius: 7px;
      background-color: inherit;
      margin-bottom: 50px;
      overflow-y: auto;
    }

    .avatarMainDiv {
      width: 181px;
      height: 220px;
      padding: 1px;
      border: 0.5px solid lightgray;
    }

    .avatar {
      width: 180px;
      height: 180px;
      font-size: 12px;
    }

    .joinStreamButton,
    .endStreamButton {
      width: 180px;
      height: 40px;
    }

    .avatar__img {
      width: 50px;
      height: 100px;
    }

    .groupStudySettingsModal {
      width: 500px;
      height: 400px;
      position: fixed;
      /** center on page**/
      top: calc(50% - 220px);
      left: calc(50% - 250px);
      z-index: 10;
      opacity: 1;
      padding: 0;
    }

    /** End of Group Study Page **/

    /*** Settings Page for Color theme ***/
    .settingsDemoMainDiv {
      width: 100%;
    }

    .settingsMobileOuterDiv {
      width: 400px;
      height: 700px;
      border: 2px solid #b5c5cd;
      margin-top: 20px;
    }

    .settingsMobileInner1Div,
    .settingsMobileInner2Div {
      width: 100%;
      height: 50%;
    }

    .settingsMobileInner1DivScreen {
      width: 90%;
      height: 90%;
      border: 1px solid grey;
    }

    /*** End of Settings Page for Color theme ***/

    /*** Taratai AI Page ***/

    .tarataiAIMiddleDiv {
      width: 70%;
    }

    .tarataiAIMiddleHeaderDiv {
      width: 100%;
      margin-top: 50px;
    }

    .tarataiAIMiddleContentDiv {
      width: 60%;
      height: 200px;
      margin: 50px auto;
    }

    .tarataiAIMiddleFooterDiv {
      width: 100%;
    }

    .tarataiAIUploadButton,
    .tarataiAIWriteTextButton {
      width: 200px;
      height: 60px;
      border-radius: 7px;
      border: 1px solid #838383;
      color: var(--darkModeText);
      margin: 0px 10px;
    }

    .tarataiAISubmitButton {
      width: 200px;
      height: 60px;
      border-radius: 7px;
    }

    /*** End of Taratai AI Page ***/

    /*** COMPETITIONS PAGE ***/
    .competitionsPageHeader {
      width: 80%;
      height: 150px;
      border-radius: 10px;
      margin-top: 50px;
    }

    .competitionsPageHeader1 {
      width: 80%;
      height: 150px;
    }

    .competitionsPageHeader1 > h1 {
      font-size: 32px;
      font-weight: 700;
    }

    .competitionsPageHeader1 span {
      font-size: 16px;
      font-weight: 400;
    }

    .competitionsPageHeader2 {
      width: 40%;
      height: 150px;
    }

    .competitionsPageHeader2PointsBox {
      width: 110px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #fac015 0%, #f97616 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2RanksBox {
      width: 130px;
      height: 100px;
      margin: 0px 10px;
      border-radius: 10px;
      background: linear-gradient(90deg, #659ff9 0%, #a05df7 100%);
      padding: 10px;
      cursor: pointer;
    }

    .competitionsPageHeader2WinRateBox {
      width: 110px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #46db84 0%, #16baa5 100%);
      padding: 10px;
      cursor: pointer;
      margin-right: 20px;
    }

    .competitionsPageHeader2 div {
      color: #fff;
      font-size: 15px;
      font-weight: 700;
    }

    .competitionsPageTabs {
      width: 80%;
      height: 80px;
      margin-top: 80px;
    }

    .competitionsPageTabs button {
      width: 400px;
      height: 50px;
      border-radius: 10px;
      cursor: pointer;
    }

    .competitionsPageTabs_not_active {
      background-color: inherit;
      border: none;
    }

    .competitionsPageTabs_active {
      border: none;
    }

    /* AI Competition Card Styles */

    .competitionsOptions {
      width: 100%;
    }

    .ai-competition-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .bot-icon {
      width: 32px;
      height: 32px;
      color: #10b981; /* Green color */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .multiplier-section {
      text-align: right;
    }

    .multiplier-label {
      font-size: 14px;
      margin-bottom: 2px;
    }

    .multiplier-value {
      font-size: 18px;
      font-weight: bold;
      color: #ea580c; /* Orange */
    }

    .competition-controls {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .subject-select,
    .topic-select {
      flex: 1;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-select:focus,
    .topic-select:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .subject-select:disabled,
    .topic-select:disabled {
      background-color: #f9fafb;
      color: #9ca3af;
      cursor: not-allowed;
    }

    .start-button {
      padding: 12px 24px;
      background: #10b981; /* Green */
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .start-button:hover:not(:disabled) {
      background: #059669; /* Darker green */
    }

    .start-button:disabled {
      background: #9ca3af; /* Gray */
      cursor: not-allowed;
    }

    .play-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    /* Friend Competition Card Styles */

    .friend-competition-card {
      width: 80%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .users-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Hover effect for future when feature becomes available */
    .friend-competition-card.available {
      opacity: 1;
      border-left-color: #3b82f6; /* Blue border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .friend-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .friend-competition-card.available .users-icon {
      color: #3b82f6; /* Blue color when available */
    }

    /* .friend-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .friend-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Random User Competition Card Styles */

    .random-user-competition-card {
      width: 80%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .zap-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Styles for when feature becomes available */
    .random-user-competition-card.available {
      opacity: 1;
      border-left-color: #7c3aed; /* Purple border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .random-user-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .random-user-competition-card.available .zap-icon {
      color: #7c3aed; /* Purple color when available */
    }

    /* .random-user-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .random-user-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Special highlight for full multiplier feature */
    .random-user-competition-card.available .coming-soon-message {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fde68a 100%
      ); /* Golden gradient */
      color: #92400e; /* Dark yellow/brown text */
      border: 1px solid #f59e0b; /* Golden border */
      font-weight: 600;
    }

    /* Animation for the Zap icon when available */
    .random-user-competition-card.available .zap-icon {
      animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.5));
      }
      50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.8));
      }
    }

    /* Quick Stats Sidebar Styles */

    .sidebar-container {
      width: 100%;
      gap: 24px; /* space-y-6 equivalent */
    }

    .stats-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .stats-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .performance-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .performance-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .performance-subject {
      font-size: 14px;
    }

    .performance-points {
      font-weight: bold;
      font-size: 14px;
    }

    .performance-points.positive {
      color: #059669; /* Green for good performance */
    }

    .performance-points.negative {
      color: #dc2626; /* Red for poor performance */
    }

    /* Additional visual enhancements */
    .performance-item {
      padding: 8px 0;
      border-bottom: 1px solid #f3f4f6;
      transition: background-color 0.2s ease;
    }

    .performance-item:last-child {
      border-bottom: none;
    }

    .performance-item:hover {
      background-color: #f9fafb;
      border-radius: 6px;
      padding: 8px 12px;
      margin: 0 -12px;
    }

    /* Optional: Progress indicators for performance trends */
    .performance-item.trending-up::before {
      content: "↗";
      color: #059669;
      margin-right: 4px;
      font-weight: bold;
    }

    .performance-item.trending-down::before {
      content: "↘";
      color: #dc2626;
      margin-right: 4px;
      font-weight: bold;
    }

    /* Optional: Badge-style points display */
    .performance-points {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .performance-points.positive {
      background-color: #d1fae5; /* Light green background */
      color: #065f46; /* Dark green text */
    }

    .performance-points.negative {
      background-color: #fee2e2; /* Light red background */
      color: #991b1b; /* Dark red text */
    }

    /* Achievement Progress Card Styles */

    .achievement-card {
      width: 80%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .achievement-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .achievement-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .achievement-item {
      display: flex;
      flex-direction: column;
    }

    .achievement-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .achievement-name {
      font-size: 14px;
      font-weight: 500;
    }

    .achievement-progress-text {
      font-size: 14px;
      font-weight: 500;
    }

    .progress-bar-container {
      width: 100%;
      background: #e5e7eb; /* Light gray background */
      border-radius: 9999px; /* Fully rounded */
      height: 8px;
      overflow: hidden;
      position: relative;
    }

    .progress-bar {
      height: 100%;
      border-radius: 9999px; /* Fully rounded */
      transition: width 0.5s ease-in-out;
      position: relative;
    }

    .progress-bar.blue {
      background: #3b82f6; /* Blue */
    }

    .progress-bar.yellow {
      background: #eab308; /* Yellow */
    }

    /* Additional color options for other achievements */
    .progress-bar.green {
      background: #10b981; /* Green */
    }

    .progress-bar.purple {
      background: #8b5cf6; /* Purple */
    }

    .progress-bar.red {
      background: #ef4444; /* Red */
    }

    .progress-bar.orange {
      background: #f97316; /* Orange */
    }

    /* Animation effect for progress bars */
    .progress-bar {
      animation: progressFill 1s ease-out;
    }

    @keyframes progressFill {
      from {
        width: 0%;
      }
      to {
        width: var(--target-width, 0%);
      }
    }

    /* Hover effects */
    /* .achievement-item:hover .achievement-name {
      color: #1f2937;  
      font-weight: 600;
    } */

    .achievement-item:hover .progress-bar {
      filter: brightness(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Progress bar glow effect */
    .progress-bar::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
      );
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }

    /* Achievement completion celebration */
    /* .achievement-item.completed .achievement-name {
      color: #059669;
      font-weight: 700;
    } */

    /* .achievement-item.completed .achievement-progress-text {
      color: #059669;
      font-weight: 700;
    } */

    .achievement-item.completed .progress-bar {
      background: linear-gradient(90deg, #10b981, #34d399);
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* Near completion highlighting */
    .achievement-item.near-completion .progress-bar {
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    }

    /* .achievement-item.near-completion .achievement-name {
      color: #1d4ed8;
      font-weight: 600;
    } */

    /* Practice Tab Styles */

    .practice-tab-container {
      gap: 24px;
      width: 100%;
    }

    /* Practice vs AI Card */
    .practice-ai-card {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .practice-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .bot-icon-blue {
      width: 32px;
      height: 32px;
      color: #3b82f6; /* Blue */
      margin-right: 12px;
    }

    .practice-title {
      font-size: 20px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0 0 4px 0;
    }

    .practice-description {
      margin: 0;
      font-size: 14px;
    }

    .practice-controls {
      display: flex;
      flex-direction: column;
      gap: 16px; /* space-y-4 equivalent */
    }

    .subject-dropdown {
      width: 100%;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-dropdown:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .start-practice-button {
      width: 100%;
      background: #3b82f6; /* Blue */
      color: white;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .start-practice-button:hover {
      background: #2563eb; /* Darker blue */
    }

    /* Practice vs Friends Card (Disabled) */
    .practice-friends-card {
      width: 60%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      opacity: 0.75; /* Dimmed appearance */
      margin: 50px auto;
    }

    .users-icon-gray {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray */
      margin-right: 12px;
    }

    .practice-title-disabled {
      font-size: 20px;
      font-weight: bold;
      color: #4b5563; /* Medium gray for disabled state */
      margin: 0 0 4px 0;
    }

    .practice-description-disabled {
      color: #6b7280; /* Light gray for disabled state */
      margin: 0;
      font-size: 14px;
    }

    .coming-soon-notice {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Enhanced hover effects for available card */
    .practice-ai-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Loading state for practice button */
    .start-practice-button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .start-practice-button.loading {
      position: relative;
      color: transparent;
    }

    .start-practice-button.loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    /* Future enhancement: When friends practice becomes available */
    .practice-friends-card.available {
      opacity: 1;
      border-left: 4px solid #10b981; /* Green accent */
    }

    .practice-friends-card.available .users-icon-gray {
      color: #10b981; /* Green when available */
    }

    .practice-friends-card.available .practice-title-disabled {
      color: #1f2937; /* Dark gray when available */
    }

    .practice-friends-card.available .practice-description-disabled {
      color: #4b5563; /* Medium gray when available */
    }

    .practice-friends-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Leaderboard Tab Styles */

    .leaderboard-container {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .leaderboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .leaderboard-title {
      font-size: 24px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0;
    }

    .subject-filter {
      padding: 8px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-filter:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .leaderboard-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .leaderboard-item.top-three {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fed7aa 100%
      ); /* Yellow to orange gradient */
    }

    .leaderboard-item.regular {
      background: #f9fafb; /* Light gray */
    }

    .student-info {
      display: flex;
      align-items: center;
    }

    .rank-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      margin-right: 16px;
      font-size: 14px;
    }

    .rank-badge.gold {
      background: #eab308; /* Gold/Yellow */
    }

    .rank-badge.silver {
      background: #9ca3af; /* Silver/Gray */
    }

    .rank-badge.bronze {
      background: #fb923c; /* Bronze/Orange */
    }

    .rank-badge.regular-rank {
      background: #3b82f6; /* Blue */
    }

    .student-details {
      display: flex;
      flex-direction: column;
    }

    .student-name {
      font-weight: 600;
      color: #1f2937; /* Dark gray */
      font-size: 16px;
    }

    .student-level {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    .score-info {
      text-align: right;
    }

    .score-points {
      font-weight: bold;
      font-size: 18px;
      color: #1f2937; /* Dark gray */
    }

    .score-label {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    /* Hover effects */
    .leaderboard-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .leaderboard-item.top-three:hover {
      background: linear-gradient(135deg, #fef3c7 0%, #fdba74 100%);
    }

    .leaderboard-item.regular:hover {
      background: #f3f4f6;
    }

    /* Medal icons for top 3 */
    .rank-badge.gold::after {
      content: "🥇";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.silver::after {
      content: "🥈";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.bronze::after {
      content: "🥉";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    /* Animation for rank changes */
    .leaderboard-item {
      animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Special highlighting for current user */
    .leaderboard-item.current-user {
      border: 2px solid #3b82f6;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    }

    .leaderboard-item.current-user .student-name {
      color: #1d4ed8;
      font-weight: 700;
    }

    /* Loading skeleton animation */
    .leaderboard-item.loading {
      background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }

    /* Empty state styling */
    .leaderboard-empty {
      text-align: center;
      padding: 40px 20px;
      color: #6b7280;
    }

    .leaderboard-empty h4 {
      font-size: 18px;
      margin-bottom: 8px;
      color: #374151;
    }

    .leaderboard-empty p {
      font-size: 14px;
      margin: 0;
    }

    .competitionInstance {
      width: 100%;
      height: calc(100vh - 50px);
      margin-top: 50px;
      padding: 20px;
    }

    .competitions-question-screen {
      width: 85%;
      min-height: 70vh;
      border-radius: 7px;
      padding: 10px;
    }

    .competitionsInstanceProfileSection {
      width: 100%;
      margin-top: 10px;
    }

    .quiz-timer-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0px 10px;
      background-color: #1f2937;
      border-radius: 12px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      width: 150px;
      height: 80px;
      margin: 0 auto;
      font-family: Arial, sans-serif;
      position: absolute;
      top: 80px;
      right: 10vw;
    }

    .timer-display {
      font-size: 1.5rem;
    }

    .competition-card {
      width: 200px;
      margin: 0px 10px 0px 0px;
    }

    .math-question {
      margin-top: 20px;
      width: 100%;
      font-size: 20px;
      padding: 0px 10px;
    }

    .questionTrackerDiv {
      font-size: 25px;
    }

    /* Container for multiple choice options */
    .multiple-choice-flex {
      width: 80%;
      padding: 16px;
      background-color: inherit;
      border-radius: 8px;
      /* border: 1px solid #e9ecef; */
      margin: 16px auto;
      position: absolute;
      bottom: calc(30vh - 20px);
    }

    /* Individual option label styling */
    .optionLabel {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background-color: white;
      border: 2px solid #dee2e6;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 16px;
      font-weight: 500;
      color: #495057;
      width: 100%;
      max-width: 400px;
    }

    .optionLabel0 {
      margin-bottom: 20px !important;
    }

    /* Hover effect for option labels */
    .optionLabel:hover {
      border-color: #007bff;
      background-color: #f8f9ff;
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
    }

    /* Radio input styling */
    .optionInput {
      width: 20px;
      height: 20px;
      margin: 0;
      cursor: pointer;
      accent-color: #007bff; /* Modern browsers */
    }

    /* Selected state styling */
    .optionLabel:has(.optionInput:checked) {
      border-color: #007bff;
      background-color: #e7f3ff;
      color: #0056b3;
      font-weight: 600;
    }

    /* Alternative for browsers that don't support :has() */
    .optionLabel.selected {
      border-color: #007bff;
      background-color: #e7f3ff;
      color: #0056b3;
      font-weight: 600;
    }

    /* Focus styles for accessibility */
    .optionInput:focus {
      outline: 2px solid #007bff;
      outline-offset: 2px;
    }

    .optionLabel:focus-within {
      border-color: #007bff;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
    }

    .option-group {
      margin: 0px 50px;
    }

    .competitionsSubmitButton {
      background-color: var(--limeYellow);
      padding: 10px 50px;
      border-radius: 7px;
      position: absolute;
      bottom: calc(30vh - 60px);
    }

    .answer-info {
      background-color: #fff;
      z-index: 10;
      position: absolute;
      top: 30%;
      right: 40%;
      padding: 20px;
      border-radius: 7px;
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
    }
    .answer-info-close-div {
      width: 100%;
    }
  }

  @media screen and (min-width: 2000px) {
    #topBarRightDiv {
      font-size: 12px;
    }

    /**** HOME TOP ****/
    .home {
      width: 100%;
      height: calc(100vh - 50px);
      padding: 0;
      margin-top: 50px;
    }

    .home1 {
      width: 50%;
      flex-direction: column;
      align-items: center;
    }

    .home2 {
      width: 50%;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .backgroundImageDiv {
      width: 20%;
      height: 65%;
      position: absolute;
      left: 0;
      top: 10%;
      border-bottom-right-radius: 300px;
      z-index: 0;
    }

    .backgroundImageDiv_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv_dark {
      background-color: #3b4c63;
    }

    .backgroundImageDiv2 {
      width: 20%;
      height: 65%;
      position: absolute;
      right: 50px;
      top: 10%;
      z-index: 0;
      border-top-right-radius: 350px;
      border-bottom-left-radius: 50px;
    }

    .backgroundImageDiv2_light {
      background-color: #fef7eb;
    }

    .backgroundImageDiv2_dark {
      background-color: var(--bluegraysteel);
    }

    .study-connect-interact-svg {
      margin-top: 80px;
      z-index: 5;
      width: 1000px;
    }

    .welcomeHeader {
      z-index: 5;
      font-size: 3.5em;
      margin-top: 3rem;
    }

    .welcomeP {
      z-index: 5;
      font-size: 1.5rem;
      margin: 0rem auto 1.5rem auto;
      width: 50%;
      font-weight: 400;
    }

    .home1Buttons button {
      width: 250px;
      height: 60px;
      border-radius: 50px;
      z-index: 5;
      margin: 50px 20px;
    }

    .home1BottomDiv {
      /* width: 100%; */
      height: 500px;
      position: absolute;
      bottom: 10px;
      /* border: 2px solid red; */
    }

    .home1BottomDiv div {
      width: 200px;
      height: 200px;
      margin: 0px 5px;
      border-radius: 20px;
      color: #fff;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      font-size: 10px;
    }

    .home1BottomDivHeader {
      font-size: 1.3rem;
      margin-bottom: 15px;
    }

    .home1BottomDivP {
      font-size: 12px;
    }

    .homePageMainImage {
      width: 70%;
      z-index: 5;
      /* opacity: 0.9; */
    }

    /**** END OF HOME TOP ****/

    /**** HOME FEATURES ****/

    .homeFeaturesMainDiv {
      width: 100%;
      padding: 10rem 0;
    }

    .homeFeaturesMainDiv h3 {
      font-weight: bold;
    }

    .homeFeaturesDiv1,
    .homeFeaturesDiv2 {
      width: 80%;
      justify-content: space-around;
    }

    .homeFeaturesDiv1 {
      margin-bottom: 10rem;
    }

    .homeFeaturesDiv2 {
      margin-top: 2rem;
    }

    .homeFeaturesStudyCardsDiv,
    .homeFeaturesGroupStudyDiv,
    .homeFeaturesLiveCompetitionsDiv,
    .homeFeaturesRankingsDiv {
      width: 30%;
    }

    .homeFeaturesMainDiv img,
    .homeFeaturesMainDiv span {
      height: 80px;
      width: 80px;
      margin: 1rem auto;
    }

    .homeFeaturesMainDiv span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 80px;
    }

    /**** END OF HOME FEATURES ****/

    /*** Taratai AI Page ***/

    .tarataiAIMiddleDiv {
      width: 100%;
      padding: 2px 0;
    }

    .tarataiAIMiddleHeaderDiv {
      width: 100%;
      padding: 30px;
      margin-top: 50px;
      margin-bottom: 0px;
    }

    .tarataiAIMiddleContentDiv {
      width: 30%;
    }

    .tarataiAIMiddleFooterDiv {
      width: 100%;
      height: 100px;
    }

    .tarataiAIUploadButton,
    .tarataiAIWriteTextButton {
      width: 170px;
      height: 50px;
      border-radius: 7px;
      border: 1px solid #838383;
      color: var(--darkModeText);
      margin: 0px 10px;
    }

    .tarataiAISubmitButton {
      width: 200px;
      height: 60px;
      border-radius: 7px;
    }

    /*** End of Taratai AI Page ***/

    /*** Group Study Page ***/

    .groupStudyMainDiv {
      width: 100%;
      height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .classroomGroupStudyMainDiv {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 50px;
    }

    .groupStudyTopDiv {
      width: 100%;
      height: 100px;
    }

    .groupStudyTopDiv1 {
      width: 20%;
      font-size: 15px;
    }

    .groupStudyTopDiv2 {
      width: 60%;
    }

    .groupStudyTopDiv3 {
      width: 20%;
    }

    .groupStudyMiddleDiv {
      width: 100%;
      height: 80vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 7px;
      padding: 10px;
    }

    .groupStudyMiddleDiv1Button {
      width: 400px;
      height: 100px;
      font-size: 25px;
      border-radius: 5px;
    }

    .addParticipantsIcon {
      width: 25px;
      height: 25px;
    }

    .groupStudyFooter {
      width: 50%;
      justify-content: space-around;
      padding: 20px 0;
      border-radius: 45px;
      font-size: 10px;
      margin: 20px auto;
    }

    .groupAddParticipantsDivHeader {
      margin-top: 10px;
    }

    .myAvatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupAddParticipantsDivHeader1 {
      width: 100%;
      margin-top: 20px;
      padding: 0px 10px;
    }

    .groupAddParticipantsDivHeader1:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .groupStudyAddFriendsTop {
      width: 100%;
      margin-top: 15px;
    }

    .groupStudyFriendsCount {
      width: 200px;
      height: 40px;
      border-radius: 7px;
    }

    .groupStudyFriendsList {
      min-width: 80%;
      margin: 10px auto;
    }

    .groupStudyFriendListItemDiv {
      width: 100%;
      margin: 5px auto;
    }

    .groupStudyFriendListItemDiv1 {
      width: 40%;
      height: 50px;
      border-radius: 7px;
      padding: 15px 10px;
    }

    .groupStudyFriendListItemDiv2 {
      width: 40%;
      height: 50px;
    }

    .groupStudyFriendListItemButton {
      width: 50px;
      height: 50px;
      border-radius: 7px;
    }

    .myFriends_Avatar {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-bottom: 5px;
    }

    .groupStudyMiddleDiv1 {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }

    .groupAddParticipantsDiv {
      width: 550px;
      height: 600px;
      padding-bottom: 20px;
      border-radius: 7px;
      background-color: inherit;
      margin-bottom: 50px;
      overflow-y: auto;
    }

    .avatarMainDiv {
      width: 181px;
      height: 220px;
      padding: 1px;
      border: 0.5px solid lightgray;
    }

    .avatar {
      width: 180px;
      height: 180px;
      font-size: 12px;
    }

    .joinStreamButton,
    .endStreamButton {
      width: 180px;
      height: 40px;
    }

    .avatar__img {
      width: 50px;
      height: 100px;
    }
    /** End of Group Study Page ***/

    /*** COMPETITIONS PAGE ***/
    .competitionsPageHeader {
      width: 60%;
      height: 150px;
      border-radius: 10px;
      margin-top: 50px;
    }

    .competitionsPageHeader1 {
      width: 60%;
      height: 150px;
    }

    .competitionsPageHeader1 > h1 {
      font-size: 32px;
      font-weight: 700;
    }

    .competitionsPageHeader1 span {
      font-size: 20px;
      font-weight: 400;
    }

    .competitionsPageHeader2 {
      width: 40%;
      height: 150px;
    }

    .competitionsPageHeader2PointsBox {
      width: 130px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #fac015 0%, #f97616 100%);
      padding: 20px;
      cursor: pointer;
    }

    .competitionsPageHeader2RanksBox {
      width: 150px;
      height: 100px;
      margin: 0px 10px;
      border-radius: 10px;
      background: linear-gradient(90deg, #659ff9 0%, #a05df7 100%);
      padding: 20px;
      cursor: pointer;
    }

    .competitionsPageHeader2WinRateBox {
      width: 130px;
      height: 100px;
      border-radius: 10px;
      background: linear-gradient(90deg, #46db84 0%, #16baa5 100%);
      padding: 20px;
      cursor: pointer;
    }

    .competitionsPageHeader2 div {
      color: #fff;
      font-size: 20px;
      font-weight: 700;
    }

    .competitionsPageTabs {
      width: 60%;
      height: 80px;
      margin-top: 80px;
    }

    .competitionsPageTabs button {
      width: 400px;
      height: 50px;
      border-radius: 10px;
      cursor: pointer;
    }

    .competitionsPageTabs_not_active {
      background-color: inherit;
      border: none;
    }

    .competitionsPageTabs_active {
      border: none;
    }

    /* AI Competition Card Styles */

    .competitionsOptions {
      width: 100%;
    }

    .ai-competition-card {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .bot-icon {
      width: 32px;
      height: 32px;
      color: #10b981; /* Green color */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .multiplier-section {
      text-align: right;
    }

    .multiplier-label {
      font-size: 14px;
      margin-bottom: 2px;
    }

    .multiplier-value {
      font-size: 18px;
      font-weight: bold;
      color: #ea580c; /* Orange */
    }

    .competition-controls {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .subject-select,
    .topic-select {
      flex: 1;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-select:focus,
    .topic-select:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .subject-select:disabled,
    .topic-select:disabled {
      background-color: #f9fafb;
      color: #9ca3af;
      cursor: not-allowed;
    }

    .start-button {
      padding: 12px 24px;
      background: #10b981; /* Green */
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .start-button:hover:not(:disabled) {
      background: #059669; /* Darker green */
    }

    .start-button:disabled {
      background: #9ca3af; /* Gray */
      cursor: not-allowed;
    }

    .play-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    /* Friend Competition Card Styles */

    .friend-competition-card {
      width: 60%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .users-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Hover effect for future when feature becomes available */
    .friend-competition-card.available {
      opacity: 1;
      border-left-color: #3b82f6; /* Blue border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .friend-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .friend-competition-card.available .users-icon {
      color: #3b82f6; /* Blue color when available */
    }

    /* .friend-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .friend-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Random User Competition Card Styles */

    .random-user-competition-card {
      width: 60%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      border-left: 4px solid #d1d5db; /* Gray border */
      opacity: 0.75; /* Dimmed appearance for disabled state */
      margin: 50px auto;
    }

    .competition-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .zap-icon {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray color for disabled state */
      margin-right: 12px;
    }

    .competition-title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 4px 0;
    }

    .competition-description {
      margin: 0;
      font-size: 14px;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      color: #6b7280; /* Light gray */
    }

    .lock-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 500;
    }

    .coming-soon-message {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Optional: Styles for when feature becomes available */
    .random-user-competition-card.available {
      opacity: 1;
      border-left-color: #7c3aed; /* Purple border when available */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .random-user-competition-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .random-user-competition-card.available .zap-icon {
      color: #7c3aed; /* Purple color when available */
    }

    /* .random-user-competition-card.available .competition-title {
      color: #1f2937; 
    } */

    /* .random-user-competition-card.available .competition-description {
      color: #4b5563;  
    } */

    /* Special highlight for full multiplier feature */
    .random-user-competition-card.available .coming-soon-message {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fde68a 100%
      ); /* Golden gradient */
      color: #92400e; /* Dark yellow/brown text */
      border: 1px solid #f59e0b; /* Golden border */
      font-weight: 600;
    }

    /* Animation for the Zap icon when available */
    .random-user-competition-card.available .zap-icon {
      animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.5));
      }
      50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.8));
      }
    }

    /* Quick Stats Sidebar Styles */

    .sidebar-container {
      width: 100%;
      gap: 24px; /* space-y-6 equivalent */
    }

    .stats-card {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .stats-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .performance-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .performance-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .performance-subject {
      font-size: 14px;
    }

    .performance-points {
      font-weight: bold;
      font-size: 14px;
    }

    .performance-points.positive {
      color: #059669; /* Green for good performance */
    }

    .performance-points.negative {
      color: #dc2626; /* Red for poor performance */
    }

    /* Additional visual enhancements */
    .performance-item {
      padding: 8px 0;
      border-bottom: 1px solid #f3f4f6;
      transition: background-color 0.2s ease;
    }

    .performance-item:last-child {
      border-bottom: none;
    }

    .performance-item:hover {
      background-color: #f9fafb;
      border-radius: 6px;
      padding: 8px 12px;
      margin: 0 -12px;
    }

    /* Optional: Progress indicators for performance trends */
    .performance-item.trending-up::before {
      content: "↗";
      color: #059669;
      margin-right: 4px;
      font-weight: bold;
    }

    .performance-item.trending-down::before {
      content: "↘";
      color: #dc2626;
      margin-right: 4px;
      font-weight: bold;
    }

    /* Optional: Badge-style points display */
    .performance-points {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .performance-points.positive {
      background-color: #d1fae5; /* Light green background */
      color: #065f46; /* Dark green text */
    }

    .performance-points.negative {
      background-color: #fee2e2; /* Light red background */
      color: #991b1b; /* Dark red text */
    }

    /* Achievement Progress Card Styles */

    .achievement-card {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .achievement-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 16px 0;
    }

    .achievement-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .achievement-item {
      display: flex;
      flex-direction: column;
    }

    .achievement-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .achievement-name {
      font-size: 14px;
      font-weight: 500;
    }

    .achievement-progress-text {
      font-size: 14px;
      font-weight: 500;
    }

    .progress-bar-container {
      width: 100%;
      background: #e5e7eb; /* Light gray background */
      border-radius: 9999px; /* Fully rounded */
      height: 8px;
      overflow: hidden;
      position: relative;
    }

    .progress-bar {
      height: 100%;
      border-radius: 9999px; /* Fully rounded */
      transition: width 0.5s ease-in-out;
      position: relative;
    }

    .progress-bar.blue {
      background: #3b82f6; /* Blue */
    }

    .progress-bar.yellow {
      background: #eab308; /* Yellow */
    }

    /* Additional color options for other achievements */
    .progress-bar.green {
      background: #10b981; /* Green */
    }

    .progress-bar.purple {
      background: #8b5cf6; /* Purple */
    }

    .progress-bar.red {
      background: #ef4444; /* Red */
    }

    .progress-bar.orange {
      background: #f97316; /* Orange */
    }

    /* Animation effect for progress bars */
    .progress-bar {
      animation: progressFill 1s ease-out;
    }

    @keyframes progressFill {
      from {
        width: 0%;
      }
      to {
        width: var(--target-width, 0%);
      }
    }

    /* Hover effects */
    /* .achievement-item:hover .achievement-name {
      color: #1f2937;  
      font-weight: 600;
    } */

    .achievement-item:hover .progress-bar {
      filter: brightness(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Progress bar glow effect */
    .progress-bar::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
      );
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }

    /* Achievement completion celebration */
    /* .achievement-item.completed .achievement-name {
      color: #059669;
      font-weight: 700;
    } */

    /* .achievement-item.completed .achievement-progress-text {
      color: #059669;
      font-weight: 700;
    } */

    .achievement-item.completed .progress-bar {
      background: linear-gradient(90deg, #10b981, #34d399);
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* Near completion highlighting */
    .achievement-item.near-completion .progress-bar {
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    }

    /* .achievement-item.near-completion .achievement-name {
      color: #1d4ed8;
      font-weight: 600;
    } */

    /* Practice Tab Styles */

    .practice-tab-container {
      gap: 24px;
      width: 100%;
    }

    /* Practice vs AI Card */
    .practice-ai-card {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .practice-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .bot-icon-blue {
      width: 32px;
      height: 32px;
      color: #3b82f6; /* Blue */
      margin-right: 12px;
    }

    .practice-title {
      font-size: 20px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0 0 4px 0;
    }

    .practice-description {
      margin: 0;
      font-size: 14px;
    }

    .practice-controls {
      display: flex;
      flex-direction: column;
      gap: 16px; /* space-y-4 equivalent */
    }

    .subject-dropdown {
      width: 100%;
      padding: 12px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-dropdown:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .start-practice-button {
      width: 100%;
      background: #3b82f6; /* Blue */
      color: white;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .start-practice-button:hover {
      background: #2563eb; /* Darker blue */
    }

    /* Practice vs Friends Card (Disabled) */
    .practice-friends-card {
      width: 60%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 24px;
      opacity: 0.75; /* Dimmed appearance */
      margin: 50px auto;
    }

    .users-icon-gray {
      width: 32px;
      height: 32px;
      color: #9ca3af; /* Gray */
      margin-right: 12px;
    }

    .practice-title-disabled {
      font-size: 20px;
      font-weight: bold;
      color: #4b5563; /* Medium gray for disabled state */
      margin: 0 0 4px 0;
    }

    .practice-description-disabled {
      color: #6b7280; /* Light gray for disabled state */
      margin: 0;
      font-size: 14px;
    }

    .coming-soon-notice {
      font-size: 14px;
      color: #6b7280; /* Light gray */
      background: #f9fafb; /* Very light gray background */
      padding: 12px;
      border-radius: 8px;
      line-height: 1.4;
    }

    /* Enhanced hover effects for available card */
    .practice-ai-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Loading state for practice button */
    .start-practice-button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .start-practice-button.loading {
      position: relative;
      color: transparent;
    }

    .start-practice-button.loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    /* Future enhancement: When friends practice becomes available */
    .practice-friends-card.available {
      opacity: 1;
      border-left: 4px solid #10b981; /* Green accent */
    }

    .practice-friends-card.available .users-icon-gray {
      color: #10b981; /* Green when available */
    }

    .practice-friends-card.available .practice-title-disabled {
      color: #1f2937; /* Dark gray when available */
    }

    .practice-friends-card.available .practice-description-disabled {
      color: #4b5563; /* Medium gray when available */
    }

    .practice-friends-card.available:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    /* Leaderboard Tab Styles */

    .leaderboard-container {
      width: 60%;
      border-radius: 12px;
      padding: 24px;
      margin: 50px auto;
    }

    .leaderboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .leaderboard-title {
      font-size: 24px;
      font-weight: bold;
      color: #1f2937; /* Dark gray */
      margin: 0;
    }

    .subject-filter {
      padding: 8px;
      border: 1px solid #d1d5db; /* Light gray border */
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: #374151;
      transition: all 0.2s ease;
    }

    .subject-filter:focus {
      outline: none;
      border-color: #3b82f6; /* Blue */
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 12px; /* space-y-3 equivalent */
    }

    .leaderboard-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .leaderboard-item.top-three {
      background: linear-gradient(
        135deg,
        #fef3c7 0%,
        #fed7aa 100%
      ); /* Yellow to orange gradient */
    }

    .leaderboard-item.regular {
      background: #f9fafb; /* Light gray */
    }

    .student-info {
      display: flex;
      align-items: center;
    }

    .rank-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      margin-right: 16px;
      font-size: 14px;
    }

    .rank-badge.gold {
      background: #eab308; /* Gold/Yellow */
    }

    .rank-badge.silver {
      background: #9ca3af; /* Silver/Gray */
    }

    .rank-badge.bronze {
      background: #fb923c; /* Bronze/Orange */
    }

    .rank-badge.regular-rank {
      background: #3b82f6; /* Blue */
    }

    .student-details {
      display: flex;
      flex-direction: column;
    }

    .student-name {
      font-weight: 600;
      color: #1f2937; /* Dark gray */
      font-size: 16px;
    }

    .student-level {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    .score-info {
      text-align: right;
    }

    .score-points {
      font-weight: bold;
      font-size: 18px;
      color: #1f2937; /* Dark gray */
    }

    .score-label {
      font-size: 14px;
      color: #4b5563; /* Medium gray */
    }

    /* Hover effects */
    .leaderboard-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .leaderboard-item.top-three:hover {
      background: linear-gradient(135deg, #fef3c7 0%, #fdba74 100%);
    }

    .leaderboard-item.regular:hover {
      background: #f3f4f6;
    }

    /* Medal icons for top 3 */
    .rank-badge.gold::after {
      content: "🥇";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.silver::after {
      content: "🥈";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    .rank-badge.bronze::after {
      content: "🥉";
      position: absolute;
      font-size: 16px;
      margin-left: 24px;
      margin-top: -8px;
    }

    /* Animation for rank changes */
    .leaderboard-item {
      animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Special highlighting for current user */
    .leaderboard-item.current-user {
      border: 2px solid #3b82f6;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    }

    .leaderboard-item.current-user .student-name {
      color: #1d4ed8;
      font-weight: 700;
    }

    /* Loading skeleton animation */
    .leaderboard-item.loading {
      background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }

    /* Empty state styling */
    .leaderboard-empty {
      text-align: center;
      padding: 40px 20px;
      color: #6b7280;
    }

    .leaderboard-empty h4 {
      font-size: 18px;
      margin-bottom: 8px;
      color: #374151;
    }

    .leaderboard-empty p {
      font-size: 14px;
      margin: 0;
    }

    .competitionInstance {
      width: 100%;
      height: calc(100vh - 50px);
      margin-top: 50px;
      padding: 20px;
    }

    .competitions-question-screen {
      width: 70%;
      height: 60vh;
      border-radius: 7px;
      padding: 80px;
    }

    .competitionsInstanceProfileSection {
      width: 100%;
      margin-top: 10px;
    }

    .competition-card {
      margin: 0px 50px;
    }

    .math-question {
      margin-top: 100px;
      width: 100%;
    }

    .questionTrackerDiv {
      font-size: 30px;
    }

    /* Container for multiple choice options */
    .multiple-choice-flex {
      padding: 16px;
      background-color: inherit;
      border-radius: 8px;
      /* border: 1px solid #e9ecef; */
      margin: 16px auto;
    }

    /* Individual option label styling */
    .optionLabel {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background-color: white;
      border: 2px solid #dee2e6;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 16px;
      font-weight: 500;
      color: #495057;
      width: 100%;
      max-width: 400px;
      margin: 30px;
    }

    /* Hover effect for option labels */
    .optionLabel:hover {
      border-color: #007bff;
      background-color: #f8f9ff;
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
    }

    /* Radio input styling */
    .optionInput {
      width: 20px;
      height: 20px;
      margin: 0;
      cursor: pointer;
      accent-color: #007bff; /* Modern browsers */
    }

    /* Selected state styling */
    .optionLabel:has(.optionInput:checked) {
      border-color: #007bff;
      background-color: #e7f3ff;
      color: #0056b3;
      font-weight: 600;
    }

    /* Alternative for browsers that don't support :has() */
    .optionLabel.selected {
      border-color: #007bff;
      background-color: #e7f3ff;
      color: #0056b3;
      font-weight: 600;
    }

    /* Focus styles for accessibility */
    .optionInput:focus {
      outline: 2px solid #007bff;
      outline-offset: 2px;
    }

    .optionLabel:focus-within {
      border-color: #007bff;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
    }

    .option-group {
      margin: 10px;
    }

    .quiz-timer-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0px 20px;
      background-color: #1f2937;
      border-radius: 12px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      width: 300px;
      height: 130px;
      margin: 0 auto;
      font-family: Arial, sans-serif;
      position: absolute;
      top: 150px;
      right: 15vw;
    }

    .competitionsSubmitButton {
      background-color: var(--limeYellow);
      padding: 10px 50px;
      border-radius: 7px;
    }

    /*** END OF COMPETITIONS PAGE ***/
  } /** min-width: 2000px **/
} /*** END OF LANDSCAPE MEDIA QUERIES ***/