@font-face {
    font-family: "Kasia-Black";
    src: url("./fonts/kasia-black/Kasia-Black.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }

:root {
    --brand-purple: #5000D0;
    --white: #ffffff;
    --black: #000000;
    --light-purple: rgba(80, 0, 208, 0.1);
    --lighter-purple: rgba(80, 0, 208, 0.5);
    --curtain: rgba(0, 0, 0, 0.7);
    --bright-green: #00BABA;
    --bright-pink: #FF7B94;
    --bright-orange: #FFA800;
    --bright-red: #FF483D;
    --simple-gray: #999999;
    
    --font-accent: "Kasia-Black";
    --font-regular: "Open Sans";


    --size-micro: 12px;
    --size-mini: 13px;
    --size-sm: 16px;
    --size-small: 14px;
    --size-med: 20px;
    --size-lg: 33px;
}

:root .member_logged_in_volunteer {
    --brand-purple: #5000D0;
    --light-purple: rgba(80, 0, 208, 0.1);
    --lighter-purple: rgba(80, 0, 208, 0.5);
}
:root .member_logged_in_org_member {
    --brand-purple: #009D6E;
    --light-purple: rgba(0, 62, 43, 0.1);
    --lighter-purple: rgba(0, 62, 43, 0.5);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Open Sans', sans-serif;
}

body{
    background-color: #fff;
}

/* HEADER CSS */

header.page_header, footer.page_footer, .page {
    width: 100%;
    border: none;
    background-color: var(--white);
}
header.page_header {
    border-bottom: 2px solid var(--light-purple);
    height: 102px;
}
footer.page_footer {
    border-top: 2px solid var(--light-purple);
    /* background-image: url('/images/circles.png'); */
    /* -webkit-filter: grayscale(1) opacity(0.5); */
    /* -moz-filter: grayscale(1) opacity(0.5); */
    /* -o-filter: grayscale(1) opacity(0.5); */
    /* -ms-filter: grayscale(1) opacity(0.5); */
    /* filter: grayscale(1) opacity(0.5); */
}

.header_container, .footer_container, .page_container {
    max-width: 1400px;
    margin: 0 auto;
}
.page_container {
    /* min-height: calc(100vh - 250px); */
    border-radius: 10px;
    padding: 0;
    margin-top: 20px;
    background-color: var(--white);
}
.inner_page_container {
    padding: 0;
    margin: 0 auto;
    max-width: 1400px;
}
.white_page {
    max-width: 100%;
    background-color: var(--white);
    border: none;
}

.page_header {
    height: 100px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: var(--white);
}

.header_container {
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
}
.header-logo a {
    text-decoration: none !important;
}
.header-logo a .slogan {
    font-size: 16px;
    font-weight: bold;
    color: var(--bright-orange);
    text-decoration: none !important;
    font-family: var(--font-regular);
}
.header-logo {
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo img {
    width: 150px;
    height: auto;
    object-fit: cover;
}

.header_site_title {
    font-size: 25px;
    font-family: var(--font-accent);
    margin: 0;
    padding: 10px 20px 10px 20px;
    color: white;
    height: 100%;
    background-color: black;
    border-radius: 10px;
    margin-left: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header_site_title a {
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-weight: 100;
    font-family: 'Barlow', sans-serif;
    letter-spacing: 1px;
}

.hambi_menu img {
    filter: invert(100%);
}



ul.nav {
    display: flex;
    justify-content: right;
    align-items: center;
    column-gap: 30px;
    height: 100%;
    padding: 0 30px;
}

.menu ul li {
    list-style: none;
    color: black;
}

.logo_img {
    height: 100px;
    width: 100%;
    background-color: black;
}
.logo_img img {
    width: 100%;
    height: 100%;
}

.menu {
    height: 100px;
    flex-basis: calc(100% - 200px);
}
.auth, .logo {
    /* flex-basis: 100px; */
    margin-left: 80px;
}

ul.nav li a.selected {
    text-decoration: underline;
}
ul.nav li a {
    text-decoration: none;
    text-transform: lowercase;
    font-size: 1rem;
    color: var(--brand-purple);
    font-family: var(--font-regular);
    font-weight: 500;
}
ul.nav li a:hover {
    text-decoration: underline;
}
.auth {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.auth a {
    text-decoration: none;
    text-transform: capitalize;
    /* font-size: 14px; */
    color: black;
    /* padding: 5px 10px; */
    /* background-color: #edf0f2; */
    margin-right: 0.5rem;
    /* font-weight: 800; */
}

.auth a.login-btn {
    filter: opacity(0.7);
}
.auth a.login-btn:hover {
    filter: opacity(1);
}
.auth a.login-btn img {
    width: 25px;
}
.auth a.account-btn {
    border-radius: 10px;
}

.langsel {
    margin-right: 20px;
}

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

.langsel ul li {
    list-style-type: none;
}

.langsel .right a {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.langsel .left a {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}



.langsel ul a {
    text-decoration: none;
    background-color: transparent;
    background-color: white;
    color: black;
    font-size: 12px;
    padding: 5px 10px;
    margin: 0;
}

.langsel ul a.selected {
    background-color: black;
    color: white;
}


/* My Account My Tasks */

.listing_tasks {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 20px;
}

.listing_taskelem {
    background-color: var(--light-purple);
    border: 2px solid var(--light-purple);
    padding: 10px;
    position: relative;
    border-radius: 10px;
}

.listing_task_title {
    font-size: var(--size-sm);
    color: var(--black);
    font-weight: 700;
    text-align: left;
    padding-left: 20px;
    padding-block: 10px;
}

.listing_task_text {
    font-size: var(--size-mini);
    color: var(--black);
    font-weight: 400;
    text-align: left;
    padding-left: 20px;
    padding-bottom: 10px;
}

.task_spacer {
    width: calc(100% - 40px);
    margin: 10px 20px;
    height: 1px;
    background-color: var(--brand-purple);
}

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

.actn_btns .listing_task_text {
    color: var(--brand-purple);
    padding: 5px 10px;
    background-color: var(--light-purple);
    border-radius: 10px;
    margin-left: 20px;
}

.status_btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-right: 20px;
}

.status_btns .action_btn {
    padding: 5px;
    border-radius: 10px;
    background-color: var(--light-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}

.status_btns .action_btn:hover {
    background-color: var(--white);
}

.status_btns img {
    cursor: pointer;
    width: 20px;
    height: 20px;
    object-fit: cover;
}

/* My Account Myprofile */

.account_profile 
{
    padding: 20px;
    width: 100%;
}
.account_profile .account_body {
    max-width: 650px;
    background-color: var(--light-purple);
    margin: auto;
    border-radius: 10px;
    padding: 30px;
}
.account_profile .account_header 
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--brand-purple);
    padding-bottom: 20px;
}
.account_profile .account_header .profile_img
{
    flex-basis: 250px;
}
.account_profile .account_header .profile_img img {
    border-radius: 100px;
    width: 200px;
}
.account_profile .account_header .profile_data
{
    padding-top: 25px;
    flex-basis: calc(100% - 270px);
    font-size: var(--size-small);
}
.account_profile .account_header .profile_data .profile_text {
    line-height: 24px;
}
.account_profile .account_header .profile_data .profile_text span {
    font-weight: 600;
}
.account_profile .profile_experiences 
{

}
.account_profile .account_header .profile_data .profile_title
{
    font-family: var(--font-accent);
    color: var(--brand-purple);
    font-size: var(--size-lg);
    font-weight: 700;
    margin-bottom: 10px;
}

/* My Account Change Password */


.change_pass_form {
    width: calc(100% + 30px);
    height: 400px;
    background-color: var(--light-purple);
    border-radius: 10px;
    margin-left: -30px;
}

.change_pass_form form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    height: 100%;
    padding: 20px;
}

.change_pass_form input{
    width: 400px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    color: var(--brand-purple);
    font-size: var(--size-small);
    border: 1px solid var(--brand-purple);
    border-radius: 10px;
}

.change_pass_form input::placeholder {
    padding-left: 10px;
    color: var(--brand-purple);
    font-size: var(--size-small);
}

.change_pass_form input[type=submit] {
    background-color: var(--light-purple);
    cursor: pointer;
    font-weight: 800;
}

.change_pass_form input[type=submit]:hover {
    background-color: var(--brand-purple);
    color: var(--white);
}


/* FOOTER CSS */


.footer_content {
    display: flex;
    color: black;
    font-size: var(--size-med);
    font-weight: 700;
    justify-content: space-between;
    margin-bottom: 50px;
    padding-top: 30px;
}

.footer_content .footer_section {
    flex-basis: 10%;
}
.footer_content .footer_section.sect2, .footer_content .footer_section.sect4 {
    min-width: 280px;
}
.footer_content .footer_section.sect5 {
    min-width: 220px;
}

.footer_content .footer_section ul li a, .footer_content .footer_section {
    font-size: var(--size-mini);
    color: var(--simple-gray);
    text-decoration: none;
    font-weight: normal;
}
.footer_content .footer_section ul li a:hover {
    color: var(--brand-purple);
}
.footer_content .footer_section ul.fmenu {
    list-style: none;
    line-height: 20px;
}
.footer_content .footer_section ul.fmenu .empty {
    height: 10px;
}
.footer_content:hover {
    color: var(--brand-purple);
}
.project_about {
    margin-top: 10px;
}

#volunteer, #organization, #hub {
    scroll-margin-top: 170px;
}

/* PAGE CSS */

.page_title {
    padding-block: 1rem;
    margin: auto;
    font-size: 2rem;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-accent);
    color: var(--brand-purple);
}

.page_content {
    font-size: 1rem;
    width: 100%;
    text-align: center;
    font-family: var(--font-regular);
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--brand-purple);
    margin-bottom: 2rem;
}

