[data-theme="light"]{
    --page-color: #f8f6fb;
    --accent1-light-purple-color: #d9d8e6;
    --accent2-light-purple-color: #e0dff5;
    --accent-medium-purple-color: #c0bfde;
    --accent-dark-purple-color: #adabcc;
    --main-text-color: #333354;
    --accent-text-color: #515175;
    --dark-text-color: #333354;
    --user-post-color: #9190ad;
    --user-post-main-text-color: #000000;
    --user-post-sub-text-color: #000000;
    --post-form-color: #9190ad;
    --top-toolbar-color: #c0bfde;
    --top-toolbar-active-color: #d9d8e6;
    --light-top-toolbar-active-color: #adabcc;
    --post-content-color: #e0dff5;
    --bottom-ticket-info-color: #333354; 
    --ticket-button-color: #e0dff5;
    --ticket-button-text-color: #333354;
    --forum-button-color: #e0dff5;
    --member-text-color: #515175;
    --status-dropdown-color: #e0dff5;
    --status-dropdown-text-color: #333354;

}
[data-theme="light"]
    .light-mode-logo{
        display: flex;
    }
[data-theme="dark"]{
    --page-color: #1c1e41;
    --accent1-light-purple-color: #4a4968;
    --accent2-light-purple-color: #5b5982;
    --accent-medium-purple-color: #333354;
    --accent-dark-purple-color: #252440;
    --main-text-color: #ffffff;
    --accent-text-color: #c1bfd6;
    --dark-text-color: #1c1e41;
    --user-post-color: #4a4968;
    --user-post-main-text-color: #ffffff;
    --user-post-sub-text-color: #d9d8e6;
    --post-form-color: #4a4968;
    --top-toolbar-color: #716e93;
    --top-toolbar-active-color: #9f9cb6;
    --light-top-toolbar-active-color: #9f9cb6;
    --post-content-color: #8885a5;
    --bottom-ticket-info-color: #c1bfd6;
    --ticket-button-color: #c1bfd6;
    --ticket-button-text-color: #333354;
    --forum-button-color: #9f9cb6;
    --member-text-color: #9f9cb6;
    --status-dropdown-color: #1c1e41;
    --status-dropdown-text-color: #9f9cb6;
}
[data-theme="dark"]
    .dark-mode-logo{
        display: flex;
    }

body{
    margin: 0;
    margin-top: -16px;
    background-color: var(--page-color);
    font-family: Questrial;
    color: var(--main-text-color);
}
a{
    text-decoration: none;
    color: var(--main-text-color);
}

/* --------------ERRORS-------------------------------------------------------------------------------------------------------------- */
.code-and-message{
    display: flex;
    align-items: center;
}
.error-code{
    font-weight: bold;
    font-size: 28px;
    margin-right: 10px;
}

/* --------------LOGIN & SIGNUP PAGE------------------------------------------------------------------------------------------------- */
.auth-container{
    display: flex;
    justify-content: center;
    margin-top: 100px;
}
.login-signup-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: #ffffff;
}
.login-signup-label{
    margin-top: 0;
    margin-bottom: 5px;
}
.logo{
    margin-top: 15px;
}
.login-signup-title{
    font-size: 36px;
    margin: 15px;
}
.login-signup-form-input{
    width: 200px;
    margin-bottom: 15px;
    outline: none;
    border: 1.5px solid #1c1e41;
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: #1c1e41;
    color: #9f9cb6;
}
.login-signup-form-input::placeholder{
    color: #9f9cb6;
}
.auth-button{
    color: #1c1e41;
    background-color: #9f9cb6;
    border-radius: 15px;
    border: 1.5px solid #9f9cb6;
    width: 75px;
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
}
.not-right-form{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #9f9cb6;
}
.not-yet-button{
    margin-left: 10px;
    color: #1c1e41;
    background-color: #9f9cb6;
    border-radius: 15px;
    border: 1.5px solid #9f9cb6;
    width: 75px;
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
}
.terms-of-use-div{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.terms-of-use-box{
    opacity: 0;
}
.custom-box{
    background-color: #1c1e41 !important;
    border: 2px solid #1c1e41 !important;
    border-radius: 5px;
    cursor: pointer;
    margin: -1px 0 0 -1px;
    height: 15px;
    width: 15px;
}
.terms-of-use-box:checked + .custom-box::after{
    content: "✔";
    font-size: 10px;
    font-weight: bold;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 15px;
    width: 15px;
    color: #1c1e41 !important;
    background-color: #9f9cb6 !important;
    border: 2px solid #1c1e41 !important;
    border-radius: 5px;
    margin: -2px 0 0 -2px;
}
.terms-of-use-label{
    margin: 5px  5px 5px 8px !important;
}
#terms-of-use{
    color: #9f9cb6;
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

#moving-forum{
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    cursor: default;
}
/* Slide in animation */
#moving-forum.show{
    opacity: 1;
    transform: translateX(0);
}
/* Slide out animation */
#moving-forum.hide{
    opacity: 0;
    transform: translateX(100%);
}

/* --------------AUTHORIZATION PAGES---------------------------------------------------------------------------------------------- */
.wait-message-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    min-width: 640px;
    max-width: 1175px;
    height: 400px;
    margin-top: 15vh;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: #ffffff;
}
.wait-message{
    width: 500px;
    margin-top: 50px;
    text-align: center;
    font-size: 20px;
}

.auth-div{
    width: 60vw;
    margin-top: 30px;
}
.user-card{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 9px 25px;
    background-color: var(--accent-medium-purple-color);
    border-radius: 15px;
    cursor: default;
}
.auth-side{
    display: flex;
    flex-direction: row;
}
#authorize{
    margin-right: 15px;
}
.auth-result{
    color: #1c1e41;
    background-color: #9f9cb6;
    border-radius: 15px;
    border: 1.5px solid #9f9cb6;
    width: 75px;
    padding: 10px 5px;
    font-weight: bold;
    font-family: inherit;
    text-align: center;
    font-size: 14px;
}

