/*
! Learning Circle common css
*/
.learningCircleLandingPage,
.LearningCircleDetailsContent,
.FindCircleContent,
.LearningCircleCreateContent {
    width: 100%;
    padding: 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/*
* ******************************************************************************************

! Learning Circle Landing Page
*/

.learningCircleLandingPage .headContent {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--White);
    gap: 1rem;
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
}

.learningCircleLandingPageMiddle {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.learningCircleLandingPageMiddle b {
    font-size: 1.5rem;
    color: #494752;
    font-weight: 600;
    width: fit-content !important;
}

.learningCircleLandingPageMiddle p {
    font-size: 1rem;
    color: #a0a0a0;
    font-weight: 500;
    width: fit-content !important;
    margin-top: 0;
}

.learningCircleLandingPage img,
.learningCircleLandingPageMiddle img {
    width: 35%;
}

.desaturate {
    filter: saturate(0);
    opacity: 0.5;
}

.learningCircleLandingPageDesc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    color: #000;
}

.learningCircleLandingPageDesc h1 {
    font-size: 2.5rem;
    color: var(--blue);
    font-weight: bold;
}

.learningCircleLandingPageDesc b {
    font-weight: 600;
    width: 80%;
}

.learningCircleLandingPage .learningCircleLandingPageButton {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.learningCircleLandingPageAccordion {
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    list-style: none;
    border-radius: 0.5rem;
}

.learningCircleLandingPageLevel {
    background-color: var(--White);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
}

.learningCircleLandingPageLevel div {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.learningCircleLandingPagePara {
    display: flex;
    word-break: keep-all;
    width: fit-content;
}

.learningCircleLandingPageExpandBtn {
    display: none;
}

.learningCircleLandingPageExpandBtn:checked + .learningCircleLandingPageLevel,
.learningCircleLandingPageExpandBtn:checked
    + .learningCircleLandingPageLevel
    div
    p {
    background: var(--blue);
    color: white;
}

/* .learningCircleLandingPageExpandBtn:checked + .learningCircleLandingPageLevel{
    border: 1px solid var(--blue);
} */

.learningCircleLandingPageExpandBtn:checked
    + .learningCircleLandingPageLevel
    .learningCircleLandingPageBtn {
    background: var(--White);
    color: var(--blue);
}

/* No learning circles case */
.learningCircleLandingPageMiddle {
    display: flex;
    align-items: center;
}

@media (width<1060px) {
    .learningCircleLandingPageDesc h1 {
        font-size: 1.65rem;
    }

    .learningCircleLandingPageDesc b {
        font-size: 0.6rem;
    }

    .learningCircleLandingPageLevel div {
        font-size: 0.8rem;
    }
    .learningCircleLandingPage .learningCircleLandingPageButton button {
        font-size: 15px;
    }
}

@media (width<=820px) {
    .learningCircleLandingPage {
        padding: 0.5rem;
    }

    .learningCircleLandingPage .headContent {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0rem;
    }

    .learningCircleLandingPage img,
    .learningCircleLandingPageMiddle img {
        width: 100%;
    }

    .learningCircleLandingPageLevel {
        padding: 1rem;
    }

    .learningCircleLandingPageBtn {
        width: 2rem;
    }
}

@media (width<620px) {
    .learningCircleLandingPageMiddle p {
        font-size: 0.65rem;
        margin-right: 0.5rem;
    }
}

@media (width<350px) {
    .learningCircleLandingPageDesc h1 {
        font-size: 1.2rem;
    }

    .learningCircleLandingPage .learningCircleLandingPageButton {
        gap: 0.5rem;
        margin-top: 0rem;
    }

    .learningCircleLandingPageMiddle p {
        font-size: 0.5rem;
    }
}

/*
* ************************************************************************************************

! Learning Circle Details Page
*/
.LearningCircleDetailsContent {
    width: 100%;
    color: #000;
    font-weight: 600;
    gap: 1rem;
}

.LearningCircleDetailsContent b {
    font-weight: 600;
}

.CreatedCircle {
    background-color: var(--White);
    padding: 2.5rem;
    border-radius: 1rem;
    border: 0.5px solid #d2dcff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.CircleName,
.EventOn {
    text-align: left;
}

.CircleRank {
    text-align: center;
    display: flex;
    gap: 1rem;
    line-height: 2.5rem;
}

.CircleRank div h1 {
    font-size: 4rem;
}

.CreatedCircle h1,
.MeetingOn h1 {
    font-size: 3rem;
    font-weight: 600;
    color: var(--blue);
}

.CircleRank i,
.MeetingOn i {
    border-radius: 0.5rem;
    color: var(--White);
    padding: 0.5rem;
    width: fit-content;
    height: fit-content;
    background-color: var(--blue);
}

/* bottom section with starting */

.BoxContent {
    display: flex;
    gap: 1rem;
}

.LeftBox {
    width: 100%;
}

.RightBox {
    width: 40%;
    margin-top: -0.5rem;
}

.EventOn,
.PendingApp {
    background-color: var(--White);
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: var(--boxShadow);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    margin: 10px 0;
}

.MeetingOn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
}

.MeetingDate {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-left: 10px;
}

.MeetingDate h1 {
    color: var(--blue);
    font-size: 2rem;
}

.MeetingBtn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.BtnBtn {
    padding: 0.5rem 2.5rem;
    border-radius: 0.5rem;
    border: none;
    color: var(--White);
    background-color: var(--blue);
}

.BtnClr {
    padding: 0.5rem 2.5rem;
    border-radius: 0.5rem;
    border: none;
    color: var(--blue);
    background-color: #cce2ff;
}

.PendingApp {
    margin-top: 1rem;
    height: 290px;
    overflow: hidden;
    overflow-y: scroll;
}

.PendingApp::-webkit-scrollbar,
.Members::-webkit-scrollbar {
    display: none;
}

.PendingTitle {
    font-size: 1.3rem;
}

.PendingList {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.PendingMembers span {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.PendingMembers img,
.MemberName img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    border-radius: 100%;
}

.PendingMembers .buttons {
    display: flex;
    gap: 1rem;
}

.Streak {
    position: relative;
    box-shadow: var(--boxShadow);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.StreakCount {
    color: var(--blue);
    font-size: 1.8rem;
    font-weight: bold;
}

.Streak img {
    width: 8rem;
    height: 8rem;
}

.Streak div {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 5.5rem;
    background-color: var(--White);
    text-align: center;
    font-size: 0.55rem;
    padding: 0.8rem;
    border-radius: 100%;
    line-height: 1.1rem;
}

.Members {
    background-color: var(--White);
    box-shadow: var(--boxShadow);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-top: 1rem;
    min-height: 530px;
    overflow: hidden;
    overflow-y: scroll;
}

.Leave {
    background-color: var(--White);
    box-shadow: var(--boxShadow);
    border-radius: 1rem;
    padding: 1.3rem;
    margin-top: 1rem;
    height: 80px;
    overflow: hidden;
    overflow-y: scroll;
}

.MemberTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    padding-right: 5rem;
}

.MemberList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.MemberName {
    display: flex;
    gap: 1rem;
    word-wrap: break-word;
    justify-content: space-between;
}

.memberNameDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.memberNameDiv div {
    width: 75%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    font-size: 0.8rem;
    gap: 0.7rem;
}

.memberNameDiv img {
    margin-right: 1rem;
}

.deleteIcon {
    cursor: pointer;
    border-radius: 0.5rem;
    background-color: red;
    width: 4.5rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--White);
    font-size: 10px;
    font-weight: bolder;
}

.MemberName .deleteIcon {
    width: 4rem;
}

.MemberName span {
    display: flex;
    gap: 1rem;
    align-items: center;
    /*padding: 0.5rem;*/
}

.MemberName span img {
    width: 1.3rem;
    height: 1.3rem;
}

@media (width<1070px) {
    .Members {
        padding-left: 2rem;
        min-height: 580px;
    }

    .MemberName {
        font-size: x-small;
        font-weight: 700;
        gap: 0.5rem;
    }

    .MemberName span img {
        width: 1rem;
        height: 1rem;
        margin-left: 0.5rem;
    }
}

@media (width<870px) {
    .Members {
        min-height: 630px;
    }
}

@media (width<820px) {
    .LearningCircleDetailsContent {
        padding: 0.5rem;
        font-size: 0.8rem;
        height: fit-content;
    }

    .CreatedCircle h1,
    .MeetingOn h1 {
        font-size: 2rem;
    }

    .CircleRank div h1 {
        font-size: 3rem;
    }

    .CircleRank {
        flex-direction: column-reverse;
        gap: 0.5rem;
        align-items: flex-end;
        width: 50%;
    }

    .CircleRank .points {
        font-size: 0.8rem;
        line-height: 0.5rem;
    }

    .BoxContent {
        flex-direction: column;
        gap: 1rem;
    }

    .RightBox {
        width: 100%;
    }

    .RightBox {
        width: 100%;
        margin-top: 0rem;
    }

    .CreatedCircle {
        padding: 1.5rem;
    }

    .EventOn,
    .PendingApp {
        padding: 1.5rem;
    }

    .BtnBtn {
        padding: 0.5rem 1.5rem;
    }

    .buttons .BtnBtn,
    .BtnClr {
        padding: 0.5rem;
        font-size: 0.65rem;
    }

    .MemberName span img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .Members {
        padding-left: 5rem;
        min-height: max-content;
    }

    .MemberName {
        font-size: large;
        gap: 8rem;
    }
}

@media (width<450px) {
    .Members {
        padding-left: 1.5rem;
    }

    .MemberName {
        gap: 4rem;
        font-size: small;
    }
}

@media (width<380px) {
    .MemberName {
        gap: 2rem;
        font-size: small;
    }

    .MemberName span img {
        width: 1rem;
        height: 1rem;
    }
}

@media (width<800px) {
    .Lcweek {
        gap: 0.25;
    }
}

/* css for the Meeting schedule*/

.ScheduleOn {
    text-align: center;
}

.ScheduleOn b {
    font-size: 1.5rem;
}

.ScheduleOn p {
    color: var(--blue);
}

.InputSchedule {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
}

.InputSchedule div {
    display: flex;
    gap: 1rem;
}

.InputSchedule input {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #f3f3f3;

    outline: none;
}

.dateandtime {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    flex-wrap: wrap;
}

.inputVenue {
    width: 50%;
    background: #ececec;
    display: flex;
    flex-direction: column;
    height: 45px;
    margin-top: 10px;
    border-radius: 6px;
    padding: 1rem;
}

.inputTime {
    width: 40%;
}

.weeks {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
}

.InputSchedule .weeks p {
    font-size: medium;
    font-weight: 400;
}

.Lcweek {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    flex: 1;
}

.Lcweek div {
    position: relative;
}

.Lcweek div label {
    position: absolute;
    font-size: 0.8rem;
    font-weight: 400;
    width: 40px;
    height: 40px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.Lcweek input[type="checkbox"] {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #f3f3f3;
    outline: none;
    border: none;
    transition: 0.3s;
    --webkit-appearance: none;
    appearance: none;
}

.Lcweek input[type="checkbox"]:checked {
    background-color: #456ff6;
    border: none;
}

.Lcweek input[type="checkbox"]:after {
    display: none;
}

.Lcweek input[type="checkbox"]:checked + label {
    color: var(--White);
}

.LcNotedEvent {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.LcNotedEdit {
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.LcNotedEvent textarea {
    width: 100%;
    min-height: 10rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #f3f8fe;
    outline: none;
}

.LcNotedEvent p {
    width: 100%;
    min-height: 10rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #f3f8fe;
    outline: none;
    color: var(--Dark);
}

@media (width<820px) {
    .Lcweek {
        gap: 10px;
    }
}

/*
* ************************************************************************************************

! Learning Circle Create Page
*/

.LearningCircleCreateContent {
    padding-top: 2rem;
}

.LearningCircleCreateMain {
    background-color: var(--White);
    margin-top: 2rem;
    padding: 3rem 0.5rem;
    box-shadow: var(--boxShadow);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.LearningCircleCreateHeading {
    display: flex;
    flex-direction: column;
    margin: 2rem;
}

.LearningCircleCreateHeading b {
    font-size: 2.2rem;
    color: #000;
}

.LearningCircleCreateForm {
    display: flex;
    flex-direction: column;
}

.LearningCircleCreateForm input {
    text-align: center;
    background-color: #f3f3f4;
    color: #665c7a;
    margin-top: 20px;
}

.LearningCircleCreateMain button {
    padding: 0.5rem 2rem;
    background-color: var(--blue);
    color: var(--White);
    border-radius: 0.5rem;
    margin-top: 1rem;
}

@media (width<1100px) {
    .LearningCircleCreateHeading div b {
        font-size: 1.5rem;
    }

    .LearningCircleCreateHeading div p {
        font-size: 0.75rem;
    }

    .LearningCircleCreateForm {
        display: flex;
        flex-direction: column;
    }

    .LearningCircleCreateForm input {
        margin: 0;
    }
}

@media (width<955px) {
    .LearningCircleCreateHeading div b {
        font-size: 1.5rem;
    }

    .LearningCircleCreateHeading div p {
        font-size: 1rem;
    }

    .LearningCircleCreateContent {
        padding-top: 3rem;
    }

    .LearningCircleCreateMain {
        flex-direction: column;
        padding: 0.5rem;
    }

    .LearningCircleCreateHeading {
        margin: 0.5rem;
    }

    .LearningCircleCreateHeading p {
        padding-top: 1rem;
    }

    .LearningCircleCreateForm {
        display: flex;
        flex-direction: column;
    }

    .LearningCircleCreateHeading b {
        font-size: 1.5rem;
    }

    .LearningCircleCreateForm input::placeholder {
        font-size: 0.8rem;
    }

    .LearningCircleCreateMain button {
        margin-top: 1rem;
    }
}

@media (width<380px) {
    .LearningCircleCreateContent {
        padding-top: 0;
    }
}

/*
* ************************************************************************************************

! Learning Circle Find-Circle Page
*/
.FindCircleContentTop {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--White);
    gap: 1rem;
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    padding: 1rem;
}

.FindCircleContentTop .desc {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.FindCircleContentTop .desc h3 {
    font-size: 2.5rem;
    color: #456ff6;
    font-weight: 600;
}

.FindCircleContentTop .desc .ig_search {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 70%;
}

.FindCircleContentTop .desc .ig_search select {
    background: #f3f3f4;
    color: #333333;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    width: 100%;
}

.FindCircleContentTop .desc .ig_search button {
    background: var(--blue);
    color: var(--White);
    border-radius: 8px;
    padding: 0.8rem 1rem;
}

.FindCircleContent .container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    width: 100%;
}

.FindCircleContent .container .one {
    width: 30%;
    padding: 1.5rem 2rem;
    background: white;
    box-shadow: var(--boxShadow);
    border-radius: var(--borderRadius);
    color: var(--black);
    text-align: initial;
}

.FindCircleContent .container .one h2 {
    all: revert;
    margin: 0;
}

.FindCircleContent .container .one .join {
    margin-top: 1rem;
    display: flex;
    justify-content: end;
}

.FindCircleContent .container .one .join button {
    width: 5rem;
    background: #456ff6;
    color: white;
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

@media (width<1030px) {
    .FindCircleContent {
        padding: 0.5rem;
    }

    .FindCircleContentTop {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .FindCircleContentTop .desc h3 {
        font-size: 1.75rem;
    }

    .FindCircleContentTop .desc b {
        font-size: 0.8rem;
    }

    .FindCircleContent img {
        width: 100%;
    }

    .FindCircleContentTop .desc .ig_search {
        width: 100%;
    }

    .FindCircleContent .container {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        width: 100%;
    }

    .FindCircleContent .container .one {
        width: 100%;
        padding: 1rem;
    }

    .FindCircleContent .container .one .join {
        margin-top: 0.5rem;
    }
}

.error_container h1 {
    all: revert;
    padding: 125px 0px;
}

/*
* ************************************************************************************************

! Learning Circle Find Page
*/

.FindCircleContentTop {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--White);
    gap: 1rem;
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
}

.FindCircleContentTop .desc {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.FindCircleContentTop .desc h3 {
    font-size: 2.5rem;
    color: #456ff6;
    font-weight: 600;
}

.FindCircleContentTop .desc .ig_search {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 70%;
}

.FindCircleContentTop .desc .ig_search select {
    background: #f3f3f4;
    color: #333333;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    width: 100%;
}

.FindCircleContentTop .desc .ig_search button {
    background: var(--blue);
    color: var(--White);
    border-radius: 8px;
    padding: 0.8rem 1rem;
}

.FindCircleContent .container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    width: 100%;
}

.FindCircleContent .container .one {
    width: 30%;
    padding: 1.5rem 2rem;
    background: white;
    box-shadow: var(--boxShadow);
    border-radius: var(--borderRadius);
    color: var(--black);
    text-align: initial;
}

.FindCircleContent .container .one h2 {
    all: revert;
    margin: 0;
}

.FindCircleContent .container .one .join {
    margin-top: 1rem;
    display: flex;
    justify-content: end;
}

.FindCircleContent .container .one .join button {
    width: 5rem;
    background: #456ff6;
    color: white;
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

@media (width<1030px) {
    .FindCircleContent {
        padding: 0.5rem;
    }

    .FindCircleContentTop {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .FindCircleContentTop .desc h3 {
        font-size: 1.5rem;
    }

    .FindCircleContentTop .desc b {
        font-size: 0.8rem;
    }

    .FindCircleContentTop .desc b {
        font-size: 0.8rem;
    }

    .FindCircleContent img {
        width: 100%;
    }

    .FindCircleContentTop .desc .ig_search {
        width: 100%;
    }

    .FindCircleContent .container {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        width: 100%;
    }

    .FindCircleContent .container .one {
        width: 100%;
        padding: 1rem;
    }

    .FindCircleContent .container .one .join {
        margin-top: 0.5rem;
    }
}

.error_container h1 {
    all: revert;
    padding: 125px 0px;
}

.resourcesLink {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    margin-top: 1rem;
    font-weight: 400;
    cursor: pointer;
}

.loader {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.full {
    display: flex;
    justify-content: end;
}
.disabled_button {
    background-color: #e0e0e0;
    color: #9e9e9e;
    cursor: not-allowed;
    width: 8rem;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
}

.loader_container {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    top: 0;
    /* left: 0; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
    transition: all 0.5s ease-in;
    /* transform: scaleX(-1); */

    & p {
        color: #5570f2;
        transform: scaleX(-1);
    }
}
.SwitchNav {
    display: flex;
    gap: 5px;
    align-items: center;
    .items {
        padding: 8px 20px;
        background-color: #f3f3f4;
        color: black;
        font-weight: 600;
        border-radius: 15px;
        &.active {
            background-color: white;
            border-radius: 15px 15px 0px 0px;
        }
    }
    .plusItem {
        border-left: 2px solid #8b8e92;
        color: black;
        font-size: 25px;
        padding: 0px;
        height: fit-content;
        padding-left: 10px;
        line-height: 1;
    }
}

.ContentWrapper {
    width: 100%;
    padding: 30px;
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: start;
}
.inputBox {
    background: #fff;
    margin: 0px 10px;
    input {
        width: 100%;
        background-color: rgba(238, 242, 255, 1);
        border: none;
        border-radius: 10px;
        padding: 10px;
    }
}
.modalinfo {
    margin: 10px;
    color: #22222290;
    font-size: 15px;
}
.meetupGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    .meetupCard {
        background: #fdfdfd;
        color: #222;
        padding: 20px;
        box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.05);
        border-radius: 10px;
        .meetupTitle {
            font-size: 20px;
            font-weight: 600;
            color: #5570f2;
            margin: 10px;
        }
        .meetupAgenda {
            font-size: 15px;
            margin: 10px;
            text-align: justify;
        }
        .buttons {
            display: flex;
            margin: 10px;
            gap: 10px;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            a {
                display: flex;
                align-items: center;
                gap: 5px;
                padding: 10px 20px;
                border: 1px dashed var(--blue);
                border-radius: 10px;
            }
        }
        .tags {
            display: flex;
            gap: 10px;
            padding: 10px 0;
            .tag {
                display: flex;
                align-items: center;
                padding: 5px;
                border: 1px dashed #5570f2;
                border-radius: 10px;
                color: #222;
                font-size: 10px;
            }
        }
    }
    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        .meetupCard {
            .tags {
                .tag {
                    font-size: 10px;
                }
            }
        }
    }
}