.page_content#documents {
    text-align: left;
}

.page_content#documents p {
    padding-bottom: 2rem;
}

.page_listing_container {
    /* padding: 2rem; */
    font-size: 1rem;
}

.full_text_img_grid {
    width: 100%;
    /* height: calc(100vh - 300px); */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 2rem; */
    place-content: center;
    padding-inline: 4rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.grid_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.5rem;
    width: 90%;
    margin-top: 80px;
}

.grid_text h2{
    font-family: "Kasia-Black";
    color: var(--brand-purple);
    font-size: 70px;
    line-height: 70px;
    font-weight: normal;
    font-style: normal;
}

.grid_text p{
    font-family: var(--font-regular);
    color: var(--black);
    font-size: 16px;
    line-height: 24px;
    text-wrap: balance;
}

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

.grid_img img {
    width: 70%;
    height: 70%;
    object-fit: cover;
}

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

.home_img img {
    height: 500px;
}

.home_banner {
    width: 100%;
    height: 600px;
    margin: 0px;
    background-image: url('/images/home_banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    background-color: var(--light-purple);
}
.page_banner {
    width: 100%;
    height: 150px;
    margin: 0px;
    background-image: url('/images/page_banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    background-color: var(--light-purple);
}
.page_banner .page_title {
    display: none;
}

/* FORMS CSS */

.side_nav_form {
    width: 100%;
    background-color: var(--light-purple);
    padding: 20px 30px 0 30px;
}

.form_flex_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.promo_text {
    text-align: center;
    font-size: var(--size-med);
    letter-spacing: 0.9px;
    line-height: 20px;
    padding: 30px 60px;
}

.promo_title {
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 100%;
    font-weight: 800;
    text-align: center;
}

.form_row {
    width: 90%;
    margin: auto;
}

.form_name_row, .form_password_row, .form_email_row, .form_submit_row, .form_message_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.form_name_row input {
    width: 48%;
    margin: 1rem 0;
    font-size: 1rem;
    padding: 1rem;
    background-color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

.form_name_row input::placeholder {
    color: grey;
}

.form_name_row input:focus {
    color: black;
    background-color: white;
    border: 1px solid #d2d5d9;
}

.form_name_row input:focus::placeholder {
    color: #525557;
}

.form_email_row input {
    flex-basis: 100%;
    margin: 1rem 0;
    font-size: 1rem;
    padding: 1rem;
    background-color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

.form_email_row input::placeholder {
    color: grey;
}

.form_email_row input:focus {
    background-color: white;
    border: 1px solid #d2d5d9;
}

.form_email_row input:focus::placeholder {
    color: #525557;
}

.form_message_row textarea {
    flex-basis: 100%;
    margin: 1rem 0;
    font-size: 1rem;
    padding: 1rem;
    background-color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

.form_message_row textarea::placeholder {
    color: grey;
}

.form_message_row textarea:focus {
    background-color: white;
    border: 1px solid #d2d5d9;
}

.form_message_row textarea:focus::placeholder {
    color: #525557;
}

.form_password_row input {
    width: 48%;
    margin: 1rem 0;
    font-size: 1rem;
    padding: 1rem;
    background-color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

.form_password_row input::placeholder {
    color: black;
}

.form_password_row input:focus {
    background-color: white;
    border: 1px solid #d2d5d9;
}

.form_password_row input:focus::placeholder{
    color: #525557;
}

.form_submit_row input {
    flex-basis: 100%;
    margin: 1rem 0;
    font-size: 1rem;
    padding: 1rem;
    background-color: #7a7d80;
    border: none;
    color: white;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-weight: bolder;
    border-radius: 10px;
}

.form_submit_row input:hover {
    background-color: var(--brand-purple);
}

.form_text_link {
    font-size: 1rem;
    text-align: center;
    padding: 1rem;
}

.form_text_link a {
    text-decoration: none;
    color: black;
}

.form_text_link a:hover {
    color: #525557;
    text-decoration: underline;
}

input .form_button {
    background-color: #525557;
    color: white;
    font-weight: bolder;
}
.error {
    font-size: 1rem;
    text-align: center;
    padding: 1rem;
    font-family: var(--font-regular);
    font-weight: 800;
    color: var(--brand-purple);
    margin-inline: 20px;
}

/* Registration Page */

.flex_container_2 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.register_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.register_form .textual_title {
    text-align: center;
}

.content_box_purple .textual_cntnt .listing_activity {
    margin-bottom: 20px;
}

.register_form form {
    width: calc(100% - 80px);
    margin-inline: 40px;
}

.register_form form .form_row {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 20px;
}

.register_form select {
    width: 100%;
    background-color: var(--white);
    border: 1px solid var(--lighter-purple);
    color: #5000D0;
    padding: 10px;
    border-radius: 5px;
    font-size: var(--size-md);
}

.register_form select:focus {
    outline: 1px solid var(--brand-purple);
}

.register_form input {
    width: 100%;
    background-color: var(--white);
    border: 1px solid var(--lighter-purple);
    color: #5000D0;
    padding: 10px;
    border-radius: 5px;
    font-size: var(--size-md);
}

.register_form input::placeholder{
    color: #5000D0;
    font-size: var(--size-md);
}

.register_form input:focus {
    outline: 1px solid var(--brand-purple);
}

.register_form input[type=submit]:hover {
    color: var(--white);
}

.register_form .form_text_link {
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
}

.register_form .form_text_link a:hover {
    color: var(--brand-purple);
}

.register_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding: 2rem;
}

.register_content .textual_cntnt {
    padding-bottom: 0;
    margin-bottom: 0;
}

.register_content ul {
    padding-left: 20px;
}

.register_img {
    width: 100%;
    padding-inline: 20px;
}

.register_img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--brand-purple);
}

/* M Y  A C C O U N T  C S S */

.listing_flex_container_4 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    padding: 20px;
}


.listing_flex_container_3 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 20px;
    padding: 20px;
}

.listing_flex_container_2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
}