/* --------------HEADER----------------------------------------------------------------------------------------------------------- */
/* MENUS */
.top-menu{
    top: 0;
    height: 60px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--accent1-light-purple-color);
    color: var(--main-text-color);
    position: fixed;
    z-index: 1000;
}
.left-side-top-menu{
    padding-left: 20px;
    font-size: 35px;
}
.menu-logo{
    display: none;
}
.top-menu-icon{
    font-size: 18px;
    cursor: pointer;
}
.search-stack{
    display: flex;
    align-items: center;
}
.search-bar{
    width: 200px;
    outline: none;
    border: 1.5px solid var(--accent-medium-purple-color);
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    color: #9f9cb6;
    background-color: var(--accent-medium-purple-color);
    margin-left: 5px;
}
.search-bar::placeholder{
    color: #9f9cb6;
}
.right-side-top-menu{
    padding-right: 20px;
    display: flex;
}
.right-side-top-menu .top-menu-icon{
    margin: 0px 10px;
}
.top-icon-stack .tooltip {
    position: absolute;
    background-color: #252440;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    display: none;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.top-icon-stack:hover .tooltip {
    display: block;
}
#create-tooltip{
    transform: translateX(-30%) translateY(5px);
}
#create-event-tooltip{
    transform: translateX(-25%) translateY(5px);
}
#bell-tooltip{
    transform: translateX(-25%) translateY(5px);
}
#profile-tooltip{
    transform: translateX(-16%)translateY(5px);
}
.side-menu{
    left: 0;
    height: 100vh;
    width: 60px;
    margin-top: 76px;
    background-color: var(--accent1-light-purple-color);
    color: var(--main-text-color);
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}
.side-menu-icon{
    font-size: 18px;
    margin: 20px 0px;
    cursor: pointer;
}
.side-icon-stack .tooltip {
    position: absolute;
    background-color: #252440;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    display: none;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.side-icon-stack:hover .tooltip {
    display: block;
}
#home-tooltip{
    transform: translateX(-25%) translateY(-18px);
}
#forum-tooltip{
    transform: translateX(-33%) translateY(-18px);
}
#meeting-forums-tooltip{
    transform: translateX(-38%) translateY(-18px);
}
#bookmark-tooltip{
    transform: translateX(-40%) translateY(-18px);
}
#message-tooltip{
    transform: translateX(-33.5%) translateY(-18px);
}
#member-tooltip{
    transform: translateX(-36%) translateY(-18px);
}
#ticket-tooltip{
    transform: translateX(-32%) translateY(-18px);
}
#metric-tooltip{
    transform: translateX(-32%) translateY(-18px);
}
#auth-tooltip{
    transform: translateX(-32%) translateY(-18px);
}
#logout-tooltip{
    transform: translateX(-30%) translateY(-18px);
}

/* --------------MAIN CONTENT---------------------------------------------------------------------------------------------------- */
#main-content{
    position: relative;
    top: 76px;
    margin-left: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--page-color);
    color: var(--main-text-color);
}
#pre-content{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--page-color);
}
/* --------------NOTIFICATIONS---------------------------------------------------------------------------------------------------- */
#notifications-list{
    display: flex;
    flex-direction: column;
    width: 60vw;
}
.notification-header{
    color: var(--main-text-color);
    font-size: 30px;
    margin: 30px 0px 10px 0px;
}
.notification-item{
    display: flex;
    flex-direction: column;
    border: 2px solid var(--accent-medium-purple-color);
    border-radius: 15px;
    padding: 8px;
    margin: 15px 0;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
    cursor: pointer;
}
.notification-title{
    font-size: 22px;
    font-weight: bold;
    margin: 0;
}
.notification-content{
    font-size: 16px;
    color: var(--accent-text-color);
    margin-bottom: 8px;
}
.notification-time{
    color: var(--accent-text-color);
    margin: 0;
    font-size: 14px;
}
.notification-event-name{
    color: var(--accent-text-color);
    margin-bottom: 0;
}
.notification-event-description{
    color: var(--accent-text-color);
    margin: 0 0 8px 0;
}

/* --------------HOME PAGE---------------------------------------------------------------------------------------------------- */
.welcome-section{
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 60px 0 30px 0;
    padding: 15px;
    background-color: var(--accent-medium-purple-color);
    border: 2px solid var(--accent-medium-purple-color);
    border-radius: 15px;
}
.welcome-heading{
    font-size: 36px;
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
}
.welcome-content{
    text-align: center;
    font-size: 18px;
    padding: 15px;
    color: var(--accent-text-color);
}
.welcome-intro{
    margin-top: 10px;
}
.welcome-outro{
    margin-bottom: 0;
}

.new-and-announcement-section{
    width: 60vw;
    margin: 30px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.individual-section{
    width: 20vw;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background-color: var(--accent2-light-purple-color);
    border: 2px solid var(--accent2-light-purple-color);
    border-radius: 15px;
    cursor: pointer;
}
.individual-heading{
    display: flex;
    align-items: center;
    font-size: 18px;
}
.individual-heading:hover{
    color: #9f9cb6;
}
.p-stack{
    text-align: center;
}
.individual-heading p{
    margin: 0 10px;
}
.right-side-icon{
    transform: scaleX(-1);
}
.event-section{
    width: 60vw;
    margin: 30px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
/* Trending Forums */
.trending-section{
    width: 80vw;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    background-color: var(--accent-medium-purple-color);
    border-radius: 15px;
}
.trending-heading{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 15px;
    height: 50px;
    background-color: var(--accent2-light-purple-color);
    border: 2px solid var(--accent2-light-purple-color);
    border-radius: 15px 15px 0 0;
}
.trending-heading p{
    margin: 0 10px;
}
#trending-forums{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}
.trending-forum-item{
    display: flex;
    flex-direction: column;
    width: 80%;
    border: 2px solid var(--accent-dark-purple-color);
    border-radius: 15px;
    padding: 12px;
    margin: 5px 0;
    background-color: var(--accent-dark-purple-color);
    color: var(--main-text-color);
    cursor: pointer;
}
/* Abandoned Forums */
.abandoned-section{
    width: 80vw;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    background-color: var(--accent-medium-purple-color);
    border-radius: 15px;
}
.abandoned-heading{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 15px;
    height: 50px;
    background-color: var(--accent2-light-purple-color);
    border: 2px solid var(--accent2-light-purple-color);
    border-radius: 15px 15px 0 0;
}
.abandoned-heading p{
    margin: 0 10px;
}
#abandoned-forums{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}
.abandoned-forum-item{
    display: flex;
    flex-direction: column;
    width: 80%;
    border: 2px solid var(--accent-dark-purple-color);
    border-radius: 15px;
    padding: 12px;
    margin: 5px 0;
    background-color: var(--accent-dark-purple-color);
    color: var(--main-text-color);
    cursor: pointer;
}

/* --------------FORUMS---------------------------------------------------------------------------------------------------- */
.forum-item{
    display: flex;
    flex-direction: column;
    width: 80vw;
    border: 2px solid var(--accent-medium-purple-color);
    border-radius: 15px;
    padding: 12px;
    margin: 45px 0;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
    cursor: pointer;
}
.forum-title{
    font-size: 22px;
    font-weight: bold;
    margin: 0;
}
.forum-description{
    font-size: 16px;
}
.forum-description a{
    text-decoration: underline;
}
.forum-category{
    font-size: 14px;
    color: var(--accent-text-color);
    margin-bottom: 5px;
    margin-right: 5px;
}
.forum-bottom{
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
}
.author-and-date{
    display: flex;
    align-items: center;
    color: var(--accent-text-color);
    font-size: 14px;
}
.forum-author{
    margin: 0 15px 0 0;
    font-weight: bold;
}
.forum-date{
    margin: 0;
}
.bottom-of-forum{
    display: flex;
    justify-content: space-between;
}
.edit-forum .edit-icon{
    color: var(--accent-text-color);
}
.meeting-forum-date{
    margin: 0;
    font-weight: bold;
    color: var(--accent-text-color);
}
.meeting-forum-time{
    margin: 5px 0 0 0;
    color: var(--accent-text-color);
}
.bookmark-stack .forum-tooltip{
    display: none;
    position: absolute;
    transform: translateX(-40%) translateY(10px);
    background-color: #252440;
    color: white;
    font-size: 12px;
    padding: 10px;
    border-radius: 5px;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.bookmark-stack:hover .forum-tooltip{
    display: block;
}
.forum-pin{
    color: var(--accent-text-color);
    cursor: pointer;
}
.forum-pin:hover{
    color: #716e93;
}
#forum-search{
    margin-top: 30px;
    width: 80vw;
    height: 30px;
    padding: 5px 0 5px 15px;
    font-size: 16px;
    outline: none;
    background-color: var(--top-toolbar-color);
    border: none;
    border-bottom: 2px solid var(--accent-text-color);
    border-radius: 15px 15px 0 0;
    color: var(--accent-text-color);
}
#forum-search::placeholder{
    color: var(--accent-text-color);
}
#forum-suggestions{
    background-color: var(--top-toolbar-color);
}
.forum-suggestion-item{
    width: 80vw;
    font-size: 16px;
    color: var(--main-text-color);
    border-bottom: 1px solid var(--main-text-color);
    padding: 10px 0px 10px 16px;
    cursor: pointer;
}
.forum-suggestion-item:hover{
    color: #8885a5;
}
#category-buttons-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80vw;
    padding: 15px;
}
#category-buttons-container .category-button{
    background-color: var(--post-content-color);
    border: 1.5px solid var(--post-content-color);
    color: var(--main-text-color);
}
#category-buttons-container .category-button.selected{
    background-color: #4a4968 !important;
    border: 1.5px solid #4a4968 !important;
    color: white;
    font-weight: normal;
}