.org_item .listing_img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 30px auto 0 auto;
}
.org_item.minimize .listing_img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 20px auto 0 auto;
}



.listing_flex_container_3 .listing_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.acc_listing_img {
    width: 100%;
    margin: 10px auto 0 auto;
}

.acc_listing_img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.org_item {
    background-color: var(--light-purple);
    border: 2px solid var(--light-purple);
    /* color: var(--white); */
    padding: 20px;
    position: relative;
    border-radius: 10px;
}
.org_item:hover {
    border: 2px solid var(--brand-purple);
}
.listing_flex_container_3 .listing, .listing_myfavourites .listing {
    background-color: var(--light-purple);
    border: 2px solid var(--light-purple);
    /* color: var(--white); */
    padding: 10px;
    position: relative;
    border-radius: 10px;
}

.listing_flex_container_3 .listing:hover, .listing_myfavourites .listing:hover {
    border: 2px solid var(--brand-purple);
}

.org_item .listing_title a {
    color: var(--black);
    text-decoration: none;
    font-weight: 700;
}
.org_item .listing_title {
    font-size: var(--size-med);
    text-align: center;
    padding: 20px 0px;
}
.org_item .listing_text {
    font-size: var(--size-sm);
    text-align: center;
}
.org_item .listing_subtitle {
    font-size: var(--size-sm);
    text-align: center;
}

.org_item.minimize .listing_title {
    font-size: var(--size-sm);
}
.org_item.minimize .listing_text {
    font-size: var(--size-small);
}
.org_item.minimize .listing_subtitle {
    font-size: var(--size-small);
    margin-top: 20px;
}

.listing_labels, .listing_myfavourites .listing_labels {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.listing_label, .org_item.minimize .listing_label, .listing_myfavourites .listing_label {
    font-size: var(--size-small);
}
.listing_label .independent_category {
    text-align: center;
    width: fit-content;
    padding: 4px 8px;
    background-color: var(--light-purple);
    border-radius: 10px;
    margin: 0px 6px 10px 0px;
    white-space: nowrap;
    font-size: var(--size-mini);
}
.listing_labels#leftaligned {
    justify-content: flex-start;
}

a.app_but {
    text-decoration: none;
    color: var(--brand-purple);
    font-size: var(--size-mini);
    padding: 3px 10px;
    background-color: var(--light-purple);
    width: fit-content;
    height: 1rem;
    border-radius: 10px;
    margin: 0px 3px 10px 3px;
    cursor: pointer;
}
a.app_but:hover {
    background-color: var(--brand-purple);
    color: var(--white);
}
.listing_myfavourites .listing_label {
    font-size: var(--size-mini);
    padding: 0.2rem 1rem 1.4rem 1rem;
}
mark {
    background-color: var(--brand-purple);
    color: black;
    padding: 1px;
    border-radius: 10px;
  }


/* S I N G L E   P A G E   C S S */

.page_flex_content {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 40px;
}

.listing_container {
    padding: 20px;
    min-height: 900px;
    width: 90%;
    position: relative;
}

.side_nav {
    max-width: 20%;
    min-width: 220px;
    min-height: 900px;
    height: auto;
    border-radius: 10px;
    background: var(--light-purple);
    padding: 20px;
    color: var(--black);
}

.side_nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.side_nav li {
    list-style: none;
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 1rem;
    font-size: 14px;
}

.side_nav li.sub {
    list-style: none;
    text-transform: capitalize;
    padding-top: 0.5rem;
    padding-left: 1rem;
    font-size: 12px;
}

.side_nav li.sub i {
    font-size: 1.2rem;
}
.side_nav li.chapter {
    color: var(--brand-purple)
}

.side_nav li.sub span {
    border: none;
    width: 30px;
    height: 30px;
}

.side_nav li a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    margin-left: 0.5rem;
    letter-spacing: 0.8px;
}

.side_nav li a.selected {
    font-weight: 800;
    text-decoration: underline;
}

.side_nav i {
    font-size: 1.5rem;
}

.side_nav span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.sign_up_button {
    background-color: var(--white);
    border: 2px solid var(--brand-purple);
    width: fit-content;
    height: fit-content;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 0.8px;
    position: absolute;
    bottom: 20px;
    right: 50px;
    font-weight: 700;
}

.sign_up_button:hover {
    background-color: var(--brand-purple);
}

.sign_up_button a {
    text-decoration: none;
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 1;
    /* this is a fix for IE7-9 */
    background-color:var(--brand-purple);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

.single_title_old {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    padding: 1rem;
    display: block;
    position: relative;
    letter-spacing: 0.8px;
    width: 90%;
    margin: 0 0 40px 0;
    text-align: center;
}


.single_subtitle {
    font-size: 1rem;
    padding: 1.5rem 1rem;
    letter-spacing: 0.8px;
    font-weight: 800;
    display: flex;
    align-items: center;
}

.single_subtitle img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--brand-purple);
    margin-right: 20px;
}

.single_text {
    font-size: var(--size-med);
    padding-top: 20px;
    color: var(--black);
}

.single_text a {
    color: inherit;
}

.unknown .listing_container span {
    background-color: var(--brand-purple);
    color: var(--white);
    padding: 0 3px;
    border-radius: 10px;
}

.unknown .listing_container span a {
    cursor: pointer;
    padding: 0 4px;
}

.action_btn_container {
    width: 100%;
    padding: 0 20px 10px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.single_label {
    background-color: var(--light-purple);
    width: fit-content;
    height: 1rem;
    margin: 1rem auto;
    font-size: 1rem;
    text-align: center;
    padding: 0 1rem 1.5rem 1rem;
    border-radius: 10px;
}

.listing_card_container {
    margin: 50px auto;
    padding: 30px;
    background-color: var(--white);
    height: auto;
    width: 70%;
    border-radius: 10px;
    position: relative;
}

.listing_msg_container {
    margin: 40px 0;
    background-color: var(--white);
    width: 100%;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.listing_card_container_2 {
    background-color: var(--white);
    border-radius: 10px;
    position: relative;
    margin: 5px;
    padding: 10px 20px 40px 20px;
}

.card_title {
    text-align: center;
    font-size: 1.5rem;
    font-family: var(--font-accent);
    padding-bottom: 20px;
}

.card_img {
    width: 250px;
    height: 250px;
    margin: 20px auto;
    border-radius: 50%;
    border: 2px solid var(--brand-purple);
}

.card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--brand-purple);
}

.card_text {
    text-align: center;
    font-size: 1rem;
    margin: auto;
    padding-bottom: 5px;
}

.accept_msg {
    display: none;
}

/* BY FLA */
.org_back {
    float: left;
    margin-left: 30px;
    margin-top: 30px;
}
.org_back img {
    width: 40px;
    height: 40px;
}
.org_member_status {
    margin-top: 20px;
}
.content_box_white, .content_box_purple {
    width:1400px;
    margin: 10px auto;
    padding: 30px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    /* align-items: center; */
    border-radius: 10px;
}
.content_box_purple .textual_fw {
    width: 100%;
}

.content_box_centered {
    width:1400px;
    margin: 10px auto;
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 2rem;
}

.content_box_purple {
    background-color: var(--light-purple);
}
.content_box_white {
    background-color: var(--white);
}

.ctb .image_d {
    flex-basis: 40%;
}
.ctb .image_d img { 
    border: 1px solid var(--brand-purple);
    border-radius: 16px;
    width: 100%;
}
.ctb .textual {
    flex-basis: 55%;
}
.ctb .textual_fw {
    flex-basis: 100%;
}
.ctb .textual .textual_title, .ctb .textual_fw .textual_title, .textual_title {
    font-size: var(--size-lg);
    color: var(--brand-purple);
    margin-bottom: 20px;
    font-family: var(--font-regular);
    font-weight: 700;
}
.ctb .textual .textual_cntnt {
    font-size: var(--size-sm);
    color: var(--black);
}
.ctb .textual .textual_cntnt p {
    margin-bottom: 10px;
}

.but {
    margin-top: 30px;
}
.but a {
    background-color: var(--brand-purple);
    border-radius: 10px;
    height: 50px;
    color: var(--white);
    font-size: var(--size-med);
    font-weight: bold;
    text-align: center;
    padding: 10px 50px;
    text-decoration: none;
}

.but a:hover {
    background-color: #fff;
    border: 1px solid var(--brand-purple);
    color: var(--brand-purple);
}

.social_icons {
    display: flex;
    justify-content: right;
}
.social_img {
    width: 30px;
    filter: grayscale(1);
}
a.social {
    margin-left: 5px;
}
.social_img:hover {
    filter: grayscale(0); 
}
.footer_logo {
    /* filter: grayscale(1); */
    filter: opacity(0.5) grayscale(1);
}
.footer_logo:hover {
    filter: grayscale(0) opacity(1); 
}
.footer_logo { width: 90%; }
.design_and_development {
    margin-top: 30px;
    text-align: right;
}
.dd1 {
    height: 30px;
    vertical-align: middle;
}
.dd2 {
    height: 30px;
    vertical-align: middle;
}

.ei_elem.calendar_elem, .minimize .ei_elem.calendar_elem {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background-color: var(--white);
    opacity: 0.8;
    font-size: var(--size-sm);
}
.ei_elem {
    padding: 6px 10px;
    border-radius: 10px;
    background-color: var(--light-purple);
    color: var(--brand-purple);
    font-size: var(--size-sm);
    margin-right: 15px;
}

.minimize .ei_elem {
    padding: 4px 8px;
    border-radius: 10px;
    background-color: var(--light-purple);
    color: var(--brand-purple);
    font-size: var(--size-mini);
    margin-right: 10px;
}
.eventspage_events.myevents .extra_info, .eventspage_events.myevents .extra_actions {
    text-align: center;
}
.eventspage_events.myevents .extra_actions.buttons {
    text-align: right;
}
.eventspage_events.myevents .extra_info .ei_elem {
    font-size: var(--size-mini);
}
.ei_elem .icon_vols img, .ei_elem .icon_locs img, .ei_elem .icon_cals img {
    height: 24px;
    vertical-align: top;
}
.ei_elem .text_vols, .ei_elem .text_locs, .ei_elem .text_cals  {
    
}
.ei_elem .icon_vols, .ei_elem .icon_locs, .ei_elem .icon_cals {
    margin-right: 7px;
}
.minimize .ei_elem .icon_vols img, .minimize .ei_elem .icon_locs img, .minimize .ei_elem .icon_cals img {
    height: 20px;
    vertical-align: top;
    margin-top: 3px;
}