/* NEW / ANNOUNCEMENT FORUMS */
.new-heading{
    display: flex;
    font-size: 30px;
    color: var(--main-text-color);
    margin-top: 30px;
}
.new-heading .left-side-icon{
    margin-right: 10px;
}
.new-heading .right-side-icon{
    margin-left: 10px;
}
.new-heading .top-icon-stack{
    margin-left: 20px;
    margin-top: -4px;
}
.new-heading .top-icon-stack #create-tooltip{
    transform: translateX(-40%) translateY(5px);
}

/* CREATE FORUMS */
#create-forum-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 50px;
    width: 60vw;
    padding: 15px;
    margin-bottom: 100px;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
}
.create-forum{
    font-size: 30px;
}
#create-forum-form{
    display: flex;
    flex-direction: column;
    width: 100%;
}
#create-forum-form .top-tool-bar{
    background-color: var(--post-content-color) !important;
    border-bottom: 1px solid #333354;
}
#create-forum-form .toolbar-btn.active{
    background-color: var(--light-top-toolbar-active-color);
}
.forum-title-title{
    margin-bottom: 5px;
    font-size: 18px;
}
#forum-title-input{
    margin-bottom: 15px;
    outline: none;
    border: 1.5px solid var(--post-content-color);
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: var(--post-content-color);
    color: var(--dark-text-color);
    font-size: 16px;
}
#forum-title-input::placeholder{
    font-size: 16px;
    color: #5b5982;
}
.forum-description-title{
    margin-bottom: 5px;
    font-size: 18px;
}
#forum-description-input{
    height: 150px;
    margin-bottom: 15px;
    outline: none;
    border: 1.5px solid var(--post-content-color);
    border-radius: 0 0 15px 15px;
    padding: 5px 5px 5px 10px;
    background-color: var(--post-content-color);
    color: var(--dark-text-color);
    font-size: 16px;
    font-family: inherit;
}
#forum-description-input:empty:before{
    content: attr(placeholder);
    color: #5b5982;
}
#forum-description-input:empty{
    content: attr(placeholder);
    color: #5b5982;
}
.forum-category-title{
    margin-bottom: 5px;
    font-size: 18px;
}
#categories-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 15px;
}
.category-button{
    padding: 5px;
    margin: 5px;
    border: 1.5px solid var(--post-content-color);
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--post-content-color);
    color: var(--dark-text-color);
    font-weight: bold;
    font-family: inherit;
    font-weight: normal;
}
.category-button.selected{
    background-color: var(--accent2-light-purple-color);
    border: 1.5px solid var(--accent2-light-purple-color);
    color: white;
    font-weight: normal;
}
.post-button-container{
    display: flex;
    justify-content: flex-end;
}
#post-forum{
    width: 75px;
    padding: 5px;
    border: 1.5px solid var(--forum-button-color);
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
    font-weight: bold;
    font-family: inherit;
    font-size: 16px;
}
#update-forum{
    width: 75px;
    padding: 5px;
    border: 1.5px solid var(--forum-button-color);
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
    font-weight: bold;
    font-family: inherit;
    font-size: 16px;
}