.homepage_events {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}
.extra_info {
    margin-top: 20px;
    text-align: center;
}
.event_item {
    border: 1px solid var(--brand-purple);
    border-radius: 16px;
    padding: 20px;
    flex-basis: 32%;
    background-color: var(--white);
    cursor: pointer;
    position: relative;
}

.clickable_card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.event_item .hub img, .orgelem .hub img, .org_item .hub img {
    width: 100%;
    border-radius: 30px;
}
.event_item .hub, .orgelem .hub, .org_item .hub {
    float: right;
    margin-top: -30px;
    margin-right: -30px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
}
.listing_flex_container_3 .orgelem {
    cursor: pointer;
}
.event_item:hover {
    background-color: var(--light-purple);
}
.event_item .event_img {
    height: 160px;
    background-color: var(--light-purple);
    border-radius: 12px;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}
.event_item .event_title {
    color: var(--brand-purple);
    font-size: var(--size-med);
    font-weight: bold;
    margin-top: 10px;
    line-height: 24px;
}
.event_item.minimize .event_title {
    color: var(--brand-purple);
    font-size: var(--size-sm);
    font-weight: bold;
    margin-top: 10px;
    line-height: 20px;
}
.eventspage_events.myevents .event_item .event_title {
    color: var(--brand-purple);
    font-size: var(--size-sm);
    font-weight: 700;
    margin-top: 10px;
    line-height: 20px;
}
.event_item.minimize .event_org .org_name, .event_item.minimize .event_org .event_location {
    font-size: var(--size-mini);
}
.event_org {
    display: flex;
    justify-content: left;
    margin-top: 10px;
}
.event_org .org_logo {
    width: 30px;
    height: 30px;
}
.event_org .org_logo img {
    /* width: 30px; */
    height: 30px;
    border-radius: 50%;
}
.event_org .org_name, .event_org .event_location {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
}
.eventspage_events.myevents .event_org .event_location, .eventspage_events.myevents .event_org .org_name { 
    font-size: var(--size-mini);
}
.event_org .event_location:before {
    content: "/  ";
}
.page_content.logins {
    display: flex;
    justify-content: space-between;
}
.orglogin, .vollogin {
    flex-basis: 45%;
    background-color: var(--light-purple);
    padding: 50px;
}

.spage_title {
    font-size: var(--size-med);
    text-transform: uppercase;
    font-family: var(--font-regular);
    color: var(--brand-purple);
    font-weight: 700;
    text-align: left;
}
.spage_intro {
    text-align: left;
    font-size: var(--size-mini);
}


/* Events Page CSS */

.eventspage_events {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    width: 100%;
}
.account_page .eventspage_events {
    margin-top: 30px;
}
.eventspage_events.myevents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

/* Organizations Listing Page CSS */
.org_item_card {
    border: 1px solid var(--light-purple);
    background-color: var(--light-purple);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.org_item_card:hover {
    border: 1px solid var(--brand-purple);
}

.org_item_card .listing_label{
    margin-left: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}

.org_item_card .listing_label span::after {
    /* content: ',  '; */
}

.org_item_card .listing_label span:last-child:after {
    /* content: ''; */
}


.org_item_card .upper_section {
    display: flex;
    justify-content: left;
    position: relative;
}

.org_item_card .bottom_section {
    /* height: 50px; */
    align-items: center;
}

.org_item_card .bottom_section .hor_line {
    width: 100%;
    height: 1px;
    background-color: var(--light-purple);
    margin-top: 10px;
    margin-bottom: 10px;
}

.org_item_card .upper_section .listing_img {
    width: 70px;
    height: 70px;
    margin: 10px 20px 10px 10px;
}

.org_item_card .upper_section .listing_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.org_item_card .upper_section .listing_divider {
    flex-basis: 1px;
    background-color: #DDCEF6;
    width: 1px;
}

.org_item_card .upper_section .listing_data {
    flex-basis: calc(100% - 101px);
}

.org_item_card .listing_title {
    font-size: var(--size-sm);
    color: var(--black);
    font-weight: 700;
    text-align: left;
    padding-left: 20px;
    padding-bottom: 10px;
}

.org_item_card .listing_text {
    font-size: var(--size-mini);
    color: var(--black);
    font-weight: 400;
    text-align: left;
    padding-left: 20px;
}

/* The Mission Page CSS */

.selling_points_grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    padding-block: 3rem;
}

.selling_point_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--light-purple);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--brand-purple);
}

.selling_point_card:hover {
    background-color: #fff;
}

.selling_point_card i {
    color: var(--brand-purple);
    font-size: 5rem;
    padding-bottom: 1rem;
}

.selling_point_card .card_title {
    width: 85%;
    text-wrap: balance;
    padding-bottom: 1rem;
    font-size: var(--size-med);
    color: var(--brand-purple);
    font-family: var(--font-regular);
    font-weight: 700;
}


/* How To Page CSS */


.content_box_leftaligned {
    width:1400px;
    margin: 10px auto;
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    background-color: var(--light-purple);
    border-radius: 10px;
}


.steps {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    flex-direction: column;
}

#ch_hubs {
    width: 260px;
    background-color: var(--white);
    padding: 20px 15px;
    display: none;
    box-shadow: 0px 1px 8px rgba(118,118,118,0.3);
    border-radius: 6px;
    border: 1px solid #999999;
    position: absolute;
    top: 70px;
    margin-left: -160px;
    min-height: 150px;
}
.login_layer {
    width: 260px;
    background-color: var(--white);
    padding: 20px 15px;
    display: none;
    box-shadow: 0px 1px 8px rgba(118,118,118,0.3);
    border-radius: 6px;
    border: 1px solid #999999;
    position: absolute;
    top: 70px;
    margin-left: -180px;
    min-height: 150px;
}
#ch_hubs .arrow {
    width: 9px;
    height: 5px;
    display: inline-block;
    position: absolute;
    margin-top: -39px;
    margin-left: 218px;
}
.login_layer .arrow {
    width: 9px;
    height: 5px;
    display: inline-block;
    position: absolute;
    margin-top: -39px;
    margin-left: 205px;
}
.login_layer .profile_title {
    font-weight: 700;
    font-size: var(--size-mini);
    color: var(--brand-purple);
}
.login_layer .profile_text {
    font-size: var(--size-micro);
    color: var(--simple-gray);
}