/* SCREEN LOADER */
.screen-loader{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}
.loader-box{
  background: var(--accent-medium-purple-color);
  color: var(--accent-text-color);
  padding: 20px 24px;
  border-radius: 14px;
  min-width: 220px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.spinner{
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: var(--accent-text-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loader-text{
    margin: 0;
    font-weight: 600; 
}
@keyframes spin { to { transform: rotate(360deg); } }


/* USER FORUMS */
.forum-owner{
    margin-top: 50px;
    font-size: 36px;
    color: white;
    font-weight: bold;
}

/* --------------POSTS---------------------------------------------------------------------------------------------------- */
#posts-list{
    width: 80vw;
    margin-bottom: 137px;
}
.post-item{
    display: flex;
    flex-direction: column;
    width: 60vw;
    padding: 8px;
    margin: 25px 0;
    color: var(--main-text-color);
}
.user-post{
    background-color: var(--user-post-color);
    border: 2px solid var(--user-post-color);
    color: var(--user-post-main-text-color) !important;
    border-radius: 15px 15px 0 15px;
    margin-left: auto !important;
}
.other-user-post{
    background-color: var(--accent-medium-purple-color);
    border: 2px solid var(--accent-medium-purple-color);
    border-radius: 15px 15px 15px 0px;
}
.post-content{
    margin-bottom: 8px;
    font-size: 16px;
}
.post-content a{
    text-decoration: underline;
}
.mention{
    color: var(--accent-text-color);
    font-weight: bold; 
    cursor: pointer;
}
.post-meta{
    display: flex;
    justify-content: space-between;
}
.post-author{
    color: var(--accent-text-color);
    font-weight: bold;
    margin: 0 8px 0 0;
    cursor: pointer;
}
.user-post .post-author{
    color: var(--user-post-sub-text-color) !important;
}
.post-date{
    color: var(--accent-text-color);
}
.user-post .post-date{
    color: var(--user-post-sub-text-color) !important;
}
.post-reply{
    color: var(--accent-text-color);
    cursor: pointer;
}
.post-reply .reply-tooltip{
    position: absolute;
    transform: translateX(-30%) translateY(10px);
    background-color: #252440;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    display: none;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.post-reply:hover .reply-tooltip{
    display: block;
}
.reply-to-content{
    position: relative;
    left: -10px;
    top: -10px;
    width: 100%;
    padding: 8px;
    background-color: #1c1e41;
    border: 2px solid #1c1e41;
    border-radius: 15px 15px 0 0;
    margin-bottom: -20px;
    opacity: 0.6;
}
.reply-preview-content{
    display: flex;
    flex-direction: column;
    padding: 8px;
    font-size: 16px;
    background-color: var(--accent-medium-purple-color);
    color: white;
}
#cancel-reply-btn{
    float: inline-end;
    color: var(--accent-text-color);
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    font-family: inherit;
}
.user-post:hover .edit-icon{
    display: block !important;
    color:var(--user-post-sub-text-color);
    font-size: 14px;
    cursor: pointer;
}

/* CREATE POSTS */
#post-form{
    width: 80vw;
    background-color: var(--post-form-color);
    padding: 8px;
    border-radius: 15px;
    position: fixed;
    bottom: 0;
    z-index: 1000;
}
#post-content{
    background-color: var(--post-content-color);
    padding: 5px 15px;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    overflow-y: scroll;
    resize: none;
    height: auto;
    min-height: 50px;
    max-height: 300px;
    transition: height 0.2s ease;
}
#suggestions{
    position: fixed;
    z-index: 1001;
    width: 200px;
    background-color: var(--top-toolbar-color);
    padding: 15px;
    border-radius: 15px;
    height: 60px;
    margin-top: -188px;
    overflow-y: scroll;
}
.suggestion-item{
    font-size: 16px;
    color: var(--main-text-color);
    border-bottom: 1px solid var(--main-text-color);
    padding: 5px;
    cursor: pointer;
}
.suggestion-item:hover{
    color: #8885a5;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: #4a4968; 
    border-radius: 20px;
}  
.top-tool-bar{
    background-color: var(--top-toolbar-color);
    border-radius: 15px 15px 0 0;
    padding: 5px;
}
.bottom-tool-bar{
    display: flex;
    justify-content: space-between;
    background-color: var(--post-content-color);
    border-top: 1px solid var(--top-toolbar-color);
    border-radius: 0 0 15px 15px;
    padding: 5px;
}
.toolbar-btn{
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333354;
    cursor: pointer;
}
.file-link{
    display: flex;
    align-items: center;
    height: 40px;
    margin: 10px;
    padding: 0 10px;
    border-radius: 10px;
    background-color: #8885a5;
    color: #333354;
    font-weight: bold;
}
.file-link:hover{
    color: #4a4968;
}
.file-link i{
    font-size: 20px;
    margin-right: 10px;
}
.submit-buttons{
    display: flex;
}
.private-tooltip{
    display: none;
    position: absolute;
    transform: translateX(-40%) translateY(-40px);
    background-color: #252440;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    display: none;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.private-msg:hover .private-tooltip{
    display: block;
}


/* --------------CONVERSATIONS------------------------------------------------------------------------------------------------------- */
.conversation-heading{
    color: var(--main-text-color);
    font-size: 30px;
}
.conversation-item{
    display: flex;
    flex-direction: column;
    width: 80vw;
    border: 2px solid var(--accent-medium-purple-color);
    border-radius: 15px;
    padding: 8px;
    margin: 25px 0;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
    cursor: pointer;
}
.conversation-username{
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 16px 0;
}
.conversation-sender{
    margin: 0 0 5px 0;
    color: var(--accent-text-color);
}
.conversation-preview{
    margin: 0 0 8px 0;
}
.conversation-time{
    margin: 0;
    color: var(--accent-text-color);
    font-size: 14px;
}
.new-convo-stack{
    position: relative;
    top: 33px;
    left: 30vw;
}
.create-convo-btn{
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--main-text-color);
    font-size: 28px;
    cursor: pointer;
}
.new-convo-stack .convo-tooltip{
    position: absolute;
    transform: translateX(-40%);
    background-color: #252440;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    display: none;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.new-convo-stack:hover .convo-tooltip{
    display: block;
}
/* CREATE NEW CONVERSATION */
#user-list-heading{
    color: var(--main-text-color);
    font-size: 30px;
    margin: 30px 0px;
}
#user-list{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 60vw;
}
.user-item{
    display: flex;
    align-items: center;
    margin: 2.5px 0;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
    height: 50px;
    padding-left: 15px;
    cursor: pointer;
    font-size: 16px;
}
.user-item:hover{
    color: var(--accent-text-color);
}

/* --------------MESSAGES---------------------------------------------------------------------------------------------------- */
.conversation-person{
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100%;
    padding: 30px 0 10px 0;
    background-color: var(--page-color);
    color: #8885a5;
    font-size: 30px;
    font-weight: bold;
    z-index: 10;
}
#chat-area{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#message-list{
    width: 80vw;
    margin: 78px 0 137px 0;
}
.message-content{
    font-size: 16px;
    margin: 0 0 8px 0;
}
.message-content a{
    text-decoration: underline;
}
.message-sender{
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-text-color);
    cursor: pointer;
    margin: 0 8px 0 0;
}
.message-timestamp{
    margin: 0;
    color: var(--accent-text-color);
    font-size: 14px;
}
.my-message{
    background-color: var(--user-post-color);
    border: 2px solid var(--user-post-color);
    border-radius: 15px 15px 0 15px;
    margin-left: auto;
}
.my-message .message-sender{
    color:var(--user-post-sub-text-color) !important;
}
.my-message .message-timestamp{
    color:var(--user-post-sub-text-color) !important;
}
.my-message:hover .edit-icon{
    display: block !important;
    color:var(--user-post-sub-text-color);
    font-size: 14px;
    cursor: pointer;
}
.edit-message .edit-icon:hover .edit-tooltip{
    display: block !important;
    position: absolute;
    transform: translateX(-30%) translateY(10px);
    background-color: #252440;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.cancel-edit-btn{
    width: 100%;
    background-color: transparent;
    outline: none;
    border: none;
    color: white;
    margin-top: 10px;
    font-size: 16px;
    text-align: right;
    font-weight: bold;
    font-family: inherit;
}
.edited-tag{
    font-size: 14px;
    color: var(--accent-text-color);
}
.other-message{
    background-color: var(--accent-medium-purple-color);
    border: 2px solid var(--accent-medium-purple-color);
    border-radius: 15px 15px 15px 0px;
}