#ch_hubs .short_intro_text, .login_layer .short_intro_text {
    font-size: var(--size-mini);
    color: var(--simple-gray);
    text-align: justify;
}
#ch_hubs ul, .login_layer ul {
    margin-top: 10px;
    list-style: none;
}
#ch_hubs ul li.country, .login_layer ul li.country {
    font-size: var(--size-mini);
    margin-top: 15px;
    padding-left: 5px;
    font-weight: 700;
    color: var(--brand-purple);
}
#ch_hubs ul li.hub, .login_layer ul li.hub {
    font-size: var(--size-mini);
    padding-left: 20px;
    cursor: pointer;
    font-weight: 500;
    color: var(--black);
}
.login_layer ul li.hub a {
    color: var(--black);
    font-weight: 500;
    font-size: var(--size-mini);
}
#ch_hubs ul li.hub:hover, .login_layer ul li.hub a:hover, .login_layer ul li.seeall a:hover, #ch_hubs ul li.seeall:hover {
    text-decoration: underline;
}
#ch_hubs ul li.seeall, .login_layer ul li.seeall {
    width: 100%;
    text-align: center;
    color: var(--black);
    font-weight: 700;
    margin-top: 20px;
    cursor: pointer;
    font-size: var(--size-mini);
}
.login_layer ul li.seeall a {
    color: var(--black);
}

/* Single Pages */


.purple_section {
    width:1400px;
    margin: 10px auto;
    background-color: var(--light-purple);
    border-radius: 10px;
    position: relative;
}

.narrow_content {
    max-width: 60%;
    margin: auto;
}

.purple_section .content_box_purple {
    background-color: transparent;
}

.purple_section .textual_title {
    /* padding: 2rem 0 0 2rem; */
}


.purple_section .content_box_purple .textual_cntnt {
    padding: 20px 30px;
}

.purple_section .textual_cntnt .strong {
    margin-bottom: 1rem;
    font-weight: 800;
}

.full_bleed_img {
    width: 100%;
    height: 400px;
    position: relative;
}

.full_bleed_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.full_bleed_img .textual_title {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
}
.clear {
    clear: both;
}
.single_header_flex {
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: space-between; */
    text-align: center;
}
.single_header_flex .org_actions {
    float: right;
    margin-top: 30px;
    margin-right: 30px;
}
.single_header_flex .org_logo {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    text-align: center;
    margin: 30px auto 10px;
}

.single_header_flex .org_logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.title_with_logo {
    text-align: center;
    width: 100%;
}

.join_org_btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-right: 1rem;
}

.join_org_btn a{
    text-decoration: none;
    background-color: var(--brand-purple);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 5px;
}

.single_details_flex {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
    border-radius: 10px;
    flex-direction: column;
    padding: 2rem;
    max-width: 30%;
    background-color: var(--white);
    border-radius: 20px;
    padding: 30px;
}

.single_details_flex .single_tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.single_details_flex .single_tag span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.single_details_flex .single_tag span a {
    color: inherit;
}

.single_details_flex .single_tag img{
    height: 30px;
    width: 30px;
    object-fit: cover;
}

.single_details_flex .single_tag .hub_logo {
    height: 60px;
    width: 60px;
    border-radius: 50%;
}

.single_content {
    width: 100%;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    flex-direction: column;
    text-align: left;
}

.single_content .listing_title {
    text-align: left;
    padding: 0;
    margin: 0;
}

.news_cntnt {
    padding-inline: 2rem;
    font-size: var(--size-med);
}

.news_cntnt p, .strong {
    padding-bottom: 2rem;
}

.news_cntnt .strong {
    font-weight: 800;
}

/* News Page CSS */

.news_listing {
    border: 1px solid var(--brand-purple);
    border-radius: 10px;
    /* display: grid; */
    /* grid-template-columns: 1fr; */
    /* grid-template-rows: 4fr 2fr 2fr 1fr; */
    /* justify-items: center; */
    background-color: #fff;
    position: relative;
}

.news_listing .listing_date {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: fit-content;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--brand-purple);
    border-radius: 10px;
}

.news_listing .listing_title {
    font-weight: 700;
    font-size: var(--size-med);
    text-align: left;
    width: 100%;
    padding: 10px 20px;
    color: var(--brand-purple);
}
.read_more_small_but {
    color: var(--white);
    text-align: center;
    padding: 3px 10px;
    background-color: var(--brand-purple);
    border-radius: 10px;
    float: right;
    width: fit-content;
    border: 1px solid var(--brand-purple);
    font-size: var(--size-mini);
    text-decoration: none;
}
.read_more_small_but:hover {
    color: var(--brand-purple);
    background-color: var(--white);
    border: 1px solid var(--brand-purple);
}
.news_but {
    color: var(--white);
    text-align: left;
    padding: 3px 10px;
    background-color: var(--brand-purple);
    border-radius: 10px;
    margin: 20px;
    display: inline-block;
    width: fit-content;
    border: 1px solid var(--brand-purple);
}
.news_but:hover {
    color: var(--brand-purple);
    background-color: var(--white);
    border: 1px solid var(--brand-purple);
}

.news_but a {
    text-decoration: none;
    color: inherit;
    font-size: var(--size-small);
}

.news_listing .excerpt {
    padding: 0px 20px;
    font-size: var(--size-small);
}

.news_listing img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.alayer_line {
    height: 1px;
    background-color: var(--simple-gray);
    width: 100%;
    margin-top: 5px;
    margin-bottom: 15px;
}
.account_title {
    display: flex;
    justify-content: left;
}
.account_title .profile_image.organisation {
    flex-basis: 51px;
    width: 51px;
    margin-right: 10px;
}
.account_title .profile_image.volunteer {
    flex-basis: 36px;
    width: 36px;
    margin-right: 10px;
}
.account_title .profile_image.volunteer img {
    width: 100%;
    border-radius: 18px;
}
.account_title .profile_image.organisation img {
    width: 100%;
    border-radius: 26px;
}
.account_title .profile_name.volunteer {
    width: calc(100% - 50px);
    flex-basis: calc(100% - 50px);
}
.account_title .profile_name.organisation {
    width: calc(100% - 65px);
    flex-basis: calc(100% - 65px);
}

.single_flex_content {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    margin-top: 20px;
    padding-bottom: 20px;
}

.single_edit_form {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 400px;
    background-color: var(--light-purple);
    border-radius: 10px;
    margin-top: 20px;
}

.flex_image_update {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-inline: 20px;
    gap: 20px;
}
.flex_image_update img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--brand-purple);
}