/* CREATE MESSAGE */
#send-message-form{
    width: 80vw;
    background-color: var(--post-form-color);
    padding: 8px;
    border-radius: 15px;
    position: fixed;
    bottom: 0;
    z-index: 1000;
}
#message-content{
    background-color: var(--post-content-color);
    padding: 5px 15px;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    overflow-y: scroll;
    resize: none;
    height: auto;
    min-height: 50px;
    max-height: 300px;
    transition: height 0.2s ease;
}


/* --------------BOOKMARKS---------------------------------------------------------------------------------------------------- */
.bookmark-heading{
    font-size: 30px;
    color: var(--main-text-color);
    margin-top: 30px;
}
.no-bookmarks{
    font-size: 24px;
    color: var(--main-text-color);
}


/* --------------PROFILES------------------------------------------------------------------------------------------------------- */
/* USER PROFILE */
.update-profile-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 50px;
    width: 40vw;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
    font-size: 16px;
    margin-bottom: -150px;
}
.your-profile-heading{
    font-size: 30px;
    margin: 15px 0;
}
#update-profile-form{
    width: 100%;
}
.non-edit-stack{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.stack-header{
    margin-right: 20px;
    font-weight: bold;
}
.user-info{
    color: var(--accent-text-color);
}
.edit-stack{
    display: flex;
    flex-direction: column;
}
.edit-stack p{
    margin: 5px 0 36px 0;
    color: var(--accent-text-color);
}
#email{
    margin: 5px 15px 0 0;
}
.show-email{
    margin: 5px 15px 0 0 !important;
}
.edit-stack input{
    margin: 10px 0 36px 0;
    outline: none;
    border: 1.5px solid var(--post-content-color);
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: var(--post-content-color);
    color: #333354;
    font-size: 16px;
}
.edit-stack input::placeholder{
    color: #5b5982;
}
.mode-toggle{
    display: flex;
    align-items: center;
    margin-bottom: 36px;
}
.email-toggle{
    display: flex;
    align-items: center;
    margin-bottom: 36px;
}
.email-toggle-icon{
    color: var(--accent-text-color);
    font-size: 20px;
    margin-top: 5px;
    cursor: pointer;
}
#bio{
    height: 150px;
    margin: 10px 0 20px 0;
    outline: none;
    border: 1.5px solid var(--post-content-color);
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: var(--post-content-color);
    color: #333354;
    font-size: 16px;
    font-family: inherit;
}
#bio::placeholder{
    color: #5b5982;
}
.update-button-container{
    display: flex;
    justify-content: flex-end;
}
#update-profile{
    padding: 5px 15px;
    border: 1.5px solid var(--post-content-color);
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--post-content-color);
    color: #333354;
    font-weight: bold;
    font-family: inherit;
    font-size: 16px;
    margin-bottom: 5px;
}

/* PUBLIC PROFILE */
.profile-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 20vh;
    width: 40vw;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
    font-size: 16px;
}
.profile-preview-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 260px;
    width: 40vw;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
    font-size: 16px;
    margin-bottom: 310px;
}
.profile-info{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#public-username{
    font-size: 30px;
    font-weight: bold;
    margin: 15px 0 0 0;
}
#full-name{
    font-weight: bold;
    color: var(--member-text-color);
    margin: 5px 5px 0 5px;
}
#public-organization{
    color: var(--member-text-color);
    margin: 0 5px 5px 5px;
}
#public-email{
    color: var(--member-text-color);
    margin: 0 5px 5px 5px;
}
.message-btn-area{
    display: flex;
    justify-content: center;
}
#message-btn{
    border: 1.5px solid var(--post-content-color);
    border-radius: 15px;
    background-color: var(--post-content-color);
    color: #333354;
    font-size: 14px;
    cursor: pointer;
    width: fit-content;
    margin: 5px 0 15px 0;
    padding: 3px 10px;
}
#public-bio{
    width: 80%;
    text-align: center;
    padding: 15px 10px;
    margin: 0 0 15px 0;
    border: 1.5px solid var(--post-content-color);
    border-radius: 15px;
    background-color: var(--post-content-color);
    color: #333354;
}
.thread-post-area{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom: 15px;
}
.thread-post-stack{
    display: flex;
    flex-direction: column;
    align-items: center; 
    cursor: pointer;
}
.thread-post-stack p{
    margin: 0;
    color: var(--member-text-color);
}
#threads{
    font-size: 22px;
    font-weight: bold;
}
#posts{
    font-size: 22px;
    font-weight: bold;
}

/* --------------MEMBERS PAGE---------------------------------------------------------------------------------------------------- */
#members-search{
    margin-top: 25px;
    width: 60vw;
    height: 30px;
    padding: 5px 0 5px 15px;
    font-size: 16px;
    outline: none;
    background-color: var(--top-toolbar-color);
    border: none;
    border-bottom: 2px solid var(--accent-text-color);
    border-radius: 15px 15px 0 0;
    color: var(--accent-text-color);
}
#members-search::placeholder{
    color: var(--accent-text-color);
}
.no-members{
    font-size: 18px;
    color: white;
}
.member-item{
    display: flex;
    flex-direction: column;
    width: 60vw;
    border: 2px solid var(--accent-medium-purple-color);
    border-radius: 15px;
    padding: 8px;
    margin: 25px 0;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
    cursor: pointer;
}
.member-username{
    font-size: 22px;
    font-weight: bold;
    margin: 0;
}
.member-full-name{
    font-size: 16px;
    margin: 5px 0 0 0;
    color: var(--member-text-color);
}
.member-organization{
    font-size: 16px;
    margin: 5px 0 0 0;
    color: var(--member-text-color);
}

/* --------------FORM/KEYBOARD---------------------------------------------------------------------------------------------------- */
#emoji-picker{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 150px;
    position: fixed;
    margin-top: -233px;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--top-toolbar-color);
}
#forum-emoji-picker{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 150px;
    position: fixed;
    margin-top: -12px;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--top-toolbar-color);
}
.emoji{
    cursor: pointer;
}
.emoji:hover{
    opacity: 0.6;
}
.toolbar-btn.active{
    background-color: var(--top-toolbar-active-color);
}