.flex_image_update .form_row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-bottom: 20px;
}

.flex_image_update input[type="file"]::file-selector-button {
    text-wrap: nowrap;
    height: 50px;
    width: 100%;
    border-radius: 10px;
    outline: none;
    background-color: var(--white);
    color: var(--brand-purple);
    font-size: var(--size-small);
    border: 1px solid var(--brand-purple);
    text-align: left;
    padding-left: 20px;
    cursor: pointer;
}

.flex_image_update input[type="file"]::file-selector-button:hover {
    background-color: var(--brand-purple);
    color: var(--white);
}

.single_edit_form .form_row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-bottom: 20px;
}

.single_edit_form .form_row label {
    text-wrap: nowrap;
    width: 250px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    border: 1px solid var(--brand-purple);
    border-radius: 10px;
    font-size: var(--size-small);
}

.single_edit_form .form_row input {
    text-wrap: nowrap;
    width: 250px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    border: 1px solid var(--brand-purple);
    border-radius: 10px;
    outline: none;
}

.single_edit_form .flex_image_update input{
    padding-left: 0;
    border: none;
}

.single_edit_form .form_row input::placeholder {
    font-size: var(--size-small);
    color: var(--brand-purple);
}

.single_edit_form .form_row select {
    text-wrap: nowrap;
    width: 250px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    border: 1px solid var(--brand-purple);
    border-radius: 10px;
    outline: none;
}

.single_edit_form .submit_row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.single_edit_form .submit_row input[type=submit] {
    text-wrap: nowrap;
    width: calc(100% - 50px);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-purple);
    border-radius: 10px;
    font-weight: 800;
    outline: none;
    background-color: #fff;
    color: var(--brand-purple);
}

.single_edit_form .submit_row input[type=submit]:hover {
    background-color: var(--brand-purple);
    color: var(--white);
    cursor: pointer;
}

/* Contact Page CSS */

.content_box_contact {
    width:1400px;
    margin: 10px auto;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 10px;
    background-color: var(--light-purple);
    flex-basis: 50%;
}

.contact_form_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-inline: 2rem;
    gap: 2rem;
}

.content_box_contact .page_form {
    color: var(--brand-purple);
    width: 100%;
}

.content_box_contact .page_form form {
    background-color: white;
    border: 1px solid var(--brand-purple);
    border-radius: 10px;
    padding: 1rem;
    width: 100%;
}

.content_box_contact .page_form form input {
    border: 1px solid var(--brand-purple);
    color: var(--brand-purple);
    font-weight: 600;
}

.content_box_contact .page_form form input:focus {
    outline: 2px solid var(--brand-purple);
}

.content_box_contact .page_form form textarea {
    border: 1px solid var(--brand-purple);
    color: var(--brand-purple);
    font-weight: 600;
    min-height: 270px;
}

.content_box_contact .page_form form textarea:focus {
    outline: 2px solid var(--brand-purple);
}

.content_box_contact .page_form form input::placeholder {
    color: var(--brand-purple);
    font-weight: 400;
}

.content_box_contact .page_form form textarea::placeholder {
    color: var(--brand-purple);
    font-weight: 400;
}

.content_box_contact .page_form form .form_submit_row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form_select_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

}

.content_box_contact .page_form form input[type=submit] {  
    background-color: var(--brand-purple);
    color: #fff;
    padding: 1rem;
    width: fit-content;
    font-weight: 400;
    border: 1px solid var(--brand-purple);
}

.content_box_contact .page_form form input[type=submit]:hover {
    background-color: var(--light-purple);
    color: var(--brand-purple);
}

.content_box_contact .page_form form select {
    border: 1px solid var(--brand-purple);
    border-radius: 5px;
    margin-block: 1rem;
    padding: 5px 10px;
    color: var(--bright-green);
}

.content_box_contact .page_form form select:focus {
    outline: 2px solid var(--brand-purple);
}

.content_box_contact .page_form form select option {
    color: var(--bright-green);
}

.content_box_contact .contact-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    padding-inline: 2rem;
}

.content_box_contact .contact-content img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--brand-purple);
    border-radius: 10px;
}

.company_details {
    width: 100%;
    color: var(--brand-purple);
}

.contact-content .but {
    margin-top: 0;
}
.side_nav .acc_profile_image {
    width: 80px;
    margin: auto;
}
.side_nav .acc_profile_image img {
    border-radius: 40px;
}
.side_nav .acc_profile_name {

}
.side_nav .profile_title {
    text-align: center;
    font-size: var(--size-sm);
    font-weight: 700;
    color: var(--brand-purple);
}
.side_nav .profile_text {
    text-align: center;
    font-size: var(--size-mini);
    font-weight: 400;
    color: var(--simple-gray);
}
.horline {
    width: 100%;
    height: 1px;
    background-color: var(--brand-purple);
    margin: 10px 0px 20px 0px;
}
.horline.mt20 {
    width: 100%;
    height: 1px;
    background-color: var(--brand-purple);
    margin: 20px 0px 20px 0px;
}

.horline.m10 {
    width: 100%;
    height: 1px;
    background-color: var(--brand-purple);
    margin: 10px 0px 10px 0px;
}
.horline_lpurple {
    width: 100%;
    height: 1px;
    background-color: var(--light-purple);
    margin: 10px 0px 0px 0px;
}
.horline_lpurple.mt20 {
    margin-top: 20px;
}
.horline_lpurple.mb20 {
    margin-bottom: 20px;
}
.horline_lpurple.mb10 {
    margin-bottom: 10px;
}

.listing_container .single_title {
    font-size: var(--size-lg);
    font-weight: 700;
    text-align: left;
    margin: 0px;
    padding: 0px;
}
.account_page .single_title {
    font-size: var(--size-med);
}
.account_page .single_text {
    font-size: var(--size-sm);
}

.listing_container .single_subtitle {
    font-size: var(--size-med);
    font-weight: 700;
    text-align: left;
    margin: 20px 0px -20px 0px;
    padding: 0px;
}

.listing_container .single_title.second {
    margin-top: 40px;
}
.listing_myfavourites {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 20px;
}
.listing_myfavourites .upper_section {
    display: flex;
    justify-content: left;
}
.listing_myfavourites .orgelem .listing_img {
    width: 70px;
    height: 70px;
    margin: 10px 20px 10px 10px;
}
.listing_myfavourites .orgelem .listing_img img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.listing_myfavourites .orgelem .listing_divider {
    flex-basis: 1px;
    background-color: #DDCEF6;
    width: 1px;
}
.listing_myfavourites .orgelem .listing_data {
    flex-basis: calc(100% - 101px);
}
.listing_data .listing_activity {
    margin-left: 20px;
    font-size: var(--size-mini);
}

.listing_myfavourites .orgelem .listing_title {
    font-size: var(--size-sm);
    color: var(--black);
    font-weight: 700;
    text-align: left;
    padding-left: 20px;
}
a.unfollow {
    cursor: pointer;
}
.actionbuts {
    white-space: nowrap;
}
.listing_myfavourites .orgelem .listing_title a {
    font-size: var(--size-sm);
    color: var(--black);
    font-weight: 700;
    text-decoration: none;
}
.listing_myfavourites .orgelem .reg_date {
    font-size: var(--size-mini);
    color: var(--black);
    font-weight: 400;
    text-align: center;
    padding-bottom: 10px;
}
.listing_myfavourites .orgelem .listing_text, .listing_myfavourites .orgelem .listing_activity {
    font-size: var(--size-mini);
    color: var(--black);
    font-weight: 400;
    text-align: left;
    padding-left: 20px;
}
.listing.notification {
    padding: 20px;
}
.listing.notification.read {
    background-color: var(--white);
}
.listing.notification.read .listing_title, .listing.notification.read .listing_title a, .listing.notification.read .listing_text, .listing.notification.read .listing_activity {
    color: var(--simple-gray);
}
.listing.notification .listing_text, .listing.notification .listing_activity {
    font-size: var(--size-small);
}
.listing.notification .listing_title {
    margin-bottom: 15px;
}
.listing.notification .listing_title a {
    text-decoration: none;
    color: var(--black);
    font-weight: 700;
    font-size: var(--size-sm);
}
.listing_myfavourites .event_item .follow, .listing_myfavourites .orgelem .follow, .listing.notification .follow {
    text-align: right;
    padding-left: 20px;
    margin-top: 10px;
}
.listing_myfavourites .orgelem .listing_activity {
    font-weight: 400;
    margin-top: 10px;
}
.listing_myfavourites .orgelem .listing_activity span.actives {
    color: var(--brand-purple);
    background: none !important;
}
.no_content {
    color: var(--brand-purple);
    font-size: var(--size-sm);
    font-weight: 700;
    margin-top: 30px;
}
span.strike {
    text-decoration: line-through;
    text-decoration-color: var(--brand-purple);
}
.selected_hub {
    font-size: var(--size-mini);
    text-align: center;
    background-color: var(--light-purple);
}
.selected_hub .shu {
    background-position: center left;
    background-repeat: no-repeat;
    background-size: contain;
    height: 80px;
    margin: auto;
    padding-top: 28px;
    text-align: center;
}
.selected_hub .shu .hub_title {
    background-color: rgba(255, 255, 255, 0.7);
    width: fit-content;
    padding: 5px 20px;
    font-size: var(--size-sm);
    color: var(--brand-purple);
    border-radius: 10px;
    font-weight: 700;
}

.curtain {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    z-index: 10000;
    background-color: var(--curtain);
}
.curtain .message {
    position: absolute;
    z-index: 10001;
    width: 300px;
    top: 200px;
    left: calc(50% - 150px);
    padding: 40px 30px 30px 30px;
    border-radius: 20px;
    background-color: #ffffff;
    font-size: var(--size-small);
    font-weight: 700;
    color: vae(--brand-purple);
    text-align: center;
}
.apply-form .join_title {
    text-align: center;
    font-family: var(--font-accent);
    color: var(--brand-purple);
    font-size: var(--size-med);
    font-weight: 400;
    margin-bottom: 10px;
}
.apply-form .listing_img {
    margin: auto;
}
.apply-form .listing_img img {
    border-radius: 50px;
}
.apply-form .label {
    font-size: var(--size-mini);
    color: var(--brand-purple);
    text-align: left;
    font-weight: normal;
    margin-bottom: 10px;
}
.apply-form .field {
    margin-bottom: 20px;
}
.apply-form .field .form_field {
    font-size: var(--size-small);
    color: var(--black);
    width: 100%;
    border-radius: 10px;
    background-color: #ffffff;
    padding: 5px;
    border: 1px solid var(--brand-purple);
}
.apply-form .field .form_tarea {
    font-size: var(--size-small);
    color: var(--black);
    width: 100%;
    border-radius: 10px;
    background-color: #ffffff;
    padding: 5px;
    border: 1px solid var(--brand-purple);
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    min-width: 100%;
    max-width: 100%;
}
.apply-form .apply_but_div {
    margin-top: 20px;
    text-align: center;
}
.apply-form .apply_but_div .apply_2_subm_but {
    font-size: var(--size-small);
    font-weight: 700;
    color: var(--white);
    width: 100%;
    border-radius: 10px;
    background-color: var(--brand-purple);
    padding: 5px;
    border: 1px solid var(--brand-purple);
    cursor: pointer;
}
.apply-form .apply_but_div .apply_2_subm_but:hover {
    background-color: var(--white);
    color: var(--brand-purple);
}
.curtain_close {
    background-color: var(--brand-purple);
    border: 1px solid var(--brand-purple);
    color: var(--white);
    font-size: var(--size-small);
    font-weight: 400;
    width: 20px;
    height: 20px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    float: right;
    margin-top: -20px;
    margin-right: -10px;
}
.curtain_close:hover {
    background-color: var(--white);
    color: var(--brand-purple);
}
.profile_experiences {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 40px;
}
.profile_experiences .stat_elem {
    flex-basis: 32%;
    width: 32%;
    border-radius: 10px;
    border: 1px solid var(--brand-purple);
    background-color: var(--white);
    padding: 0px;
    font-size: var(--size-mini);
    color: var(--brand-purple);
    display: flex;
    justify-content: center;
}
.profile_experiences .stat_elem .icon {
    padding: 10px;
}
.profile_experiences .stat_elem .data {
    padding-top: 8px;
}
.profile_experiences .stat_elem .data .label {
    font-size: 40px;
    font-weight: 400;
    font-family: var(--font-accent);
}
.profile_experiences .stat_elem .data .value {
    width: 100%;
    color: var(--simple-gray);
    font-size: var(--size-mini);
    text-align: left;
}

/* M E D I A   Q U E R I E S */

/* Tablet */

@media screen and (min-width: 768px) and (max-width: 1200px) {

    .listing_flex_container_3 {
        grid-template-columns: 1fr 1fr;
    }
    

}

/* Mobile */

@media screen and (max-width: 767px) {
    .listing_flex_container_3 {
        grid-template-columns: 1fr;
    }

/* something  */
}