/* --------------EVENTS---------------------------------------------------------------------------------------------------- */
/* CREATE EVENT */
#create-event-form{
    display: flex;
    flex-direction: column;
    position: relative;
    top: 50px;
    width: 60vw;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
    font-size: 16px;
}
#create-event-form .top-tool-bar{
    background-color: var(--post-content-color) !important;
    border-bottom: 1px solid #333354;
    margin-top: 10px;
}
#create-event-form .toolbar-btn.active{
    background-color: var(--light-top-toolbar-active-color);
}
.create-event{
    font-size: 30px;
    margin: 15px 0;
    text-align: center;
}
.event-stack{
    display: flex;
    flex-direction: column;
}
.event-stack input{
    margin: 10px 0 36px 0;
    outline: none;
    border: 1.5px solid var(--forum-button-color);
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
    font-size: 16px;
}
#event-description{
    height: 150px;
    margin-bottom: 36px;
    outline: none;
    border: 1.5px solid var(--forum-button-color);
    border-radius: 0 0 15px 15px;
    padding: 5px 5px 5px 10px;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
    font-size: 16px;
    font-family: inherit;
}
#event-description:empty:before{
    content: attr(placeholder);
    color: #5b5982;
}
#event-description:empty{
    content: attr(placeholder);
    color: #5b5982;
}
.event-stack input::placeholder{
    font-size: 16px;
    color: #5b5982;
}
.time-slot input{
    margin: 10px 0;
    outline: none;
    border: 1.5px solid var(--forum-button-color);
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
    font-size: 16px;
    font-family: inherit;
}
.duration-input{
    margin: 10px 0;
    outline: none;
    border: 1.5px solid var(--forum-button-color);
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
    font-size: 16px;
    font-family: inherit;
    width: 50px;
}
.remove-slot{
    background-color: transparent;
    color: var(--forum-button-color);
    cursor: pointer;
    border: none;
    outline: none;
}
#add-time-slot{
    margin: 10px 0 36px ;
    padding: 5px 10px;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
    cursor: pointer;
    border: none;
    border-radius: 15px;
    outline: none;
    font-weight: bold;
    font-family: inherit;
    width: fit-content;
}
.search-members{
    padding: 10px;
    margin-top: 10px;
    border-radius: 15px 15px 0 0;
    background-color: var(--forum-button-color);
    color: #1c1e41;
    border: none;
    outline: none;
}
.search-members::placeholder{
    font-size: 16px;
    color: #5b5982;
}
#invite-users-checkboxes{
    height: 100px;
    overflow-y: scroll;
    margin: 0 0 15px 0;
    padding: 5px 0 10px 5px;
    border-radius: 0 0 15px 15px;
    background-color: var(--forum-button-color);
    color: #1c1e41;
}
#invite-users-checkboxes label{
    display: flex;
    align-items: center;
}
#invite-users-checkboxes input[type="checkbox"]{
    cursor: pointer;
    outline: none;
}
#invite-users-checkboxes input[type="checkbox"]:checked {
    background-color: #333354 !important;
    border-color: #333354 !important;
}
#invite-users-checkboxes input[type="checkbox"]:checked::after {
    content: "✔";
    font-size: 10px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 13px;
    width: 13px;
    display: inline-block;
    color: white !important;
    text-align: center;
    background-color: #333354 !important;
    border-radius: 2px;
    cursor: pointer;
}
.create-event-btn-area{
    width: 100%;
}
.create-event-btn{
    padding: 5px 10px;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
    cursor: pointer;
    border: none;
    border-radius: 15px;
    outline: none;
    font-weight: bold;
    font-family: inherit;
    font-size: 16px;
    width: fit-content;
    float: inline-end;
}
#user-events{
    margin: 150px 0 75px 0;
}
.event-list-title{
    font-size: 30px;
    margin-bottom: -60px;
}
#event-list .availability-summary-area{
    margin: 50px 0;
}

/* AVAILABILITY POLL */
#availability-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 50px;
    width: 60vw;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
}
.event-title{
    font-size: 30px;
}
.event-description{
    font-size: 20px;
    margin-bottom: 15px;
}
.event-description a{
    text-decoration: underline;
}
.event-instructions{
    margin-bottom: 10px;
    color: var(--accent-text-color);
}
.availability-form-data{
    width: 100%;
    margin-bottom: 15px;
    border-radius: 15px;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
}
.invitee-list{
    margin: 0 20px;
}
.event-time-slot{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0;
}
.event-date-time-area{
    text-align: left;
    margin-left: 20px;
}
.event-date{
    margin: 0;
    font-weight: bold;
}
.event-time{
    margin: 0;
}
.availability-right-half{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.availability-btn-area{
    display: flex;
}
.availability-btn{
    height: 25px;
    width: 25px;
    cursor: pointer;
    border: 1px solid #333354;
    color: #333354;
    background-color: white;
    outline: none;
}
#available-btn{
    border-radius: 15px 0 0 15px;
}
#maybe-available-btn{
    border-radius: 0 15px 15px 0;
    padding-right: 20px;
}
.availability-btn.selected{
    color: white;
    background-color: #333354;
}
.availability-results{
    margin-right: 20px;
}
.yes-and-no{
    margin: 5px 0 0 0;
}
.submit-availability-btn-area{
    width: 100%;
}
.submit-availability-btn{
    float: inline-end;
    padding: 5px 10px;
    border: 1.5px solid var(--forum-button-color);
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
    font-weight: bold;
    font-family: inherit;
    font-size: 16px;
}

/* AVAILABILITY RESULTS */
.availability-summary-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 50px;
    width: 60vw;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
}
#event-details{
    text-align: center;
}
#availability-summary{
    width: 100%;
    margin-bottom: 15px;
    border-radius: 15px;
    background-color: var(--forum-button-color);
    color: var(--dark-text-color);
}
.availability-summary-area .event-time-slot{
    cursor: pointer;
}
.edit-event{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.edit-event-btn{
    padding: 0 20px 10px;
    cursor: pointer;
}


/* --------------TICKETS---------------------------------------------------------------------------------------------------- */
/* Ticket Home Page */
.ticket-page-heading{
    font-size: 30px;
    margin: -60px 0 30px 0;
}
#ticket-section{
    width: 80vw;
}
.tickets-heading{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 20px;
    padding: 15px;
    height: 75px;
    background-color: var(--accent2-light-purple-color);
    border: 2px solid var(--accent2-light-purple-color);
    border-radius: 15px 15px 0 0;
}
#agent-tickets-title, #unassigned-tickets-title, #all-tickets-title{
    text-align: center;
}
.tickets-heading p{
    margin: 0 10px -15px 0;
}
#ticket-search{
    margin-top: 25px;
    width: 60vw;
    height: 30px;
    padding: 5px 0 5px 15px;
    font-size: 16px;
    outline: none;
    background-color: var(--accent-medium-purple-color);
    border: none;
    border-radius: 10px;
    color: var(--main-text-color);
}
#ticket-search::placeholder{
    color: var(--main-text-color);
}
.no-tickets{
    font-size: 16px;
    color: var(--main-text-color);
}
.ticket-legend{
    display: grid;
    grid-template-columns: 0.25fr 1fr 1fr 1fr 0.75fr 0.75fr;
    font-size: 16px;
    width: 80%;
    margin-top: 30px;
}
#agent-legend{
    grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 0.75fr 1fr;
}
#all-legend{
    grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 1fr 0.75fr 0.75fr;
}
#org-legend{
    grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 0.75fr 0.75fr;
}
.tickets-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    overflow-y: scroll;
    min-height: 150px;
    max-height: 400px;
}
.metrics-body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 15px;
}
@media (max-width: 1000px) {
    .metrics-body {
        grid-template-columns: 1fr;
    }
}
canvas{
    background-color: var(--accent-dark-purple-color);
    padding: 15px;
    margin: 15px;
    border-radius: 15px;
    height: auto;
}
.ticket-item{
    display: flex;
    flex-direction: column;
    width: 80%;
    border: 2px solid var(--accent-dark-purple-color);
    border-radius: 15px;
    padding: 12px;
    margin-bottom: 10px;
    background-color: var(--accent-dark-purple-color);
    color: var(--main-text-color);
    cursor: pointer;
}
.ticket-details{
    display: grid;
    grid-template-columns: 0.25fr 1fr 1fr 1fr 0.75fr 0.75fr;
}
#agent-details{
    grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 0.75fr 1fr;
}
#all-details{
    grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 1fr 0.75fr 0.75fr;
}
#org-details{
    grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 0.75fr 0.75fr;
}
.column{
    padding: 0 10px;
    cursor: pointer;
}
.sorted-column{
    font-weight: bold;
    text-decoration: underline;
}
.priority-tooltip{
    display: none;
    position: relative;
    width: fit-content;
    padding: 5px 10px;
    margin: 0 0 0 20px;
    top: -20px;
    background-color: #5b5982;
    color: white;
    pointer-events: none;
    border-radius: 5px;
    font-size: 12px;
}
.priority-div:hover .priority-tooltip{
    display: flex;
}
.priority-div{
    margin: 16px 0 16px 15px;
    height: 20px;
}

/* Ticket Post Page */
#ticket-info{
    display: flex;
    flex-direction: column;
    width: 80vw;
    border: 2px solid var(--accent-medium-purple-color);
    border-radius: 15px;
    padding: 20px;
    margin: 45px 0;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
}
#ticket-info p{
    margin: 0;
}
.num-and-sub{
    display: flex;
    justify-content: space-between;
}
.num-and-sub p{
    font-size: 22px;
}
.ticket-description{
    margin: 15px 0 25px 0 !important;
}
.ticket-job{
    margin-bottom: 10px !important;
}
.status-area{
    display: flex;
    margin: 30px 0 10px 0 !important;
    color: var(--bottom-ticket-info-color);
}
.admin-status-stack{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.bottom-of-ticket{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: var(--bottom-ticket-info-color);
    margin-top: 15px;
}
.cc-user-link{
    color: var(--bottom-ticket-info-color) !important;
}
#status-dropdown{
    outline: none;
    border: 1.5px solid var(--status-dropdown-color);
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: var(--status-dropdown-color);
    color: var(--status-dropdown-text-color);
    font-size: 15px;
}
.ticket-client{
    cursor: pointer;
    margin-top: 15px !important;
}
#ticket-cc{
    margin-top: 5px !important;
}
.separator{
    width: 100%;
    border-bottom: 2px solid var(--accent-text-color);
    margin: 5px 0 !important;
}
.ticket-agent{
    margin-bottom: 5px !important;
    cursor: pointer;
}
#primary-agent-list{
    margin-bottom: 10px;
}
#co-agent-list{
    margin-bottom: 10px;
}
.agent-form input[type="checkbox"]{
    cursor: pointer;
    outline: none;
}
.checkbox-div{
    display: flex;
    align-items: center;
}
.agent-form input[type="radio"]{
    cursor: pointer;
}
.agent-form input[type="radio"]:checked {
    background-color: var(--accent-text-color) !important;
    border-color: var(--accent-text-color) !important;
}
.agent-form input[type="radio"]:checked::after {
    content: "•";
    font-size: 15px;
    font-weight: bold;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 13px;
    width: 13px;
    display: inline-block;
    color: #333354 !important;
    text-align: center;
    background-color: var(--accent-text-color) !important;
    border-radius: 15px;
    cursor: pointer;
}
.agent-form input[type="checkbox"]:checked {
    background-color: var(--accent-text-color) !important;
    border-color: var(--accent-text-color) !important;
}
.agent-form input[type="checkbox"]:checked::after {
    content: "✔";
    font-size: 10px;
    font-weight: bold;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 13px;
    width: 13px;
    display: inline-block;
    color: #333354 !important;
    text-align: center;
    background-color: var(--accent-text-color) !important;
    border-radius: 2px;
    cursor: pointer;
}
.assign-agent-button{
    background-color: var(--ticket-button-color);
    color: var(--ticket-button-text-color);
    border: none;
    border-radius: 5px;
    outline: none;
    padding: 2.5px 5px;
    margin-left: 10px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
}
.agent-button{
    background-color: var(--ticket-button-color);
    color: var(--main-text-color);
    border: none;
    border-radius: 5px;
    outline: none;
    padding: 2.5px 5px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
}
.big-priority-div{
    display: flex;
    align-items: center;
}
.little-priority-div{
    display: flex;
    height: 20px;
}
.little-priority-div i{
    font-size: 20px;
    margin-left: 5px;
}
.ticket-priority-tooltip{
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 0 10px;
    margin-left: 5px;
    background-color: var(--ticket-button-color);
    color: var(--ticket-button-text-color);
    pointer-events: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;

}
/* Ticket List */
#ticket-posts-list{
    width: 80vw;
    margin-bottom: 137px;
}
.ticket-post-item{
    display: flex;
    flex-direction: column;
    width: 60vw;
    padding: 8px;
    margin: 25px 0;
    color: var(--main-text-color);
}
.private-post-item{
    background-color: #612551 !important;
    border: 2px solid #612551;
    color: #ffffff !important;
}
.private-post-item .post-author, .private-post-item .post-date, .private-post-item .edit-icon{
    color: #ffffff !important;
}
#ticket-post-form{
    width: 80vw;
    background-color: var(--post-form-color);
    padding: 8px;
    border-radius: 15px;
    position: fixed;
    bottom: 0;
    z-index: 1000;
}
.ticket-resize-handle{
    position: absolute;
    top: 40px;
    right: 12px;
    height: 20px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}
#ticket-post-content{
    background-color: var(--post-content-color);
    padding: 5px 15px;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    overflow-y: scroll;
    resize: none;
    height: auto;
    min-height: 50px;
    max-height: 300px;
    transition: height 0.2s ease;
}
#file-preview-container{
    max-height: 150px;
    overflow-y: scroll;
    background-color: var(--post-content-color);
}
.file-preview{
    width: fit-content;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.remove-preview-btn{
    position: relative;
    cursor: pointer;
    font-size: 18px;
    border: 2px solid;
    border-radius: 20px;
    height: 25px;
    width: 25px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: var(--main-text-color);
    background-color: var(--accent-medium-purple-color);
}
.ticket-post-content{
    margin-bottom: 10px;
}
.ticket-post-attachment{
    margin-bottom: 10px;
}

/* Submit a ticket */
.submit-ticket-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 50px;
    width: 60vw;
    padding: 15px;
    margin-bottom: 100px;
    border-radius: 15px;
    background-color: var(--accent-medium-purple-color);
    color: var(--main-text-color);
}
.submit-ticket-header{
    font-size: 30px;
}
#submit-ticket-form{
    display: flex;
    flex-direction: column;
    width: 100%;
}
#submit-ticket-form input[type="text"]{
    margin-bottom: 15px;
    outline: none;
    border: 1.5px solid #9f9cb6;
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: #9f9cb6;
    color: #1c1e41;
    font-size: 16px;
}
#submit-ticket-form select{
    margin-bottom: 15px;
    outline: none;
    border: 1.5px solid #9f9cb6;
    border-radius: 15px;
    padding: 5px 5px 5px 10px;
    background-color: #9f9cb6;
    color: #1c1e41;
    font-size: 16px;
}
#submit-ticket-form input::placeholder{
    font-size: 16px;
    color: #5b5982;
}
#ticket-description-input{
    height: 150px;
    margin-bottom: 15px;
    outline: none;
    border: 1.5px solid #9f9cb6;
    border-radius: 0 0 15px 15px;
    padding: 5px 5px 5px 10px;
    background-color: #9f9cb6;
    color: #1c1e41;
    font-size: 16px;
    font-family: inherit;
    overflow-y: scroll;
}
#ticket-description-input:empty{
    content: attr(placeholder);
    color: #5b5982;
}
#submit-ticket-form #file-preview-container{
    max-height: 150px;
    overflow-y: scroll;
    background-color: #9f9cb6;
    margin-top: -25px;
    padding-top: 10px;
    border-radius: 0 0 15px 15px;
}
.ticket-title-p{
    margin-bottom: 5px;
    margin-top: 16px;
}
#ticket-description-input:empty:before{
    content: attr(placeholder);
    color: #5b5982;
}
.ticket-stack{
    display: flex;
}
.ticket-optional{
    color: #9f9cb6;
    margin-left: 10px;
}
.submit-button-area{
    display: flex;
    justify-content: flex-end;
}
#submit-ticket{
    width: 75px;
    margin-top: 25px;
    padding: 5px;
    border: 1.5px solid #9f9cb6;
    border-radius: 15px;
    cursor: pointer;
    background-color: #9f9cb6;
    color: #1c1e41;
    font-weight: bold;
    font-family: inherit;
    font-size: 16px;
}
#ticket-emoji-picker{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 150px;
    position: fixed;
    margin-top: -20px;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--top-toolbar-color);
}
#cc-users-search{
    padding: 10px 10px 5px 10px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    border-radius: 15px 15px 0 0 !important;
    background-color: #9f9cb6 !important;
    color: #1c1e41 !important;
    border: none !important;
    outline: none !important;
}
#cc-users-checkboxes{
    display: flex;
    flex-direction: column;
    height: 100px;
    overflow-y: scroll;
    margin: 0 0 15px 0;
    padding: 5px 0 10px 5px;
    border-radius: 0 0 15px 15px;
    background-color: #9f9cb6;
    color: #1c1e41;
}
#cc-users-checkboxes label{
    display: flex;
    align-items: center;
}
#cc-users-checkboxes input[type="checkbox"]:checked::after{
    content: "✔";
    font-size: 10px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 13px;
    width: 13px;
    margin-bottom: 0 !important;
    display: inline-block;
    color: white !important;
    text-align: center;
    background-color: #333354 !important;
    border-radius: 2px;
    cursor: pointer;
}
.cc-email-area{
    display: flex;
    justify-content: space-between;
    padding: 5px 10px 10px 10px;
    background-color: #9f9cb6;
    color: #1c1e41;
}
.custom-cc-email{
    width: 100%;
    background-color: #9f9cb6;
    color: #1c1e41;
    border: none;
    outline: none;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.custom-cc-email::placeholder{
    font-size: 16px;
    color: #5b5982;
}
#add-custom-cc{
    background-color: #716e93;
    color: #333354;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 6px;
    border: none;
    outline: none;
    border-radius: 15px;
    cursor: pointer;
}

/* --------------METRICS---------------------------------------------------------------------------------------------------- */
.metric-page-heading{
    font-size: 45px;
    margin: 50px 0 30px 0;
}

/* --------------DOCS------------------------------------------------------------------------------------------------------- */
.document-area{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80vw;
    margin-bottom: 75px;
}
.docs-column{
    width: 35vw;
}
.document-section{
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    background-color: var(--accent-medium-purple-color);
    border-radius: 15px;
}
.doc-heading{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding: 15px;
    background-color: var(--accent2-light-purple-color);
    border: 2px solid var(--accent2-light-purple-color);
    border-radius: 15px;
    cursor: pointer;
}
.doc-body{
    display: none;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
    overflow-y: scroll;
    max-height: 150px;
}
.doc-item{
    display: flex;
    flex-direction: column;
    width: 80%;
    border-radius: 15px;
    padding: 12px;
    margin: 5px 0;
    background-color: var(--accent-dark-purple-color);
    color: var(--main-text-color);
    cursor: pointer;
    text-align: center;
}
.search-document-area{
    width: 80vw;
}
#doc-search{
    margin-top: 25px;
    width: 60vw;
    height: 30px;
    padding: 5px 0 5px 15px;
    font-size: 16px;
    outline: none;
    background-color: var(--accent-medium-purple-color);
    border: none;
    border-radius: 10px;
    color: var(--main-text-color);
}
.glossary-area{
    width: 80vw;
    margin-bottom: 75px;
}
.glossary-legend{
    display: grid;
    grid-template-columns: 0.25fr 0.25fr 1fr;
    font-size: 16px;
    width: 80%;
    margin: 15px 0 -10px 0;
}
#glossary-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--accent-medium-purple-color);
    border-radius: 15px;
    padding: 15px;
    height: 400px;
    overflow-y: scroll;
}
.glossary-item{
    display: flex;
    flex-direction: column;
    width: 80%;
    border-radius: 15px;
    padding: 12px;
    margin: 5px 0;
    background-color: var(--accent-dark-purple-color);
    color: var(--main-text-color);
}
.glossary-details{
    display: grid;
    grid-template-columns: 0.25fr 0.25fr 1fr;
}
.glossary-column{
    margin-right: 15px;
}