:root {
    --body-font: "Quicksand", sans-serif;
    --font-w-bold: 600;
    --color-background: 249, 249, 255;
    --color-footer-bg: 243, 243, 251;
    --color-blue: 22, 224, 226;
    --color-dark-blue: 59, 85, 160;
    --color-white: 255, 255, 255;
    --color-gray: 163, 163, 163;
    --color-light-gray: 233, 237, 238;
    --color-black: 63, 63, 63;
    --color-red: 233, 97, 91;
    --color-yellow: 255, 211, 42;
    --color-green: 76, 187, 23;
    --primary-color: #00d7d7;
    --secondary-color: #ff94b1;
    --tertiary-color: #fff066;
    --quaternary-color: #94c9ff;
    --background-color: #f8f9fa;
    --text-color: #333;
    --light-text: #888;
    --border-color: #eaeaea;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --border-radius: 6px;
    --birthday-color: #ff94b1;
}

/*========== Reset Css ==========*/
* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

html {
    scroll-behavior: smooth;
    font-size: 15px;
}

body {
    font-family: var(--body-font);
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-black));
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(var(--color-dark-gray), 1);
    font-family: var(--body-font);
    font-weight: 500;
}

h1 {
    font-size: 2rem;
    line-height: 1.2rem;
}

h2 {
    font-size: 1.5rem;
    line-height: 2.2rem;
}

h3 {
    font-size: 1.17rem;
    line-height: 1.2rem;
}

h4 {
    font-size: 1rem;
    line-height: 1.2rem;
}

p {
    font-size: 1rem;
    line-height: 1.3rem;
}

hr {
    border: 0px;
    border-top: 1px double rgba(var(--color-black), 0.1);
}

ul {
    list-style: none;
    list-style-position: inside;
}

a {
    text-decoration: none;
    color: rgb(var(--color-orange));
}

img {
    max-width: 100%;
    height: auto;
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*========== Reset Css End ==========*/

/*========== GridSystem ==========*/
.container {
    width: 95%;
    max-width: 1300px;
    margin: auto;
}

ol {
    list-style-position: inside !important;
}

.row {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col-1 {
    grid-column: span 1;
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}

.col-5 {
    grid-column: span 5;
}

.col-6 {
    grid-column: span 6;
}

.col-7 {
    grid-column: span 7;
}

.col-8 {
    grid-column: span 8;
}

.col-9 {
    grid-column: span 9;
}

.col-10 {
    grid-column: span 10;
}

.col-11 {
    grid-column: span 11;
}

.col-12 {
    grid-column: span 12;
}

.ai-center {
    align-items: center;
}

.jc-center {
    justify-content: center;
}

.jc-between {
    justify-content: space-between;
}

.d-block {
    display: block;
}

.d-none {
    display: none !important;
}

.d-flex {
    display: flex !important;
}

/*========== GridSystem End ==========*/
/*========== Sabitler ==========*/
/* Tarayıcılar arası otomatik doldurma için genel stil */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    /* Otomatik doldurma geçiş efekti süresi */
}

/* Firefox için otomatik doldurma için genel stil */
input:-moz-autofill {
    transition: background-color 5000s ease-in-out 0s;
    /* Otomatik doldurma geçiş efekti süresi */
}

/* Otomatik doldurma rengini kaldırma */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-moz-autofill {
    background-color: transparent !important;
}

/* Stil tanımı */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: lightgray transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: lightgray;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}

.box {
    width: 100%;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: block;
}

.box-title {
    font-size: 1.2rem;
    font-weight: var(--font-w-bold);
    align-items: center;
    display: flex;
}

.box-title-sub-desc {
    font-size: 0.9rem;
    margin-top: -7px;
    display: block;
}

.box-shadow {
    box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
        rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mt-2 {
    margin-top: 2px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.col-gap-10 {
    column-gap: 10px;
}

.col-gap-20 {
    column-gap: 20px;
}

.w-100 {
    width: 100%;
}

.w-fit {
    width: max-content !important;
}

.p-0 {
    padding: 0px !important;
}

.p-10 {
    padding: 10px;
}

.p-20 {
    padding: 20px;
}

.pt-80 {
    padding-top: 80px;
}

.ptb-30 {
    padding: 30px 0px;
}

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

.color-blue {
    color: rgb(var(--color-blue));
}

.color-red {
    color: rgb(var(--color-red)) !important;
}

.color-white {
    color: rgb(var(--color-white)) !important;
}

.tab-menu {
    width: 100%;
    border-bottom: 2px solid rgb(var(--color-blue));
    display: flex;
}

.tab-menu .tab-item {
    border: none;
    background-color: transparent;
    padding: 5px 15px;
    font: var(--body-font);
    font-weight: var(--font-w-bold);
    color: rgb(var(--color-black));
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    display: flex;
}

.tab-menu .tab-item:hover,
.tab-menu .tab-item.active {
    background-color: rgb(var(--color-blue));
    color: rgb(var(--color-white));
}

.pagination {
    flex-wrap: wrap;
    margin-top: 20px;
    column-gap: 10px;
    display: flex;
}

.pagination li a {
    min-width: 25px;
    min-height: 24px;
    padding: 2px 5px;
    background-color: rgb(var(--color-white));
    box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
        rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
    font-weight: var(--font-w-bold);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 0.8rem;
    align-items: center;
    justify-content: center;
    display: flex;
}

.pagination li .active {
    background-color: rgb(var(--color-blue));
}

/*========== Sabitler End ==========*/
/*========== Custom Checbox ==========*/
.custom-check {
    width: fit-content;
    display: block;
    position: relative;
    padding-left: 22px;
    cursor: pointer;
    font-size: 0.95rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.custom-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.custom-check:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.custom-check input:checked ~ .checkmark {
    background-color: rgb(var(--color-dark-blue));
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-check input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-check .checkmark:after {
    left: 6px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*========== Custom Checbox End ==========*/
/*========== Mavi Tik ==========*/
.mavi-tick {
    background: var(--color-level);
    width: 12px;
    height: 12px;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
}

.mavi-tick > .icon {
    color: white;
    position: relative;
    font-size: 0.6rem;
    z-index: 9999999;
}

.mavi-tick:before,
.mavi-tick:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 12px;
    width: 12px;
    background: var(--color-level);
}

.mavi-tick:before {
    transform: rotate(60deg);
}

.mavi-tick:after {
    transform: rotate(30deg);
}

.mavi-tick.small-tick {
    width: 12px;
    height: 12px;
}

.mavi-tick.small-tick::before,
.mavi-tick.small-tick:after {
    width: 12px;
    height: 12px;
}

.mavi-tick.small-tick > .icon {
    font-size: 0.6rem;
}

/*========== Mavi Tik End ==========*/
/*========== Sarı Tik ==========*/
.tick {
    background: var(--tick-color) !important;
    width: 12px;
    height: 12px;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
}

.tick > .icon {
    color: #fff;
    position: relative;
    font-size: 0.6rem;
    z-index: 9;
}

.tick:before,
.tick:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 12px;
    width: 12px;
    background: var(--tick-color) !important;
}

.tick:before {
    transform: rotate(60deg);
}

.tick:after {
    transform: rotate(30deg);
}

.tick.small-tick {
    width: 12px;
    height: 12px;
}

.tick.small-tick::before,
.tick.small-tick:after {
    width: 12px;
    height: 12px;
}

.tick.small-tick > .icon {
    font-size: 0.6rem;
}

.user-color {
    color: var(--tick-color) !important;
}

/*========== Sarı Tik End ==========*/
/*========== Header ==========*/
.header {
    width: 100%;
    padding: 10px 0px;
    z-index: 10;
    position: absolute;
    display: block;
}

.header > .container {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.header > .container > .logo {
    width: 180px;
    display: block;
}

.header > .container > .logo > img {
    width: 100%;
    display: block;
}

.header .header-user-menu {
    width: fit-content;
    align-items: center;
    display: flex;
}

.header .header-user-menu > li {
    margin-right: 15px;
    font-size: 1.1rem;
}

.header .header-user-menu .notification-container {
    position: relative;
}

.header .header-user-menu .notification-container .notification-list {
    width: 300px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(var(--color-white));
    border: 1px solid rgba(var(--color-black), 0.3);
    border-radius: 5px;
    z-index: 9999;
    right: 0;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
}

.header .header-user-menu .btn-header-notification > * {
    pointer-events: none;
}

.header .header-user-menu > li:last-child {
    margin-right: 0px;
}

.header .header-user-menu .header-btn {
    font-weight: var(--font-w-bold);
    position: relative;
}

.header .header-user-menu .header-btn.active,
.header .header-user-menu .header-btn:hover {
    color: rgb(var(--color-dark-blue)) !important;
}

.header .header-user-menu .header-btn .count {
    min-width: 15px;
    min-height: 15px;
    font-size: 0.8rem;
    background-color: rgb(var(--color-blue));
    position: absolute;
    justify-content: center;
    align-items: center;
    top: -5px;
    right: -7px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: flex;
}

.header .header-user-menu .header-btn.blue {
    color: rgb(var(--color-blue));
}

.header .header-user-menu .header-btn.bg-blue {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    padding: 8px 13px;
    color: rgb(var(--color-white));
    background-color: rgb(var(--color-blue));
    display: block;
}

.header .header-user-menu .header-user-btn {
    background-color: transparent;
    border: none;
    align-items: center;
    cursor: pointer;
    column-gap: 5px;
    font-size: 1rem;
    position: relative;
    display: flex;
}

.header .header-user-menu .header-user-btn > * {
    pointer-events: none;
}

.header .header-user-menu .header-user-btn .user-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 2px solid rgb(var(--color-blue));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.header .header-user-menu .header-user-btn .top-desc {
    width: 100%;
    color: rgba(var(--color-black), 0.8);
    text-align: left;
    display: block;
}

.header .header-user-menu .header-user-btn .user-name {
    width: 100%;
    color: rgba(var(--color-black), 0.9);
    font-weight: var(--font-w-bold);
    text-align: left;
    display: block;
}

.header .header-user-menu .header-user-btn .user-status {
    width: 10px;
    height: 10px;
    background-color: rgb(var(--color-red));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    bottom: 5px;
    left: -2px;
    position: absolute;
}
.online {
    background-color: rgb(var(--color-green));
}
.header .header-user-menu .header-user-btn .user-status.online {
    background-color: rgb(var(--color-green));
}

.header .header-user-profil {
    position: relative;
}

.header .header-user-profil .header-user-profile-menu {
    width: max-content;
    top: 35px;
    left: 30%;
    transform: translateX(-50%);
    position: absolute;
    display: none;
}

.header .header-user-profil .header-user-profile-menu li {
    border: 1px solid rgb(var(--color-blue));
    width: 100%;
    margin-top: 5px;
    padding-right: 5px;
    background-color: #f3f1f2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
}

.header .header-user-profil .header-user-profile-menu li:hover {
    background-color: rgba(var(--color-blue));
    color: #fff;
}

.header .header-user-profil .header-user-profile-menu .logout-btn {
    background-color: #ffbfbf;
    color: rgb(var(--color-red));
    border: 1px solid rgb(var(--color-red));
}

.header .header-user-profil .header-user-profile-menu .logout-btn:hover {
    background-color: #e9615b;
    color: #fff;
}

.header .header-user-profil .header-user-profile-menu .logout-btn .icon {
    background-color: rgb(var(--color-red));
}

.header .header-user-profil .header-user-profile-menu li a {
    width: 100%;
    font-size: 1rem;
    font-weight: var(--font-w-bold);
    align-items: center;
    display: flex;
}

.header .header-user-profil .header-user-profile-menu li a .icon {
    width: 25px;
    height: 20px;
    margin-left: -1px;
    background-color: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    align-items: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
    justify-content: center;
    display: flex;
}

/*========== Header End ==========*/
/*========== Form Elemanlari ==========*/
.form-group {
    width: 100%;
    display: block;
}

.form-label {
    width: 100%;
    font-size: 0.9rem;
    font-weight: var(--font-w-bold);
    display: block;
}

.input-group {
    width: 100%;
    height: 40px;
    padding: 0px 10px;
    align-items: center;
    background-color: rgba(var(--color-black), 0.05);
    border: 1px solid rgb(var(--color-black), 0.3);
    border-bottom: 2px solid rgb(var(--color-blue));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    column-gap: 10px;
    display: flex;
}

.textarea-input-group {
    height: auto;
    padding: 10px;
    align-items: start;
}

.input-group .input-loading {
    display: none;
}

.input-group.htmx-request .input-loading {
    display: block;
}

.input-group .form-input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    resize: none;
    color: rgb(var(--color-black));
    font-family: var(--body-font);
    font-size: 1rem;
    align-items: center;
    display: flex;
}

.input-group .icon {
    color: rgba(var(--color-black), 0.6);
}

.form-group .form-error-message {
    color: rgb(var(--color-red));
    font-size: 0.8rem;
    font-weight: var(--font-w-bold);
    display: block;
}

.form-error > .input-group {
    border: 1px solid rgb(var(--color-red));
}

.form-error-message {
    display: none;
}

.form-required-icon {
    font-size: 0.6rem;
    margin: 3px 3px 0px 3px;
    color: rgb(var(--color-red));
    display: block !important;
}

.input-group .choices {
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    display: flex !important;
}

.input-group .choices .choices__inner {
    background-color: transparent !important;
    border: none !important;
    padding: 0px !important;
    font-size: 1rem;
    align-items: center !important;
    display: flex !important;
}

.input-group .choices .choices__list--dropdown,
.input-group .choices .choices__list[aria-expanded] {
    background-color: #f2f2f2;
}

.choices[data-type*="select-one"] .choices__input {
    background-color: #f2f2f2;
    border-bottom: 1px solid rgb(var(--color-blue));
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: rgba(var(--color-blue), 0.2);
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
    padding-right: 0px;
}

.btn {
    width: 100%;
    height: 40px;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-size: 0.85rem;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    padding: 10px 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    display: block;
}

.btn-sm {
    height: 30px;
    font-size: 0.8rem;
    padding: 0px 15px;
    align-items: center;
    display: flex;
}

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

.btn.htmx-request {
    pointer-events: none;
}

.htmx-request > .btn-content {
    display: none;
}

.htmx-request > .btn-loader {
    display: flex;
}

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

.btn-loader > .icon {
    font-size: 1.2rem;
}

.btn > * {
    pointer-events: none;
}

.btn.gray {
    background-color: rgba(var(--color-light-gray));
}

.btn.red {
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
}

.btn.black {
    background-color: rgb(var(--color-black));
    color: rgb(var(--color-white));
}

.btn.white {
    background-color: rgb(var(--color-white));
}

#recaptcha-container > div {
    height: auto !important;
}

.preview-profil-image {
    width: 200px;
    min-width: 200px;
    height: 200px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 10px;
    background-color: #f5f7f930;
    justify-content: center;
    align-items: center;
    position: relative;
    display: flex;
}

.preview-profil-image > .file-select {
    width: 30px;
    height: 30px;
    background-color: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    bottom: -10px;
    left: 50%;
    font-size: 1rem;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    transform: translateX(-50%);
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
}

.preview-profil-image > .preview-image {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px dashed rgba(0, 0, 0, 0.1);
    object-fit: cover;
    display: block;
}

.preview-profil-image > input[type="file"] {
    display: none;
}

.preview-banner-image {
    width: 100%;
    max-width: 700px;
    height: 200px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 10px;
    background-color: #f5f7f930;
    justify-content: center;
    align-items: center;
    position: relative;
    display: flex;
}

.preview-banner-image > .file-select {
    width: 30px;
    height: 30px;
    background-color: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    bottom: -10px;
    left: 50%;
    font-size: 1rem;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    transform: translateX(-50%);
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
}

.preview-banner-image > .preview-image {
    width: 100%;
    max-width: 700px;
    height: 200px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 2px dashed rgba(0, 0, 0, 0.1);
    object-fit: cover;
    display: block;
}

.preview-banner-image > input[type="file"] {
    display: none;
}

.preview-mobil-banner-image {
    width: 100%;
    max-width: 150px;
    height: 200px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 10px;
    background-color: #f5f7f930;
    justify-content: center;
    align-items: center;
    position: relative;
    display: flex;
}

.preview-mobil-banner-image > .file-select {
    width: 30px;
    height: 30px;
    background-color: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    bottom: -10px;
    left: 50%;
    font-size: 1rem;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    transform: translateX(-50%);
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
}

.preview-mobil-banner-image > .preview-image {
    width: 100%;
    max-width: 150px;
    height: 200px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 2px dashed rgba(0, 0, 0, 0.1);
    object-fit: cover;
    display: block;
}

.preview-mobil-banner-image > input[type="file"] {
    display: none;
}

/*========== Form Elemanlari End ==========*/
.content {
    width: 100%;
    display: block;
}

.page-title {
    width: 100%;
    font-weight: var(--font-w-bold);
    display: block;
}

.page-title .icon {
    margin-right: 10px;
    color: rgb(var(--color-blue));
}

.alert-box {
    width: 100%;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
}

.alert-box > .alert-box-title {
    width: 100%;
    font-weight: var(--font-w-bold);
    margin-bottom: 5px;
    align-items: center;
    display: flex;
}

.alert-box > .alert-box-title > .icon {
    font-size: 1.5rem;
}

.alert-box > p {
    font-size: 0.9rem;
    line-height: 1.2rem;
}

.alert-box.success {
    background-color: rgba(var(--color-green), 0.2);
    color: rgb(var(--color-green));
}

.alert-box.error {
    background-color: rgba(var(--color-red), 0.2);
    color: rgb(var(--color-red));
}
.alert-box.warning {
    background-color: rgb(255 199 35 / 20%);
    color: #896b00;
}

/*========== Home Search ==========*/
.home-search-container {
    height: 100vh;
    padding-top: 55px;
    background-image: url("../images/background.png");
    background-size: 100% 90vh;
    background-repeat: no-repeat;
    position: relative;
    display: block;
}

.home-logo-top-padding {
    padding-top: calc(100vh / 5);
    display: block;
}

.home-search-container .home-search-logo {
    width: 300px;
    margin: auto auto;
    z-index: 9;
    position: relative;
    display: block;
}

.home-search-container .home-search-logo img {
    width: 100%;
    display: block;
}

.home-search-container .search-box-container {
    width: 500px;
    margin: auto auto;
    margin-top: 20px;
    position: relative;
}

.home-search-container .search-form-input {
    width: 100%;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    padding: 0px 30px;
    z-index: 9;
    align-items: center;
    position: relative;
    display: flex;
}

.home-search-container .search-form-input > input {
    width: 100%;
    font-size: 1.18rem;
    padding: 20px 35px 20px 0px;
    outline: none;
    font-family: var(--body-font);
    color: var(--color-black);
    border: none;
    display: block;
}

.home-search-container .search-form-input > button {
    width: 61px;
    height: 61px;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    right: 0;
    top: 0;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    outline: none;
    display: flex;
}

.home-search-container .social-media-list {
    width: fit-content;
    margin: auto auto;
    margin-top: 100px;
    column-gap: 10px;
    z-index: 1;
    position: relative;
    display: flex;
}

.home-search-container .social-media-list a {
    width: 35px;
    height: 35px;
    font-size: 1.7rem;
    color: rgb(var(--color-blue));
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.home-search-container .home-search-inner {
    width: 100%;
    right: 0;
    transition: 200ms;
    position: absolute;
}

.home-search-container .home-search-inner::before {
    content: "";
    width: 100%;
    top: -55px;
    height: 100vh;
    background-image: url(../images/bg-logo.png);
    background-size: auto auto;
    background-repeat: no-repeat;
    position: absolute;
}

/*========== Home Search End ==========*/
/*========== Arama Sonucu ==========*/
.search-result-list-container {
    width: 100%;
    background: rgb(var(--color-white));
    top: 30px;
    padding-top: 35px;
    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: 2;
    overflow-x: hidden;
    position: absolute;
    display: none;
}

.search-result-list-container > .searching-company-loading {
    width: 100%;
    padding: 5px 0px 15px 0px;
    justify-content: center;
    align-items: center;
    font-weight: var(--font-w-bold);
    color: rgba(var(--color-black), 0.8);
    display: none;
}

.search-result-list-container.htmx-request {
    display: block;
}

.search-result-list-container.htmx-request > .searching-company-loading {
    display: flex;
}

.search-result-list-container.htmx-request > #search-result-list-content {
    display: none;
}

.search-result-list-container > .searching-company-loading > .icon {
    color: rgb(var(--color-blue));
    font-size: 1.2rem;
    margin-right: 10px;
}

.search-result-list-container .search-result-list {
    width: 100%;
    max-height: 260px;
    overflow: auto;
    display: block;
}

.search-result-list-container .search-result-list > li {
    width: 100%;
    padding: 5px 15px;
    align-items: center;
    border-bottom: 1px solid rgba(var(--color-black), 0.1);
    display: block;
}

.search-result-list-container .search-result-list > li:first-child {
    border-top: 1px solid rgba(var(--color-black), 0.1);
}

.search-result-list-container .search-result-list > .sponsored {
    background-color: rgba(var(--color-green), 0.1);
    position: relative;
}

.search-result-list-container .search-result-list > .sponsored::after {
    content: attr(data-value);
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(var(--color-green));
    color: rgb(var(--color-white));
    padding: 3px 7px;
    font-weight: var(--font-w-bold);
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 0.6rem;
    position: absolute;
}

.search-result-list-container .search-result-list > li > .btn-search-list-item {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    display: flex;
}

.search-result-list-container
    .search-result-list
    > li
    > .btn-search-list-item
    > * {
    pointer-events: none;
}

.search-result-list-container
    .search-result-list
    > li
    > .btn-search-list-item
    > .company-detail {
    align-items: center;
    display: flex;
}

.search-result-list-container
    .search-result-list
    > li
    > .btn-search-list-item
    > .company-detail
    > .icon {
    color: rgb(var(--color-blue));
    margin-right: 10px;
    display: block;
}

.search-result-list-container
    .search-result-list
    > li
    > .btn-search-list-item
    > .company-detail
    > .company-image {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.search-result-list-container
    .search-result-list
    > li
    > .btn-search-list-item
    > .company-detail
    > .company-name {
    font-weight: var(--font-w-bold);
    font-size: 0.9rem;
    column-gap: 5px;
    display: flex;
}

.search-result-list-container
    .search-result-list
    > li
    > .btn-search-list-item
    > .voting-bar {
    height: fit-content;
    padding: 3px 5px;
    font-size: 0.8rem;
    background-color: rgb(var(--color-white));
    border: 1px solid rgba(var(--color-black), 0.2);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    align-items: center;
    display: flex;
}

.search-result-list-container .search-result-list > li:hover {
    background-color: rgba(var(--color-blue), 0.1);
}

.search-result-list-container
    .search-result-list
    > li
    > .btn-search-list-item
    > .voting-bar
    > .icon {
    color: rgba(var(--color-yellow));
}

.search-result-list-container
    .search-result-list
    > li
    > .btn-search-list-item
    > .voting-bar
    > .avg-score {
    margin-left: 3px;
    font-weight: var(--font-w-bold);
}

.search-result-list-container .btn-add-company {
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    margin: 5px 0px;
    color: rgb(var(--color-black));
    text-align: center;
    font-size: 0.7rem;
    cursor: pointer;
    font-family: var(--body-font);
    display: block;
}

.no-search-results {
    padding: 10px 0px;
    align-items: center;
    flex-direction: column;
    display: flex;
}

.no-search-results > .icon {
    color: rgb(var(--color-blue));
    font-size: 2.5rem;
}

.no-search-results > .no-search-results-desc {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    font-size: 0.9rem;
    font-weight: var(--font-w-bold);
}

/*========== Arama Sonucu End ==========*/
/*========== Left Sidebar Box ==========*/
.left-sidebar-box {
    width: 33%;
    height: 100%;
    z-index: 99999999 !important;
    background: rgb(var(--color-white));
    top: 0;
    left: -100%;
    padding: 20px 0px;
    overflow: hidden;
    -webkit-border-top-right-radius: 40px;
    -webkit-border-bottom-right-radius: 40px;
    -moz-border-radius-topright: 40px;
    -moz-border-radius-bottomright: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    transition: 200ms;
    box-shadow: rgba(0, 0, 0, 0.3) 0px -60px 40px,
        rgba(0, 0, 0, 0.22) 0px 15px 12px;
    position: fixed;
    display: block !important;
}

.btn-left-sidebar-box-close {
    width: fit-content;
    height: fit-content;
    padding: 0px;
    background-color: transparent;
    border: none;
    font-size: 1.7rem;
    outline: none;
    color: rgba(var(--color-black), 0.9);
    cursor: pointer;
    right: 25px;
    top: 20px;
    z-index: 9;
    position: absolute;
    display: block;
}

.btn-left-sidebar-box-close > * {
    pointer-events: none;
}

.left-sidebar-box::before {
    content: "";
    width: 648px;
    height: 627px;
    background-image: url(../images/left-sidebar-bg.png);
    background-repeat: no-repeat;
    position: absolute;
    right: -480px;
    top: -118px;
    z-index: 1;
    display: block;
}

.left-sidebar-box .left-sidebar-inner {
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 0px 20px;
    overflow: auto;
    overflow-x: hidden;
    display: block;
    position: relative;
}

.left-sidebar-box .left-sidebar-user-info {
    width: 100%;
    column-gap: 10px;
    z-index: 2;
    position: relative;
    align-items: center;
    display: flex;
}

.left-sidebar-box .left-sidebar-user-info > .user-image {
    position: relative;
}

.left-sidebar-box .left-sidebar-user-info > .user-image > img {
    width: 150px;
    height: 150px;
    min-width: 150px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    object-fit: cover;
    display: block;
}

.left-sidebar-box .left-sidebar-user-info > .user-image > .user-status {
    width: 15px;
    height: 15px;
    left: 20px;
    bottom: 10px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-color: rgb(var(--color-red));
    position: absolute;
    display: block;
}

.left-sidebar-box .left-sidebar-user-info > .user-image > .user-status.online {
    background-color: rgb(var(--color-green));
}

.left-sidebar-box .left-sidebar-user-info > .user-detail {
    width: 100%;
    display: block;
}

.left-sidebar-box .left-sidebar-user-info > .user-detail > .user-name {
    font-size: 1.2rem;
    font-weight: var(--font-w-bold);
    column-gap: 10px;
    margin-bottom: 5px;
    align-items: center;
    display: flex;
}

.left-sidebar-box .left-sidebar-user-info > .user-detail .user-follow {
    font-weight: var(--font-w-bold);
    cursor: pointer;
}

.left-sidebar-box .left-sidebar-user-info > .user-detail .user-follow > .icon {
    color: rgb(var(--color-dark-blue));
}

.left-sidebar-box .left-sidebar-user-info > .user-detail .social-list {
    align-items: center;
    display: flex;
}

.left-sidebar-box .left-sidebar-user-info > .user-detail .social-list > li {
    margin-right: 7px;
}

.left-sidebar-box .left-sidebar-user-info > .user-detail .social-list > li > a {
    width: 25px;
    height: 25px;
    border: 3px solid rgb(var(--color-white));
    outline: 1px solid rgb(var(--color-blue));
    background-color: rgb(var(--color-blue));
    font-size: 0.8rem;
    color: rgb(var(--color-white));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.social-btn-facebook {
    outline: 1px solid #1877f2 !important;
    background-color: #1877f2 !important;
}

.social-btn-twitter {
    outline: 1px solid #14171a !important;
    background-color: #14171a !important;
}

.social-btn-instagram {
    outline: 1px solid #c32aa3 !important;
    background: #d6249f;
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
}

.social-btn-telegram {
    outline: 1px solid #0088cc !important;
    background-color: #0088cc !important;
}

.left-sidebar-box .vote-list {
    width: 100%;
    align-items: center;
    position: relative;
    border: 1px solid rgb(var(--color-blue));
    background-color: rgb(var(--color-white));
    margin-top: 25px;
    border-top-width: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-bottom: 25px;
    justify-content: space-between;
    position: relative;
    display: flex;
}

.left-sidebar-box .vote-list > li {
    width: 100%;
    padding-top: 15px;
    align-items: center;
    position: relative;
    flex-direction: column;
    display: flex;
}

.left-sidebar-box .vote-list > li > .icon-con {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgb(var(--color-white));
    border: 2px solid rgb(var(--color-blue));
    transform: rotate(45deg);
    align-items: center;
    font-size: 0.9rem;
    justify-content: center;
    top: -13px;
    position: absolute;
    display: flex;
}

.left-sidebar-box .vote-list > li > .icon-con.active {
    background-color: rgb(var(--color-blue));
}

.left-sidebar-box .vote-list > li > .icon-con.active > .icon {
    color: rgb(var(--color-white));
}

.left-sidebar-box .vote-list > li > .icon-con > .icon {
    transform: rotate(-45deg);
    color: rgb(var(--color-blue));
}

.left-sidebar-box .vote-list > li > .item-title {
    font-weight: var(--font-w-bold);
    font-size: 0.9rem;
}

.left-sidebar-box .vote-list > li > .vote-star-list {
    align-items: center;
    color: rgba(var(--color-yellow));
    padding: 2px 5px;
    font-size: 0.8rem;
    column-gap: 1px;
    margin-top: 5px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    display: flex;
}

.left-sidebar-box .vote-list > li > .vote-star-list > .count {
    font-weight: var(--font-w-bold);
    margin-left: 5px;
    color: rgb(var(--color-black));
}

.left-sidebar-box .vote-list > .point-count {
    width: fit-content;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: var(--font-w-bold);
    left: -1px;
    bottom: -1px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: rgb(var(--color-dark-blue));
    color: rgb(var(--color-white));
    position: absolute;
    display: block;
}

.left-sidebar-box .vote-list > .vote-count {
    width: fit-content;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: var(--font-w-bold);
    right: -1px;
    bottom: -1px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: rgb(var(--color-dark-blue));
    color: rgb(var(--color-white));
    position: absolute;
    display: block;
}

.left-sidebar-box .vote-list > .btn-vote {
    width: fit-content;
    background-color: rgba(var(--color-yellow));
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 12px;
    font-size: 0.8rem;
    left: 50%;
    bottom: -13px;
    font-weight: var(--font-w-bold);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -30px 30px -28px inset;
    color: rgb(var(--color-black));
    transform: translateX(-50%);
    position: absolute;
    display: block;
}

.vote-list > .btn-vote.green {
    background-color: rgb(var(--color-green)) !important;
    color: rgb(var(--color-white));
}

.left-sidebar-box .btn-all-comment {
    width: fit-content;
    height: 25px;
    padding: 3px 0px 4px 10px;
    font-size: 0.9rem;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 1px solid rgba(var(--color-black), 0.1);
    border-bottom: 2px solid rgba(var(--color-black));
    background-color: rgb(var(--color-white));
    font-weight: var(--font-w-bold);
    align-items: center;
    position: relative;
    display: flex;
}

.left-sidebar-box .btn-all-comment > .comment-count {
    width: fit-content;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    padding: 2px 8px;
    font-weight: var(--font-w-bold);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    top: -9px;
    left: 3px;
    position: relative;
    display: block;
}

.left-sidebar-box .btn-all-comment > .comment-count::after {
    content: "";
    width: 0px;
    height: 0px;
    left: 3px;
    bottom: -6px;
    border-style: solid;
    border-width: 11px 5px 0 8px;
    border-color: rgb(var(--color-red)) transparent transparent transparent;
    transform: rotate(30deg);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: absolute;
    display: block;
}

.profile-comment-count {
    width: fit-content;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    padding: 2px 8px;
    font-weight: var(--font-w-bold);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    top: -9px;
    left: 3px;
    position: relative;
    display: block;
}

.profile-comment-count::after {
    content: "";
    width: 0px;
    height: 0px;
    left: 3px;
    bottom: -6px;
    border-style: solid;
    border-width: 11px 5px 0 8px;
    border-color: rgb(var(--color-red)) transparent transparent transparent;
    transform: rotate(30deg);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: absolute;
    display: block;
}

.profile-comment-list {
    width: 100%;
    row-gap: 20px;
    flex-direction: column;
    align-items: end;
    display: flex;
}

.profile-comment-list-item {
    width: 100%;
    padding: 10px;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    grid-template-columns: auto 1fr auto;
    box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
        rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
    gap: 10px;
    position: relative;
    display: grid;
}

.profile-comment-list-item .comment-reply-form-container {
    grid-column: 1/4;
}

.profile-comment-list-item .emoji-container {
    right: 10px;
    bottom: -10px;
    position: absolute;
}

.profile-comment-list-item .emoji-container .btn-emoji-list,
.btn-show-comment-edit {
    border: none;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    font-size: 1rem;
    padding: 3px 3px 3px 4px;
    outline: none;
    color: rgb(var(--color-blue));
    cursor: pointer;
    display: block;
}

.profile-comment-list-item .emoji-container .btn-emoji-list > * {
    pointer-events: none;
}

.profile-comment-list-item .emoji-container .emoji-list {
    right: 0;
    top: -40px;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    display: flex;
}

.profile-comment-list-item .emoji-container .emoji-list .emoji-list-btn {
    background-color: transparent;
    outline: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 5px;
}

.profile-comment-list-item .emoji-container .emoji-list .emoji-list-btn > * {
    pointer-events: none;
}

.profile-comment-list-item .sending-emoji-list {
    width: fit-content;
    left: 100px;
    bottom: -10px;
    position: absolute;
    gap: 10px;
    display: flex;
}

.profile-comment-list-item .sending-emoji-list .sending-emoji-item {
    font-size: 1rem;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 2px 5px;
    border: 1px solid rgb(var(--color-blue));
    display: block;
}

.profile-comment-list-item .sending-emoji-list .sending-emoji-item span {
    color: rgb(var(--color-blue));
    font-weight: var(--font-w-bold);
    margin-left: 3px;
}

.profile-comment-list-item .comment-user-menu {
    width: 130px;
    top: 0;
    left: 0;
    background-color: rgb(var(--color-white));
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    gap: 5px;
    flex-wrap: wrap;
    left: 100px;
    top: 30px;
    z-index: 9;
    position: absolute;
    display: flex;
}

.profile-comment-list-item .comment-user-menu li {
    width: 100%;
    display: block;
}

.profile-comment-list-item .comment-user-menu li .comment-user-menu-item {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(var(--color-light-gray));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border: none;
    outline: none;
    font-size: 0.75rem;
    font-weight: var(--font-w-bold);
    padding: 5px;
    cursor: pointer;
    text-align: left;
    font-family: var(--body-font);
    color: rgb(var(--color-black));
    align-items: center;
    display: flex;
}

.profile-comment-list-item .comment-user-menu li .btn-unfollow {
    width: 100%;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.profile-comment-list-item .comment-user-menu li .btn-follow {
    width: 100%;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.comment-reply {
    width: 90%;
    background: rgba(var(--color-black), 0.03);
}

.profile-comment-item-user-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 4px solid rgb(var(--color-blue));
    border-bottom: 4px solid rgb(var(--color-black));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.profile-comment-item-detail {
    flex-direction: column;
    gap: 5px;
    display: flex;
}

.comment-reply-form-container {
    width: 100%;
}

.profile-comment-item-user-name {
    width: 100%;
    font-weight: var(--font-w-bold);
    align-items: center;
    gap: 5px;
    display: flex;
    justify-content: space-between;
}

.profile-comment-item-detail > p {
    font-size: 1rem;
    margin-bottom: 8px;
}

.profile-comment-item-btn-group {
    width: fit-content;
    align-items: center;
    column-gap: 25px;
    padding-left: 10px;
    border-left: 1px solid rgba(var(--color-black), 0.2);
    display: flex;
}

.profile-comment-item-date {
    width: fit-content;
    column-gap: 5px;
    color: rgb(var(--color-blue));
    align-items: center;
    display: flex;
}

.profile-comment-item-date .icon {
    font-size: 1.7rem;
    display: block;
}

.profile-comment-item-date .date {
    font-size: 0.9rem;
}

.profile-comment-item-detail .mobile-date {
    width: fit-content;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 400;
    color: rgb(var(--color-dark-blue));
    justify-content: center;
    display: inline-flex;
}

.profile-comment-item-detail .mobile-date .icon {
    margin-right: 3px;
    font-size: 0.7rem;
}

.comment-list {
    width: 100%;
    flex-direction: column;
    display: flex;
}

.comment-list > .comment-item {
    width: 100%;
    background-color: rgb(var(--color-white));
    border: 2px solid rgba(var(--color-black), 0.1);
    padding: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin-top: 35px;
    flex-direction: column;
    display: flex;
}

.comment-list > .comment-item > .comment-detail {
    width: 100%;
    margin-top: 10px;
    display: block;
}

.comment-list > .comment-item > .comment-title {
    width: 100%;
    justify-content: space-between;
    align-items: end;
    margin-top: -40px;
    position: relative;
    display: flex;
}

.comment-list > .comment-item > .comment-title .comment-user-menu {
    width: 130px;
    top: 0;
    left: 0;
    background-color: rgb(var(--color-white));
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    gap: 5px;
    flex-wrap: wrap;
    left: 65px;
    top: 55px;
    z-index: 9;
    position: absolute;
    display: flex;
}

.comment-list > .comment-item > .comment-title .comment-user-menu li {
    width: 100%;
    display: block;
}

.comment-list
    > .comment-item
    > .comment-title
    .comment-user-menu
    li
    .comment-user-menu-item {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(var(--color-light-gray));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border: none;
    outline: none;
    font-size: 0.75rem;
    font-weight: var(--font-w-bold);
    padding: 5px;
    cursor: pointer;
    text-align: left;
    font-family: var(--body-font);
    color: rgb(var(--color-black));
    align-items: center;
    display: flex;
}

.comment-list
    > .comment-item
    > .comment-title
    .comment-user-menu
    li
    .btn-unfollow {
    width: 100%;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.comment-list
    > .comment-item
    > .comment-title
    .comment-user-menu
    li
    .btn-follow {
    width: 100%;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.comment-list > .comment-item > .comment-title > .user-info {
    width: fit-content;
    align-items: end;
    display: flex;
}

.comment-list > .comment-item > .comment-title > .user-info > img {
    width: 70px;
    height: 70px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin-right: 10px;
    border: 4px solid var(--color-border);
    border-bottom: 4px solid rgb(var(--color-black));
    object-fit: cover;
    display: block;
}

.comment-list > .comment-item > .comment-title > .user-info .user-name {
    font-weight: var(--font-w-bold);
    font-size: 1.2rem;
    margin-bottom: 15px;
    display: block;
}

.comment-list > .comment-item > .comment-title .date {
    margin-bottom: 15px;
    font-weight: var(--font-w-bold);
    font-size: 0.9rem;
    display: block;
}

.comment-list
    > .comment-item
    > .comment-title
    > .user-info
    .comment-info-group {
    margin-bottom: 4px;
}

.comment-list
    > .comment-item
    > .comment-title
    > .user-info
    .comment-info-group
    .user-name {
    margin: 0px;
}

.comment-list
    > .comment-item
    > .comment-title
    > .user-info
    .comment-info-group
    .date {
    margin: 0px;
    font-weight: 400;
    font-size: 0.8rem;
}

.left-sidebar-box .btn-show-comment {
    width: fit-content;
    justify-content: center;
    background-color: transparent;
    border: none;
    outline: none;
    flex-wrap: wrap;
    cursor: pointer;
    margin-top: 10px;
    font-weight: var(--font-w-bold);
    display: flex;
}

.left-sidebar-box .btn-show-comment > span {
    width: 100%;
    display: block;
}

.left-sidebar-box .btn-show-comment > .icon {
    color: rgb(var(--color-red));
}

.left-sidebar-box .btn-show-comment > * {
    pointer-events: none;
}

.left-sidebar-box-open .home-search-container {
    width: 67%;
    right: -33%;
}

.left-sidebar-box-open .left-sidebar-box {
    left: 0;
}

/*========== Left Sidebar Box End ==========*/
/*========== Poup Login Page ==========*/
.popup-login {
    width: 40%;
    align-items: center;
    position: relative;
    grid-template-columns: 1fr 1fr;
    display: grid;
}

.popup-login > .box {
    width: 100%;
    z-index: 999;
    position: relative;
    display: block;
}

.popup-login > .login-right {
    width: 100%;
    height: 120%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-left: -40px;
    padding-left: 45px;
    background-image: url(../images/login-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    display: flex;
}

.popup-login > .login-right > .login-right-title {
    width: 100%;
    color: rgb(var(--color-white));
    font-size: 1.5rem;
    text-align: center;
    font-weight: var(--font-w-bold);
    display: block;
}

.popup-login > .login-right > .login-right-desc {
    width: 100%;
    color: rgb(var(--color-white));
    font-size: 0.9rem;
    text-align: center;
    display: block;
}

.popup-login > .login-right > .btn-master-popup-box-close {
    color: rgb(var(--color-white));
    position: absolute;
    top: 10px;
    right: 10px;
}

.forgot-pass-btn {
    width: fit-content;
    font-size: 0.9rem;
    font-weight: var(--font-w-bold);
}

/*========== Poup Login Page End ==========*/
/*========== Poup Send Vote ==========*/
.vote-popup-box {
    width: fit-content;
    display: block;
}

.vote-popup-box .sending-vote-list-box {
    width: 100%;
    border: 1px solid rgb(var(--color-blue));
    border-left-width: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 5px;
    flex-direction: column;
    display: flex;
}

.vote-popup-box .sending-vote-list-box > li {
    width: 100%;
    padding: 5px;
    padding-left: 25px;
    padding-right: 20px;
    position: relative;
    display: block;
}

.vote-popup-box .sending-vote-list-box > li:first-child {
    padding-top: 10px;
}

.vote-popup-box .sending-vote-list-box > li:last-child {
    padding-bottom: 15px;
}

.vote-popup-box .sending-vote-list-box > li > .icon-con {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgb(var(--color-white));
    border: 2px solid rgb(var(--color-blue));
    align-items: center;
    font-size: 0.9rem;
    justify-content: center;
    left: -22px;
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    display: flex;
}

.vote-popup-box .sending-vote-list-box > li > .icon-con > .icon {
    transform: rotate(-45deg);
    color: rgb(var(--color-blue));
}

.vote-popup-box .sending-vote-list-box > li > .icon-con.active {
    background-color: rgb(var(--color-blue));
}

.vote-popup-box .sending-vote-list-box > li > .icon-con.active > .icon {
    color: rgb(var(--color-white));
}

.vote-popup-box .sending-vote-list-box > li > .item-title {
    width: 100%;
    font-weight: var(--font-w-bold);
    display: block;
}

.vote-popup-box .sending-vote-list-box > li > .vote-star-list {
    width: fit-content;
    align-items: center;
    color: rgba(var(--color-yellow));
    padding: 4px 10px;
    font-size: 1.5rem;
    margin-top: 5px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    display: flex;
}

.vote-popup-box .sending-vote-list-box > li > .vote-star-list > .icon {
    padding-right: 5px;
    cursor: pointer;
}

.vote-popup-box .sending-vote-list-box > li > .vote-star-list > .count {
    font-weight: var(--font-w-bold);
    font-size: 1rem;
    color: rgb(var(--color-black));
}

/*========== Poup Send Vote End ==========*/
/*========== Follow List Poup ==========*/
.follow-list-popup {
    width: 20%;
    min-width: 350px;
    display: block;
}

.follow-list-popup .follow-list-container {
    width: 100%;
    max-height: 300px;
    overflow: auto;
    overflow-x: hidden;
    display: block;
}

.follow-list-popup .follow-list-container .follow-list-loading {
    width: 100%;
    margin-top: 10px;
    font-weight: var(--font-w-bold);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
}

.follow-list-popup .follow-list-container .follow-list-loading .icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.follow-list-popup .follow-list-container.htmx-request .follow-list-loading {
    display: flex;
}

.follow-list-popup .follow-list-container.htmx-request .follow-list {
    display: none;
}

.follow-list-popup .follow-list {
    width: 100%;
    flex-direction: column;
    row-gap: 10px;
    display: flex;
}

.follow-list-popup .follow-list li {
    width: 100%;
    display: block;
}

.follow-list-popup .follow-list li > .follow-list-item {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    align-items: center;
    justify-content: space-between;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: flex;
}

.follow-list-popup .follow-list li > .follow-list-item > .user-info-group {
    align-items: center;
    display: flex;
}

.follow-list-popup
    .follow-list
    li
    > .follow-list-item
    > .user-info-group
    > .logo {
    width: 35px;
    height: 35px;
    margin: 0px;
    margin-right: 5px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.follow-list-popup
    .follow-list
    li
    > .follow-list-item
    > .user-info-group
    > .name {
    font-weight: var(--font-w-bold);
    font-size: 0.9rem;
}

.follow-list-popup .follow-list li > .follow-list-item > .btn-container {
    width: max-content;
    height: 100%;
    padding-left: 10px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    align-items: center;
    display: flex;
}

.follow-list-popup .follow-list li > .follow-not-found {
    width: 100%;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
}

.follow-list-popup .follow-list li > .follow-not-found > .icon {
    font-size: 2.5rem;
    color: rgb(var(--color-blue));
}

.follow-list-popup .follow-list li > .follow-not-found > .desc {
    width: 100%;
    margin-top: 5px;
    font-weight: var(--font-w-bold);
    color: rgb(var(--color-black), 0.7);
    text-align: center;
    display: block;
}

/*========== Follow List Poup End ==========*/
/*========== Follow Btn ==========*/
.btn-follow.htmx-request {
    pointer-events: none;
}

.profile-sum .btn-follow {
    width: fit-content;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    height: 30px;
    font-size: 0.8rem;
    padding: 0px 15px;
    align-items: center;
    display: flex;
}

.profile-sum .btn-unfollow {
    width: fit-content;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    height: 30px;
    font-size: 0.8rem;
    padding: 0px 15px;
    align-items: center;
    display: flex;
}

.btn-follow > * {
    pointer-events: none;
}

.btn-unfollow > * {
    pointer-events: none;
}

.follow-list .btn-container .btn-follow {
    width: fit-content;
    background-color: transparent;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    height: 30px;
    padding: 0px 5px;
    font-size: 0.8rem;
    align-items: center;
    display: flex;
}

.follow-list .btn-container .btn-unfollow {
    width: fit-content;
    background-color: transparent;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-red));
    cursor: pointer;
    height: 30px;
    padding: 0px 5px;
    font-size: 0.8rem;
    align-items: center;
    display: flex;
}

/*========== Follow Btn End ==========*/
/*========== Message ==========*/
.message-box-left {
    height: calc(100vh - 100px);
    overflow: auto;
    scrollbar-width: thin;
    position: relative;
}

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

.message-box-left .message-left-box-header .btn-menu-group {
    width: fit-content;
    position: relative;
    display: block;
}

.message-box-left .message-left-box-header .btn-menu-group .btn-menu {
    width: fit-content;
    background-color: transparent;
    padding: 0px;
    outline: none;
    border: none;
    font-size: 1.1rem;
    color: rgb(var(--color-black));
    cursor: pointer;
    display: block;
}

.message-box-left .message-left-box-header .btn-menu-group .btn-menu > * {
    pointer-events: none;
}

.message-box-left .message-left-box-header .btn-menu-group .sub-menu {
    width: fit-content;
    flex-direction: column;
    background-color: #f6f6fe;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
        rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
    padding: 10px;
    top: 0;
    left: 20px;
    z-index: 9999;
    position: absolute;
    display: flex;
}

.message-box-left .message-left-box-header .btn-menu-group .sub-menu li {
    width: max-content;
    display: block;
}

.message-box-left .message-left-box-header .btn-menu-group .sub-menu li button {
    width: 100%;
    border: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    padding: 4px 0px;
    font-family: var(--body-font);
    font-size: 0.9rem;
    text-align: left;
    display: block;
}

.message-box-left
    .message-left-box-header
    .btn-menu-group
    .sub-menu
    li
    button
    > * {
    pointer-events: none;
}

.message-box-left .message-left-box-header .btn-message-menu {
    background-color: transparent;
    padding: 0px;
    border: none;
    outline: none;
    padding: 4px;
    color: rgb(var(--color-black));
    cursor: pointer;
    display: block;
}

.message-box-left .message-search-box-group {
    width: 100%;
    padding: 10px 10px 10px 10px;
    display: block;
}

.message-box-left .message-search-box-group .message-search-box-inner {
    width: 100%;
    height: 30px;
    background-color: #f3f3fd;
    border: 1px solid rgba(var(--color-black), 0.1);
    column-gap: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 0px 0px 5px 5px;
    display: flex;
}

.message-box-left .message-search-box-group .message-search-box-inner .choices {
    height: 100% !important;
    margin: 0px;
    align-items: center !important;
    display: flex !important;
}

.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices
    .choices__inner {
    background-color: transparent !important;
    border: none !important;
    padding: 0px !important;
    font-size: 0.9rem;
    font-weight: var(--font-w-bold);
    align-items: center !important;
    display: flex !important;
}

.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices
    .choices__list--dropdown,
.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices
    .choices__list[aria-expanded] {
    width: 110px;
    background-color: #f3f3fd;
}

.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices[data-type*="select-one"]
    .choices__input {
    background-color: #f3f3fd;
    border-bottom: 1px solid rgb(var(--color-blue));
}

.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices__list--dropdown
    .choices__item--selectable.is-highlighted,
.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices__list[aria-expanded]
    .choices__item--selectable.is-highlighted {
    background-color: rgba(var(--color-blue), 0.2);
}

.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices__list--dropdown
    .choices__item--selectable,
.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices__list[aria-expanded]
    .choices__item--selectable {
    padding: 5px;
    padding-right: 0px;
}

.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices[data-type*="select-one"]::after {
    display: none !important;
}

.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .choices__list--single {
    padding: 4px 35px 4px 4px;
}

.message-box-left
    .message-search-box-group
    .message-search-box-inner
    .message-search-input {
    width: 100%;
    background-color: transparent;
    border: none;
    border-left: 1px solid rgba(var(--color-black), 0.1);
    padding-left: 10px;
    outline: none;
    display: block;
}

.message-box-left .message-list {
    width: 100%;
    /*min-height: 100vh;*/
    padding: 0px 10px 10px 10px;
    overflow: auto;
    overflow-x: hidden;
    display: block;
}

.message-box-left .message-list-item {
    width: 100%;
    grid-template-columns: auto 1fr;
    border: 1px solid rgba(var(--color-black), 0);
    gap: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    align-items: center;
    display: grid;
}

.message-box-left .message-list-item.checked,
.message-box-left .message-list-item:hover {
    border: 1px solid rgba(var(--color-black), 0.1);
    background-color: #f3f3fd;
}

.message-box-left .message-list-item .user-image {
    cursor: pointer;
    position: relative;
}

.message-box-left .message-list-item .user-image input {
    display: none;
}

.message-box-left .message-list-item .user-image .message-checkmark {
    width: 55px;
    height: 55px;
    top: 0;
    left: 0;
    background-color: rgba(var(--color-black), 0.7);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    position: absolute;
    align-items: center;
    justify-content: center;
    display: none;
}

.message-box-left .message-list-item .user-image .message-checkmark::before {
    content: "";
    width: 6px;
    height: 15px;
    margin-top: -5px;
    border: solid white;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    display: block;
}

.message-box-left
    .message-list-item
    .user-image
    input:checked
    ~ .message-checkmark {
    opacity: 1;
    display: flex;
}

.message-box-left .message-list-item .user-image:hover .message-checkmark {
    opacity: 0;
    display: flex;
}

.message-box-left .message-list-item .user-image .user-status {
    width: 10px;
    height: 10px;
    background-color: rgb(var(--color-red));
    left: 5px;
    bottom: 2px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    z-index: 999;
    position: absolute;
    display: block;
}

.message-box-left .message-list-item .user-image .user-status.online {
    background-color: rgb(var(--color-green));
}

.message-box-left .message-list-item .user-image img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.message-box-left .message-list-item .user-image .message-image {
    width: 55px;
    height: 55px;
    object-fit: cover;
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: var(--font-w-bold);
    background-color: rgb(var(--color-blue));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.message-box-left .message-list-item .message-detail {
    width: 100%;
    display: block;
}

.message-box-left .message-list-item .message-detail .user-info {
    width: 100%;
    justify-content: space-between;
    display: flex;
}

.message-box-left .message-list-item .message-detail .user-info .name {
    font-size: 0.9rem;
    font-weight: var(--font-w-bold);
}

.message-box-left .message-list-item .message-detail .user-info .count {
    min-width: 18px;
    height: 18px;
    background-color: rgb(var(--color-red));
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    font-weight: var(--font-w-bold);
    color: rgb(var(--color-white));
    display: flex;
}

.message-box-left .message-list-item .message-detail .message {
    width: 100%;
    -webkit-line-clamp: 2;
    font-size: 0.8rem;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-word;
}

.message-box-left .message-left-box-footer {
    width: 100%;
    background-color: #f3f3fd;
    border: 1px solid rgba(var(--color-black), 0.1);
    border-radius: 5px 5px 0px 0px;
    margin: 0 auto;
    padding: 8px;
    bottom: 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.message-box-left .message-left-box-footer .loader {
    display: none;
}

.message-box-left .message-left-box-footer.htmx-request .loader {
    display: block;
}

.message-box-left .message-left-box-footer .custom-check {
    height: 18px;
    font-size: 0.8rem;
    font-weight: var(--font-w-bold);
    align-items: center;
    display: flex;
}

.message-box-left .message-left-box-footer .checkmark {
    border: 1px solid rgba(var(--color-black), 0.4);
    background-color: transparent;
}

.message-box-left .message-left-box-footer .custom-check .checkmark:after {
    left: 5.5px;
    top: 2px;
    width: 3px;
    height: 7px;
}

.message-box-left .message-left-box-footer .selected-message-count {
    font-weight: var(--font-w-bold);
    color: rgb(var(--color-blue));
    font-size: 0.8rem;
}

.message-box-rigth {
    height: calc(100vh - 100px);
    /*overflow: hidden;*/
    grid-template-rows: auto 1fr auto;
    background: url(../images/message-bg.png);
    display: grid;
}

.message-box-rigth .message-detail-home-page {
    width: 100%;
    height: 100%;
    background-color: rgb(var(--color-white));
    align-items: center;
    justify-content: center;
    display: flex;
}

.message-box-rigth .message-detail-home-page .group {
    row-gap: 10px;
    flex-direction: column;
    align-items: center;
    display: flex;
}

.message-box-rigth .message-detail-home-page .group .icon {
    font-size: 5rem;
    opacity: 0.5;
}

.message-box-rigth .message-detail-home-page .group .message {
    font-weight: var(--font-w-bold);
    opacity: 0.6;
    font-size: 1.1rem;
}

.message-box-rigth .message-detail-header {
    width: 100%;
    padding: 15px 10px 5px 10px;
    background-color: #f6f6fe;
    border-bottom: 1px solid rgba(var(--color-black), 0.1);
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.message-box-rigth .message-detail-header .user-info {
    width: fit-content;
    align-items: center;
    display: flex;
}

.message-box-rigth .message-detail-header .user-info img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    margin-right: 5px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.message-box-rigth .message-detail-header .user-info .group-logo {
    width: 45px;
    height: 45px;
    background-color: rgb(var(--color-blue));
    margin-right: 5px;
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: var(--font-w-bold);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.message-box-rigth .message-detail-header .user-info .name {
    width: fit-content;
    font-weight: var(--font-w-bold);
    display: flex;
}

.message-box-rigth .message-detail-header .button-group {
    position: relative;
}

.message-box-rigth .message-detail-header .message-detail-header-btn {
    width: fit-content;
    padding: 10px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    display: block;
}

.message-box-rigth .message-detail-header .message-detail-header-btn > * {
    pointer-events: none;
}

.message-box-rigth .message-detail-header .message-detail-header-sub-menu {
    width: fit-content;
    padding: 10px;
    background-color: #f6f6fe;
    box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
        rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    top: 9px;
    right: 20px;
    z-index: 9;
    position: absolute;
    display: block;
}

.message-box-rigth .message-detail-header .message-detail-header-sub-menu li {
    width: max-content;
    display: block;
}

.message-box-rigth
    .message-detail-header
    .message-detail-header-sub-menu
    .message-detail-header-sub-menu-btn {
    width: 100%;
    border: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    padding: 4px 0px;
    font-family: var(--body-font);
    font-size: 0.9rem;
    font-family: var(--body-font);
    text-align: left;
    display: block;
}

.message-box-rigth
    .message-detail-header
    .message-detail-header-sub-menu
    .message-detail-header-sub-menu-btn
    > * {
    pointer-events: none;
}

.message-box-rigth .message-detail-message-list {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: auto;
    opacity: 0;
    overflow-x: hidden;
    gap: 20px;
    flex-direction: column;
    display: flex;
}

.message-box-rigth .message-detail-message-list .message-item {
    width: 100%;
    position: relative;
    display: flex;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .comment-user-menu {
    width: 130px;
    top: 0;
    left: 0;
    background-color: rgb(var(--color-white));
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    gap: 5px;
    flex-wrap: wrap;
    left: 50px;
    top: 0px;
    z-index: 9;
    position: absolute;
    display: flex;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .comment-user-menu
    li {
    width: 100%;
    display: block;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .comment-user-menu
    li
    .comment-user-menu-item {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(var(--color-light-gray));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border: none;
    outline: none;
    font-size: 0.75rem;
    font-weight: var(--font-w-bold);
    padding: 5px;
    cursor: pointer;
    text-align: left;
    font-family: var(--body-font);
    color: rgb(var(--color-black));
    align-items: center;
    display: flex;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .comment-user-menu
    li
    .btn-follow {
    width: 100%;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .comment-user-menu
    li
    .btn-unfollow {
    width: 100%;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.message-box-rigth
    .message-detail-message-list
    .message-item.sender
    .comment-user-menu {
    left: auto;
    right: 50px;
}

.message-box-rigth .message-detail-message-list .message-item.sender {
    justify-content: end;
}

.message-box-rigth
    .message-detail-message-list
    .message-item.sender
    .message-item-inner {
    width: fit-content;
    grid-template-columns: 1fr auto;
}

.message-box-rigth
    .message-detail-message-list
    .message-item.sender
    .message-item-inner
    .user-image {
    border: 2px solid rgb(var(--color-blue));
    grid-column: 2;
    grid-row: 1;
    cursor: pointer;
}

.message-box-rigth
    .message-detail-message-list
    .message-item.sender
    .message-item-inner
    .detail {
    border-color: rgb(var(--color-blue));
    grid-column: 1;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner {
    max-width: 80%;
    grid-template-columns: auto 1fr;
    column-gap: 5px;
    display: grid;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner
    .user-image {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner
    .detail {
    width: 100%;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgb(var(--color-white));
    border: 1px solid rgba(var(--color-black), 0.3);
    flex-direction: column;
    align-items: end;
    display: flex;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner
    .detail.image-box {
    width: fit-content;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner
    .detail.image-box
    img {
    width: 100%;
    border-radius: 5px;
    max-width: 250px;
    cursor: pointer;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner
    .detail
    .message {
    width: 100%;
    font-size: 0.9rem;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner
    .detail
    .message-info {
    width: fit-content;
    margin-top: 5px;
    gap: 5px;
    align-items: center;
    display: flex;
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner
    .detail
    .message-info
    .date {
    font-size: 0.7rem;
    font-weight: var(--font-w-bold);
    color: rgb(var(--color-black), 0.6);
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner
    .detail
    .message-info
    .tick {
    font-size: 0.7rem;
    color: rgba(var(--color-black), 0.6);
}

.message-box-rigth
    .message-detail-message-list
    .message-item
    .message-item-inner
    .detail
    .message-info
    .tick.reading {
    color: rgb(var(--color-blue));
}

.message-box-rigth .message-detail-message-form {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    align-items: end;
    background-color: rgba(var(--color-white));
    display: flex;
}

.message-box-rigth .message-detail-message-form .message-input {
    width: 100%;
    font-family: var(--body-font);
    border: none;
    outline: none;
    resize: none;
    padding: 10px;
    overflow: hidden;
    display: block;
}

.message-box-rigth .message-detail-message-form .send-message {
    padding: 5px;
    cursor: pointer;
    border: none;
    background-color: rgb(var(--color-blue));
    font-size: 1.3rem;
    color: rgb(var(--color-white));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 10px 5px;
    outline: none;
    display: block;
}

.message-box-rigth .message-detail-message-form .message-add-image-btn,
.message-box-rigth .message-detail-message-form .message-emoji-btn {
    padding: 0px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1.3rem;
    color: rgb(var(--color-black));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 10px 5px;
    outline: none;
    display: block;
}

.message-box-rigth .message-detail-message-form .message-add-image-btn > input {
    display: none;
}

.message-box-rigth .message-detail-message-form .send-message > *,
.message-box-rigth .message-detail-message-form .message-emoji-btn > *,
.message-box-rigth .emoji-container .emoji-list .emoji-list-item-btn > * {
    pointer-events: none;
}

.message-box-rigth .emoji-container {
    position: relative;
}

.message-box-rigth .emoji-container .emoji-list {
    width: 200px;
    height: 200px;
    padding: 10px;
    background-color: #f6f6fe;
    box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
        rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    bottom: 45px;
    right: 15px;
    overflow: auto;
    overflow-x: hidden;
    position: absolute;
    gap: 5px;
    flex-wrap: wrap;
    display: flex;
}

.message-box-rigth .emoji-container .emoji-list .emoji-list-item-btn {
    width: 30px;
    height: 30px;
    font-size: 1.3rem;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    outline: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
}

/*========== Message End ==========*/
/*========== Fancy Box ==========*/
.fancy-box {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999999;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    position: fixed;
    align-items: center;
    justify-content: center;
    display: flex;
}

.fancy-box .fancy-box-inner img {
    width: 100%;
    max-height: 90vh;
    object-fit: cover;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
        rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
    display: block;
}

.fancy-box .fancy-box-inner {
    position: relative;
}

.fancy-box .fancy-box-inner .btn-close {
    width: 30px;
    height: 30px;
    right: -15px;
    top: -15px;
    border: none;
    font-size: 1.6rem;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
        rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
    background-color: rgb(var(--color-white));
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    display: flex;
}

/*========== Fancy Box End ==========*/

/*========== Tooltip ==========*/
[tooltip] {
    position: relative;
}

[tooltip]::before,
[tooltip]::after {
    text-transform: none;
    font-size: 0.65rem;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}

[tooltip]::before {
    content: "";
    border: 5px solid transparent;
    z-index: 1001;
}

[tooltip]::after {
    content: attr(tooltip);
    text-align: center;
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 10px;
    border-radius: 0.3ch;
    box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
    z-index: 1000;
}

[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}

[tooltip=""]::before,
[tooltip=""]::after {
    display: none !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -0.5em);
}

[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #333;
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, 0.5em);
}

[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #333;
    left: calc(0em - 5px);
    transform: translate(-0.5em, -50%);
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-0.5em, -50%);
}

[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(0.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(0.5em, -50%);
}

@keyframes tooltips-vert {
    to {
        opacity: 0.9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: 0.9;
        transform: translate(0, -50%);
    }
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
}

/*========== Tooltip End ==========*/

/*========== Popu.left-sidebar-boxp ==========*/
.popup-open {
    overflow: hidden;
    position: relative;
}

#master-popup-box {
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    z-index: 999999999;
    position: fixed;
    display: none;
}

.popup-open #master-popup-box {
    display: flex;
}

.btn-master-popup-box-close {
    width: fit-content;
    height: fit-content;
    padding: 0px;
    background-color: transparent;
    border: none;
    font-size: 1.7rem;
    outline: none;
    color: rgba(var(--color-black), 0.9);
    cursor: pointer;
    display: block;
}

.btn-master-popup-box-close > * {
    pointer-events: none;
}

/*========== Popup End ==========*/

/*========== User Profil Page ==========*/
.user-detail-info {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
}

.user-detail-info .user-image {
    width: 150px;
    height: 150px;
    position: relative;
    display: block;
}

.user-detail-info .user-image img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    object-fit: cover;
    display: block;
}

.user-detail-info .user-image .user-status {
    width: 20px;
    height: 20px;
    background-color: rgb(var(--color-red));
    left: 12px;
    bottom: 13px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    position: absolute;
    display: block;
}

.user-detail-info .user-image .user-status.online {
    background-color: rgb(var(--color-green));
}

.user-detail-info .user-name {
    width: 100%;
    align-items: center;
    font-size: 1.2rem;
    font-weight: var(--font-w-bold);
    margin-top: 5px;
    justify-content: center;
    column-gap: 10px;
    display: flex;
}

.last-topic-date .user-name{
    font-size: 0.9rem!important;
}

.user-detail-info .user-team {
    width: 100%;
    column-gap: 10px;
    margin-top: 5px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.user-detail-info .user-team img {
    width: 15px;
    display: block;
}

.user-detail-info .social-list {
    margin-top: 10px;
    align-items: center;
    column-gap: 7px;
    display: flex;
}

.user-detail-info .social-list li a {
    width: 25px;
    height: 25px;
    border: 3px solid rgb(var(--color-white));
    outline: 1px solid rgb(var(--color-blue));
    background-color: rgb(var(--color-blue));
    font-size: 0.8rem;
    color: rgb(var(--color-white));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.user-detail-info .follow-counter {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--color-black), 0.3);
    grid-template-columns: 1fr 1fr;
    display: grid;
}

.user-detail-info .follow-counter li {
    justify-content: center;
    align-items: center;
    padding: 5px 0px;
    flex-direction: column;
    display: flex;
}

.user-detail-info .follow-counter li:first-child {
    border-right: 1px solid rgba(var(--color-black), 0.3);
}

.user-detail-info .follow-counter li .count {
    font-size: 1.1rem;
    font-weight: var(--font-w-bold);
}

.user-detail-info .follow-counter li .btn-user-follo-detail {
    width: fit-content;
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    font-family: var(--body-font);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
}

.last-seen {
    width: 100%;
    padding: 7px 0px;
    border-bottom: 2px solid rgb(var(--color-blue));
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: 0.9rem;
    justify-content: center;
    align-items: center;
    display: flex;
}

.user-detail-profile-menu {
    width: 100%;
    row-gap: 10px;
    flex-direction: column;
    display: flex;
}

.user-detail-profile-menu li {
    border: 1px solid rgb(var(--color-blue));
    width: 100%;
    padding-right: 5px;
    background-color: #f3f1f2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
}

.user-detail-profile-menu li.active,
.user-detail-profile-menu li:hover {
    background-color: rgba(var(--color-blue));
    color: #fff;
}

.user-detail-profile-menu li a {
    width: 100%;
    font-size: 1rem;
    font-weight: var(--font-w-bold);
    align-items: center;
    display: flex;
}

.user-detail-profile-menu li a .icon {
    width: 32px;
    height: 32px;
    margin-left: -1px;
    background-color: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    align-items: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
    justify-content: center;
    display: flex;
}

.user-detail-profile-menu li.logout-btn {
    background-color: #ffbfbf;
    color: rgb(var(--color-red));
    border: 1px solid rgb(var(--color-red));
}

.user-detail-profile-menu li.logout-btn:hover {
    background-color: #e9615b;
    color: #fff;
}

.user-detail-profile-menu li.logout-btn .icon {
    background-color: rgb(var(--color-red));
}

/*========== User Profil Page End ==========*/

/*========== Footer ==========*/
.footer {
    width: 100%;
    background-color: rgb(var(--color-footer-bg));
    padding: 50px 0px;
    margin-top: 50px;
    color: rgba(var(--color-black), 0.6);
    display: block;
}

.footer .footer-logo {
    width: 200px !important;
    display: block;
}

.footer .footer-logo img {
    width: 100%;
    display: block;
}

.footer .footer-dotted-group {
    width: 100%;
    column-gap: 10px;
    margin-top: 10px;
    display: flex;
}

.footer .footer-dotted-group .circle {
    width: 12px;
    height: 12px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.footer .footer-dotted-group .circle-blue {
    background-color: rgba(var(--color-blue), 0.4);
}

.footer .footer-dotted-group .circle-red {
    background-color: rgba(var(--color-red), 0.4);
}

.footer .footer-dotted-group .circle-yellow {
    background-color: rgba(var(--color-yellow), 0.4);
}

.footer .footer-title {
    width: 100%;
    color: rgb(var(--color-black));
    font-weight: var(--font-w-bold);
    display: block;
}

.footer .footer-menu {
    width: 100%;
    display: block;
}

.footer .footer-menu li {
    margin-top: 5px;
}

.footer .footer-social-list {
    width: 100%;
    column-gap: 7px;
    margin-top: 10px;
    display: flex;
}

.footer .footer-social-list li a {
    width: 25px;
    height: 25px;
    border: 1px solid rgb(var(--color-blue));
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    color: rgb(var(--color-blue));
    display: flex;
}

/*========== Footer End ==========*/

/*========== Preloader ==========*/
.loading-container > span,
.loading-content-item > div,
.loading-content-item > div > span {
    position: absolute;
}

.loading.htmx-request {
    display: block;
}

.loading {
    width: 100%;
    top: 0;
    height: 100%;
    z-index: 99999999999999999;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    position: fixed;
    display: none;
}

.loading-container {
    position: relative;
    background: #bdbdbda1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: blur(8px) contrast(18);
    mix-blend-mode: screen;
}

.loading-container > span > span,
.loading-content-item,
.loading-content-item > div > span {
    aspect-ratio: 1;
    background: #16e0e2;
    border-radius: 50%;
}

.loading-container > span:first-of-type {
    left: 50%;
    width: 150px;
    height: 150px;
    animation: 8s ease-in-out infinite forwards spin-3;
}

.loading-container > span:first-of-type span {
    width: 30px;
}

.loading-container > span:nth-of-type(2) {
    left: 20%;
    width: 150px;
    height: 100px;
    animation: 6s ease-in-out infinite spin-4;
}

.loading-container > span:nth-of-type(2) span {
    width: 21px;
}

.loading-container > span:nth-of-type(3) {
    left: 48%;
    top: 48%;
    width: 100px;
    height: 100px;
    animation: 3.5s ease-in-out infinite forwards spin-5;
}

.loading-container > span:nth-of-type(3) span {
    width: 25px;
}

.loading-container > span:nth-of-type(4) {
    left: 28%;
    top: 48%;
    width: 200px;
    height: 200px;
    animation: 4.5s ease-in-out infinite forwards spin-2;
}

.loading-container > span:nth-of-type(4) span,
.loading-container > span:nth-of-type(5) span {
    width: 20px;
}

.loading-container > span:nth-of-type(5) {
    left: 50%;
    top: 25%;
    width: 200px;
    height: 200px;
    animation: 3.5s ease-in-out infinite forwards spin-6;
}

.loading-container > span > span {
    position: absolute;
    right: 20px;
    top: 20px;
}

.loading-content-item {
    position: relative;
    width: 80px;
}

.loading-content-item > div {
    aspect-ratio: 1;
    border-radius: 50%;
    background: 0 0;
}

.loading-content-item > div:first-child {
    left: -5px;
    width: 70px;
    animation: 5s ease-in infinite forwards spin-1;
}

.loading-content-item > div:first-child > span {
    width: 50px;
}

.loading-content-item > div:nth-child(2) {
    left: 10px;
    bottom: 0;
    width: 80px;
    animation: 3s ease-in 1.5s infinite forwards spin-2;
}

.loading-content-item > div:nth-child(2) > span {
    width: 60px;
}

@keyframes spin-1 {
    0% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(450deg);
    }
}

@keyframes spin-2 {
    0% {
        transform: rotate(-50deg);
    }

    100% {
        transform: rotate(310deg);
    }
}

@keyframes spin-3 {
    0% {
        transform: rotate(220deg);
    }

    100% {
        transform: rotate(580deg);
    }
}

@keyframes spin-4 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-5 {
    0% {
        transform: rotate(-100deg);
    }

    100% {
        transform: rotate(260deg);
    }
}

@keyframes spin-6 {
    0% {
        transform: rotate(210deg);
    }

    100% {
        transform: rotate(570deg);
    }
}

/*========== Preloader End ==========*/

.login-right-box {
    background: url("../images/login-right-bg.png");
    background-size: cover;
    align-items: center;
    justify-content: center;
    display: flex;
}

.login-right-box > .login-right-box-inner {
    width: 100%;
    padding: 20px 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.login-right-box > .login-right-box-inner .title {
    font-weight: var(--font-w-bold);
    font-size: 1.5rem;
    color: rgb(var(--color-white));
}

.login-right-box > .login-right-box-inner .title-sub {
    font-weight: var(--font-w-bold);
    font-size: 1.1rem;
    text-align: center;
    color: rgb(var(--color-white));
}

.mobil-user-bar {
    width: 100%;
    background-color: rgb(var(--color-white));
    bottom: 0;
    box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
        rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
    border-top: 1px solid rgba(var(--color-black), 0.1);
    position: fixed;
    z-index: 999999999;
    justify-content: space-between;
    display: none;
}

.mobil-user-bar li {
    width: 100%;
    border-right: 1px solid rgb(var(--color-black), 0.1);
    justify-content: center;
    align-items: center;
    display: flex;
}

.mobil-user-bar li:last-child {
    border: none;
}

.mobil-user-bar li .btn-mobile-user-bar {
    width: 100%;
    padding: 10px;
    font-weight: var(--font-w-bold);
    color: rgba(var(--color-black), 0.8);
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 0.9rem;
    font-family: var(--body-font);
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: center;
    display: flex;
}

.mobil-user-bar li .btn-mobile-user-bar .count {
    min-width: 15px;
    min-height: 15px;
    font-size: 0.8rem;
    background-color: rgb(var(--color-blue));
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 2px;
    left: 50%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: flex;
}

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

.line-separator span {
    width: fit-content;
    background-color: rgb(var(--color-white));
    font-size: 0.9rem;
    font-weight: var(--font-w-bold);
    color: rgba(var(--color-black), 0.7);
    padding: 0px 10px;
    position: relative;
    display: block;
}

.line-separator::before {
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(var(--color-black), 0.1);
    position: absolute;
    display: block;
}

.privacy-settings {
    width: 100%;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px;
    flex-direction: column;
    display: flex;
}

.profil-detail-left-list {
    gap: 7px;
    flex-direction: column;
    display: flex;
}

.profil-detail-left-list li {
    font-size: 0.9rem;
}

.profil-detail-left-list .icon {
    color: rgb(var(--color-blue));
}

.vote-list-container {
    min-height: 35px;
    border: 1px solid rgb(var(--color-blue));
    border-left-width: 3px;
    transition: 0.4s;
    position: relative;
}

.vote-list-container .vote-list {
    width: 100%;
    position: relative;
    gap: 20px;
    padding: 20px 0px 40px 0px;
    flex-direction: column;
    position: relative;
    display: flex;
}

.vote-list-container .vote-list li {
    width: 100%;
    padding-left: 25px;
    align-items: start;
    position: relative;
    flex-direction: column;
    display: flex;
}

.vote-list-container .vote-list li .icon-con {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgb(var(--color-white));
    border: 2px solid rgb(var(--color-blue));
    align-items: center;
    font-size: 0.9rem;
    justify-content: center;
    left: -22px;
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    display: flex;
}

.vote-list-container .vote-list li .icon-con .icon {
    transform: rotate(-45deg);
    color: rgb(var(--color-blue));
}

.vote-list-container .vote-list li .item-title {
    width: 100%;
    font-weight: var(--font-w-bold);
    display: block;
}

.vote-list-container .vote-list li .vote-star-list {
    width: fit-content;
    align-items: center;
    color: rgba(var(--color-yellow));
    padding: 4px 10px;
    font-size: 1rem;
    margin-top: 5px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    display: flex;
}

.vote-list-container .vote-list li .vote-star-list .icon {
    padding-right: 3px;
}

.vote-list-container .vote-list li .vote-star-list .count {
    font-weight: var(--font-w-bold);
    font-size: 0.8rem;
    margin-left: 5px;
    color: rgb(var(--color-black));
}

.vote-list-container .vote-list .point-count {
    width: fit-content;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: var(--font-w-bold);
    left: -1px;
    bottom: -1px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: rgb(var(--color-dark-blue));
    color: rgb(var(--color-white));
    position: absolute;
    display: block;
}

.vote-list-container .vote-list .vote-count {
    width: fit-content;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: var(--font-w-bold);
    right: -1px;
    bottom: -1px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: rgb(var(--color-dark-blue));
    color: rgb(var(--color-white));
    position: absolute;
    display: block;
}

.vote-list-container .vote-list .btn-vote {
    width: fit-content;
    background-color: rgba(var(--color-yellow));
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 12px;
    font-size: 0.8rem;
    left: 50%;
    bottom: -13px;
    font-weight: var(--font-w-bold);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -30px 30px -28px inset;
    transform: translateX(-50%);
    position: absolute;
    display: block;
}

.btn-box-minimize {
    width: fit-content;
    padding: 5px;
    top: 5px;
    right: 5px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    display: block;
}

.btn-box-minimize > * {
    pointer-events: none;
}

.banner-list {
    width: 100%;
    flex-direction: column;
    gap: 10px;
    display: flex;
    margin-top:30px;
}

.banner-list .banner-item {
    width: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: block;
}

.banner-list .banner-item img {
    width: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: block;
}

.profil-detail-comment-list {
    width: 100%;
    min-height: 35px;
    border-top: 1px solid rgba(var(--color-black), 0.1);
    margin-top: 20px;
    display: block;
}

.profil-detail-comment-list .profil-detail-comment-title {
    width: 100%;
    padding-top: 30px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    display: flex;
}

.profil-detail-comment-list .profil-detail-comment-title .comment-count {
    width: fit-content;
    width: fit-content;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    padding: 2px 8px;
    font-weight: var(--font-w-bold);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    top: -3px;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
}

.profil-detail-comment-list .profil-detail-comment-title .comment-count::after {
    content: "";
    width: 0px;
    height: 0px;
    left: 3px;
    bottom: -6px;
    border-style: solid;
    border-width: 11px 5px 0 8px;
    border-color: rgb(var(--color-red)) transparent transparent transparent;
    transform: rotate(30deg);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: absolute;
    display: block;
}

marquee {
    margin-bottom: -4px;
    background: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    padding: 2px 0px;
    font-weight: var(--font-w-bold);
    font-size: 1rem;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #dee2e6;
    margin-bottom: -4px;
    background: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    padding: 2px 0px;
    font-weight: var(--font-w-bold);
    font-size: 1rem;
}

.marquee-content {
    display: inline-block;
    animation: scroll-left 20s linear infinite;
    padding-left: 100%;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.btn-comment-replay {
    width: fit-content;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
}

.btn-comment-notice {
    width: fit-content;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    padding: 3px 6px;
    font-size: 0.8rem;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    outline: none;
    border: none;
    right: 0;
    top: 0;
    display: block;
}

.login-form-container {
    width: 90%;
}

.register-form-loading {
    width: 100%;
    padding: 20px 0px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: none;
}

.register-form-loading .icon {
    color: rgb(var(--color-blue));
    font-size: 1.5rem;
    display: block;
}

.register-form-loading .text {
    width: 100%;
    font-size: 0.9rem;
    margin-top: 10px;
    font-weight: var(--font-w-bold);
    text-align: center;
    display: block;
}

.register-content.htmx-request .register-form-loading {
    display: flex;
}

.register-content.htmx-request form {
    display: none;
}

.akis-menu-container {
    width: 100%;
    border-bottom: 2px solid rgb(var(--color-blue));
    overflow: hidden;
    position: relative;
}

.akis-content-loading {
    width: 100%;
    padding: 20px 0px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: none;
}

.akis-content-loading .icon {
    color: rgb(var(--color-blue));
    font-size: 1.5rem;
    display: block;
}

.akis-content-loading .text {
    width: 100%;
    font-size: 0.9rem;
    margin-top: 10px;
    font-weight: var(--font-w-bold);
    text-align: center;
    display: block;
}

.akis-container.htmx-request .akis-content-loading {
    display: flex;
}

.akis-container.htmx-request #akis-inner {
    display: none;
}

/* .akis-menu-container::before{
    content: '\f104';
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 999;
    position: absolute;
}

.akis-menu-container::after{
    content: '\f105';
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 999;
    position: absolute;
} */

.akis-menu-right,
.akis-menu-left {
    border: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    padding: 0px 10px;
    display: block;
}

.akis-menu-right > *,
.akis-menu-left > * {
    pointer-events: none;
}

.akis-menu-inner {
    display: flex;
}

.akis-menu-container .btn-akis-menu-item {
    width: fit-content;
    border: none;
    outline: none;
    cursor: pointer;
    background: transparent;
    align-items: center;
    color: rgb(var(--color-black));
    font-family: var(--body-font);
    padding: 3px 10px;
    font-size: 0.9rem;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-weight: var(--font-w-bold);
    justify-content: center;
    display: flex;
}

.akis-menu-container .btn-akis-menu-item.active {
    background-color: rgb(var(--color-blue));
}

.akis-user-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 10px;
    display: grid;
}

.akis-user-list .user-item .user-item-inner {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: relative;
    display: flex;
}

.akis-user-list .user-item .user-item-inner .comment-user-menu {
    width: 130px;
    top: 0;
    left: 0;
    background-color: rgb(var(--color-white));
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    gap: 5px;
    flex-wrap: wrap;
    left: 0px;
    top: 30px;
    z-index: 9;
    position: absolute;
    display: flex;
}

.akis-user-list .user-item .user-item-inner .comment-user-menu li {
    width: 100%;
    display: block;
}

.akis-user-list
    .user-item
    .user-item-inner
    .comment-user-menu
    li
    .comment-user-menu-item {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(var(--color-light-gray));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border: none;
    outline: none;
    font-size: 0.75rem;
    font-weight: var(--font-w-bold);
    padding: 5px;
    cursor: pointer;
    text-align: left;
    font-family: var(--body-font);
    color: rgb(var(--color-black));
    align-items: center;
    display: flex;
}

.akis-user-list .user-item .user-item-inner .comment-user-menu li .btn-follow {
    width: 100%;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.akis-user-list
    .user-item
    .user-item-inner
    .comment-user-menu
    li
    .btn-unfollow {
    width: 100%;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.akis-user-list .user-item .user-item-inner .comment-user-menu li::before {
    display: none;
}

.akis-user-list .user-item {
    width: 100%;
    background-color: rgba(var(--color-dark-blue), 0.1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
    padding-left: 15px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    display: flex;
}

.akis-user-list .user-item .user-counter {
    width: fit-content;
    min-width: 20px;
    height: 20px;
    padding: 3px;
    background-color: rgb(var(--color-blue));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    transform: translateY(-50%);
    font-weight: var(--font-w-bold);
    left: -10px;
    top: 50%;
    font-size: 0.8rem;
    color: rgb(var(--color-white));
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
}

.akis-user-list .user-item .user-image-container {
    margin-right: 5px;
    position: relative;
    display: block;
}

.akis-user-list .user-item .user-image-container .user-status {
    width: 10px;
    height: 10px;
    background-color: rgb(var(--color-red));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    bottom: 5px;
    left: -2px;
    position: absolute;
}

.akis-user-list .user-item .user-image-container .user-status.online {
    background-color: rgb(var(--color-green));
}

.akis-user-list .user-item .user-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.akis-user-list .user-item .user-name {
    font-weight: var(--font-w-bold);
    align-items: center;
    column-gap: 5px;
    display: flex;
}

.akis-user-list .user-item .follow-count {
    width: fit-content;
    height: 30px;
    padding-right: 5px;
    font-size: 0.9rem;
    font-weight: var(--font-w-bold);
    align-items: center;
    border-right: 1px solid rgba(var(--color-black), 0.3);
    display: flex;
}

.akis-user-list .user-item .follow-count.br-none {
    border: none;
    padding: 0px;
}

.akis-user-list .user-item .follow-count .icon {
    margin-right: 3px;
}

.akis-user-list .user-item .comment-count-con {
    width: fit-content;
    height: 30px;
    border-right: 1px solid rgba(var(--color-black), 0.3);
    padding: 0px 5px;
    margin-right: 5px;
    align-items: center;
    display: flex;
}

.akis-user-list .user-item .comment-count {
    width: fit-content;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    padding: 2px 5px;
    font-weight: var(--font-w-bold);
    -webkit-border-radius: 25px;
    font-size: 0.7rem;
    -moz-border-radius: 25px;
    border-radius: 25px;
    position: relative;
    display: block;
}

.akis-user-list .user-item .comment-count::after {
    content: "";
    width: 0px;
    height: 0px;
    left: 3px;
    bottom: -6px;
    border-style: solid;
    border-width: 11px 5px 0 8px;
    border-color: rgb(var(--color-red)) transparent transparent transparent;
    transform: rotate(30deg);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: absolute;
    display: block;
}

.akis-user-list .user-item .vote-sum {
    flex-direction: column;
    display: flex;
}

.akis-user-list .user-item .vote-sum .title {
    width: 100%;
    font-size: 0.7rem;
    font-weight: var(--font-w-bold);
    display: block;
}

.akis-user-list .user-item .vote-sum .voting-bar {
    height: fit-content;
    padding: 3px 5px;
    font-size: 0.75rem;
    background-color: rgb(var(--color-white));
    border: 1px solid rgba(var(--color-black), 0.2);
    -webkit-border-radius: 50px;
    font-weight: var(--font-w-bold);
    -moz-border-radius: 50px;
    border-radius: 50px;
    align-items: center;
    display: flex;
}

.akis-user-list .user-item .vote-sum .voting-bar .icon {
    color: rgba(var(--color-yellow));
}

.akis-user-list .user-item .vote-sum .voting-bar .avg-score {
    margin-left: 3px;
    font-size: 0.7rem;
}

.akis-user-list.numeric {
    counter-reset: my-counter;
}

.akis-user-list.numeric li {
    position: relative;
}

.akis-user-list.numeric li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    width: fit-content;
    min-width: 15px;
    height: 15px;
    padding: 3px;
    background-color: rgb(var(--color-blue));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    transform: translateY(-50%);
    font-weight: var(--font-w-bold);
    left: -10px;
    top: 50%;
    font-size: 0.8rem;
    color: rgb(var(--color-white));
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
}

.akis-empty-data {
    width: 100%;
    padding: 20px 0px;
    opacity: 0.7;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
}

.akis-empty-data .icon {
    font-size: 3rem;
}

.akis-empty-data .desc {
    width: 100%;
    font-weight: var(--font-w-bold);
    margin-top: 10px;
    text-align: center;
    display: block;
}

.home-page-notice-title {
    width: 100%;
    flex-wrap: wrap;
    gap: 20;
    align-items: center;
    justify-content: space-between;
    display: flex;
}

.home-page-notice-title #home-page-notice-pagination {
    width: fit-content;
    display: flex;
}

.home-page-notice-title #home-page-notice-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: block;
}

.home-page-notice-title
    #home-page-notice-pagination
    .swiper-pagination-bullet-active {
    background-color: rgb(var(--color-blue));
}

#home-page-notice-prev,
#home-page-notice-next {
    cursor: pointer;
    font-size: 0.9rem;
    margin: 10px;
}

.home-page-notice-list,
.home-page-notice-list-ads {
    width: 100%;
    overflow: hidden;
    display: block;
}
.home-page-notice-list-ads .notice-item {
    background-color: rgb(var(--color-white));
    border: 2px solid rgba(var(--color-black), 0.1);
    padding: 15px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    flex-direction: column;
    display: flex;
}
.home-page-notice-list .notice-item {
    width: 100%;
    background-color: rgb(var(--color-white));
    border: 2px solid rgba(var(--color-black), 0.1);
    padding: 15px;
    margin-bottom: 50px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin-top: 35px;
    flex-direction: column;
    display: flex;
}

.home-page-notice-list .notice-item > .comment-detail {
    width: 100%;
    margin-top: 10px;
    display: block;
}

.home-page-notice-list .notice-item > .comment-title {
    width: 100%;
    justify-content: space-between;
    align-items: end;
    margin-top: -40px;
    position: relative;
    display: flex;
}

.home-page-notice-list .notice-item > .comment-title .comment-user-menu {
    width: 130px;
    top: 0;
    left: 0;
    background-color: rgb(var(--color-white));
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    gap: 5px;
    flex-wrap: wrap;
    left: 65px;
    top: 55px;
    z-index: 9;
    position: absolute;
    display: flex;
}

.home-page-notice-list .notice-item > .comment-title .comment-user-menu li {
    width: 100%;
    display: block;
}

.home-page-notice-list
    .notice-item
    > .comment-title
    .comment-user-menu
    li
    .comment-user-menu-item {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(var(--color-light-gray));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border: none;
    outline: none;
    font-size: 0.75rem;
    font-weight: var(--font-w-bold);
    padding: 5px;
    cursor: pointer;
    text-align: left;
    font-family: var(--body-font);
    color: rgb(var(--color-black));
    align-items: center;
    display: flex;
}

.home-page-notice-list
    .notice-item
    > .comment-title
    .comment-user-menu
    li
    .btn-unfollow {
    width: 100%;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.home-page-notice-list
    .notice-item
    > .comment-title
    .comment-user-menu
    li
    .btn-follow {
    width: 100%;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.home-page-notice-list .notice-item > .comment-title > .user-info {
    width: fit-content;
    align-items: end;
    display: flex;
}

.home-page-notice-list .notice-item > .comment-title > .user-info > img {
    width: 70px;
    height: 70px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin-right: 10px;
    border: 4px solid rgb(var(--color-blue));
    border-bottom: 4px solid rgb(var(--color-black));
    object-fit: cover;
    display: block;
}

.home-page-notice-list .notice-item > .comment-title > .user-info .user-name {
    font-weight: var(--font-w-bold);
    font-size: 1.2rem;
    margin-bottom: 15px;
    display: block;
}

.home-page-notice-list .notice-item > .comment-title .date {
    margin-bottom: 15px;
    font-weight: var(--font-w-bold);
    font-size: 0.9rem;
    display: block;
}

.home-page-notice-list
    .notice-item
    > .comment-title
    > .user-info
    .comment-info-group {
    margin-bottom: 4px;
}

.home-page-notice-list
    .notice-item
    > .comment-title
    > .user-info
    .comment-info-group
    .user-name {
    margin: 0px;
}

.home-page-notice-list
    .notice-item
    > .comment-title
    > .user-info
    .comment-info-group
    .date {
    margin: 0px;
    font-weight: 400;
    font-size: 0.8rem;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer > * {
    pointer-events: none;
}

.mobil-user-menu-popup {
    width: 100%;
    max-width: 300px;
    height: 100vh;
    background-color: rgb(var(--color-white));
    padding: 60px 20px 80px 20px;
    left: -100%;
    top: 0;
    z-index: 99999999;
    transition: 200ms;
    overflow: hidden;
    overflow-y: scroll;
    position: fixed;
    display: block;
}

.mobil-user-menu-popup.active {
    left: 0;
}

.mobil-user-menu-popup .btn-mobil-user-menu-popup-close {
    width: fit-content;
    height: fit-content;
    padding: 0px;
    background-color: transparent;
    border: none;
    font-size: 1.7rem;
    outline: none;
    color: rgba(var(--color-black), 0.9);
    cursor: pointer;
    right: 25px;
    top: 20px;
    z-index: 9;
    position: absolute;
    display: block;
}

.mobil-user-menu-popup .btn-mobil-user-menu-popup-close > * {
    pointer-events: none;
}

/*---------- Table ----------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table {
    width: 100%;
}

.table > thead > tr {
    border-bottom: 12px solid rgb(var(--color-white));
}

.table > thead > tr > th > .table-row-item {
    background-color: rgb(var(--color-gray));
    color: rgb(var(--color-white));
    padding: 15px;
    border-right: 1.5px solid rgba(var(--color-white), 0.3);
    font-size: 0.9rem;
}

.table > thead > tr > th:first-child > .table-row-item {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-left: 1px solid rgba(var(--color-dark-blue), 0.1);
}

.table > thead > tr > th:last-child > .table-row-item {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right: 1px solid rgba(var(--color-dark-blue), 0.1);
}

.table > tbody > tr {
    border-bottom: 5px solid rgb(var(--color-white));
}

.table > tbody > tr:last-child {
    border-bottom: none;
}

.table > tbody > tr > td {
    height: 1px;
    vertical-align: top;
}

.table-row-item {
    height: 100%;
    min-height: 45px;
    font-size: 0.8rem;
    background-color: rgba(var(--color-dark-blue), 0.05);
    padding: 5px;
    border-top: 1px solid rgba(var(--color-dark-blue), 0.1);
    border-bottom: 1px solid rgba(var(--color-dark-blue), 0.1);
    border-right: 1.5px solid rgba(var(--color-dark-blue), 0.1);
    align-items: center;
    display: flex;
}

.table-row-item .tick {
    width: 12px;
    height: 12px;
}

.table-row-item .tick:before,
.table-row-item .tick:after {
    width: 12px;
    height: 12px;
}

.table-row-item .tick > .icon {
    font-size: 0.6rem;
}

.table > tbody > tr > td:first-child > .table-row-item {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-left: 1px solid rgba(var(--color-dark-blue), 0.1);
}

.table > tbody > tr > td:last-child > .table-row-item {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right: 1px solid rgba(var(--color-dark-blue), 0.1);
}

.table > tbody > tr:hover .table-row-item {
    background-color: rgba(var(--color-dark-blue), 0.07);
}

.table-w-fit {
    width: 1%;
    white-space: nowrap;
}

.table .row-info-detail {
    width: 100%;
    gap: 5px;
    font-size: 0.8rem;
    align-items: center;
    justify-content: center;
    display: flex;
}

.table .row-info-detail .table-dot {
    width: 7px;
    height: 7px;
    margin: 0px 5px;
    background-color: rgb(var(--color-blue));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.table-center {
    text-align: center;
    width: 100%;
    display: block;
}

.forum-list-user-image {
    width: 35px;
    height: 35px;
    object-fit: cover;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    display: block;
}

/*---------- Table End ----------*/

.forum-category-list {
    width: 100%;
    flex-direction: column;
    gap: 5px;
    display: flex;
}

.forum-category-list .forum-category-list-item {
    width: 100%;
    display: block;
}

.forum-category-list .forum-category-list-item .btn-forum-category-list-item {
    width: 100%;
    align-items: center;
    justify-content: start;
    background-color: rgba(var(--color-dark-blue), 0.05);
    border: 1px solid rgba(var(--color-dark-blue), 0.1);
    padding: 10px;
    font-size: 0.9rem;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    font-family: var(--body-font);
    font-weight: var(--font-w-bold);
    display: flex;
}

.forum-category-list
    .forum-category-list-item
    .btn-forum-category-list-item.htmx-request
    .loading-icon {
    display: block !important;
}

.forum-category-list
    .forum-category-list-item
    .btn-forum-category-list-item
    .icon {
    color: rgb(var(--color-blue));
}

.forum-category-subjects-list-container {
    padding: 0px 10px;
    margin-top: 5px;
}

.forum-category-subjects-list .user-image {
    justify-content: center;
    align-items: center;
    position: relative;
    display: flex;
}

.forum-category-subjects-list .user-image img {
    width: 40px;
    min-width: 40px;
    height: 40px;
    object-fit: cover;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.forum-category-subjects-list .user-image .user-status {
    width: 10px;
    height: 10px;
    background-color: rgb(var(--color-red));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    bottom: 5px;
    left: -2px;
    position: absolute;
}

.forum-category-subjects-list .user-image .user-status.online {
    background-color: rgb(var(--color-green));
}

.forum-category-subjects-list .title {
    width: 100%;
    height: 100%;
    padding-right: 10px;
    flex-direction: column;
    justify-content: center;
    display: flex;
}

.forum-category-subjects-list .title a {
    font-weight: var(--font-w-bold);
    font-size: 0.9rem;
}

.forum-category-subjects-list .title .user-name {
    font-weight: 400;
    font-size: 0.8rem;
}

.forum-category-subjects-list .date {
    width: 100%;
    height: 100%;
    padding: 0px 10px;
    font-size: 0.8rem;
    font-weight: var(--font-w-bold);
    justify-content: center;
    align-items: center;
    display: flex;
}

.forum-category-subjects-list .counters {
    width: 100%;
    padding: 0px 10px;
    font-size: 0.85rem;
    justify-content: center;
    align-items: center;
    gap: 5px;
    display: flex;
}

.forum-category-subjects-list .counters .table-dot {
    width: 7px;
    height: 7px;
    margin: 0px 5px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-color: rgb(var(--color-blue));
    display: block;
}

.forum-list-item-mobile-detail {
    width: max-content;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(var(--color-black), 0.1);
    border-bottom: 0px;
    border-right: 0px;
    background-color: rgba(var(--color-white), 0.5);
    position: absolute;
    display: flex;
}

.forum-list-item-mobile-detail li {
    width: fit-content;
    border-right: 1px solid rgba(var(--color-black), 0.1);
    display: block;
}

.forum-list-item-mobile-detail li:last-child {
    border: none;
}

.top-forum-list-item-mobile-detail {
    width: max-content;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(var(--color-black), 0.1);
    border-bottom: 0px;
    border-right: 0px;
    background-color: rgba(var(--color-white), 0.5);
    position: absolute;
    display: flex;
}

.top-forum-list-item-mobile-detail li {
    width: fit-content;
    padding: 0px 10px;
    border-right: 1px solid rgba(var(--color-black), 0.1);
    display: block;
}

.top-forum-list-item-mobile-detail li:last-child {
    border: none;
}

.top-forum-list-item-mobile-detail .date {
    font-weight: var(--font-w-bold);
    font-size: 0.8rem;
}

.forum-detail-header {
    width: 100%;
    background-color: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
    position: relative;
    display: flex;
}

.forum-detail-header .title {
    font-weight: var(--font-w-bold);
    font-size: 1.1rem;
}

.forum-detail-header .detail {
    justify-content: center;
    align-items: center;
    display: flex;
}

.forum-detail-header .detail .date {
    font-size: 0.95rem;
    padding-right: 10px;
    border-right: 1px solid rgb(var(--color-white), 0.6);
    margin-right: 10px;
    font-weight: var(--font-w-bold);
}

.forum-detail-header .detail .counter {
    font-size: 0.8rem;
    font-weight: var(--font-w-bold);
}

.forum-breadcrumb {
    width: 100%;
    padding-top: 10px;
    margin-top: -10px;
    background-color: #edeff6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    align-items: center;
    display: flex;
}

.forum-breadcrumb li a {
    padding: 10px 15px;
    font-size: 0.85rem;
    font-weight: var(--font-w-bold);
    align-items: center;
    display: flex;
}

.forum-breadcrumb li {
    position: relative;
}

.forum-breadcrumb li::after {
    content: "";
    width: 20px;
    height: 20px;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px 1px 0 0;
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    position: absolute;
    right: -4px;
    top: 8px;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
    -webkit-transform: rotateZ(45deg) skew(10deg, 10deg);
    -moz-transform: rotateZ(45deg) skew(10deg, 10deg);
    -ms-transform: rotateZ(45deg) skew(10deg, 10deg);
    transform: rotateZ(45deg) skew(10deg, 10deg);
}

.forum-breadcrumb li:last-child::after {
    display: none;
}

.subject-detail {
    background-image: linear-gradient(
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.5)
        ),
        url(http://gncllnd.com/images/footer-logo-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.subject-detail {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #e0dfe1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    flex-direction: column;
    position: relative;
    display: flex;
}

.subject-detail .subject-detail-header {
    align-items: stretch;
    /* padding: 10px 0px 10px 10px; */
    border-bottom: 1px solid rgb(var(--color-black), 0.1);
    justify-content: space-between;
    display: flex;
}

/*.subject-detail .subject-detail-header .btn-unfollow {
    width: fit-content;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    height: 30px;
    font-size: 0.8rem;
    padding: 0px 15px;
    align-items: center;
    display: flex;
}

.subject-detail .subject-detail-header .btn-unfollow > * {
    pointer-events: none;
}*/

/*.subject-detail .subject-detail-header .btn-follow {
    width: fit-content;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    height: 30px;
    font-size: 0.8rem;
    padding: 0px 15px;
    align-items: center;
    display: flex;
}

.subject-detail .subject-detail-header .btn-follow > * {
    pointer-events: none;*/
}

.subject-detail .subject-detail-header .user-info {
    padding: 10px;
    align-items: center;
    display: flex;
}

.subject-detail .subject-detail-header .user-info .user-image {
    margin-right: 10px;
    position: relative;
    display: block;
}

.subject-detail .subject-detail-header .user-info .user-image img {
    width: 100px;
    height: 100px;
    min-width: 100px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    object-fit: cover;
    display: block;
}

.subject-detail .subject-detail-header .user-info .user-image .user-status {
    width: 15px;
    height: 15px;
    background-color: rgb(var(--color-red));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    bottom: 5px;
    left: 9px;
    position: absolute;
}

.subject-detail
    .subject-detail-header
    .user-info
    .user-image
    .user-status.online {
    background-color: rgb(var(--color-green));
}

.subject-detail .subject-detail-header .user-info .user-detail {
    height: 100%;
    justify-content: center;
    flex-direction: column;
    display: flex;
}

.subject-detail
    .subject-detail-header
    .user-info
    .user-detail
    .user-info-inner {
    display: flex;
}

.subject-detail
    .subject-detail-header
    .user-info
    .user-detail
    .user-info-inner
    .user-name {
    font-size: 1rem;
    font-weight: var(--font-w-bold);
    margin-right: 10px;
    align-items: center;
    display: flex;
}

.subject-detail
    .subject-detail-header
    .user-info
    .user-detail
    .user-info-inner
    > .btn {
    width: fit-content;
}

.subject-detail .subject-detail-header .user-info .user-detail .user-date {
    margin-top: 5px;
    font-size: 0.8rem;
}

.subject-detail .subject-detail-header .subject-info-right {
    display: flex;
}

.subject-detail .subject-detail-header .subject-info-right .show-counter {
    margin-top: 10px;
    margin-right: 10px;
}

.subject-detail .subject-detail-header .subject-info-right-inner {
    height: 100%;
    background-color: rgb(var(--color-blue));
    padding: 15px;
    justify-content: center;
    gap: 5px;
    font-size: 0.9rem;
    color: rgb(var(--color-black));
    flex-direction: column;
    position: relative;
    display: flex;
}

.subject-detail
    .subject-detail-header
    .subject-info-right-inner
    .btn-comment-notice {
    width: fit-content;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    padding: 3px 6px;
    font-size: 0.8rem;
    border-radius: 0px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    outline: none;
    border: none;
    right: 0;
    top: 0;
    display: block;
}

.subject-detail .subject-detail-header .subject-info-right-inner .icon {
    color: rgb(var(--color-white));
    font-size: 1rem;
}

.subject-comment-list-container {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0px 20px;
    gap: 15px;
    flex-direction: column;
    display: flex;
}

.subject-comment-list-item {
    width: 100%;
    background-color: #ededed;
    border: 1px solid #e0dfe1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    gap: 5px;
    position: relative;
    display: flex;
}

.subject-comment-list-item .comment-item-user-image {
    width: 80px;
    height: 80px;
    min-width: 80px;
    object-fit: cover;
    border: 4px solid var(--color-border);
    border-bottom: 4px solid rgb(var(--color-black));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.subject-comment-list-item .btn-user-info {
    cursor: pointer;
}

.subject-comment-list-item .btn-user-info > * {
    pointer-events: none;
}

.subject-comment-list-item .forum-comment-item-detail {
    width: 100%;
    margin-bottom: 15px;
    flex-direction: column;
    display: flex;
}

.subject-comment-list-item .forum-comment-item-detail .user-name {
    width: fit-content;
    margin-bottom: 5px;
    font-weight: var(--font-w-bold);
    align-items: center;
    display: flex;
}

.subject-comment-list-item .forum-comment-item-detail .user-name .date {
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 10px;
}

.subject-comment-list-item .subject-detail-header {
    width: fit-content;
    right: 0;
    top: 0;
    position: absolute;
    align-items: center;
    display: flex;
}

.subject-comment-list-item .subject-detail-header .show-count {
    font-size: 0.8rem;
    margin-right: 10px;
}

.subject-comment-list-item .subject-detail-header .btn-notice {
    width: fit-content;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    padding: 3px 6px;
    font-size: 0.8rem;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: pointer;
    outline: none;
    border: none;
    display: block;
}

.subject-comment-list-item .subject-detail-header .btn-notice > * {
    pointer-events: none;
}

.subject-comment-list-item .emoji-container .btn-emoji-list,
.btn-show-comment-edit {
    border: none;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    font-size: 1rem;
    padding: 4px 4px 3px 4px;
    outline: none;
    color: rgb(var(--color-blue));
    cursor: pointer;
    display: block;
}

.subject-comment-list-item .emoji-container .btn-emoji-list > * {
    pointer-events: none;
}

.subject-comment-list-item .emoji-container .emoji-list {
    right: 0;
    top: -40px;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    display: flex;
}

.subject-comment-list-item .emoji-container .emoji-list .emoji-list-btn {
    background-color: transparent;
    outline: none;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.subject-comment-list-item .btn-quotation {
    width: 24px;
    height: 24px;
    border: none;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    font-size: 0.8rem;
    outline: none;
    color: rgb(var(--color-blue));
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
}

.subject-comment-list-item .sending-emoji-list {
    width: fit-content;
    bottom: -10px;
    position: absolute;
    gap: 10px;
    display: flex;
}

.subject-comment-list-item .sending-emoji-list .sending-emoji-item {
    font-size: 1rem;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 2px 5px;
    border: 1px solid rgb(var(--color-blue));
    display: block;
}

.subject-comment-list-item .sending-emoji-list .sending-emoji-item span {
    color: rgb(var(--color-blue));
    font-weight: var(--font-w-bold);
    margin-left: 3px;
}

.subject-detail .emoji-container .btn-emoji-list,
.btn-show-comment-edit {
    border: none;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    font-size: 1rem;
    padding: 4px 4px 3px 4px;
    outline: none;
    color: rgb(var(--color-blue));
    cursor: pointer;
    display: block;
}

.subject-detail .emoji-container .btn-emoji-list > * {
    pointer-events: none;
}

.subject-detail .emoji-container .emoji-list {
    right: 0;
    top: -40px;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    display: flex;
}

.subject-detail .emoji-container .emoji-list .emoji-list-btn {
    background-color: transparent;
    outline: none;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.subject-detail .btn-quotation {
    width: 24px;
    height: 24px;
    border: none;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    font-size: 0.8rem;
    outline: none;
    color: rgb(var(--color-blue));
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
}

.subject-detail .sending-emoji-list {
    width: fit-content;
    left: 15px;
    bottom: -27px;
    position: absolute;
    gap: 10px;
    display: grid;
    grid-auto-columns: max-content;
    gap: 4px;
    justify-content: start;
    grid-auto-flow: column;
}

.subject-detail .sending-emoji-list .sending-emoji-item {
    font-size: 1rem;
    background-color: rgb(var(--color-white));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 2px 5px;
    border: 1px solid rgb(var(--color-blue));
    display: block;
}

@media (min-width: 768px) {
    .user-forum-data {
        display: none;
    }
}

/******* ip12pro*/

@media (max-width: 400px) {
    .subject-detail .sending-emoji-list {
        bottom: -27px;
        left: 15px;
    }
    .profile-section {
        padding: 15px 0px;
    }
    .quote-text {
        display: none;
    }
    #like-text {
        display: none;
        color: var(--color-blue) !important;
    }

    .like-icon {
        color: var(--color-blue) !important;
        display: inline-block !important;
    }
    .edit-info {
        display: inline-block !important;
    }
}

/*********ipad*/
@media (max-width: 800px) {
    .subject-comment-list-container {
        padding: 0px !important;
    }
    .subject-comment-list-item {
        background-color: #f6fbff !important;
    }
    .btn-forum-ara-btn {
        padding: 5px !important;
        font-size: 11px !important;
    }
}

.edit-info {
    display: inline-block !important;
    font-size: 12px;
    color: gray;
    padding: 15px 0px 10px 14px;
}

.btn-forum-ara-btn {
    padding: 7px 10px;
    box-shadow: none;
    height: auto;
    margin-right: 15px;
}

.subject-detail .sending-emoji-list .sending-emoji-item span {
    color: rgb(var(--color-blue));
    font-weight: var(--font-w-bold);
    margin-left: 3px;
}

.subject-comment-list-item .comment-user-menu,
.subject-detail-header .comment-user-menu {
    width: 130px;
    top: 0;
    left: 0;
    background-color: rgb(var(--color-white));
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    gap: 5px;
    flex-wrap: wrap;
    left: 90px;
    top: 25px;
    z-index: 9;
    position: absolute;
    display: flex;
}

.subject-comment-list-item .comment-user-menu li,
.subject-detail-header .comment-user-menu li {
    width: 100%;
    display: block;
}

.subject-comment-list-item .comment-user-menu li .comment-user-menu-item,
.subject-detail-header .comment-user-menu li .comment-user-menu-item {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(var(--color-light-gray));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border: none;
    outline: none;
    font-size: 0.75rem;
    font-weight: var(--font-w-bold);
    padding: 5px;
    cursor: pointer;
    text-align: left;
    font-family: var(--body-font);
    color: rgb(var(--color-black));
    align-items: center;
    display: flex;
}

.subject-comment-list-item .comment-user-menu li .btn-follow,
.subject-detail-header .comment-user-menu li .btn-follow {
    width: 100%;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.subject-comment-list-item .comment-user-menu li .btn-unfollow,
.subject-detail-header .comment-user-menu li .btn-unfollow {
    width: 100%;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.subject-pagination {
    width: 100%;
    padding: 0px 20px;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    display: flex;
}

.subject-pagination li a {
    min-width: 25px;
    min-height: 24px;
    padding: 2px 5px;
    background-color: rgb(var(--color-white));
    border: 1px solid rgb(var(--color-black));
    font-weight: var(--font-w-bold);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-size: 0.7rem;
    align-items: center;
    justify-content: center;
    display: flex;
}

.subject-pagination li .active {
    color: rgb(var(--color-white));
    background-color: rgb(var(--color-black));
}

.forum-quotation {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    background-color: rgba(var(--color-dark-blue), 0.1);
    padding: 10px;
    margin-bottom: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    transition: 200ms;
    position: relative;
    display: block;
}

.forum-quotation.active {
    max-height: fit-content;
    padding-bottom: 30px;
}

.forum-quotation.more-btn-active .forum-quotation-more-btn {
    display: flex;
}

.forum-quotation .forum-quotation-more-btn {
    width: 100%;
    bottom: 0;
    justify-content: center;
    padding: 5px 0px;
    background: rgb(220, 223, 229);
    background: linear-gradient(
        0deg,
        rgba(220, 223, 229, 1) 0%,
        rgba(220, 223, 229, 0.8127626050420168) 74%,
        rgba(220, 223, 229, 0.26934523809523814) 100%
    );
    position: absolute;
    display: none;
}

.forum-quotation .forum-quotation-more-btn button {
    border: none;
    background-color: transparent;
    outline: none;
    padding: 0;
    font-family: var(--body-font);
    font-weight: var(--font-w-bold);
    color: rgb(var(--color-dark-blue));
    cursor: pointer;
    display: block;
}

.forum-quotation .forum-quotation-more-btn button > * {
    pointer-events: none;
}

.forum-quotation .icon {
    font-size: 3rem;
    top: -15px;
    left: 0px;
    color: rgba(var(--color-black), 0.2);
    z-index: 0;
    pointer-events: none;
    position: absolute;
}

.forum-quotation .forum-quotation-user {
    color: rgb(var(--color-dark-blue));
    margin-bottom: 5px;
    font-weight: var(--font-w-bold);
    display: block;
}

.forum-quotation p {
    color: rgba(var(--color-black), 0.7);
}

.forum-content-detail {
    width: 100%;
    display: block;
}

.forum-content-detail img {
    max-width: 100%;
    max-height: 700px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

.btn-quotation-delete {
    width: fit-content;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    padding: 3px 6px;
    font-size: 0.8rem;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    right: 0;
    top: 0;
    cursor: pointer;
    outline: none;
    border: none;
    position: absolute;
    display: block;
}

.btn-quotation-delete > * {
    pointer-events: none;
}

.btn-forum-comment-delete {
    width: 24px;
    height: 24px;
    border: none;
    background-color: rgb(var(--color-red));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    font-size: 0.8rem;
    outline: none;
    color: rgb(var(--color-white));
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
}

.btn-forum-comment-delete > * {
    pointer-events: none;
}

.forum-comment-bottom-btn-group {
    right: 10px;
    bottom: -10px;
    gap: 5px;
    position: absolute;
    align-items: center;
    display: flex;
}

.akis-marquee {
    width: 100%;
    max-height: calc(100vh - 150px);
    overflow: hidden;
    display: block;
}

.akis-marquee .akis-marquee-inner {
    width: 100%;
    display: block;
}

.akis-marquee .akis-marquee-items {
    width: 100%;
    display: block;
}

.akis-marquee .akis-marquee-item {
    width: 100%;
    margin-bottom: 5px;
    display: block;
}

.akis-marquee .akis-marquee-item img {
    width: 100%;
    border-radius: 5px;
    display: block;
}

.home-marquee {
    width: 100%;
    overflow: hidden;
    display: block;
}

.home-marquee .home-marquee-inner {
    width: max-content;
    display: flex;
}

.home-marquee .home-marquee-items {
    width: max-content;
    display: flex;
}

.home-marquee .home-marquee-item {
    display: contents;
}

.home-marquee .home-marquee-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 5px;
    display: block;
}

.btn-marquee-direction {
    width: 100%;
    background-color: rgb(var(--color-gray));
    color: rgb(var(--color-white));
    border: none;
    outline: none;
    cursor: pointer;
    padding: 3px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.btn-marquee-direction.up {
    margin-bottom: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.btn-marquee-direction.down {
    margin-top: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.notification-inner-list {
    width: 100%;
    display: block;
}

.notification-inner-list li:first-child {
    font-weight: var(--font-w-bold);
    padding: 10px;
    font-size: 1rem;
    align-items: center;
    display: flex;
}

.notification-inner-list li:first-child .icon {
    color: rgb(var(--color-blue));
}

.notification-inner-list li {
    width: 100%;
    border-bottom: 1px solid rgba(var(--color-black), 0.3);
    display: block;
}

.notification-inner-list li a {
    width: 100%;
    font-size: 0.9rem;
    padding: 5px 5px;
    position: relative;
    display: block;
}

.notification-inner-list li a:hover {
    background-color: rgba(var(--color-dark-blue), 0.1);
}

.notification-inner-list li a .top {
    width: 100%;
    font-size: 0.7rem;
    font-weight: var(--font-w-bold);
    justify-content: end;
    align-items: center;
    display: flex;
}

.notification-inner-list li a .top .dot {
    width: 7px;
    height: 7px;
    margin-left: 5px;
    background-color: rgb(var(--color-blue));
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    display: block;
}

.notification-inner-list li .notification-list-empty {
    opacity: 0.5;
    padding: 30px 0px;
    align-items: center;
    flex-direction: column;
    display: flex;
}

.notification-inner-list li .notification-list-empty .icon {
    font-size: 3rem;
}

.notification-inner-list li .notification-list-empty span {
    width: 100%;
    margin-top: 10px;
    font-weight: var(--font-w-bold);
    font-size: 0.9rem;
    text-align: center;
    display: block;
}

.form-user-popup-menu-con {
    position: relative;
}

.form-user-popup-menu-con .comment-user-menu {
    width: 130px;
    top: 45px;
    left: 60px;
    background-color: rgb(var(--color-white));
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    gap: 5px;
    flex-wrap: wrap;
    z-index: 99999999999999;
    position: absolute;
    display: flex;
}

.form-user-popup-menu-con .comment-user-menu li {
    width: 100%;
    display: block;
}

.form-user-popup-menu-con .comment-user-menu li .comment-user-menu-item {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(var(--color-light-gray));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border: none;
    outline: none;
    font-size: 0.75rem;
    font-weight: var(--font-w-bold);
    padding: 5px;
    cursor: pointer;
    text-align: left;
    font-family: var(--body-font);
    color: rgb(var(--color-black));
    align-items: center;
    display: flex;
}

.form-user-popup-menu-con .comment-user-menu li .btn-follow {
    width: 100%;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.form-user-popup-menu-con .comment-user-menu li .btn-unfollow {
    width: 100%;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.top-form-user-popup-menu-con {
    position: relative;
}

.top-form-user-popup-menu-con .form-user-popup-menu-con .comment-user-menu {
    top: 35px;
    left: 0px;
}

.header-search-box-container {
    position: relative;
}

.header-search-input {
    width: 200px;
    position: relative;
    display: block;
}

.header-search-input input {
    width: 100%;
    height: 30px;
    padding: 5px 10px 7px 10px;
    font-family: var(--body-font);
    color: rgb(var(--color-black));
    font-size: 0.9rem;
    border: 1px solid rgba(var(--color-black), 0.2);
    outline: none;
}

.header-search-input .search-button {
    width: 28px;
    height: 28px;
    top: 1px;
    right: 0;
    background-color: rgb(var(--color-blue));
    color: rgb(var(--color-white));
    font-size: 0.8rem;
    border: none;
    outline: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: absolute;
    display: flex;
}

.header-search-result-list-container {
    width: 250px;
    background: rgb(var(--color-white));
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    overflow-x: hidden;
    position: absolute;
    display: none;
}

.header-searching-company-loading {
    width: 100%;
    padding: 15px 0px;
    font-size: 0.9rem;
    justify-content: center;
    align-items: center;
    font-weight: var(--font-w-bold);
    color: rgba(var(--color-black), 0.8);
    display: none;
}

.header-searching-company-loading > .icon {
    color: rgb(var(--color-blue));
    font-size: 1.2rem;
    margin-right: 10px;
}

.header-search-result-list-container.htmx-request {
    display: block;
}

.header-search-result-list-container.htmx-request
    > .header-searching-company-loading {
    display: flex;
}

.header-search-result-list-container.htmx-request
    > #header-search-result-list-content {
    display: none;
}

.header-search-result-list-container .header-search-result-list {
    width: 100%;
    max-height: 260px;
    overflow: auto;
    display: block;
}

.header-search-result-list-container .header-search-result-list > li {
    width: 100%;
    padding: 5px;
    align-items: center;
    border-bottom: 1px solid rgba(var(--color-black), 0.1);
    display: block;
}

.header-search-result-list-container
    .header-search-result-list
    > li
    > .header-btn-search-list-item {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    display: flex;
}

.header-search-result-list-container
    .header-search-result-list
    > li
    > .header-btn-search-list-item
    > .company-detail {
    align-items: center;
    display: flex;
}

.header-search-result-list-container
    .header-search-result-list
    > li
    > .header-btn-search-list-item
    > .company-detail
    > .company-image {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: block;
}

.header-search-result-list-container
    .header-search-result-list
    > li
    > .header-btn-search-list-item
    > .company-detail
    > .company-name {
    font-weight: var(--font-w-bold);
    font-size: 0.9rem;
    column-gap: 5px;
    display: flex;
}

.header-search-result-list-container
    .header-search-result-list
    > li
    > .header-btn-search-list-item
    > .company-detail
    > .company-name
    .tick::before,
.header-search-result-list-container
    .header-search-result-list
    > li
    > .header-btn-search-list-item
    > .company-detail
    > .company-name
    .tick::after,
.header-search-result-list-container
    .header-search-result-list
    > li
    > .header-btn-search-list-item
    > .company-detail
    > .company-name
    .tick {
    width: 13px;
    height: 13px;
}

.btn-header-search {
    padding: 6px 10px;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 1.2rem;
    color: rgb(var(--color-black));
}

.btn-header-search > * {
    pointer-events: none;
}

.not-fount-page-con {
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
}

.not-fount-title {
    font-size: 10rem;
    font-weight: var(--font-w-bold);
    opacity: 0.2;
}

.not-fount-page-con p {
    width: 100%;
    font-size: 1rem;
    opacity: 0.7;
    line-height: 1.6rem;
    margin-bottom: 20px;
    text-align: center;
    display: block;
}

.grup-user-list-item {
    position: relative;
}

.grup-user-list-item .comment-user-menu {
    width: 130px;
    top: 0;
    left: 0;
    background-color: rgb(var(--color-white));
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    gap: 5px;
    flex-wrap: wrap;
    left: 45px;
    top: 35px;
    z-index: 9;
    position: absolute;
    display: flex;
}

.grup-user-list-item .comment-user-menu li {
    width: 100%;
    display: block;
}

.grup-user-list-item .comment-user-menu li .comment-user-menu-item {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(var(--color-light-gray));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border: none;
    outline: none;
    font-size: 0.75rem;
    font-weight: var(--font-w-bold);
    padding: 5px;
    cursor: pointer;
    text-align: left;
    font-family: var(--body-font);
    color: rgb(var(--color-black));
    align-items: center;
    display: flex;
}

.grup-user-list-item .comment-user-menu li .btn-unfollow {
    width: 100%;
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(var(--color-red));
    color: rgb(var(--color-white));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

.grup-user-list-item .comment-user-menu li .btn-follow {
    width: 100%;
    background-color: rgb(var(--color-blue));
    border: none;
    outline: none;
    font-weight: var(--font-w-bold);
    font-family: var(--body-font);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgb(var(--color-black));
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    font-size: 0.75rem;
    padding: 5px;
    align-items: center;
    display: flex;
}

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1710px) {
    .left-sidebar-box {
        width: 40%;
    }

    .left-sidebar-box-open .home-search-container {
        width: 60%;
        right: -40%;
    }
}

@media (max-width: 1410px) {
    .left-sidebar-box {
        width: 45%;
    }

    .left-sidebar-box-open .home-search-container {
        width: 60%;
        right: -40%;
    }
}

@media (max-width: 1255px) {
    .left-sidebar-box {
        width: 50%;
    }

    .left-sidebar-box-open .home-search-container {
        width: 50%;
        right: -50%;
    }
}

@media (max-width: 1199.98px) {
}

@media (max-width: 1024px) {
    .left-sidebar-box {
        width: 60%;
    }
}

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    /*========== GridSystem ==========*/
    .col-md-1 {
        grid-column: span 1;
    }

    .col-md-2 {
        grid-column: span 2;
    }

    .col-md-3 {
        grid-column: span 3;
    }

    .col-md-4 {
        grid-column: span 4;
    }

    .col-md-5 {
        grid-column: span 5;
    }

    .col-md-6 {
        grid-column: span 6;
    }

    .col-md-7 {
        grid-column: span 7;
    }

    .col-md-8 {
        grid-column: span 8;
    }

    .col-md-9 {
        grid-column: span 9;
    }

    .col-md-10 {
        grid-column: span 10;
    }

    .col-md-11 {
        grid-column: span 11;
    }

    .col-md-12 {
        grid-column: span 12;
    }

    .d-md-none {
        display: none;
    }

    /*========== GridSystem End ==========*/

    .popup-login {
        width: 70%;
    }
}

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 768px) {
    /*========== GridSystem ==========*/
    .col-sd-1 {
        grid-column: span 1;
    }

    .col-sd-2 {
        grid-column: span 2;
    }

    .col-sd-3 {
        grid-column: span 3;
    }

    .col-sd-4 {
        grid-column: span 4;
    }

    .col-sd-5 {
        grid-column: span 5;
    }

    .col-sd-6 {
        grid-column: span 6;
    }

    .col-sd-7 {
        grid-column: span 7;
    }

    .col-sd-8 {
        grid-column: span 8;
    }

    .col-sd-9 {
        grid-column: span 9;
    }

    .col-sd-10 {
        grid-column: span 10;
    }

    .col-sd-11 {
        grid-column: span 11;
    }

    .col-sd-12 {
        grid-column: span 12;
    }

    .mt-sd-10 {
        margin-top: 10px;
    }

    .mt-sd-20 {
        margin-top: 20px;
    }

    .ai-sd-center {
        align-items: center;
    }

    .jc-sd-center {
        justify-content: center;
    }

    .d-sd-grid {
        display: grid !important;
    }

    .d-sd-none {
        display: none !important;
    }

    .d-sd-flex {
        display: flex !important;
    }

    /*========== GridSystem End ==========*/

    .subject-detail .subject-detail-header {
        grid-template-columns: 1fr;
        display: grid;
    }

    .subject-detail .subject-detail-header .subject-info-right {
        width: 100%;
        display: block;
    }

    .left-sidebar-box {
        width: 70%;
    }

    .popup-login {
        width: 90%;
    }

    .message-box-rigth {
        height: calc(100dvh - 50px);
        /* height: 100dvh; */
    }

    .message-box-left {
        min-height: 500px;
        height: auto;
        scrollbar-width: thin;
    }

    .footer-social-container {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 20px;
        display: flex;
    }

    .footer-social-container .footer-social-list,
    .footer-social-container .footer-title {
        width: fit-content;
    }
}

/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 800px) {
    /*========== GridSystem ==========*/
    .col-esd-1 {
        grid-column: span 1;
    }

    .col-esd-2 {
        grid-column: span 2;
    }

    .col-esd-3 {
        grid-column: span 3;
    }

    .col-esd-4 {
        grid-column: span 4;
    }

    .col-esd-5 {
        grid-column: span 5;
    }

    .col-esd-6 {
        grid-column: span 6;
    }

    .col-esd-7 {
        grid-column: span 7;
    }

    .col-esd-8 {
        grid-column: span 8;
    }

    .col-esd-9 {
        grid-column: span 9;
    }

    .col-esd-10 {
        grid-column: span 10;
    }

    .col-esd-11 {
        grid-column: span 11;
    }

    .col-esd-12 {
        grid-column: span 12;
    }

    .mb-esd-20 {
        margin-bottom: 20px;
    }

    .mt-esd-20 {
        margin-top: 20px;
    }

    .jc-esd-center {
        justify-content: center !important;
    }

    .d-esd-flex {
        display: flex !important;
    }

    .d-esd-block {
        display: block !important;
    }

    .d-esd-none {
        display: none !important;
    }

    /*========== GridSystem End ==========*/

    body {
        padding-bottom: 55px;
    }

    .message-box-rigth
        .message-detail-message-list
        .message-item
        .message-item-inner
        .user-image {
        min-width: 50px;
    }

    .akis-marquee {
        height: 150px;
    }

    .akis-user-list .user-item .user-item-inner {
        grid-template-columns: 1fr;
        display: grid;
    }

    .forum-top-title {
        padding-bottom: 15px;
    }

    .akis-detail-user-info {
        justify-content: center;
        grid-template-columns: 1fr;
        display: grid;
    }

    .akis-detail-info {
        justify-content: center;
        display: flex;
    }

    .forum-detail-header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .profile-sum {
        width: 100%;
        grid-template-columns: auto auto auto;
        column-gap: 5px;
        display: grid !important;
    }

    .profile-sum .btn-follow,
    .profile-sum .btn-unfollow,
    .profile-sum .btn-sm {
        width: 100% !important;
        margin: 0px !important;
        font-size: 0.6rem;
    }

    .left-sidebar-box {
        width: 100vw;
    }

    .left-sidebar-box-open .home-search-container {
        right: 0;
        width: 100%;
    }

    .left-sidebar-box .left-sidebar-user-info > .user-image > img {
        width: 100px;
        height: 100px;
        min-width: 100px;
    }

    .left-sidebar-box .left-sidebar-user-info > .user-image > .user-status {
        left: 11px;
        bottom: 5px;
    }

    .mobil-user-menu-popup {
        max-width: 100%;
    }

    .profil-ozet-yorum-baslik {
        font-size: 0.9rem;
    }

    .left-sidebar-box .btn-all-comment {
        font-size: 0.7rem;
    }

    .follow-list-popup {
        width: 90%;
    }

    .home-search-container .search-box-container {
        width: 95%;
    }

    .home-search-container {
        background-size: auto;
        background-position-x: 85%;
    }

    .home-search-container .home-search-logo {
        width: 250px;
    }

    .home-search-container .search-form-input > input {
        padding: 15px 20px 15px 0px;
        font-size: 1rem;
    }

    .home-search-container .search-form-input > button {
        width: 49px;
        height: 49px;
        font-size: 1.1rem;
    }

    .left-sidebar-box .left-sidebar-user-info {
        flex-direction: column;
    }

    .left-sidebar-box .left-sidebar-user-info > .user-detail {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
    }

    .popup-login {
        grid-template-columns: 1fr;
    }

    .akis-user-list {
        grid-template-columns: 1fr;
    }

    .contact-page-title {
        font-size: 1.5rem;
    }

    .footer-item {
        flex-direction: column;
        margin-top: 20px;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .footer-item > * {
        width: fit-content !important;
    }

    .mobil-user-bar {
        display: flex;
    }
}

@media (max-width: 465px) {
    .subject-detail
        .subject-detail-header
        .user-info
        .user-detail
        .user-info-inner {
        flex-wrap: wrap;
    }

    .subject-detail
        .subject-detail-header
        .user-info
        .user-detail
        .user-info-inner
        .user-name {
        width: 100%;
        margin-bottom: 5px;
    }

    .vote-list-container .vote-list li .icon-con {
        left: 0;
    }

    .vote-list-container .vote-list li {
        padding-left: 45px;
    }
}

@media (max-width: 400px) {
    .subject-detail .subject-detail-header .user-info .user-image img {
        height: 80px;
        width: 80px;
        min-width: 80px;
    }
}

@media (max-width: 375px) {
    html {
        font-size: 14px;
    }

    .subject-detail .subject-detail-header .user-info {
        flex-wrap: wrap;
        justify-content: center;
        display: flex;
    }

    .subject-detail .subject-detail-header .user-info .user-image {
        margin: 0px;
    }

    .subject-detail .subject-detail-header .user-info .user-detail {
        align-items: center;
    }

    .subject-detail
        .subject-detail-header
        .user-info
        .user-detail
        .user-info-inner
        .user-name {
        justify-content: center;
        margin-top: 5px;
    }

    .subject-detail
        .subject-detail-header
        .user-info
        .user-detail
        .user-info-inner {
        justify-content: center;
    }

    .subject-detail .subject-detail-header .user-info .user-detail {
        height: auto;
    }

    .subject-comment-list-container {
        padding: 0px;
    }

    .subject-comment-list-item .comment-item-user-image {
        width: 70px;
        height: 70px;
        min-width: 70px;
    }

    .subject-comment-list-item .forum-comment-item-detail {
        margin-top: 15px;
    }

    .profile-comment-item-user-image {
        width: 50px;
        min-width: 50px;
        height: 50px;
        border: 2px solid rgb(var(--color-blue));
        border-bottom: 2px solid rgb(var(--color-black));
    }

    .profile-comment-item-user-name {
        flex-wrap: wrap;
    }

    .profile-comment-item-detail .mobile-date {
        width: 100%;
        justify-content: start;
    }
}

@media (max-width: 320px) {
    .profile-sum {
        /*grid-template-columns: 1fr 1fr;*/
        row-gap: 5px;
    }

    .profile-sum .btn:last-child {
        grid-column: span 2;
        justify-content: center;
    }

    .left-sidebar-box .vote-list {
        border-top-width: 1px;
        border-left-width: 2px;
        flex-direction: column;
    }
    .left-sidebar-box .vote-list > li {
        padding: 0px;
        margin-top: 10px;
        padding-left: 48px !important;
        align-items: start;
        :root {
            --body-font: "Quicksand", sans-serif;
            --font-w-bold: 600;
            --color-background: 249, 249, 255;
            --color-footer-bg: 243, 243, 251;
            --color-blue: 22, 224, 226;
            --color-dark-blue: 59, 85, 160;
            --color-white: 255, 255, 255;
            --color-gray: 163, 163, 163;
            --color-light-gray: 233, 237, 238;
            --color-black: 63, 63, 63;
            --color-red: 233, 97, 91;
            --color-yellow: 255, 211, 42;
            --color-green: 76, 187, 23;
        }

        /*========== Reset Css ==========*/
        * {
            box-sizing: border-box;
            padding: 0px;
            margin: 0px;
        }

        html {
            scroll-behavior: smooth;
            font-size: 15px;
        }

        body {
            font-family: var(--body-font);
            background-color: rgb(var(--color-background));
            color: rgb(var(--color-black));
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: rgb(var(--color-dark-gray), 1);
            font-family: var(--body-font);
            font-weight: 500;
        }

        h1 {
            font-size: 2rem;
            line-height: 1.2rem;
        }

        h2 {
            font-size: 1.5rem;
            line-height: 2.2rem;
        }

        h3 {
            font-size: 1.17rem;
            line-height: 1.2rem;
        }

        h4 {
            font-size: 1rem;
            line-height: 1.2rem;
        }

        p {
            font-size: 1rem;
            line-height: 1.3rem;
        }

        hr {
            border: 0px;
            border-top: 1px double rgba(var(--color-black), 0.1);
        }

        ul {
            list-style: none;
            list-style-position: inside;
        }

        a {
            text-decoration: none;
            color: rgb(var(--color-orange));
        }

        img {
            max-width: 100%;
            height: auto;
        }

        ::-webkit-scrollbar {
            width: 15px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /*========== Reset Css End ==========*/

        /*========== GridSystem ==========*/
        .container {
            width: 95%;
            max-width: 1300px;
            margin: auto;
        }

        .row {
            display: grid !important;
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }

        .col-1 {
            grid-column: span 1;
        }

        .col-2 {
            grid-column: span 2;
        }

        .col-3 {
            grid-column: span 3;
        }

        .col-4 {
            grid-column: span 4;
        }

        .col-5 {
            grid-column: span 5;
        }

        .col-6 {
            grid-column: span 6;
        }

        .col-7 {
            grid-column: span 7;
        }

        .col-8 {
            grid-column: span 8;
        }

        .col-9 {
            grid-column: span 9;
        }

        .col-10 {
            grid-column: span 10;
        }

        .col-11 {
            grid-column: span 11;
        }

        .col-12 {
            grid-column: span 12;
        }

        .ai-center {
            align-items: center;
        }

        .jc-center {
            justify-content: center;
        }

        .jc-between {
            justify-content: space-between;
        }

        .d-block {
            display: block;
        }

        .d-none {
            display: none !important;
        }

        .d-flex {
            display: flex !important;
        }

        /*========== GridSystem End ==========*/
        /*========== Sabitler ==========*/
        /* Tarayıcılar arası otomatik doldurma için genel stil */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            transition: background-color 5000s ease-in-out 0s;
            /* Otomatik doldurma geçiş efekti süresi */
        }

        /* Firefox için otomatik doldurma için genel stil */
        input:-moz-autofill {
            transition: background-color 5000s ease-in-out 0s;
            /* Otomatik doldurma geçiş efekti süresi */
        }

        /* Otomatik doldurma rengini kaldırma */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active,
        input:-moz-autofill {
            background-color: transparent !important;
        }

        /* Stil tanımı */
        .custom-scrollbar {
            scrollbar-width: thin;
            scrollbar-color: lightgray transparent;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: lightgray;
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background-color: transparent;
        }

        .box {
            width: 100%;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            display: block;
        }

        .box-title {
            font-size: 1.2rem;
            font-weight: var(--font-w-bold);
            align-items: center;
            display: flex;
        }

        .box-title-sub-desc {
            font-size: 0.9rem;
            margin-top: -7px;
            display: block;
        }

        .box-shadow {
            box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
                rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
        }

        .mr-5 {
            margin-right: 5px;
        }

        .mr-10 {
            margin-right: 10px;
        }

        .mt-2 {
            margin-top: 2px;
        }

        .mt-5 {
            margin-top: 5px;
        }

        .mt-10 {
            margin-top: 10px;
        }

        .mt-15 {
            margin-top: 15px;
        }

        .mt-20 {
            margin-top: 20px;
        }

        .ml-5 {
            margin-left: 5px;
        }

        .ml-10 {
            margin-left: 10px;
        }

        .mb-10 {
            margin-bottom: 10px;
        }

        .mb-20 {
            margin-bottom: 20px;
        }

        .col-gap-10 {
            column-gap: 10px;
        }

        .col-gap-20 {
            column-gap: 20px;
        }

        .w-100 {
            width: 100%;
        }

        .w-fit {
            width: max-content !important;
        }

        .p-0 {
            padding: 0px !important;
        }

        .p-10 {
            padding: 10px;
        }

        .p-20 {
            padding: 20px;
        }

        .pt-80 {
            padding-top: 80px;
        }

        .ptb-30 {
            padding: 30px 0px;
        }

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

        .color-blue {
            color: rgb(var(--color-blue));
        }

        .color-red {
            color: rgb(var(--color-red)) !important;
        }

        .color-white {
            color: rgb(var(--color-white)) !important;
        }

        .tab-menu {
            width: 100%;
            border-bottom: 2px solid rgb(var(--color-blue));
            display: flex;
        }

        .tab-menu .tab-item {
            border: none;
            background-color: transparent;
            padding: 5px 15px;
            font: var(--body-font);
            font-weight: var(--font-w-bold);
            color: rgb(var(--color-black));
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            align-items: center;
            cursor: pointer;
            justify-content: center;
            display: flex;
        }

        .tab-menu .tab-item:hover,
        .tab-menu .tab-item.active {
            background-color: rgb(var(--color-blue));
            color: rgb(var(--color-white));
        }

        .pagination {
            flex-wrap: wrap;
            margin-top: 20px;
            column-gap: 10px;
            display: flex;
        }

        .pagination li a {
            min-width: 25px;
            min-height: 24px;
            padding: 2px 5px;
            background-color: rgb(var(--color-white));
            box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
                rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
            font-weight: var(--font-w-bold);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 0.8rem;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .pagination li .active {
            background-color: rgb(var(--color-blue));
        }

        /*========== Sabitler End ==========*/
        /*========== Custom Checbox ==========*/
        .custom-check {
            width: fit-content;
            display: block;
            position: relative;
            padding-left: 22px;
            cursor: pointer;
            font-size: 0.95rem;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .custom-check input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 18px;
            width: 18px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: #eee;
        }

        /* On mouse-over, add a grey background color */
        .custom-check:hover input ~ .checkmark {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .custom-check input:checked ~ .checkmark {
            background-color: rgb(var(--color-dark-blue));
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .custom-check input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .custom-check .checkmark:after {
            left: 6px;
            top: 1px;
            width: 4px;
            height: 9px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        /*========== Custom Checbox End ==========*/
        /*========== Mavi Tik ==========*/
        .mavi-tick {
            background: var(--color-level);
            width: 12px;
            height: 12px;
            position: relative;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .mavi-tick > .icon {
            color: white;
            position: relative;
            font-size: 0.6rem;
            z-index: 9999999;
        }

        .mavi-tick:before,
        .mavi-tick:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 12px;
            width: 12px;
            background: var(--color-level);
        }

        .mavi-tick:before {
            transform: rotate(60deg);
        }

        .mavi-tick:after {
            transform: rotate(30deg);
        }

        .mavi-tick.small-tick {
            width: 12px;
            height: 12px;
        }

        .mavi-tick.small-tick::before,
        .mavi-tick.small-tick:after {
            width: 12px;
            height: 12px;
        }

        .mavi-tick.small-tick > .icon {
            font-size: 0.6rem;
        }

        /*========== Mavi Tik End ==========*/
        /*========== Sarı Tik ==========*/
        .tick {
            background: var(--tick-color) !important;
            width: 12px;
            height: 12px;
            position: relative;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .tick > .icon {
            color: #fff;
            position: relative;
            font-size: 0.6rem;
            z-index: 9;
        }

        .tick:before,
        .tick:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 12px;
            width: 12px;
            background: var(--tick-color) !important;
        }

        .tick:before {
            transform: rotate(60deg);
        }

        .tick:after {
            transform: rotate(30deg);
        }

        .tick.small-tick {
            width: 12px;
            height: 12px;
        }

        .tick.small-tick::before,
        .tick.small-tick:after {
            width: 12px;
            height: 12px;
        }

        .tick.small-tick > .icon {
            font-size: 0.6rem;
        }

        .user-color {
            color: var(--tick-color) !important;
        }

        /*========== Sarı Tik End ==========*/
        /*========== Header ==========*/
        .header {
            width: 100%;
            padding: 10px 0px;
            z-index: 10;
            position: absolute;
            display: block;
        }

        .header > .container {
            justify-content: space-between;
            align-items: center;
            display: flex;
        }

        .header > .container > .logo {
            width: 180px;
            display: block;
        }

        .header > .container > .logo > img {
            width: 100%;
            display: block;
        }

        .header .header-user-menu {
            width: fit-content;
            align-items: center;
            display: flex;
        }

        .header .header-user-menu > li {
            margin-right: 15px;
            font-size: 1.1rem;
        }

        .header .header-user-menu .notification-container {
            position: relative;
        }

        .header .header-user-menu .notification-container .notification-list {
            width: 300px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgb(var(--color-white));
            border: 1px solid rgba(var(--color-black), 0.3);
            border-radius: 5px;
            z-index: 9999;
            right: 0;
            overflow: hidden;
            overflow-y: auto;
            position: absolute;
        }

        .header .header-user-menu .btn-header-notification > * {
            pointer-events: none;
        }

        .header .header-user-menu > li:last-child {
            margin-right: 0px;
        }

        .header .header-user-menu .header-btn {
            font-weight: var(--font-w-bold);
            position: relative;
        }

        .header .header-user-menu .header-btn.active,
        .header .header-user-menu .header-btn:hover {
            color: rgb(var(--color-dark-blue)) !important;
        }

        .header .header-user-menu .header-btn .count {
            min-width: 15px;
            min-height: 15px;
            font-size: 0.8rem;
            background-color: rgb(var(--color-blue));
            position: absolute;
            justify-content: center;
            align-items: center;
            top: -5px;
            right: -7px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: flex;
        }

        .header .header-user-menu .header-btn.blue {
            color: rgb(var(--color-blue));
        }

        .header .header-user-menu .header-btn.bg-blue {
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            padding: 8px 13px;
            color: rgb(var(--color-white));
            background-color: rgb(var(--color-blue));
            display: block;
        }

        .header .header-user-menu .header-user-btn {
            background-color: transparent;
            border: none;
            align-items: center;
            cursor: pointer;
            column-gap: 5px;
            font-size: 1rem;
            position: relative;
            display: flex;
        }

        .header .header-user-menu .header-user-btn > * {
            pointer-events: none;
        }

        .header .header-user-menu .header-user-btn .user-image {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border: 2px solid rgb(var(--color-blue));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .header .header-user-menu .header-user-btn .top-desc {
            width: 100%;
            color: rgba(var(--color-black), 0.8);
            text-align: left;
            display: block;
        }

        .header .header-user-menu .header-user-btn .user-name {
            width: 100%;
            color: rgba(var(--color-black), 0.9);
            font-weight: var(--font-w-bold);
            text-align: left;
            display: block;
        }

        .header .header-user-menu .header-user-btn .user-status {
            width: 10px;
            height: 10px;
            background-color: rgb(var(--color-red));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            bottom: 14px;
            left: -2px;
            position: absolute;
        }

        .header .header-user-menu .header-user-btn .user-status.online {
            background-color: rgb(var(--color-green));
        }

        .header .header-user-profil {
            position: relative;
        }

        .header .header-user-profil .header-user-profile-menu {
            width: max-content;
            top: 35px;
            left: 30%;
            transform: translateX(-50%);
            position: absolute;
            display: none;
        }

        .header .header-user-profil .header-user-profile-menu li {
            border: 1px solid rgb(var(--color-blue));
            width: 100%;
            margin-top: 5px;
            padding-right: 5px;
            background-color: #f3f1f2;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            display: block;
        }

        .header .header-user-profil .header-user-profile-menu li:hover {
            background-color: rgba(var(--color-blue));
            color: #fff;
        }

        .header .header-user-profil .header-user-profile-menu .logout-btn {
            background-color: #ffbfbf;
            color: rgb(var(--color-red));
            border: 1px solid rgb(var(--color-red));
        }

        .header
            .header-user-profil
            .header-user-profile-menu
            .logout-btn:hover {
            background-color: #e9615b;
            color: #fff;
        }

        .header
            .header-user-profil
            .header-user-profile-menu
            .logout-btn
            .icon {
            background-color: rgb(var(--color-red));
        }

        .header .header-user-profil .header-user-profile-menu li a {
            width: 100%;
            font-size: 1rem;
            font-weight: var(--font-w-bold);
            align-items: center;
            display: flex;
        }

        .header .header-user-profil .header-user-profile-menu li a .icon {
            width: 25px;
            height: 20px;
            margin-left: -1px;
            background-color: rgb(var(--color-blue));
            color: rgb(var(--color-white));
            align-items: center;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin-right: 5px;
            justify-content: center;
            display: flex;
        }

        /*========== Header End ==========*/
        /*========== Form Elemanlari ==========*/
        .form-group {
            width: 100%;
            display: block;
        }

        .form-label {
            width: 100%;
            font-size: 0.9rem;
            font-weight: var(--font-w-bold);
            display: block;
        }

        .input-group {
            width: 100%;
            height: 40px;
            padding: 0px 10px;
            align-items: center;
            background-color: rgba(var(--color-black), 0.05);
            border: 1px solid rgb(var(--color-black), 0.3);
            border-bottom: 2px solid rgb(var(--color-blue));
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            column-gap: 10px;
            display: flex;
        }

        .textarea-input-group {
            height: auto;
            padding: 10px;
            align-items: start;
        }

        .input-group .input-loading {
            display: none;
        }

        .input-group.htmx-request .input-loading {
            display: block;
        }

        .input-group .form-input {
            width: 100%;
            height: 100%;
            background-color: transparent;
            border: none;
            outline: none;
            resize: none;
            color: rgb(var(--color-black));
            font-family: var(--body-font);
            font-size: 1rem;
            align-items: center;
            display: flex;
        }

        .input-group .icon {
            color: rgba(var(--color-black), 0.6);
        }

        .form-group .form-error-message {
            color: rgb(var(--color-red));
            font-size: 0.8rem;
            font-weight: var(--font-w-bold);
            display: block;
        }

        .form-error > .input-group {
            border: 1px solid rgb(var(--color-red));
        }

        .form-error-message {
            display: none;
        }

        .form-required-icon {
            font-size: 0.6rem;
            margin: 3px 3px 0px 3px;
            color: rgb(var(--color-red));
            display: block !important;
        }

        .input-group .choices {
            width: 100% !important;
            height: 100% !important;
            align-items: center !important;
            display: flex !important;
        }

        .input-group .choices .choices__inner {
            background-color: transparent !important;
            border: none !important;
            padding: 0px !important;
            font-size: 1rem;
            align-items: center !important;
            display: flex !important;
        }

        .input-group .choices .choices__list--dropdown,
        .input-group .choices .choices__list[aria-expanded] {
            background-color: #f2f2f2;
        }

        .choices[data-type*="select-one"] .choices__input {
            background-color: #f2f2f2;
            border-bottom: 1px solid rgb(var(--color-blue));
        }

        .choices__list--dropdown .choices__item--selectable.is-highlighted,
        .choices__list[aria-expanded]
            .choices__item--selectable.is-highlighted {
            background-color: rgba(var(--color-blue), 0.2);
        }

        .choices__list--dropdown .choices__item--selectable,
        .choices__list[aria-expanded] .choices__item--selectable {
            padding-right: 0px;
        }

        .btn {
            width: 100%;
            height: 40px;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-size: 0.85rem;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            padding: 10px 15px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            display: block;
        }

        .btn-sm {
            height: 30px;
            font-size: 0.8rem;
            padding: 0px 15px;
            align-items: center;
            display: flex;
        }

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

        .btn.htmx-request {
            pointer-events: none;
        }

        .htmx-request > .btn-content {
            display: none;
        }

        .htmx-request > .btn-loader {
            display: flex;
        }

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

        .btn-loader > .icon {
            font-size: 1.2rem;
        }

        .btn > * {
            pointer-events: none;
        }

        .btn.gray {
            background-color: rgba(var(--color-light-gray));
        }

        .btn.red {
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
        }

        .btn.black {
            background-color: rgb(var(--color-black));
            color: rgb(var(--color-white));
        }

        .btn.white {
            background-color: rgb(var(--color-white));
        }

        #recaptcha-container > div {
            height: auto !important;
        }

        .preview-profil-image {
            width: 200px;
            min-width: 200px;
            height: 200px;
            cursor: pointer;
            border-radius: 4px;
            margin-right: 10px;
            background-color: #f5f7f930;
            justify-content: center;
            align-items: center;
            position: relative;
            display: flex;
        }

        .preview-profil-image > .file-select {
            width: 30px;
            height: 30px;
            background-color: rgb(var(--color-blue));
            color: rgb(var(--color-white));
            bottom: -10px;
            left: 50%;
            font-size: 1rem;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            transform: translateX(-50%);
            position: absolute;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .preview-profil-image > .preview-image {
            width: 200px;
            height: 200px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            border: 2px dashed rgba(0, 0, 0, 0.1);
            object-fit: cover;
            display: block;
        }

        .preview-profil-image > input[type="file"] {
            display: none;
        }

        .preview-banner-image {
            width: 100%;
            max-width: 700px;
            height: 200px;
            cursor: pointer;
            border-radius: 4px;
            margin-right: 10px;
            background-color: #f5f7f930;
            justify-content: center;
            align-items: center;
            position: relative;
            display: flex;
        }

        .preview-banner-image > .file-select {
            width: 30px;
            height: 30px;
            background-color: rgb(var(--color-blue));
            color: rgb(var(--color-white));
            bottom: -10px;
            left: 50%;
            font-size: 1rem;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            transform: translateX(-50%);
            position: absolute;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .preview-banner-image > .preview-image {
            width: 100%;
            max-width: 700px;
            height: 200px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: 2px dashed rgba(0, 0, 0, 0.1);
            object-fit: cover;
            display: block;
        }

        .preview-banner-image > input[type="file"] {
            display: none;
        }

        .preview-mobil-banner-image {
            width: 100%;
            max-width: 150px;
            height: 200px;
            cursor: pointer;
            border-radius: 4px;
            margin-right: 10px;
            background-color: #f5f7f930;
            justify-content: center;
            align-items: center;
            position: relative;
            display: flex;
        }

        .preview-mobil-banner-image > .file-select {
            width: 30px;
            height: 30px;
            background-color: rgb(var(--color-blue));
            color: rgb(var(--color-white));
            bottom: -10px;
            left: 50%;
            font-size: 1rem;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            transform: translateX(-50%);
            position: absolute;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .preview-mobil-banner-image > .preview-image {
            width: 100%;
            max-width: 150px;
            height: 200px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: 2px dashed rgba(0, 0, 0, 0.1);
            object-fit: cover;
            display: block;
        }

        .preview-mobil-banner-image > input[type="file"] {
            display: none;
        }

        /*========== Form Elemanlari End ==========*/
        .content {
            width: 100%;
            display: block;
        }

        .page-title {
            width: 100%;
            font-weight: var(--font-w-bold);
            display: block;
        }

        .page-title .icon {
            margin-right: 10px;
            color: rgb(var(--color-blue));
        }

        .alert-box {
            width: 100%;
            padding: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            display: block;
        }

        .alert-box > .alert-box-title {
            width: 100%;
            font-weight: var(--font-w-bold);
            margin-bottom: 5px;
            align-items: center;
            display: flex;
        }

        .alert-box > .alert-box-title > .icon {
            font-size: 1.5rem;
        }

        .alert-box > p {
            font-size: 0.9rem;
            line-height: 1.2rem;
        }

        .alert-box.success {
            background-color: rgba(var(--color-green), 0.2);
            color: rgb(var(--color-green));
        }

        .alert-box.error {
            background-color: rgba(var(--color-red), 0.2);
            color: rgb(var(--color-red));
        }
        .alert-box.warning {
            background-color: rgb(255 199 35 / 20%);
            color: #896b00;
        }

        /*========== Home Search ==========*/
        .home-search-container {
            height: 100vh;
            padding-top: 55px;
            background-image: url("../images/background.png");
            background-size: 100% 90vh;
            background-repeat: no-repeat;
            position: relative;
            display: block;
        }

        .home-logo-top-padding {
            padding-top: calc(100vh / 5);
            display: block;
        }

        .home-search-container .home-search-logo {
            width: 300px;
            margin: auto auto;
            z-index: 9;
            position: relative;
            display: block;
        }

        .home-search-container .home-search-logo img {
            width: 100%;
            display: block;
        }

        .home-search-container .search-box-container {
            width: 500px;
            margin: auto auto;
            margin-top: 20px;
            position: relative;
        }

        .home-search-container .search-form-input {
            width: 100%;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
            padding: 0px 30px;
            z-index: 9;
            align-items: center;
            position: relative;
            display: flex;
        }

        .home-search-container .search-form-input > input {
            width: 100%;
            font-size: 1.18rem;
            padding: 20px 35px 20px 0px;
            outline: none;
            font-family: var(--body-font);
            color: var(--color-black);
            border: none;
            display: block;
        }

        .home-search-container .search-form-input > button {
            width: 61px;
            height: 61px;
            justify-content: center;
            align-items: center;
            position: absolute;
            background-color: rgb(var(--color-blue));
            color: rgb(var(--color-white));
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
            right: 0;
            top: 0;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            outline: none;
            display: flex;
        }

        .home-search-container .social-media-list {
            width: fit-content;
            margin: auto auto;
            margin-top: 100px;
            column-gap: 10px;
            z-index: 1;
            position: relative;
            display: flex;
        }

        .home-search-container .social-media-list a {
            width: 35px;
            height: 35px;
            font-size: 1.7rem;
            color: rgb(var(--color-blue));
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .home-search-container .home-search-inner {
            width: 100%;
            right: 0;
            transition: 200ms;
            position: absolute;
        }

        .home-search-container .home-search-inner::before {
            content: "";
            width: 100%;
            top: -55px;
            height: 100vh;
            background-image: url(../images/bg-logo.png);
            background-size: auto auto;
            background-repeat: no-repeat;
            position: absolute;
        }

        /*========== Home Search End ==========*/
        /*========== Arama Sonucu ==========*/
        .search-result-list-container {
            width: 100%;
            background: rgb(var(--color-white));
            top: 30px;
            padding-top: 35px;
            -webkit-border-bottom-right-radius: 20px;
            -webkit-border-bottom-left-radius: 20px;
            -moz-border-radius-bottomright: 20px;
            -moz-border-radius-bottomleft: 20px;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
            z-index: 2;
            overflow-x: hidden;
            position: absolute;
            display: none;
        }

        .search-result-list-container > .searching-company-loading {
            width: 100%;
            padding: 5px 0px 15px 0px;
            justify-content: center;
            align-items: center;
            font-weight: var(--font-w-bold);
            color: rgba(var(--color-black), 0.8);
            display: none;
        }

        .search-result-list-container.htmx-request {
            display: block;
        }

        .search-result-list-container.htmx-request
            > .searching-company-loading {
            display: flex;
        }

        .search-result-list-container.htmx-request
            > #search-result-list-content {
            display: none;
        }

        .search-result-list-container > .searching-company-loading > .icon {
            color: rgb(var(--color-blue));
            font-size: 1.2rem;
            margin-right: 10px;
        }

        .search-result-list-container .search-result-list {
            width: 100%;
            max-height: 260px;
            overflow: auto;
            display: block;
        }

        .search-result-list-container .search-result-list > li {
            width: 100%;
            padding: 5px 15px;
            align-items: center;
            border-bottom: 1px solid rgba(var(--color-black), 0.1);
            display: block;
        }

        .search-result-list-container .search-result-list > li:first-child {
            border-top: 1px solid rgba(var(--color-black), 0.1);
        }

        .search-result-list-container .search-result-list > .sponsored {
            background-color: rgba(var(--color-green), 0.1);
            position: relative;
        }

        .search-result-list-container .search-result-list > .sponsored::after {
            content: attr(data-value);
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgb(var(--color-green));
            color: rgb(var(--color-white));
            padding: 3px 7px;
            font-weight: var(--font-w-bold);
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            font-size: 0.6rem;
            position: absolute;
        }

        .search-result-list-container
            .search-result-list
            > li
            > .btn-search-list-item {
            width: 100%;
            align-items: center;
            justify-content: space-between;
            display: flex;
        }

        .search-result-list-container
            .search-result-list
            > li
            > .btn-search-list-item
            > * {
            pointer-events: none;
        }

        .search-result-list-container
            .search-result-list
            > li
            > .btn-search-list-item
            > .company-detail {
            align-items: center;
            display: flex;
        }

        .search-result-list-container
            .search-result-list
            > li
            > .btn-search-list-item
            > .company-detail
            > .icon {
            color: rgb(var(--color-blue));
            margin-right: 10px;
            display: block;
        }

        .search-result-list-container
            .search-result-list
            > li
            > .btn-search-list-item
            > .company-detail
            > .company-image {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .search-result-list-container
            .search-result-list
            > li
            > .btn-search-list-item
            > .company-detail
            > .company-name {
            font-weight: var(--font-w-bold);
            font-size: 0.9rem;
            column-gap: 5px;
            display: flex;
        }

        .search-result-list-container
            .search-result-list
            > li
            > .btn-search-list-item
            > .voting-bar {
            height: fit-content;
            padding: 3px 5px;
            font-size: 0.8rem;
            background-color: rgb(var(--color-white));
            border: 1px solid rgba(var(--color-black), 0.2);
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            align-items: center;
            display: flex;
        }

        .search-result-list-container .search-result-list > li:hover {
            background-color: rgba(var(--color-blue), 0.1);
        }

        .search-result-list-container
            .search-result-list
            > li
            > .btn-search-list-item
            > .voting-bar
            > .icon {
            color: rgba(var(--color-yellow));
        }

        .search-result-list-container
            .search-result-list
            > li
            > .btn-search-list-item
            > .voting-bar
            > .avg-score {
            margin-left: 3px;
            font-weight: var(--font-w-bold);
        }

        .search-result-list-container .btn-add-company {
            width: 100%;
            border: none;
            outline: none;
            background-color: transparent;
            margin: 5px 0px;
            color: rgb(var(--color-black));
            text-align: center;
            font-size: 0.7rem;
            cursor: pointer;
            font-family: var(--body-font);
            display: block;
        }

        .no-search-results {
            padding: 10px 0px;
            align-items: center;
            flex-direction: column;
            display: flex;
        }

        .no-search-results > .icon {
            color: rgb(var(--color-blue));
            font-size: 2.5rem;
        }

        .no-search-results > .no-search-results-desc {
            width: 100%;
            text-align: center;
            margin-top: 5px;
            font-size: 0.9rem;
            font-weight: var(--font-w-bold);
        }

        /*========== Arama Sonucu End ==========*/
        /*========== Left Sidebar Box ==========*/
        .left-sidebar-box {
            width: 33%;
            height: 100%;
            z-index: 99999999 !important;
            background: rgb(var(--color-white));
            top: 0;
            left: -100%;
            padding: 20px 0px;
            overflow: hidden;
            -webkit-border-top-right-radius: 40px;
            -webkit-border-bottom-right-radius: 40px;
            -moz-border-radius-topright: 40px;
            -moz-border-radius-bottomright: 40px;
            border-top-right-radius: 40px;
            border-bottom-right-radius: 40px;
            transition: 200ms;
            box-shadow: rgba(0, 0, 0, 0.3) 0px -60px 40px,
                rgba(0, 0, 0, 0.22) 0px 15px 12px;
            position: fixed;
            display: block !important;
        }

        .btn-left-sidebar-box-close {
            width: fit-content;
            height: fit-content;
            padding: 0px;
            background-color: transparent;
            border: none;
            font-size: 1.7rem;
            outline: none;
            color: rgba(var(--color-black), 0.9);
            cursor: pointer;
            right: 25px;
            top: 20px;
            z-index: 9;
            position: absolute;
            display: block;
        }

        .btn-left-sidebar-box-close > * {
            pointer-events: none;
        }

        .left-sidebar-box::before {
            content: "";
            width: 648px;
            height: 627px;
            background-image: url(../images/left-sidebar-bg.png);
            background-repeat: no-repeat;
            position: absolute;
            right: -480px;
            top: -118px;
            z-index: 1;
            display: block;
        }

        .left-sidebar-box .left-sidebar-inner {
            width: 100%;
            height: 100%;
            z-index: 2;
            padding: 0px 20px;
            overflow: auto;
            overflow-x: hidden;
            display: block;
            position: relative;
        }

        .left-sidebar-box .left-sidebar-user-info {
            width: 100%;
            column-gap: 10px;
            z-index: 2;
            position: relative;
            align-items: center;
            display: flex;
        }

        .left-sidebar-box .left-sidebar-user-info > .user-image {
            position: relative;
        }

        .left-sidebar-box .left-sidebar-user-info > .user-image > img {
            width: 150px;
            height: 150px;
            min-width: 150px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            object-fit: cover;
            display: block;
        }

        .left-sidebar-box .left-sidebar-user-info > .user-image > .user-status {
            width: 15px;
            height: 15px;
            left: 20px;
            bottom: 10px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            background-color: rgb(var(--color-red));
            position: absolute;
            display: block;
        }

        .left-sidebar-box
            .left-sidebar-user-info
            > .user-image
            > .user-status.online {
            background-color: rgb(var(--color-green));
        }

        .left-sidebar-box .left-sidebar-user-info > .user-detail {
            width: 100%;
            display: block;
        }

        .left-sidebar-box .left-sidebar-user-info > .user-detail > .user-name {
            font-size: 1.2rem;
            font-weight: var(--font-w-bold);
            column-gap: 10px;
            margin-bottom: 5px;
            align-items: center;
            display: flex;
        }

        .left-sidebar-box .left-sidebar-user-info > .user-detail .user-follow {
            font-weight: var(--font-w-bold);
            cursor: pointer;
        }

        .left-sidebar-box
            .left-sidebar-user-info
            > .user-detail
            .user-follow
            > .icon {
            color: rgb(var(--color-dark-blue));
        }

        .left-sidebar-box .left-sidebar-user-info > .user-detail .social-list {
            align-items: center;
            display: flex;
        }

        .left-sidebar-box
            .left-sidebar-user-info
            > .user-detail
            .social-list
            > li {
            margin-right: 7px;
        }

        .left-sidebar-box
            .left-sidebar-user-info
            > .user-detail
            .social-list
            > li
            > a {
            width: 25px;
            height: 25px;
            border: 3px solid rgb(var(--color-white));
            outline: 1px solid rgb(var(--color-blue));
            background-color: rgb(var(--color-blue));
            font-size: 0.8rem;
            color: rgb(var(--color-white));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .social-btn-facebook {
            outline: 1px solid #1877f2 !important;
            background-color: #1877f2 !important;
        }

        .social-btn-twitter {
            outline: 1px solid #14171a !important;
            background-color: #14171a !important;
        }

        .social-btn-instagram {
            outline: 1px solid #c32aa3 !important;
            background: #d6249f;
            background: radial-gradient(
                circle at 30% 107%,
                #fdf497 0%,
                #fdf497 5%,
                #fd5949 45%,
                #d6249f 60%,
                #285aeb 90%
            );
        }

        .social-btn-telegram {
            outline: 1px solid #0088cc !important;
            background-color: #0088cc !important;
        }

        .left-sidebar-box .vote-list {
            width: 100%;
            align-items: center;
            position: relative;
            border: 1px solid rgb(var(--color-blue));
            background-color: rgb(var(--color-white));
            margin-top: 25px;
            border-top-width: 2px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding-bottom: 25px;
            justify-content: space-between;
            position: relative;
            display: flex;
        }

        .left-sidebar-box .vote-list > li {
            width: 100%;
            padding-top: 15px;
            align-items: center;
            position: relative;
            flex-direction: column;
            display: flex;
        }

        .left-sidebar-box .vote-list > li > .icon-con {
            width: 25px;
            height: 25px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgb(var(--color-white));
            border: 2px solid rgb(var(--color-blue));
            transform: rotate(45deg);
            align-items: center;
            font-size: 0.9rem;
            justify-content: center;
            top: -13px;
            position: absolute;
            display: flex;
        }

        .left-sidebar-box .vote-list > li > .icon-con.active {
            background-color: rgb(var(--color-blue));
        }

        .left-sidebar-box .vote-list > li > .icon-con.active > .icon {
            color: rgb(var(--color-white));
        }

        .left-sidebar-box .vote-list > li > .icon-con > .icon {
            transform: rotate(-45deg);
            color: rgb(var(--color-blue));
        }

        .left-sidebar-box .vote-list > li > .item-title {
            font-weight: var(--font-w-bold);
            font-size: 0.9rem;
        }

        .left-sidebar-box .vote-list > li > .vote-star-list {
            align-items: center;
            color: rgba(var(--color-yellow));
            padding: 2px 5px;
            font-size: 0.8rem;
            column-gap: 1px;
            margin-top: 5px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
                rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
            display: flex;
        }

        .left-sidebar-box .vote-list > li > .vote-star-list > .count {
            font-weight: var(--font-w-bold);
            margin-left: 5px;
            color: rgb(var(--color-black));
        }

        .left-sidebar-box .vote-list > .point-count {
            width: fit-content;
            padding: 3px 8px;
            font-size: 0.7rem;
            font-weight: var(--font-w-bold);
            left: -1px;
            bottom: -1px;
            -webkit-border-top-right-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-topright: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            background-color: rgb(var(--color-dark-blue));
            color: rgb(var(--color-white));
            position: absolute;
            display: block;
        }

        .left-sidebar-box .vote-list > .vote-count {
            width: fit-content;
            padding: 3px 8px;
            font-size: 0.7rem;
            font-weight: var(--font-w-bold);
            right: -1px;
            bottom: -1px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-bottom-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-bottomright: 5px;
            border-top-left-radius: 5px;
            border-bottom-right-radius: 5px;
            background-color: rgb(var(--color-dark-blue));
            color: rgb(var(--color-white));
            position: absolute;
            display: block;
        }

        .left-sidebar-box .vote-list > .btn-vote {
            width: fit-content;
            background-color: rgba(var(--color-yellow));
            border: none;
            outline: none;
            cursor: pointer;
            padding: 5px 12px;
            font-size: 0.8rem;
            left: 50%;
            bottom: -13px;
            font-weight: var(--font-w-bold);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px -30px 30px -28px inset;
            color: rgb(var(--color-black));
            transform: translateX(-50%);
            position: absolute;
            display: block;
        }

        .vote-list > .btn-vote.green {
            background-color: rgb(var(--color-green)) !important;
            color: rgb(var(--color-white));
        }

        .left-sidebar-box .btn-all-comment {
            width: fit-content;
            height: 25px;
            padding: 3px 0px 4px 10px;
            font-size: 0.9rem;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            border: 1px solid rgba(var(--color-black), 0.1);
            border-bottom: 2px solid rgba(var(--color-black));
            background-color: rgb(var(--color-white));
            font-weight: var(--font-w-bold);
            align-items: center;
            position: relative;
            display: flex;
        }

        .left-sidebar-box .btn-all-comment > .comment-count {
            width: fit-content;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            padding: 2px 8px;
            font-weight: var(--font-w-bold);
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            top: -9px;
            left: 3px;
            position: relative;
            display: block;
        }

        .left-sidebar-box .btn-all-comment > .comment-count::after {
            content: "";
            width: 0px;
            height: 0px;
            left: 3px;
            bottom: -6px;
            border-style: solid;
            border-width: 11px 5px 0 8px;
            border-color: rgb(var(--color-red)) transparent transparent
                transparent;
            transform: rotate(30deg);
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            position: absolute;
            display: block;
        }

        .profile-comment-count {
            width: fit-content;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            padding: 2px 8px;
            font-weight: var(--font-w-bold);
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            top: -9px;
            left: 3px;
            position: relative;
            display: block;
        }

        .profile-comment-count::after {
            content: "";
            width: 0px;
            height: 0px;
            left: 3px;
            bottom: -6px;
            border-style: solid;
            border-width: 11px 5px 0 8px;
            border-color: rgb(var(--color-red)) transparent transparent
                transparent;
            transform: rotate(30deg);
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            position: absolute;
            display: block;
        }

        .profile-comment-list {
            width: 100%;
            row-gap: 20px;
            flex-direction: column;
            align-items: end;
            display: flex;
        }

        .profile-comment-list-item {
            width: 100%;
            padding: 10px;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            grid-template-columns: auto 1fr auto;
            box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
                rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
            gap: 10px;
            position: relative;
            display: grid;
        }

        .profile-comment-list-item .comment-reply-form-container {
            grid-column: 1/4;
        }

        .profile-comment-list-item .emoji-container {
            right: 10px;
            bottom: -10px;
            position: absolute;
        }

        .profile-comment-list-item .emoji-container .btn-emoji-list,
        .btn-show-comment-edit {
            border: none;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            font-size: 1rem;
            padding: 3px 3px 3px 4px;
            outline: none;
            color: rgb(var(--color-blue));
            cursor: pointer;
            display: block;
        }

        .profile-comment-list-item .emoji-container .btn-emoji-list > * {
            pointer-events: none;
        }

        .profile-comment-list-item .emoji-container .emoji-list {
            right: 0;
            top: -40px;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            position: absolute;
            display: flex;
        }

        .profile-comment-list-item
            .emoji-container
            .emoji-list
            .emoji-list-btn {
            background-color: transparent;
            outline: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            padding: 5px;
        }

        .profile-comment-list-item
            .emoji-container
            .emoji-list
            .emoji-list-btn
            > * {
            pointer-events: none;
        }

        .profile-comment-list-item .sending-emoji-list {
            width: fit-content;
            left: 100px;
            bottom: -10px;
            position: absolute;
            gap: 10px;
            display: flex;
        }

        .profile-comment-list-item .sending-emoji-list .sending-emoji-item {
            font-size: 1rem;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding: 2px 5px;
            border: 1px solid rgb(var(--color-blue));
            display: block;
        }

        .profile-comment-list-item
            .sending-emoji-list
            .sending-emoji-item
            span {
            color: rgb(var(--color-blue));
            font-weight: var(--font-w-bold);
            margin-left: 3px;
        }

        .profile-comment-list-item .comment-user-menu {
            width: 130px;
            top: 0;
            left: 0;
            background-color: rgb(var(--color-white));
            padding: 7px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            gap: 5px;
            flex-wrap: wrap;
            left: 100px;
            top: 30px;
            z-index: 9;
            position: absolute;
            display: flex;
        }

        .profile-comment-list-item .comment-user-menu li {
            width: 100%;
            display: block;
        }

        .profile-comment-list-item
            .comment-user-menu
            li
            .comment-user-menu-item {
            width: 100%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgba(var(--color-light-gray));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            border: none;
            outline: none;
            font-size: 0.75rem;
            font-weight: var(--font-w-bold);
            padding: 5px;
            cursor: pointer;
            text-align: left;
            font-family: var(--body-font);
            color: rgb(var(--color-black));
            align-items: center;
            display: flex;
        }

        .profile-comment-list-item .comment-user-menu li .btn-unfollow {
            width: 100%;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .profile-comment-list-item .comment-user-menu li .btn-follow {
            width: 100%;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .comment-reply {
            width: 90%;
            background: rgba(var(--color-black), 0.03);
        }

        .profile-comment-item-user-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border: 4px solid rgb(var(--color-blue));
            border-bottom: 4px solid rgb(var(--color-black));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .profile-comment-item-detail {
            flex-direction: column;
            gap: 5px;
            display: flex;
        }

        .comment-reply-form-container {
            width: 100%;
        }

        .profile-comment-item-user-name {
            width: 100%;
            font-weight: var(--font-w-bold);
            align-items: center;
            gap: 5px;
            display: flex;
            justify-content: space-between;
        }

        .profile-comment-item-detail > p {
            font-size: 1rem;
            margin-bottom: 8px;
        }

        .profile-comment-item-btn-group {
            width: fit-content;
            align-items: center;
            column-gap: 25px;
            padding-left: 10px;
            border-left: 1px solid rgba(var(--color-black), 0.2);
            display: flex;
        }

        .profile-comment-item-date {
            width: fit-content;
            column-gap: 5px;
            color: rgb(var(--color-blue));
            align-items: center;
            display: flex;
        }

        .profile-comment-item-date .icon {
            font-size: 1.7rem;
            display: block;
        }

        .profile-comment-item-date .date {
            font-size: 0.9rem;
        }

        .profile-comment-item-detail .mobile-date {
            width: fit-content;
            align-items: center;
            font-size: 0.8rem;
            font-weight: 400;
            color: rgb(var(--color-dark-blue));
            justify-content: center;
            display: inline-flex;
        }

        .profile-comment-item-detail .mobile-date .icon {
            margin-right: 3px;
            font-size: 0.7rem;
        }

        .comment-list {
            width: 100%;
            flex-direction: column;
            display: flex;
        }

        .comment-list > .comment-item {
            width: 100%;
            background-color: rgb(var(--color-white));
            border: 2px solid rgba(var(--color-black), 0.1);
            padding: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;
            margin-top: 35px;
            flex-direction: column;
            display: flex;
        }

        .comment-list > .comment-item > .comment-detail {
            width: 100%;
            margin-top: 10px;
            display: block;
        }

        .comment-list > .comment-item > .comment-title {
            width: 100%;
            justify-content: space-between;
            align-items: end;
            margin-top: -40px;
            position: relative;
            display: flex;
        }

        .comment-list > .comment-item > .comment-title .comment-user-menu {
            width: 130px;
            top: 0;
            left: 0;
            background-color: rgb(var(--color-white));
            padding: 7px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            gap: 5px;
            flex-wrap: wrap;
            left: 65px;
            top: 55px;
            z-index: 9;
            position: absolute;
            display: flex;
        }

        .comment-list > .comment-item > .comment-title .comment-user-menu li {
            width: 100%;
            display: block;
        }

        .comment-list
            > .comment-item
            > .comment-title
            .comment-user-menu
            li
            .comment-user-menu-item {
            width: 100%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgba(var(--color-light-gray));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            border: none;
            outline: none;
            font-size: 0.75rem;
            font-weight: var(--font-w-bold);
            padding: 5px;
            cursor: pointer;
            text-align: left;
            font-family: var(--body-font);
            color: rgb(var(--color-black));
            align-items: center;
            display: flex;
        }

        .comment-list
            > .comment-item
            > .comment-title
            .comment-user-menu
            li
            .btn-unfollow {
            width: 100%;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .comment-list
            > .comment-item
            > .comment-title
            .comment-user-menu
            li
            .btn-follow {
            width: 100%;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .comment-list > .comment-item > .comment-title > .user-info {
            width: fit-content;
            align-items: end;
            display: flex;
        }

        .comment-list > .comment-item > .comment-title > .user-info > img {
            width: 70px;
            height: 70px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            margin-right: 10px;
            border: 4px solid var(--color-border);
            border-bottom: 4px solid rgb(var(--color-black));
            object-fit: cover;
            display: block;
        }

        .comment-list > .comment-item > .comment-title > .user-info .user-name {
            font-weight: var(--font-w-bold);
            font-size: 1.2rem;
            margin-bottom: 15px;
            display: block;
        }

        .comment-list > .comment-item > .comment-title .date {
            margin-bottom: 15px;
            font-weight: var(--font-w-bold);
            font-size: 0.9rem;
            display: block;
        }

        .comment-list
            > .comment-item
            > .comment-title
            > .user-info
            .comment-info-group {
            margin-bottom: 4px;
        }

        .comment-list
            > .comment-item
            > .comment-title
            > .user-info
            .comment-info-group
            .user-name {
            margin: 0px;
        }

        .comment-list
            > .comment-item
            > .comment-title
            > .user-info
            .comment-info-group
            .date {
            margin: 0px;
            font-weight: 400;
            font-size: 0.8rem;
        }

        .left-sidebar-box .btn-show-comment {
            width: fit-content;
            justify-content: center;
            background-color: transparent;
            border: none;
            outline: none;
            flex-wrap: wrap;
            cursor: pointer;
            margin-top: 10px;
            font-weight: var(--font-w-bold);
            display: flex;
        }

        .left-sidebar-box .btn-show-comment > span {
            width: 100%;
            display: block;
        }

        .left-sidebar-box .btn-show-comment > .icon {
            color: rgb(var(--color-red));
        }

        .left-sidebar-box .btn-show-comment > * {
            pointer-events: none;
        }

        .left-sidebar-box-open .home-search-container {
            width: 67%;
            right: -33%;
        }

        .left-sidebar-box-open .left-sidebar-box {
            left: 0;
        }

        /*========== Left Sidebar Box End ==========*/
        /*========== Poup Login Page ==========*/
        .popup-login {
            width: 40%;
            align-items: center;
            position: relative;
            grid-template-columns: 1fr 1fr;
            display: grid;
        }

        .popup-login > .box {
            width: 100%;
            z-index: 999;
            position: relative;
            display: block;
        }

        .popup-login > .login-right {
            width: 100%;
            height: 120%;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            margin-left: -40px;
            padding-left: 45px;
            background-image: url(../images/login-bg.png);
            background-repeat: no-repeat;
            background-size: cover;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            display: flex;
        }

        .popup-login > .login-right > .login-right-title {
            width: 100%;
            color: rgb(var(--color-white));
            font-size: 1.5rem;
            text-align: center;
            font-weight: var(--font-w-bold);
            display: block;
        }

        .popup-login > .login-right > .login-right-desc {
            width: 100%;
            color: rgb(var(--color-white));
            font-size: 0.9rem;
            text-align: center;
            display: block;
        }

        .popup-login > .login-right > .btn-master-popup-box-close {
            color: rgb(var(--color-white));
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .forgot-pass-btn {
            width: fit-content;
            font-size: 0.9rem;
            font-weight: var(--font-w-bold);
        }

        /*========== Poup Login Page End ==========*/
        /*========== Poup Send Vote ==========*/
        .vote-popup-box {
            width: fit-content;
            display: block;
        }

        .vote-popup-box .sending-vote-list-box {
            width: 100%;
            border: 1px solid rgb(var(--color-blue));
            border-left-width: 2px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin-top: 5px;
            flex-direction: column;
            display: flex;
        }

        .vote-popup-box .sending-vote-list-box > li {
            width: 100%;
            padding: 5px;
            padding-left: 25px;
            padding-right: 20px;
            position: relative;
            display: block;
        }

        .vote-popup-box .sending-vote-list-box > li:first-child {
            padding-top: 10px;
        }

        .vote-popup-box .sending-vote-list-box > li:last-child {
            padding-bottom: 15px;
        }

        .vote-popup-box .sending-vote-list-box > li > .icon-con {
            width: 25px;
            height: 25px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgb(var(--color-white));
            border: 2px solid rgb(var(--color-blue));
            align-items: center;
            font-size: 0.9rem;
            justify-content: center;
            left: -22px;
            top: 50%;
            transform: rotate(45deg) translateY(-50%);
            position: absolute;
            display: flex;
        }

        .vote-popup-box .sending-vote-list-box > li > .icon-con > .icon {
            transform: rotate(-45deg);
            color: rgb(var(--color-blue));
        }

        .vote-popup-box .sending-vote-list-box > li > .icon-con.active {
            background-color: rgb(var(--color-blue));
        }

        .vote-popup-box .sending-vote-list-box > li > .icon-con.active > .icon {
            color: rgb(var(--color-white));
        }

        .vote-popup-box .sending-vote-list-box > li > .item-title {
            width: 100%;
            font-weight: var(--font-w-bold);
            display: block;
        }

        .vote-popup-box .sending-vote-list-box > li > .vote-star-list {
            width: fit-content;
            align-items: center;
            color: rgba(var(--color-yellow));
            padding: 4px 10px;
            font-size: 1.5rem;
            margin-top: 5px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
                rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
            display: flex;
        }

        .vote-popup-box .sending-vote-list-box > li > .vote-star-list > .icon {
            padding-right: 5px;
            cursor: pointer;
        }

        .vote-popup-box .sending-vote-list-box > li > .vote-star-list > .count {
            font-weight: var(--font-w-bold);
            font-size: 1rem;
            color: rgb(var(--color-black));
        }

        /*========== Poup Send Vote End ==========*/
        /*========== Follow List Poup ==========*/
        .follow-list-popup {
            width: 20%;
            min-width: 350px;
            display: block;
        }

        .follow-list-popup .follow-list-container {
            width: 100%;
            max-height: 300px;
            overflow: auto;
            overflow-x: hidden;
            display: block;
        }

        .follow-list-popup .follow-list-container .follow-list-loading {
            width: 100%;
            margin-top: 10px;
            font-weight: var(--font-w-bold);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            display: none;
        }

        .follow-list-popup .follow-list-container .follow-list-loading .icon {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

        .follow-list-popup
            .follow-list-container.htmx-request
            .follow-list-loading {
            display: flex;
        }

        .follow-list-popup .follow-list-container.htmx-request .follow-list {
            display: none;
        }

        .follow-list-popup .follow-list {
            width: 100%;
            flex-direction: column;
            row-gap: 10px;
            display: flex;
        }

        .follow-list-popup .follow-list li {
            width: 100%;
            display: block;
        }

        .follow-list-popup .follow-list li > .follow-list-item {
            width: 100%;
            padding: 7px 10px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            align-items: center;
            justify-content: space-between;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            display: flex;
        }

        .follow-list-popup
            .follow-list
            li
            > .follow-list-item
            > .user-info-group {
            align-items: center;
            display: flex;
        }

        .follow-list-popup
            .follow-list
            li
            > .follow-list-item
            > .user-info-group
            > .logo {
            width: 35px;
            height: 35px;
            margin: 0px;
            margin-right: 5px;
            object-fit: cover;
            border: 1px solid rgba(0, 0, 0, 0.1);
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .follow-list-popup
            .follow-list
            li
            > .follow-list-item
            > .user-info-group
            > .name {
            font-weight: var(--font-w-bold);
            font-size: 0.9rem;
        }

        .follow-list-popup
            .follow-list
            li
            > .follow-list-item
            > .btn-container {
            width: max-content;
            height: 100%;
            padding-left: 10px;
            border-left: 1px solid rgba(0, 0, 0, 0.1);
            align-items: center;
            display: flex;
        }

        .follow-list-popup .follow-list li > .follow-not-found {
            width: 100%;
            margin-top: 10px;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            display: flex;
        }

        .follow-list-popup .follow-list li > .follow-not-found > .icon {
            font-size: 2.5rem;
            color: rgb(var(--color-blue));
        }

        .follow-list-popup .follow-list li > .follow-not-found > .desc {
            width: 100%;
            margin-top: 5px;
            font-weight: var(--font-w-bold);
            color: rgb(var(--color-black), 0.7);
            text-align: center;
            display: block;
        }

        /*========== Follow List Poup End ==========*/
        /*========== Follow Btn ==========*/
        .btn-follow.htmx-request {
            pointer-events: none;
        }

        .profile-sum .btn-follow {
            width: fit-content;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            height: 30px;
            font-size: 0.8rem;
            padding: 0px 15px;
            align-items: center;
            display: flex;
        }

        .profile-sum .btn-unfollow {
            width: fit-content;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            height: 30px;
            font-size: 0.8rem;
            padding: 0px 15px;
            align-items: center;
            display: flex;
        }

        .btn-follow > * {
            pointer-events: none;
        }

        .btn-unfollow > * {
            pointer-events: none;
        }

        .follow-list .btn-container .btn-follow {
            width: fit-content;
            background-color: transparent;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            height: 30px;
            padding: 0px 5px;
            font-size: 0.8rem;
            align-items: center;
            display: flex;
        }

        .follow-list .btn-container .btn-unfollow {
            width: fit-content;
            background-color: transparent;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-red));
            cursor: pointer;
            height: 30px;
            padding: 0px 5px;
            font-size: 0.8rem;
            align-items: center;
            display: flex;
        }

        /*========== Follow Btn End ==========*/
        /*========== Message ==========*/
        .message-box-left {
            height: calc(100vh - 100px);
            overflow: auto;
            scrollbar-width: thin;
            position: relative;
        }

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

        .message-box-left .message-left-box-header .btn-menu-group {
            width: fit-content;
            position: relative;
            display: block;
        }

        .message-box-left .message-left-box-header .btn-menu-group .btn-menu {
            width: fit-content;
            background-color: transparent;
            padding: 0px;
            outline: none;
            border: none;
            font-size: 1.1rem;
            color: rgb(var(--color-black));
            cursor: pointer;
            display: block;
        }

        .message-box-left
            .message-left-box-header
            .btn-menu-group
            .btn-menu
            > * {
            pointer-events: none;
        }

        .message-box-left .message-left-box-header .btn-menu-group .sub-menu {
            width: fit-content;
            flex-direction: column;
            background-color: #f6f6fe;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
                rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
            padding: 10px;
            top: 0;
            left: 20px;
            z-index: 9999;
            position: absolute;
            display: flex;
        }

        .message-box-left
            .message-left-box-header
            .btn-menu-group
            .sub-menu
            li {
            width: max-content;
            display: block;
        }

        .message-box-left
            .message-left-box-header
            .btn-menu-group
            .sub-menu
            li
            button {
            width: 100%;
            border: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
            padding: 4px 0px;
            font-family: var(--body-font);
            font-size: 0.9rem;
            text-align: left;
            display: block;
        }

        .message-box-left
            .message-left-box-header
            .btn-menu-group
            .sub-menu
            li
            button
            > * {
            pointer-events: none;
        }

        .message-box-left .message-left-box-header .btn-message-menu {
            background-color: transparent;
            padding: 0px;
            border: none;
            outline: none;
            padding: 4px;
            color: rgb(var(--color-black));
            cursor: pointer;
            display: block;
        }

        .message-box-left .message-search-box-group {
            width: 100%;
            padding: 10px 10px 10px 10px;
            display: block;
        }

        .message-box-left .message-search-box-group .message-search-box-inner {
            width: 100%;
            height: 30px;
            background-color: #f3f3fd;
            border: 1px solid rgba(var(--color-black), 0.1);
            column-gap: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 0px 0px 5px 5px;
            display: flex;
        }

        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices {
            height: 100% !important;
            margin: 0px;
            align-items: center !important;
            display: flex !important;
        }

        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices
            .choices__inner {
            background-color: transparent !important;
            border: none !important;
            padding: 0px !important;
            font-size: 0.9rem;
            font-weight: var(--font-w-bold);
            align-items: center !important;
            display: flex !important;
        }

        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices
            .choices__list--dropdown,
        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices
            .choices__list[aria-expanded] {
            width: 110px;
            background-color: #f3f3fd;
        }

        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices[data-type*="select-one"]
            .choices__input {
            background-color: #f3f3fd;
            border-bottom: 1px solid rgb(var(--color-blue));
        }

        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices__list--dropdown
            .choices__item--selectable.is-highlighted,
        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices__list[aria-expanded]
            .choices__item--selectable.is-highlighted {
            background-color: rgba(var(--color-blue), 0.2);
        }

        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices__list--dropdown
            .choices__item--selectable,
        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices__list[aria-expanded]
            .choices__item--selectable {
            padding: 5px;
            padding-right: 0px;
        }

        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices[data-type*="select-one"]::after {
            display: none !important;
        }

        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .choices__list--single {
            padding: 4px 35px 4px 4px;
        }

        .message-box-left
            .message-search-box-group
            .message-search-box-inner
            .message-search-input {
            width: 100%;
            background-color: transparent;
            border: none;
            border-left: 1px solid rgba(var(--color-black), 0.1);
            padding-left: 10px;
            outline: none;
            display: block;
        }

        .message-box-left .message-list {
            width: 100%;
            /* min-height: 100vh;*/
            padding: 0px 10px 10px 10px;
            overflow: auto;
            overflow-x: hidden;
            display: block;
        }

        .message-box-left .message-list-item {
            width: 100%;
            grid-template-columns: auto 1fr;
            border: 1px solid rgba(var(--color-black), 0);
            gap: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding: 5px;
            align-items: center;
            display: grid;
        }

        .message-box-left .message-list-item.checked,
        .message-box-left .message-list-item:hover {
            border: 1px solid rgba(var(--color-black), 0.1);
            background-color: #f3f3fd;
        }

        .message-box-left .message-list-item .user-image {
            cursor: pointer;
            position: relative;
        }

        .message-box-left .message-list-item .user-image input {
            display: none;
        }

        .message-box-left .message-list-item .user-image .message-checkmark {
            width: 55px;
            height: 55px;
            top: 0;
            left: 0;
            background-color: rgba(var(--color-black), 0.7);
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            position: absolute;
            align-items: center;
            justify-content: center;
            display: none;
        }

        .message-box-left
            .message-list-item
            .user-image
            .message-checkmark::before {
            content: "";
            width: 6px;
            height: 15px;
            margin-top: -5px;
            border: solid white;
            border-width: 0 4px 4px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            display: block;
        }

        .message-box-left
            .message-list-item
            .user-image
            input:checked
            ~ .message-checkmark {
            opacity: 1;
            display: flex;
        }

        .message-box-left
            .message-list-item
            .user-image:hover
            .message-checkmark {
            opacity: 0;
            display: flex;
        }

        .message-box-left .message-list-item .user-image .user-status {
            width: 10px;
            height: 10px;
            background-color: rgb(var(--color-red));
            left: 5px;
            bottom: 2px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            z-index: 999;
            position: absolute;
            display: block;
        }

        .message-box-left .message-list-item .user-image .user-status.online {
            background-color: rgb(var(--color-green));
        }

        .message-box-left .message-list-item .user-image img {
            width: 55px;
            height: 55px;
            object-fit: cover;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .message-box-left .message-list-item .user-image .message-image {
            width: 55px;
            height: 55px;
            object-fit: cover;
            text-transform: uppercase;
            font-size: 1.6rem;
            font-weight: var(--font-w-bold);
            background-color: rgb(var(--color-blue));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .message-box-left .message-list-item .message-detail {
            width: 100%;
            display: block;
        }

        .message-box-left .message-list-item .message-detail .user-info {
            width: 100%;
            justify-content: space-between;
            display: flex;
        }

        .message-box-left .message-list-item .message-detail .user-info .name {
            font-size: 0.9rem;
            font-weight: var(--font-w-bold);
        }

        .message-box-left .message-list-item .message-detail .user-info .count {
            min-width: 18px;
            height: 18px;
            background-color: rgb(var(--color-red));
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            font-weight: var(--font-w-bold);
            color: rgb(var(--color-white));
            display: flex;
        }

        .message-box-left .message-list-item .message-detail .message {
            width: 100%;
            -webkit-line-clamp: 2;
            font-size: 0.8rem;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            word-break: break-word;
        }

        .message-box-left .message-left-box-footer {
            width: 100%;
            background-color: #f3f3fd;
            border: 1px solid rgba(var(--color-black), 0.1);
            border-radius: 5px 5px 0px 0px;
            margin: 0 auto;
            padding: 8px;
            bottom: 0;
            justify-content: space-between;
            align-items: center;
            display: flex;
        }

        .message-box-left .message-left-box-footer .loader {
            display: none;
        }

        .message-box-left .message-left-box-footer.htmx-request .loader {
            display: block;
        }

        .message-box-left .message-left-box-footer .custom-check {
            height: 18px;
            font-size: 0.8rem;
            font-weight: var(--font-w-bold);
            align-items: center;
            display: flex;
        }

        .message-box-left .message-left-box-footer .checkmark {
            border: 1px solid rgba(var(--color-black), 0.4);
            background-color: transparent;
        }

        .message-box-left
            .message-left-box-footer
            .custom-check
            .checkmark:after {
            left: 5.5px;
            top: 2px;
            width: 3px;
            height: 7px;
        }

        .message-box-left .message-left-box-footer .selected-message-count {
            font-weight: var(--font-w-bold);
            color: rgb(var(--color-blue));
            font-size: 0.8rem;
        }

        .message-box-rigth {
            height: calc(100vh - 100px);
            /*overflow: hidden;*/
            grid-template-rows: auto 1fr auto;
            background: url(../images/message-bg.png);
            display: grid;
        }

        .message-box-rigth .message-detail-home-page {
            width: 100%;
            height: 100%;
            background-color: rgb(var(--color-white));
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .message-box-rigth .message-detail-home-page .group {
            row-gap: 10px;
            flex-direction: column;
            align-items: center;
            display: flex;
        }

        .message-box-rigth .message-detail-home-page .group .icon {
            font-size: 5rem;
            opacity: 0.5;
        }

        .message-box-rigth .message-detail-home-page .group .message {
            font-weight: var(--font-w-bold);
            opacity: 0.6;
            font-size: 1.1rem;
        }

        .message-box-rigth .message-detail-header {
            width: 100%;
            padding: 15px 10px 5px 10px;
            background-color: #f6f6fe;
            border-bottom: 1px solid rgba(var(--color-black), 0.1);
            justify-content: space-between;
            align-items: center;
            display: flex;
        }

        .message-box-rigth .message-detail-header .user-info {
            width: fit-content;
            align-items: center;
            display: flex;
        }

        .message-box-rigth .message-detail-header .user-info img {
            width: 45px;
            height: 45px;
            object-fit: cover;
            margin-right: 5px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .message-box-rigth .message-detail-header .user-info .group-logo {
            width: 45px;
            height: 45px;
            background-color: rgb(var(--color-blue));
            margin-right: 5px;
            text-transform: uppercase;
            font-size: 1.3rem;
            font-weight: var(--font-w-bold);
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .message-box-rigth .message-detail-header .user-info .name {
            width: fit-content;
            font-weight: var(--font-w-bold);
            display: flex;
        }

        .message-box-rigth .message-detail-header .button-group {
            position: relative;
        }

        .message-box-rigth .message-detail-header .message-detail-header-btn {
            width: fit-content;
            padding: 10px;
            background-color: transparent;
            border: none;
            outline: none;
            cursor: pointer;
            display: block;
        }

        .message-box-rigth
            .message-detail-header
            .message-detail-header-btn
            > * {
            pointer-events: none;
        }

        .message-box-rigth
            .message-detail-header
            .message-detail-header-sub-menu {
            width: fit-content;
            padding: 10px;
            background-color: #f6f6fe;
            box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
                rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            top: 9px;
            right: 20px;
            z-index: 9;
            position: absolute;
            display: block;
        }

        .message-box-rigth
            .message-detail-header
            .message-detail-header-sub-menu
            li {
            width: max-content;
            display: block;
        }

        .message-box-rigth
            .message-detail-header
            .message-detail-header-sub-menu
            .message-detail-header-sub-menu-btn {
            width: 100%;
            border: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
            padding: 4px 0px;
            font-family: var(--body-font);
            font-size: 0.9rem;
            font-family: var(--body-font);
            text-align: left;
            display: block;
        }

        .message-box-rigth
            .message-detail-header
            .message-detail-header-sub-menu
            .message-detail-header-sub-menu-btn
            > * {
            pointer-events: none;
        }

        .message-box-rigth .message-detail-message-list {
            width: 100%;
            height: 100%;
            padding: 10px;
            overflow: auto;
            opacity: 0;
            overflow-x: hidden;
            gap: 20px;
            flex-direction: column;
            display: flex;
        }

        .message-box-rigth .message-detail-message-list .message-item {
            width: 100%;
            position: relative;
            display: flex;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .comment-user-menu {
            width: 130px;
            top: 0;
            left: 0;
            background-color: rgb(var(--color-white));
            padding: 7px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            gap: 5px;
            flex-wrap: wrap;
            left: 50px;
            top: 0px;
            z-index: 9;
            position: absolute;
            display: flex;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .comment-user-menu
            li {
            width: 100%;
            display: block;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .comment-user-menu
            li
            .comment-user-menu-item {
            width: 100%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgba(var(--color-light-gray));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            border: none;
            outline: none;
            font-size: 0.75rem;
            font-weight: var(--font-w-bold);
            padding: 5px;
            cursor: pointer;
            text-align: left;
            font-family: var(--body-font);
            color: rgb(var(--color-black));
            align-items: center;
            display: flex;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .comment-user-menu
            li
            .btn-follow {
            width: 100%;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .comment-user-menu
            li
            .btn-unfollow {
            width: 100%;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item.sender
            .comment-user-menu {
            left: auto;
            right: 50px;
        }

        .message-box-rigth .message-detail-message-list .message-item.sender {
            justify-content: end;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item.sender
            .message-item-inner {
            width: fit-content;
            grid-template-columns: 1fr auto;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item.sender
            .message-item-inner
            .user-image {
            border: 2px solid rgb(var(--color-blue));
            grid-column: 2;
            grid-row: 1;
            cursor: pointer;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item.sender
            .message-item-inner
            .detail {
            border-color: rgb(var(--color-blue));
            grid-column: 1;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner {
            max-width: 80%;
            grid-template-columns: auto 1fr;
            column-gap: 5px;
            display: grid;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner
            .user-image {
            width: 50px;
            height: 50px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            object-fit: cover;
            cursor: pointer;
            display: block;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner
            .detail {
            width: 100%;
            padding: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgb(var(--color-white));
            border: 1px solid rgba(var(--color-black), 0.3);
            flex-direction: column;
            align-items: end;
            display: flex;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner
            .detail.image-box {
            width: fit-content;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner
            .detail.image-box
            img {
            width: 100%;
            border-radius: 5px;
            max-width: 250px;
            cursor: pointer;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner
            .detail
            .message {
            width: 100%;
            font-size: 0.9rem;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner
            .detail
            .message-info {
            width: fit-content;
            margin-top: 5px;
            gap: 5px;
            align-items: center;
            display: flex;
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner
            .detail
            .message-info
            .date {
            font-size: 0.7rem;
            font-weight: var(--font-w-bold);
            color: rgb(var(--color-black), 0.6);
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner
            .detail
            .message-info
            .tick {
            font-size: 0.7rem;
            color: rgba(var(--color-black), 0.6);
        }

        .message-box-rigth
            .message-detail-message-list
            .message-item
            .message-item-inner
            .detail
            .message-info
            .tick.reading {
            color: rgb(var(--color-blue));
        }

        .message-box-rigth .message-detail-message-form {
            width: 100%;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            align-items: end;
            background-color: rgba(var(--color-white));
            display: flex;
        }

        .message-box-rigth .message-detail-message-form .message-input {
            width: 100%;
            font-family: var(--body-font);
            border: none;
            outline: none;
            resize: none;
            padding: 10px;
            overflow: hidden;
            display: block;
        }

        .message-box-rigth .message-detail-message-form .send-message {
            padding: 5px;
            cursor: pointer;
            border: none;
            background-color: rgb(var(--color-blue));
            font-size: 1.3rem;
            color: rgb(var(--color-white));
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin: 10px 5px;
            outline: none;
            display: block;
        }

        .message-box-rigth .message-detail-message-form .message-add-image-btn,
        .message-box-rigth .message-detail-message-form .message-emoji-btn {
            padding: 0px;
            cursor: pointer;
            border: none;
            background-color: transparent;
            font-size: 1.3rem;
            color: rgb(var(--color-black));
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin: 10px 5px;
            outline: none;
            display: block;
        }

        .message-box-rigth
            .message-detail-message-form
            .message-add-image-btn
            > input {
            display: none;
        }

        .message-box-rigth .message-detail-message-form .send-message > *,
        .message-box-rigth .message-detail-message-form .message-emoji-btn > *,
        .message-box-rigth
            .emoji-container
            .emoji-list
            .emoji-list-item-btn
            > * {
            pointer-events: none;
        }

        .message-box-rigth .emoji-container {
            position: relative;
        }

        .message-box-rigth .emoji-container .emoji-list {
            width: 200px;
            height: 200px;
            padding: 10px;
            background-color: #f6f6fe;
            box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
                rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            bottom: 45px;
            right: 15px;
            overflow: auto;
            overflow-x: hidden;
            position: absolute;
            gap: 5px;
            flex-wrap: wrap;
            display: flex;
        }

        .message-box-rigth .emoji-container .emoji-list .emoji-list-item-btn {
            width: 30px;
            height: 30px;
            font-size: 1.3rem;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            outline: none;
            border: none;
            cursor: pointer;
            display: inline-flex;
        }

        /*========== Message End ==========*/
        /*========== Fancy Box ==========*/
        .fancy-box {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 99999999;
            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(5px);
            position: fixed;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .fancy-box .fancy-box-inner img {
            width: 100%;
            max-height: 90vh;
            object-fit: cover;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
                rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
            display: block;
        }

        .fancy-box .fancy-box-inner {
            position: relative;
        }

        .fancy-box .fancy-box-inner .btn-close {
            width: 30px;
            height: 30px;
            right: -15px;
            top: -15px;
            border: none;
            font-size: 1.6rem;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
                rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
            background-color: rgb(var(--color-white));
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: absolute;
            display: flex;
        }

        /*========== Fancy Box End ==========*/

        /*========== Tooltip ==========*/
        [tooltip] {
            position: relative;
        }

        [tooltip]::before,
        [tooltip]::after {
            text-transform: none;
            font-size: 0.65rem;
            line-height: 1;
            user-select: none;
            pointer-events: none;
            position: absolute;
            display: none;
            opacity: 0;
        }

        [tooltip]::before {
            content: "";
            border: 5px solid transparent;
            z-index: 1001;
        }

        [tooltip]::after {
            content: attr(tooltip);
            text-align: center;
            min-width: 3em;
            max-width: 21em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 5px 10px;
            border-radius: 0.3ch;
            box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
            background: #333;
            color: #fff;
            z-index: 1000;
        }

        [tooltip]:hover::before,
        [tooltip]:hover::after {
            display: block;
        }

        [tooltip=""]::before,
        [tooltip=""]::after {
            display: none !important;
        }

        [tooltip]:not([flow])::before,
        [tooltip][flow^="up"]::before {
            bottom: 100%;
            border-bottom-width: 0;
            border-top-color: #333;
        }

        [tooltip]:not([flow])::after,
        [tooltip][flow^="up"]::after {
            bottom: calc(100% + 5px);
        }

        [tooltip]:not([flow])::before,
        [tooltip]:not([flow])::after,
        [tooltip][flow^="up"]::before,
        [tooltip][flow^="up"]::after {
            left: 50%;
            transform: translate(-50%, -0.5em);
        }

        [tooltip][flow^="down"]::before {
            top: 100%;
            border-top-width: 0;
            border-bottom-color: #333;
        }

        [tooltip][flow^="down"]::after {
            top: calc(100% + 5px);
        }

        [tooltip][flow^="down"]::before,
        [tooltip][flow^="down"]::after {
            left: 50%;
            transform: translate(-50%, 0.5em);
        }

        [tooltip][flow^="left"]::before {
            top: 50%;
            border-right-width: 0;
            border-left-color: #333;
            left: calc(0em - 5px);
            transform: translate(-0.5em, -50%);
        }

        [tooltip][flow^="left"]::after {
            top: 50%;
            right: calc(100% + 5px);
            transform: translate(-0.5em, -50%);
        }

        [tooltip][flow^="right"]::before {
            top: 50%;
            border-left-width: 0;
            border-right-color: #333;
            right: calc(0em - 5px);
            transform: translate(0.5em, -50%);
        }

        [tooltip][flow^="right"]::after {
            top: 50%;
            left: calc(100% + 5px);
            transform: translate(0.5em, -50%);
        }

        @keyframes tooltips-vert {
            to {
                opacity: 0.9;
                transform: translate(-50%, 0);
            }
        }

        @keyframes tooltips-horz {
            to {
                opacity: 0.9;
                transform: translate(0, -50%);
            }
        }

        [tooltip]:not([flow]):hover::before,
        [tooltip]:not([flow]):hover::after,
        [tooltip][flow^="up"]:hover::before,
        [tooltip][flow^="up"]:hover::after,
        [tooltip][flow^="down"]:hover::before,
        [tooltip][flow^="down"]:hover::after {
            animation: tooltips-vert 300ms ease-out forwards;
        }

        [tooltip][flow^="left"]:hover::before,
        [tooltip][flow^="left"]:hover::after,
        [tooltip][flow^="right"]:hover::before,
        [tooltip][flow^="right"]:hover::after {
            animation: tooltips-horz 300ms ease-out forwards;
        }

        /*========== Tooltip End ==========*/

        /*========== Popu.left-sidebar-boxp ==========*/
        .popup-open {
            overflow: hidden;
            position: relative;
        }

        #master-popup-box {
            width: 100%;
            height: 100vh;
            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(5px);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            align-items: center;
            justify-content: center;
            z-index: 999999999;
            position: fixed;
            display: none;
        }

        .popup-open #master-popup-box {
            display: flex;
        }

        .btn-master-popup-box-close {
            width: fit-content;
            height: fit-content;
            padding: 0px;
            background-color: transparent;
            border: none;
            font-size: 1.7rem;
            outline: none;
            color: rgba(var(--color-black), 0.9);
            cursor: pointer;
            display: block;
        }

        .btn-master-popup-box-close > * {
            pointer-events: none;
        }

        /*========== Popup End ==========*/

        /*========== User Profil Page ==========*/
        .user-detail-info {
            align-items: center;
            justify-content: center;
            flex-direction: column;
            display: flex;
        }

        .user-detail-info .user-image {
            width: 150px;
            height: 150px;
            position: relative;
            display: block;
        }

        .user-detail-info .user-image img {
            width: 100%;
            height: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            object-fit: cover;
            display: block;
        }

        .user-detail-info .user-image .user-status {
            width: 20px;
            height: 20px;
            background-color: rgb(var(--color-red));
            left: 12px;
            bottom: 13px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            position: absolute;
            display: block;
        }

        .user-detail-info .user-image .user-status.online {
            background-color: rgb(var(--color-green));
        }

        .user-detail-info .user-name {
            width: 100%;
            align-items: center;
            font-size: 1.2rem;
            font-weight: var(--font-w-bold);
            margin-top: 5px;
            justify-content: center;
            column-gap: 10px;
            display: flex;
        }

        .user-detail-info .user-team {
            width: 100%;
            column-gap: 10px;
            margin-top: 5px;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .user-detail-info .user-team img {
            width: 15px;
            display: block;
        }

        .user-detail-info .social-list {
            margin-top: 10px;
            align-items: center;
            column-gap: 7px;
            display: flex;
        }

        .user-detail-info .social-list li a {
            width: 25px;
            height: 25px;
            border: 3px solid rgb(var(--color-white));
            outline: 1px solid rgb(var(--color-blue));
            background-color: rgb(var(--color-blue));
            font-size: 0.8rem;
            color: rgb(var(--color-white));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .user-detail-info .follow-counter {
            width: 100%;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(var(--color-black), 0.3);
            grid-template-columns: 1fr 1fr;
            display: grid;
        }

        .user-detail-info .follow-counter li {
            justify-content: center;
            align-items: center;
            padding: 5px 0px;
            flex-direction: column;
            display: flex;
        }

        .user-detail-info .follow-counter li:first-child {
            border-right: 1px solid rgba(var(--color-black), 0.3);
        }

        .user-detail-info .follow-counter li .count {
            font-size: 1.1rem;
            font-weight: var(--font-w-bold);
        }

        .user-detail-info .follow-counter li .btn-user-follo-detail {
            width: fit-content;
            border: none;
            outline: none;
            background-color: transparent;
            cursor: pointer;
            font-family: var(--body-font);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .last-seen {
            width: 100%;
            padding: 7px 0px;
            border-bottom: 2px solid rgb(var(--color-blue));
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            font-size: 0.9rem;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .user-detail-profile-menu {
            width: 100%;
            row-gap: 10px;
            flex-direction: column;
            display: flex;
        }

        .user-detail-profile-menu li {
            border: 1px solid rgb(var(--color-blue));
            width: 100%;
            padding-right: 5px;
            background-color: #f3f1f2;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            display: block;
        }

        .user-detail-profile-menu li.active,
        .user-detail-profile-menu li:hover {
            background-color: rgba(var(--color-blue));
            color: #fff;
        }

        .user-detail-profile-menu li a {
            width: 100%;
            font-size: 1rem;
            font-weight: var(--font-w-bold);
            align-items: center;
            display: flex;
        }

        .user-detail-profile-menu li a .icon {
            width: 32px;
            height: 32px;
            margin-left: -1px;
            background-color: rgb(var(--color-blue));
            color: rgb(var(--color-white));
            align-items: center;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin-right: 5px;
            justify-content: center;
            display: flex;
        }

        .user-detail-profile-menu li.logout-btn {
            background-color: #ffbfbf;
            color: rgb(var(--color-red));
            border: 1px solid rgb(var(--color-red));
        }

        .user-detail-profile-menu li.logout-btn:hover {
            background-color: #e9615b;
            color: #fff;
        }

        .user-detail-profile-menu li.logout-btn .icon {
            background-color: rgb(var(--color-red));
        }

        /*========== User Profil Page End ==========*/

        /*========== Footer ==========*/
        .footer {
            width: 100%;
            background-color: rgb(var(--color-footer-bg));
            padding: 50px 0px;
            margin-top: 50px;
            color: rgba(var(--color-black), 0.6);
            display: block;
        }

        .footer .footer-logo {
            width: 200px !important;
            display: block;
        }

        .footer .footer-logo img {
            width: 100%;
            display: block;
        }

        .footer .footer-dotted-group {
            width: 100%;
            column-gap: 10px;
            margin-top: 10px;
            display: flex;
        }

        .footer .footer-dotted-group .circle {
            width: 12px;
            height: 12px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .footer .footer-dotted-group .circle-blue {
            background-color: rgba(var(--color-blue), 0.4);
        }

        .footer .footer-dotted-group .circle-red {
            background-color: rgba(var(--color-red), 0.4);
        }

        .footer .footer-dotted-group .circle-yellow {
            background-color: rgba(var(--color-yellow), 0.4);
        }

        .footer .footer-title {
            width: 100%;
            color: rgb(var(--color-black));
            font-weight: var(--font-w-bold);
            display: block;
        }

        .footer .footer-menu {
            width: 100%;
            display: block;
        }

        .footer .footer-menu li {
            margin-top: 5px;
        }

        .footer .footer-social-list {
            width: 100%;
            column-gap: 7px;
            margin-top: 10px;
            display: flex;
        }

        .footer .footer-social-list li a {
            width: 25px;
            height: 25px;
            border: 1px solid rgb(var(--color-blue));
            align-items: center;
            justify-content: center;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            color: rgb(var(--color-blue));
            display: flex;
        }

        /*========== Footer End ==========*/

        /*========== Preloader ==========*/
        .loading-container > span,
        .loading-content-item > div,
        .loading-content-item > div > span {
            position: absolute;
        }

        .loading.htmx-request {
            display: block;
        }

        .loading {
            width: 100%;
            top: 0;
            height: 100%;
            z-index: 99999999999999999;
            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(5px);
            position: fixed;
            display: none;
        }

        .loading-container {
            position: relative;
            background: #bdbdbda1;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            filter: blur(8px) contrast(18);
            mix-blend-mode: screen;
        }

        .loading-container > span > span,
        .loading-content-item,
        .loading-content-item > div > span {
            aspect-ratio: 1;
            background: #16e0e2;
            border-radius: 50%;
        }

        .loading-container > span:first-of-type {
            left: 50%;
            width: 150px;
            height: 150px;
            animation: 8s ease-in-out infinite forwards spin-3;
        }

        .loading-container > span:first-of-type span {
            width: 30px;
        }

        .loading-container > span:nth-of-type(2) {
            left: 20%;
            width: 150px;
            height: 100px;
            animation: 6s ease-in-out infinite spin-4;
        }

        .loading-container > span:nth-of-type(2) span {
            width: 21px;
        }

        .loading-container > span:nth-of-type(3) {
            left: 48%;
            top: 48%;
            width: 100px;
            height: 100px;
            animation: 3.5s ease-in-out infinite forwards spin-5;
        }

        .loading-container > span:nth-of-type(3) span {
            width: 25px;
        }

        .loading-container > span:nth-of-type(4) {
            left: 28%;
            top: 48%;
            width: 200px;
            height: 200px;
            animation: 4.5s ease-in-out infinite forwards spin-2;
        }

        .loading-container > span:nth-of-type(4) span,
        .loading-container > span:nth-of-type(5) span {
            width: 20px;
        }

        .loading-container > span:nth-of-type(5) {
            left: 50%;
            top: 25%;
            width: 200px;
            height: 200px;
            animation: 3.5s ease-in-out infinite forwards spin-6;
        }

        .loading-container > span > span {
            position: absolute;
            right: 20px;
            top: 20px;
        }

        .loading-content-item {
            position: relative;
            width: 80px;
        }

        .loading-content-item > div {
            aspect-ratio: 1;
            border-radius: 50%;
            background: 0 0;
        }

        .loading-content-item > div:first-child {
            left: -5px;
            width: 70px;
            animation: 5s ease-in infinite forwards spin-1;
        }

        .loading-content-item > div:first-child > span {
            width: 50px;
        }

        .loading-content-item > div:nth-child(2) {
            left: 10px;
            bottom: 0;
            width: 80px;
            animation: 3s ease-in 1.5s infinite forwards spin-2;
        }

        .loading-content-item > div:nth-child(2) > span {
            width: 60px;
        }

        @keyframes spin-1 {
            0% {
                transform: rotate(90deg);
            }

            100% {
                transform: rotate(450deg);
            }
        }

        @keyframes spin-2 {
            0% {
                transform: rotate(-50deg);
            }

            100% {
                transform: rotate(310deg);
            }
        }

        @keyframes spin-3 {
            0% {
                transform: rotate(220deg);
            }

            100% {
                transform: rotate(580deg);
            }
        }

        @keyframes spin-4 {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes spin-5 {
            0% {
                transform: rotate(-100deg);
            }

            100% {
                transform: rotate(260deg);
            }
        }

        @keyframes spin-6 {
            0% {
                transform: rotate(210deg);
            }

            100% {
                transform: rotate(570deg);
            }
        }

        /*========== Preloader End ==========*/

        .login-right-box {
            background: url("../images/login-right-bg.png");
            background-size: cover;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .login-right-box > .login-right-box-inner {
            width: 100%;
            padding: 20px 50px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .login-right-box > .login-right-box-inner .title {
            font-weight: var(--font-w-bold);
            font-size: 1.5rem;
            color: rgb(var(--color-white));
        }

        .login-right-box > .login-right-box-inner .title-sub {
            font-weight: var(--font-w-bold);
            font-size: 1.1rem;
            text-align: center;
            color: rgb(var(--color-white));
        }

        .mobil-user-bar {
            width: 100%;
            background-color: rgb(var(--color-white));
            bottom: 0;
            box-shadow: rgba(0, 108, 110, 0.27) 0px 0px 0.25em,
                rgba(0, 108, 110, 0.05) 0px 0.25em 1em;
            border-top: 1px solid rgba(var(--color-black), 0.1);
            position: fixed;
            z-index: 999999999;
            justify-content: space-between;
            display: none;
        }

        .mobil-user-bar li {
            width: 100%;
            border-right: 1px solid rgb(var(--color-black), 0.1);
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .mobil-user-bar li:last-child {
            border: none;
        }

        .mobil-user-bar li .btn-mobile-user-bar {
            width: 100%;
            padding: 10px;
            font-weight: var(--font-w-bold);
            color: rgba(var(--color-black), 0.8);
            background-color: transparent;
            border: none;
            outline: none;
            font-size: 0.9rem;
            font-family: var(--body-font);
            flex-direction: column;
            align-items: center;
            position: relative;
            justify-content: center;
            display: flex;
        }

        .mobil-user-bar li .btn-mobile-user-bar .count {
            min-width: 15px;
            min-height: 15px;
            font-size: 0.8rem;
            background-color: rgb(var(--color-blue));
            position: absolute;
            justify-content: center;
            align-items: center;
            top: 2px;
            left: 50%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: flex;
        }

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

        .line-separator span {
            width: fit-content;
            background-color: rgb(var(--color-white));
            font-size: 0.9rem;
            font-weight: var(--font-w-bold);
            color: rgba(var(--color-black), 0.7);
            padding: 0px 10px;
            position: relative;
            display: block;
        }

        .line-separator::before {
            content: "";
            width: 100%;
            height: 1px;
            background: rgba(var(--color-black), 0.1);
            position: absolute;
            display: block;
        }

        .privacy-settings {
            width: 100%;
            flex-wrap: wrap;
            column-gap: 20px;
            row-gap: 10px;
            flex-direction: column;
            display: flex;
        }

        .profil-detail-left-list {
            gap: 7px;
            flex-direction: column;
            display: flex;
        }

        .profil-detail-left-list li {
            font-size: 0.9rem;
        }

        .profil-detail-left-list .icon {
            color: rgb(var(--color-blue));
        }

        .vote-list-container {
            min-height: 35px;
            border: 1px solid rgb(var(--color-blue));
            border-left-width: 3px;
            transition: 0.4s;
            position: relative;
        }

        .vote-list-container .vote-list {
            width: 100%;
            position: relative;
            gap: 20px;
            padding: 20px 0px 40px 0px;
            flex-direction: column;
            position: relative;
            display: flex;
        }

        .vote-list-container .vote-list li {
            width: 100%;
            padding-left: 25px;
            align-items: start;
            position: relative;
            flex-direction: column;
            display: flex;
        }

        .vote-list-container .vote-list li .icon-con {
            width: 25px;
            height: 25px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgb(var(--color-white));
            border: 2px solid rgb(var(--color-blue));
            align-items: center;
            font-size: 0.9rem;
            justify-content: center;
            left: -22px;
            top: 50%;
            transform: rotate(45deg) translateY(-50%);
            position: absolute;
            display: flex;
        }

        .vote-list-container .vote-list li .icon-con .icon {
            transform: rotate(-45deg);
            color: rgb(var(--color-blue));
        }

        .vote-list-container .vote-list li .item-title {
            width: 100%;
            font-weight: var(--font-w-bold);
            display: block;
        }

        .vote-list-container .vote-list li .vote-star-list {
            width: fit-content;
            align-items: center;
            color: rgba(var(--color-yellow));
            padding: 4px 10px;
            font-size: 1rem;
            margin-top: 5px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
                rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
            display: flex;
        }

        .vote-list-container .vote-list li .vote-star-list .icon {
            padding-right: 3px;
        }

        .vote-list-container .vote-list li .vote-star-list .count {
            font-weight: var(--font-w-bold);
            font-size: 0.8rem;
            margin-left: 5px;
            color: rgb(var(--color-black));
        }

        .vote-list-container .vote-list .point-count {
            width: fit-content;
            padding: 3px 8px;
            font-size: 0.7rem;
            font-weight: var(--font-w-bold);
            left: -1px;
            bottom: -1px;
            -webkit-border-top-right-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-topright: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            background-color: rgb(var(--color-dark-blue));
            color: rgb(var(--color-white));
            position: absolute;
            display: block;
        }

        .vote-list-container .vote-list .vote-count {
            width: fit-content;
            padding: 3px 8px;
            font-size: 0.7rem;
            font-weight: var(--font-w-bold);
            right: -1px;
            bottom: -1px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-bottom-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-bottomright: 5px;
            border-top-left-radius: 5px;
            border-bottom-right-radius: 5px;
            background-color: rgb(var(--color-dark-blue));
            color: rgb(var(--color-white));
            position: absolute;
            display: block;
        }

        .vote-list-container .vote-list .btn-vote {
            width: fit-content;
            background-color: rgba(var(--color-yellow));
            border: none;
            outline: none;
            cursor: pointer;
            padding: 5px 12px;
            font-size: 0.8rem;
            left: 50%;
            bottom: -13px;
            font-weight: var(--font-w-bold);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px -30px 30px -28px inset;
            transform: translateX(-50%);
            position: absolute;
            display: block;
        }

        .btn-box-minimize {
            width: fit-content;
            padding: 5px;
            top: 5px;
            right: 5px;
            background-color: transparent;
            border: none;
            outline: none;
            cursor: pointer;
            z-index: 9999;
            position: absolute;
            display: block;
        }

        .btn-box-minimize > * {
            pointer-events: none;
        }

        .banner-list {
            width: 100%;
            flex-direction: column;
            gap: 10px;
            display: flex;
        }

        .banner-list .banner-item {
            width: 100%;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            display: block;
        }

        .banner-list .banner-item img {
            width: 100%;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            display: block;
        }

        .profil-detail-comment-list {
            width: 100%;
            min-height: 35px;
            border-top: 1px solid rgba(var(--color-black), 0.1);
            margin-top: 20px;
            display: block;
        }

        .profil-detail-comment-list .profil-detail-comment-title {
            width: 100%;
            padding-top: 30px;
            justify-content: space-between;
            align-items: center;
            position: relative;
            display: flex;
        }

        .profil-detail-comment-list
            .profil-detail-comment-title
            .comment-count {
            width: fit-content;
            width: fit-content;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            padding: 2px 8px;
            font-weight: var(--font-w-bold);
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            top: -3px;
            position: relative;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .profil-detail-comment-list
            .profil-detail-comment-title
            .comment-count::after {
            content: "";
            width: 0px;
            height: 0px;
            left: 3px;
            bottom: -6px;
            border-style: solid;
            border-width: 11px 5px 0 8px;
            border-color: rgb(var(--color-red)) transparent transparent
                transparent;
            transform: rotate(30deg);
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            position: absolute;
            display: block;
        }

        marquee {
            margin-bottom: -4px;
            background: rgb(var(--color-blue));
            color: rgb(var(--color-white));
            padding: 2px 0px;
            font-weight: var(--font-w-bold);
            font-size: 1rem;
        }

        .btn-comment-replay {
            width: fit-content;
            position: absolute;
            right: 0;
            bottom: 0;
            display: flex;
        }

        .btn-comment-notice {
            width: fit-content;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            padding: 3px 6px;
            font-size: 0.8rem;
            -webkit-border-top-right-radius: 10px;
            -webkit-border-bottom-left-radius: 10px;
            -moz-border-radius-topright: 10px;
            -moz-border-radius-bottomleft: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            cursor: pointer;
            outline: none;
            border: none;
            right: 0;
            top: 0;
            display: block;
        }

        .login-form-container {
            width: 90%;
        }

        .register-form-loading {
            width: 100%;
            padding: 20px 0px;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            display: none;
        }

        .register-form-loading .icon {
            color: rgb(var(--color-blue));
            font-size: 1.5rem;
            display: block;
        }

        .register-form-loading .text {
            width: 100%;
            font-size: 0.9rem;
            margin-top: 10px;
            font-weight: var(--font-w-bold);
            text-align: center;
            display: block;
        }

        .register-content.htmx-request .register-form-loading {
            display: flex;
        }

        .register-content.htmx-request form {
            display: none;
        }

        .akis-menu-container {
            width: 100%;
            border-bottom: 2px solid rgb(var(--color-blue));
            overflow: hidden;
            position: relative;
        }

        .akis-content-loading {
            width: 100%;
            padding: 20px 0px;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            display: none;
        }

        .akis-content-loading .icon {
            color: rgb(var(--color-blue));
            font-size: 1.5rem;
            display: block;
        }

        .akis-content-loading .text {
            width: 100%;
            font-size: 0.9rem;
            margin-top: 10px;
            font-weight: var(--font-w-bold);
            text-align: center;
            display: block;
        }

        .akis-container.htmx-request .akis-content-loading {
            display: flex;
        }

        .akis-container.htmx-request #akis-inner {
            display: none;
        }

        /* .akis-menu-container::before{
    content: '\f104';
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 999;
    position: absolute;
}

.akis-menu-container::after{
    content: '\f105';
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 999;
    position: absolute;
} */

        .akis-menu-right,
        .akis-menu-left {
            border: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
            padding: 0px 10px;
            display: block;
        }

        .akis-menu-right > *,
        .akis-menu-left > * {
            pointer-events: none;
        }

        .akis-menu-inner {
            display: flex;
        }

        .akis-menu-container .btn-akis-menu-item {
            width: fit-content;
            border: none;
            outline: none;
            cursor: pointer;
            background: transparent;
            align-items: center;
            color: rgb(var(--color-black));
            font-family: var(--body-font);
            padding: 3px 10px;
            font-size: 0.9rem;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            font-weight: var(--font-w-bold);
            justify-content: center;
            display: flex;
        }

        .akis-menu-container .btn-akis-menu-item.active {
            background-color: rgb(var(--color-blue));
        }

        .akis-user-list {
            grid-template-columns: 1fr 1fr;
            column-gap: 20px;
            row-gap: 10px;
            display: grid;
        }

        .akis-user-list .user-item .user-item-inner {
            width: 100%;
            justify-content: space-between;
            align-items: center;
            position: relative;
            display: flex;
        }

        .akis-user-list .user-item .user-item-inner .comment-user-menu {
            width: 130px;
            top: 0;
            left: 0;
            background-color: rgb(var(--color-white));
            padding: 7px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            gap: 5px;
            flex-wrap: wrap;
            left: 0px;
            top: 30px;
            z-index: 9;
            position: absolute;
            display: flex;
        }

        .akis-user-list .user-item .user-item-inner .comment-user-menu li {
            width: 100%;
            display: block;
        }

        .akis-user-list
            .user-item
            .user-item-inner
            .comment-user-menu
            li
            .comment-user-menu-item {
            width: 100%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgba(var(--color-light-gray));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            border: none;
            outline: none;
            font-size: 0.75rem;
            font-weight: var(--font-w-bold);
            padding: 5px;
            cursor: pointer;
            text-align: left;
            font-family: var(--body-font);
            color: rgb(var(--color-black));
            align-items: center;
            display: flex;
        }

        .akis-user-list
            .user-item
            .user-item-inner
            .comment-user-menu
            li
            .btn-follow {
            width: 100%;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .akis-user-list
            .user-item
            .user-item-inner
            .comment-user-menu
            li
            .btn-unfollow {
            width: 100%;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .akis-user-list
            .user-item
            .user-item-inner
            .comment-user-menu
            li::before {
            display: none;
        }

        .akis-user-list .user-item {
            width: 100%;
            background-color: rgba(var(--color-dark-blue), 0.1);
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            padding: 10px;
            padding-left: 15px;
            justify-content: space-between;
            align-items: center;
            position: relative;
            display: flex;
        }

        .akis-user-list .user-item .user-counter {
            width: fit-content;
            min-width: 20px;
            height: 20px;
            padding: 3px;
            background-color: rgb(var(--color-blue));
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            transform: translateY(-50%);
            font-weight: var(--font-w-bold);
            left: -10px;
            top: 50%;
            font-size: 0.8rem;
            color: rgb(var(--color-white));
            position: absolute;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .akis-user-list .user-item .user-image-container {
            margin-right: 5px;
            position: relative;
            display: block;
        }

        .akis-user-list .user-item .user-image-container .user-status {
            width: 10px;
            height: 10px;
            background-color: rgb(var(--color-red));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            bottom: 5px;
            left: -2px;
            position: absolute;
        }

        .akis-user-list .user-item .user-image-container .user-status.online {
            background-color: rgb(var(--color-green));
        }

        .akis-user-list .user-item .user-image {
            width: 40px;
            height: 40px;
            object-fit: cover;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .akis-user-list .user-item .user-name {
            font-weight: var(--font-w-bold);
            align-items: center;
            column-gap: 5px;
            display: flex;
        }

        .akis-user-list .user-item .follow-count {
            width: fit-content;
            height: 30px;
            padding-right: 5px;
            font-size: 0.9rem;
            font-weight: var(--font-w-bold);
            align-items: center;
            border-right: 1px solid rgba(var(--color-black), 0.3);
            display: flex;
        }

        .akis-user-list .user-item .follow-count.br-none {
            border: none;
            padding: 0px;
        }

        .akis-user-list .user-item .follow-count .icon {
            margin-right: 3px;
        }

        .akis-user-list .user-item .comment-count-con {
            width: fit-content;
            height: 30px;
            border-right: 1px solid rgba(var(--color-black), 0.3);
            padding: 0px 5px;
            margin-right: 5px;
            align-items: center;
            display: flex;
        }

        .akis-user-list .user-item .comment-count {
            width: fit-content;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            padding: 2px 5px;
            font-weight: var(--font-w-bold);
            -webkit-border-radius: 25px;
            font-size: 0.7rem;
            -moz-border-radius: 25px;
            border-radius: 25px;
            position: relative;
            display: block;
        }

        .akis-user-list .user-item .comment-count::after {
            content: "";
            width: 0px;
            height: 0px;
            left: 3px;
            bottom: -6px;
            border-style: solid;
            border-width: 11px 5px 0 8px;
            border-color: rgb(var(--color-red)) transparent transparent
                transparent;
            transform: rotate(30deg);
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            position: absolute;
            display: block;
        }

        .akis-user-list .user-item .vote-sum {
            flex-direction: column;
            display: flex;
        }

        .akis-user-list .user-item .vote-sum .title {
            width: 100%;
            font-size: 0.7rem;
            font-weight: var(--font-w-bold);
            display: block;
        }

        .akis-user-list .user-item .vote-sum .voting-bar {
            height: fit-content;
            padding: 3px 5px;
            font-size: 0.75rem;
            background-color: rgb(var(--color-white));
            border: 1px solid rgba(var(--color-black), 0.2);
            -webkit-border-radius: 50px;
            font-weight: var(--font-w-bold);
            -moz-border-radius: 50px;
            border-radius: 50px;
            align-items: center;
            display: flex;
        }

        .akis-user-list .user-item .vote-sum .voting-bar .icon {
            color: rgba(var(--color-yellow));
        }

        .akis-user-list .user-item .vote-sum .voting-bar .avg-score {
            margin-left: 3px;
            font-size: 0.7rem;
        }

        .akis-user-list.numeric {
            counter-reset: my-counter;
        }

        .akis-user-list.numeric li {
            position: relative;
        }

        .akis-user-list.numeric li:before {
            content: counter(my-counter);
            counter-increment: my-counter;
            width: fit-content;
            min-width: 15px;
            height: 15px;
            padding: 3px;
            background-color: rgb(var(--color-blue));
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            transform: translateY(-50%);
            font-weight: var(--font-w-bold);
            left: -10px;
            top: 50%;
            font-size: 0.8rem;
            color: rgb(var(--color-white));
            position: absolute;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .akis-empty-data {
            width: 100%;
            padding: 20px 0px;
            opacity: 0.7;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            display: flex;
        }

        .akis-empty-data .icon {
            font-size: 3rem;
        }

        .akis-empty-data .desc {
            width: 100%;
            font-weight: var(--font-w-bold);
            margin-top: 10px;
            text-align: center;
            display: block;
        }

        .home-page-notice-title {
            width: 100%;
            flex-wrap: wrap;
            gap: 20;
            align-items: center;
            justify-content: space-between;
            display: flex;
        }

        .home-page-notice-title #home-page-notice-pagination {
            width: fit-content;
            display: flex;
        }

        .home-page-notice-title
            #home-page-notice-pagination
            .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            display: block;
        }

        .home-page-notice-title
            #home-page-notice-pagination
            .swiper-pagination-bullet-active {
            background-color: rgb(var(--color-blue));
        }

        #home-page-notice-prev,
        #home-page-notice-next {
            cursor: pointer;
            font-size: 0.9rem;
            margin: 10px;
        }

        .home-page-notice-list,
        .home-page-notice-list-ads {
            width: 100%;
            overflow: hidden;
            display: block;
        }
        .home-page-notice-list-ads .notice-item {
            background-color: rgb(var(--color-white));
            border: 2px solid rgba(var(--color-black), 0.1);
            padding: 15px;

            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;
            flex-direction: column;
            display: flex;
        }
        .home-page-notice-list .notice-item {
            width: 100%;
            background-color: rgb(var(--color-white));
            border: 2px solid rgba(var(--color-black), 0.1);
            padding: 15px;
            margin-bottom: 50px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;
            margin-top: 35px;
            flex-direction: column;
            display: flex;
        }

        .home-page-notice-list .notice-item > .comment-detail {
            width: 100%;
            margin-top: 10px;
            display: block;
        }

        .home-page-notice-list .notice-item > .comment-title {
            width: 100%;
            justify-content: space-between;
            align-items: end;
            margin-top: -40px;
            position: relative;
            display: flex;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            .comment-user-menu {
            width: 130px;
            top: 0;
            left: 0;
            background-color: rgb(var(--color-white));
            padding: 7px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            gap: 5px;
            flex-wrap: wrap;
            left: 65px;
            top: 55px;
            z-index: 9;
            position: absolute;
            display: flex;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            .comment-user-menu
            li {
            width: 100%;
            display: block;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            .comment-user-menu
            li
            .comment-user-menu-item {
            width: 100%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgba(var(--color-light-gray));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            border: none;
            outline: none;
            font-size: 0.75rem;
            font-weight: var(--font-w-bold);
            padding: 5px;
            cursor: pointer;
            text-align: left;
            font-family: var(--body-font);
            color: rgb(var(--color-black));
            align-items: center;
            display: flex;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            .comment-user-menu
            li
            .btn-unfollow {
            width: 100%;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            .comment-user-menu
            li
            .btn-follow {
            width: 100%;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .home-page-notice-list .notice-item > .comment-title > .user-info {
            width: fit-content;
            align-items: end;
            display: flex;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            > .user-info
            > img {
            width: 70px;
            height: 70px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            margin-right: 10px;
            border: 4px solid rgb(var(--color-blue));
            border-bottom: 4px solid rgb(var(--color-black));
            object-fit: cover;
            display: block;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            > .user-info
            .user-name {
            font-weight: var(--font-w-bold);
            font-size: 1.2rem;
            margin-bottom: 15px;
            display: block;
        }

        .home-page-notice-list .notice-item > .comment-title .date {
            margin-bottom: 15px;
            font-weight: var(--font-w-bold);
            font-size: 0.9rem;
            display: block;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            > .user-info
            .comment-info-group {
            margin-bottom: 4px;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            > .user-info
            .comment-info-group
            .user-name {
            margin: 0px;
        }

        .home-page-notice-list
            .notice-item
            > .comment-title
            > .user-info
            .comment-info-group
            .date {
            margin: 0px;
            font-weight: 400;
            font-size: 0.8rem;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .cursor-pointer > * {
            pointer-events: none;
        }

        .mobil-user-menu-popup {
            width: 100%;
            max-width: 300px;
            height: 100vh;
            background-color: rgb(var(--color-white));
            padding: 60px 20px 80px 20px;
            left: -100%;
            top: 0;
            z-index: 99999999;
            transition: 200ms;
            overflow: hidden;
            overflow-y: scroll;
            position: fixed;
            display: block;
        }

        .mobil-user-menu-popup.active {
            left: 0;
        }

        .mobil-user-menu-popup .btn-mobil-user-menu-popup-close {
            width: fit-content;
            height: fit-content;
            padding: 0px;
            background-color: transparent;
            border: none;
            font-size: 1.7rem;
            outline: none;
            color: rgba(var(--color-black), 0.9);
            cursor: pointer;
            right: 25px;
            top: 20px;
            z-index: 9;
            position: absolute;
            display: block;
        }

        .mobil-user-menu-popup .btn-mobil-user-menu-popup-close > * {
            pointer-events: none;
        }

        /*---------- Table ----------*/
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .table {
            width: 100%;
        }

        .table > thead > tr {
            border-bottom: 12px solid rgb(var(--color-white));
        }

        .table > thead > tr > th > .table-row-item {
            background-color: rgb(var(--color-gray));
            color: rgb(var(--color-white));
            padding: 15px;
            border-right: 1.5px solid rgba(var(--color-white), 0.3);
            font-size: 0.9rem;
        }

        .table > thead > tr > th:first-child > .table-row-item {
            -webkit-border-top-left-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-left: 1px solid rgba(var(--color-dark-blue), 0.1);
        }

        .table > thead > tr > th:last-child > .table-row-item {
            -webkit-border-top-right-radius: 5px;
            -webkit-border-bottom-right-radius: 5px;
            -moz-border-radius-topright: 5px;
            -moz-border-radius-bottomright: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-right: 1px solid rgba(var(--color-dark-blue), 0.1);
        }

        .table > tbody > tr {
            border-bottom: 5px solid rgb(var(--color-white));
        }

        .table > tbody > tr:last-child {
            border-bottom: none;
        }

        .table > tbody > tr > td {
            height: 1px;
            vertical-align: top;
        }

        .table-row-item {
            height: 100%;
            min-height: 45px;
            font-size: 0.8rem;
            background-color: rgba(var(--color-dark-blue), 0.05);
            padding: 5px;
            border-top: 1px solid rgba(var(--color-dark-blue), 0.1);
            border-bottom: 1px solid rgba(var(--color-dark-blue), 0.1);
            border-right: 1.5px solid rgba(var(--color-dark-blue), 0.1);
            align-items: center;
            display: flex;
        }

        .table-row-item .tick {
            width: 12px;
            height: 12px;
        }

        .table-row-item .tick:before,
        .table-row-item .tick:after {
            width: 12px;
            height: 12px;
        }

        .table-row-item .tick > .icon {
            font-size: 0.6rem;
        }

        .table > tbody > tr > td:first-child > .table-row-item {
            -webkit-border-top-left-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-left: 1px solid rgba(var(--color-dark-blue), 0.1);
        }

        .table > tbody > tr > td:last-child > .table-row-item {
            -webkit-border-top-right-radius: 5px;
            -webkit-border-bottom-right-radius: 5px;
            -moz-border-radius-topright: 5px;
            -moz-border-radius-bottomright: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-right: 1px solid rgba(var(--color-dark-blue), 0.1);
        }

        .table > tbody > tr:hover .table-row-item {
            background-color: rgba(var(--color-dark-blue), 0.07);
        }

        .table-w-fit {
            width: 1%;
            white-space: nowrap;
        }

        .table .row-info-detail {
            width: 100%;
            gap: 5px;
            font-size: 0.8rem;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .table .row-info-detail .table-dot {
            width: 7px;
            height: 7px;
            margin: 0px 5px;
            background-color: rgb(var(--color-blue));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .table-center {
            text-align: center;
            width: 100%;
            display: block;
        }

        .forum-list-user-image {
            width: 35px;
            height: 35px;
            object-fit: cover;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
            display: block;
        }

        /*---------- Table End ----------*/

        .forum-category-list {
            width: 100%;
            flex-direction: column;
            gap: 5px;
            display: flex;
        }

        .forum-category-list .forum-category-list-item {
            width: 100%;
            display: block;
        }

        .forum-category-list
            .forum-category-list-item
            .btn-forum-category-list-item {
            width: 100%;
            align-items: center;
            justify-content: start;
            background-color: rgba(var(--color-dark-blue), 0.05);
            border: 1px solid rgba(var(--color-dark-blue), 0.1);
            padding: 10px;
            font-size: 0.9rem;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            font-family: var(--body-font);
            font-weight: var(--font-w-bold);
            display: flex;
        }

        .forum-category-list
            .forum-category-list-item
            .btn-forum-category-list-item.htmx-request
            .loading-icon {
            display: block !important;
        }

        .forum-category-list
            .forum-category-list-item
            .btn-forum-category-list-item
            .icon {
            color: rgb(var(--color-blue));
        }

        .forum-category-subjects-list-container {
            padding: 0px 10px;
            margin-top: 5px;
        }

        .forum-category-subjects-list .user-image {
            justify-content: center;
            align-items: center;
            position: relative;
            display: flex;
        }

        .forum-category-subjects-list .user-image img {
            width: 40px;
            min-width: 40px;
            height: 40px;
            object-fit: cover;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .forum-category-subjects-list .user-image .user-status {
            width: 10px;
            height: 10px;
            background-color: rgb(var(--color-red));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            bottom: 5px;
            left: -2px;
            position: absolute;
        }

        .forum-category-subjects-list .user-image .user-status.online {
            background-color: rgb(var(--color-green));
        }

        .forum-category-subjects-list .title {
            width: 100%;
            height: 100%;
            padding-right: 10px;
            flex-direction: column;
            justify-content: center;
            display: flex;
        }

        .forum-category-subjects-list .title a {
            font-weight: var(--font-w-bold);
            font-size: 0.9rem;
        }

        .forum-category-subjects-list .title .user-name {
            font-weight: 400;
            font-size: 0.8rem;
        }

        .forum-category-subjects-list .date {
            width: 100%;
            height: 100%;
            padding: 0px 10px;
            font-size: 0.8rem;
            font-weight: var(--font-w-bold);
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .forum-category-subjects-list .counters {
            width: 100%;
            padding: 0px 10px;
            font-size: 0.85rem;
            justify-content: center;
            align-items: center;
            gap: 5px;
            display: flex;
        }

        .forum-category-subjects-list .counters .table-dot {
            width: 7px;
            height: 7px;
            margin: 0px 5px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            background-color: rgb(var(--color-blue));
            display: block;
        }

        .forum-list-item-mobile-detail {
            width: max-content;
            right: 0;
            bottom: 0;
            border: 1px solid rgba(var(--color-black), 0.1);
            border-bottom: 0px;
            border-right: 0px;
            background-color: rgba(var(--color-white), 0.5);
            position: absolute;
            display: flex;
        }

        .forum-list-item-mobile-detail li {
            width: fit-content;
            border-right: 1px solid rgba(var(--color-black), 0.1);
            display: block;
        }

        .forum-list-item-mobile-detail li:last-child {
            border: none;
        }

        .top-forum-list-item-mobile-detail {
            width: max-content;
            right: 0;
            bottom: 0;
            border: 1px solid rgba(var(--color-black), 0.1);
            border-bottom: 0px;
            border-right: 0px;
            background-color: rgba(var(--color-white), 0.5);
            position: absolute;
            display: flex;
        }

        .top-forum-list-item-mobile-detail li {
            width: fit-content;
            padding: 0px 10px;
            border-right: 1px solid rgba(var(--color-black), 0.1);
            display: block;
        }

        .top-forum-list-item-mobile-detail li:last-child {
            border: none;
        }

        .top-forum-list-item-mobile-detail .date {
            font-weight: var(--font-w-bold);
            font-size: 0.8rem;
        }

        .forum-detail-header {
            width: 100%;
            background-color: rgb(var(--color-blue));
            color: rgb(var(--color-white));
            padding: 15px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            justify-content: space-between;
            align-items: center;
            z-index: 9;
            position: relative;
            display: flex;
        }

        .forum-detail-header .title {
            font-weight: var(--font-w-bold);
            font-size: 1.1rem;
        }

        .forum-detail-header .detail {
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .forum-detail-header .detail .date {
            font-size: 0.95rem;
            padding-right: 10px;
            border-right: 1px solid rgb(var(--color-white), 0.6);
            margin-right: 10px;
            font-weight: var(--font-w-bold);
        }

        .forum-detail-header .detail .counter {
            font-size: 0.8rem;
            font-weight: var(--font-w-bold);
        }

        .forum-breadcrumb {
            width: 100%;
            padding-top: 10px;
            margin-top: -10px;
            background-color: #edeff6;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            align-items: center;
            display: flex;
        }

        .forum-breadcrumb li a {
            padding: 10px 15px;
            font-size: 0.85rem;
            font-weight: var(--font-w-bold);
            align-items: center;
            display: flex;
        }

        .forum-breadcrumb li {
            position: relative;
        }

        .forum-breadcrumb li::after {
            content: "";
            width: 20px;
            height: 20px;
            border-color: #ccc;
            border-style: solid;
            border-width: 1px 1px 0 0;
            -webkit-backface-visibility: hidden;
            outline: 1px solid transparent;
            position: absolute;
            right: -4px;
            top: 8px;
            -webkit-transition: all 0.15s ease;
            -moz-transition: all 0.15s ease;
            -ms-transition: all 0.15s ease;
            transition: all 0.15s ease;
            -webkit-transform: rotateZ(45deg) skew(10deg, 10deg);
            -moz-transform: rotateZ(45deg) skew(10deg, 10deg);
            -ms-transform: rotateZ(45deg) skew(10deg, 10deg);
            transform: rotateZ(45deg) skew(10deg, 10deg);
        }

        .forum-breadcrumb li:last-child::after {
            display: none;
        }

        .subject-detail {
            background-image: linear-gradient(
                    rgba(255, 255, 255, 0.5),
                    rgba(255, 255, 255, 0.5)
                ),
                url(http://gncllnd.com/images/footer-logo-bg.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .subject-detail {
            width: 100%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            border: 1px solid #e0dfe1;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            flex-direction: column;
            position: relative;
            display: flex;
        }

        .subject-detail .subject-detail-header {
            align-items: stretch;
            /* padding: 10px 0px 10px 10px; */
            border-bottom: 1px solid rgb(var(--color-black), 0.1);
            justify-content: space-between;
            display: flex;
        }

        /*.subject-detail .subject-detail-header .btn-unfollow {
            width: fit-content;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            height: 30px;
            font-size: 0.8rem;
            padding: 0px 15px;
            align-items: center;
            display: flex;
        }

        .subject-detail .subject-detail-header .btn-unfollow > * {
            pointer-events: none;
        }*/

        /*.subject-detail .subject-detail-header .btn-follow {
            width: fit-content;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            height: 30px;
            font-size: 0.8rem;
            padding: 0px 15px;
            align-items: center;
            display: flex;
        }

        .subject-detail .subject-detail-header .btn-follow > * {
            pointer-events: none;
        }*/

        .subject-detail .subject-detail-header .user-info {
            padding: 10px;
            align-items: center;
            display: flex;
        }

        .subject-detail .subject-detail-header .user-info .user-image {
            margin-right: 10px;
            position: relative;
            display: block;
        }

        .subject-detail .subject-detail-header .user-info .user-image img {
            width: 100px;
            height: 100px;
            min-width: 100px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            object-fit: cover;
            display: block;
        }

        .subject-detail
            .subject-detail-header
            .user-info
            .user-image
            .user-status {
            width: 15px;
            height: 15px;
            background-color: rgb(var(--color-red));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            bottom: 5px;
            left: 9px;
            position: absolute;
        }

        .subject-detail
            .subject-detail-header
            .user-info
            .user-image
            .user-status.online {
            background-color: rgb(var(--color-green));
        }

        .subject-detail .subject-detail-header .user-info .user-detail {
            height: 100%;
            justify-content: center;
            flex-direction: column;
            display: flex;
        }

        .subject-detail
            .subject-detail-header
            .user-info
            .user-detail
            .user-info-inner {
            display: flex;
        }

        .subject-detail
            .subject-detail-header
            .user-info
            .user-detail
            .user-info-inner
            .user-name {
            font-size: 1rem;
            font-weight: var(--font-w-bold);
            margin-right: 10px;
            align-items: center;
            display: flex;
        }

        .subject-detail
            .subject-detail-header
            .user-info
            .user-detail
            .user-info-inner
            > .btn {
            width: fit-content;
        }

        .subject-detail
            .subject-detail-header
            .user-info
            .user-detail
            .user-date {
            margin-top: 5px;
            font-size: 0.8rem;
        }

        .subject-detail .subject-detail-header .subject-info-right {
            display: flex;
        }

        .subject-detail
            .subject-detail-header
            .subject-info-right
            .show-counter {
            margin-top: 10px;
            margin-right: 10px;
        }

        .subject-detail .subject-detail-header .subject-info-right-inner {
            height: 100%;
            background-color: rgb(var(--color-blue));
            padding: 15px;
            justify-content: center;
            gap: 5px;
            font-size: 0.9rem;
            color: rgb(var(--color-black));
            flex-direction: column;
            position: relative;
            display: flex;
        }

        .subject-detail
            .subject-detail-header
            .subject-info-right-inner
            .btn-comment-notice {
            width: fit-content;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            padding: 3px 6px;
            font-size: 0.8rem;
            border-radius: 0px;
            -webkit-border-bottom-left-radius: 10px;
            -moz-border-radius-bottomleft: 10px;
            border-bottom-left-radius: 10px;
            cursor: pointer;
            outline: none;
            border: none;
            right: 0;
            top: 0;
            display: block;
        }

        .subject-detail .subject-detail-header .subject-info-right-inner .icon {
            color: rgb(var(--color-white));
            font-size: 1rem;
        }

        .subject-comment-list-container {
            width: 100%;
            margin-top: 15px;
            margin-bottom: 15px;
            padding: 0px 20px;
            gap: 15px;
            flex-direction: column;
            display: flex;
        }

        .subject-comment-list-item {
            width: 100%;
            background-color: #ededed;
            border: 1px solid #e0dfe1;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding: 5px;
            gap: 5px;
            position: relative;
            display: flex;
        }

        .subject-comment-list-item .comment-item-user-image {
            width: 80px;
            height: 80px;
            min-width: 80px;
            object-fit: cover;
            border: 4px solid var(--color-border);
            border-bottom: 4px solid rgb(var(--color-black));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .subject-comment-list-item .btn-user-info {
            cursor: pointer;
        }

        .subject-comment-list-item .btn-user-info > * {
            pointer-events: none;
        }

        .subject-comment-list-item .forum-comment-item-detail {
            width: 100%;
            margin-bottom: 15px;
            flex-direction: column;
            display: flex;
        }

        .subject-comment-list-item .forum-comment-item-detail .user-name {
            width: fit-content;
            margin-bottom: 5px;
            font-weight: var(--font-w-bold);
            align-items: center;
            display: flex;
        }

        .subject-comment-list-item .forum-comment-item-detail .user-name .date {
            font-size: 0.8rem;
            font-weight: 400;
            margin-left: 10px;
        }

        .subject-comment-list-item .subject-detail-header {
            width: fit-content;
            right: 0;
            top: 0;
            position: absolute;
            align-items: center;
            display: flex;
        }

        .subject-comment-list-item .subject-detail-header .show-count {
            font-size: 0.8rem;
            margin-right: 10px;
        }

        .subject-comment-list-item .subject-detail-header .btn-notice {
            width: fit-content;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            padding: 3px 6px;
            font-size: 0.8rem;
            -webkit-border-top-right-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-topright: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            cursor: pointer;
            outline: none;
            border: none;
            display: block;
        }

        .subject-comment-list-item .subject-detail-header .btn-notice > * {
            pointer-events: none;
        }

        .subject-comment-list-item .emoji-container .btn-emoji-list,
        .btn-show-comment-edit {
            border: none;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            font-size: 1rem;
            padding: 4px 4px 3px 4px;
            outline: none;
            color: rgb(var(--color-blue));
            cursor: pointer;
            display: block;
        }

        .subject-comment-list-item .emoji-container .btn-emoji-list > * {
            pointer-events: none;
        }

        .subject-comment-list-item .emoji-container .emoji-list {
            right: 0;
            top: -40px;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            position: absolute;
            display: flex;
        }

        .subject-comment-list-item
            .emoji-container
            .emoji-list
            .emoji-list-btn {
            background-color: transparent;
            outline: none;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            padding: 5px;
        }

        .subject-comment-list-item .btn-quotation {
            width: 24px;
            height: 24px;
            border: none;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            font-size: 0.8rem;
            outline: none;
            color: rgb(var(--color-blue));
            cursor: pointer;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .subject-comment-list-item .sending-emoji-list {
            width: fit-content;
            bottom: -10px;
            position: absolute;
            gap: 10px;
            display: flex;
        }

        .subject-comment-list-item .sending-emoji-list .sending-emoji-item {
            font-size: 1rem;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding: 2px 5px;
            border: 1px solid rgb(var(--color-blue));
            display: block;
        }

        .subject-comment-list-item
            .sending-emoji-list
            .sending-emoji-item
            span {
            color: rgb(var(--color-blue));
            font-weight: var(--font-w-bold);
            margin-left: 3px;
        }

        .subject-detail .emoji-container .btn-emoji-list,
        .btn-show-comment-edit {
            border: none;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            font-size: 1rem;
            padding: 4px 4px 3px 4px;
            outline: none;
            color: rgb(var(--color-blue));
            cursor: pointer;
            display: block;
        }

        .subject-detail .emoji-container .btn-emoji-list > * {
            pointer-events: none;
        }

        .subject-detail .emoji-container .emoji-list {
            right: 0;
            top: -40px;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            position: absolute;
            display: flex;
        }

        .subject-detail .emoji-container .emoji-list .emoji-list-btn {
            background-color: transparent;
            outline: none;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            padding: 5px;
        }

        .subject-detail .btn-quotation {
            width: 24px;
            height: 24px;
            border: none;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            font-size: 0.8rem;
            outline: none;
            color: rgb(var(--color-blue));
            cursor: pointer;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .subject-detail .sending-emoji-list {
            width: fit-content;
            left: 15px;
            bottom: -27px;
            position: absolute;
            gap: 10px;
            display: grid;
            grid-auto-columns: max-content;
            gap: 4px;
            justify-content: start;
            grid-auto-flow: column;
        }

        .subject-detail .sending-emoji-list .sending-emoji-item {
            font-size: 1rem;
            background-color: rgb(var(--color-white));
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding: 2px 5px;
            border: 1px solid rgb(var(--color-blue));
            display: block;
        }

        /******* ip12pro*/

        @media (max-width: 400px) {
            .subject-detail .sending-emoji-list {
                bottom: -27px;
                left: 15px;
            }
            .profile-section {
                padding: 15px 0px;
            }
            .quote-text {
                display: none;
            }
            #like-text {
                display: none;
                color: var(--color-blue) !important;
            }

            .like-icon {
                color: var(--color-blue) !important;
                display: inline-block !important;
            }
            .edit-info {
                display: inline-block !important;
            }
        }

        /*********ipad*/
        @media (max-width: 800px) {
            .btn-forum-ara-btn {
                padding: 5px !important;
                font-size: 11px !important;
            }
        }

        .edit-info {
            display: inline-block !important;
            font-size: 12px;
            color: gray;
            padding: 15px 0px 10px 14px;
        }

        .btn-forum-ara-btn {
            padding: 7px 10px;
            box-shadow: none;
            height: auto;
            margin-right: 15px;
        }

        .subject-detail .sending-emoji-list .sending-emoji-item span {
            color: rgb(var(--color-blue));
            font-weight: var(--font-w-bold);
            margin-left: 3px;
        }

        .subject-comment-list-item .comment-user-menu,
        .subject-detail-header .comment-user-menu {
            width: 130px;
            top: 0;
            left: 0;
            background-color: rgb(var(--color-white));
            padding: 7px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            gap: 5px;
            flex-wrap: wrap;
            left: 90px;
            top: 25px;
            z-index: 9;
            position: absolute;
            display: flex;
        }

        .subject-comment-list-item .comment-user-menu li,
        .subject-detail-header .comment-user-menu li {
            width: 100%;
            display: block;
        }

        .subject-comment-list-item
            .comment-user-menu
            li
            .comment-user-menu-item,
        .subject-detail-header .comment-user-menu li .comment-user-menu-item {
            width: 100%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgba(var(--color-light-gray));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            border: none;
            outline: none;
            font-size: 0.75rem;
            font-weight: var(--font-w-bold);
            padding: 5px;
            cursor: pointer;
            text-align: left;
            font-family: var(--body-font);
            color: rgb(var(--color-black));
            align-items: center;
            display: flex;
        }

        .subject-comment-list-item .comment-user-menu li .btn-follow,
        .subject-detail-header .comment-user-menu li .btn-follow {
            width: 100%;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .subject-comment-list-item .comment-user-menu li .btn-unfollow,
        .subject-detail-header .comment-user-menu li .btn-unfollow {
            width: 100%;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .subject-pagination {
            width: 100%;
            padding: 0px 20px;
            margin-top: 20px;
            align-items: center;
            justify-content: center;
            gap: 5px;
            display: flex;
        }

        .subject-pagination li a {
            min-width: 25px;
            min-height: 24px;
            padding: 2px 5px;
            background-color: rgb(var(--color-white));
            border: 1px solid rgb(var(--color-black));
            font-weight: var(--font-w-bold);
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            font-size: 0.7rem;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        .subject-pagination li .active {
            color: rgb(var(--color-white));
            background-color: rgb(var(--color-black));
        }

        .forum-quotation {
            width: 100%;
            max-height: 120px;
            overflow: hidden;
            background-color: rgba(var(--color-dark-blue), 0.1);
            padding: 10px;
            margin-bottom: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            transition: 200ms;
            position: relative;
            display: block;
        }

        .forum-quotation.active {
            max-height: fit-content;
            padding-bottom: 30px;
        }

        .forum-quotation.more-btn-active .forum-quotation-more-btn {
            display: flex;
        }

        .forum-quotation .forum-quotation-more-btn {
            width: 100%;
            bottom: 0;
            justify-content: center;
            padding: 5px 0px;
            background: rgb(220, 223, 229);
            background: linear-gradient(
                0deg,
                rgba(220, 223, 229, 1) 0%,
                rgba(220, 223, 229, 0.8127626050420168) 74%,
                rgba(220, 223, 229, 0.26934523809523814) 100%
            );
            position: absolute;
            display: none;
        }

        .forum-quotation .forum-quotation-more-btn button {
            border: none;
            background-color: transparent;
            outline: none;
            padding: 0;
            font-family: var(--body-font);
            font-weight: var(--font-w-bold);
            color: rgb(var(--color-dark-blue));
            cursor: pointer;
            display: block;
        }

        .forum-quotation .forum-quotation-more-btn button > * {
            pointer-events: none;
        }

        .forum-quotation .icon {
            font-size: 3rem;
            top: -15px;
            left: 0px;
            color: rgba(var(--color-black), 0.2);
            z-index: 0;
            pointer-events: none;
            position: absolute;
        }

        .forum-quotation .forum-quotation-user {
            color: rgb(var(--color-dark-blue));
            margin-bottom: 5px;
            font-weight: var(--font-w-bold);
            display: block;
        }

        .forum-quotation p {
            color: rgba(var(--color-black), 0.7);
        }

        .forum-content-detail {
            width: 100%;
            display: block;
        }

        .forum-content-detail img {
            max-width: 100%;
            max-height: 700px;
            border-radius: 10px;
            object-fit: cover;
            display: block;
        }

        .forum-content-detail iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .btn-quotation-delete {
            width: fit-content;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            padding: 3px 6px;
            font-size: 0.8rem;
            -webkit-border-top-right-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-topright: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            right: 0;
            top: 0;
            cursor: pointer;
            outline: none;
            border: none;
            position: absolute;
            display: block;
        }

        .btn-quotation-delete > * {
            pointer-events: none;
        }

        .btn-forum-comment-delete {
            width: 24px;
            height: 24px;
            border: none;
            background-color: rgb(var(--color-red));
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            font-size: 0.8rem;
            outline: none;
            color: rgb(var(--color-white));
            cursor: pointer;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .btn-forum-comment-delete > * {
            pointer-events: none;
        }

        .forum-comment-bottom-btn-group {
            right: 10px;
            bottom: -10px;
            gap: 5px;
            position: absolute;
            align-items: center;
            display: flex;
        }

        .akis-marquee {
            width: 100%;
            max-height: calc(100vh - 150px);
            overflow: hidden;
            display: block;
        }

        .akis-marquee .akis-marquee-inner {
            width: 100%;
            display: block;
        }

        .akis-marquee .akis-marquee-items {
            width: 100%;
            display: block;
        }

        .akis-marquee .akis-marquee-item {
            width: 100%;
            margin-bottom: 5px;
            display: block;
        }

        .akis-marquee .akis-marquee-item img {
            width: 100%;
            border-radius: 5px;
            display: block;
        }

        .home-marquee {
            width: 100%;
            overflow: hidden;
            display: block;
        }

        .home-marquee .home-marquee-inner {
            width: max-content;
            display: flex;
        }

        .home-marquee .home-marquee-items {
            width: max-content;
            display: flex;
        }

        .home-marquee .home-marquee-item {
            display: contents;
        }

        .home-marquee .home-marquee-item img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            margin-right: 10px;
            border-radius: 5px;
            display: block;
        }

        .btn-marquee-direction {
            width: 100%;
            background-color: rgb(var(--color-gray));
            color: rgb(var(--color-white));
            border: none;
            outline: none;
            cursor: pointer;
            padding: 3px;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .btn-marquee-direction.up {
            margin-bottom: 5px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .btn-marquee-direction.down {
            margin-top: 5px;
            -webkit-border-bottom-right-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-bottomright: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .notification-inner-list {
            width: 100%;
            display: block;
        }

        .notification-inner-list li:first-child {
            font-weight: var(--font-w-bold);
            padding: 10px;
            font-size: 1rem;
            align-items: center;
            display: flex;
        }

        .notification-inner-list li:first-child .icon {
            color: rgb(var(--color-blue));
        }

        .notification-inner-list li {
            width: 100%;
            border-bottom: 1px solid rgba(var(--color-black), 0.3);
            display: block;
        }

        .notification-inner-list li a {
            width: 100%;
            font-size: 0.9rem;
            padding: 5px 5px;
            position: relative;
            display: block;
        }

        .notification-inner-list li a:hover {
            background-color: rgba(var(--color-dark-blue), 0.1);
        }

        .notification-inner-list li a .top {
            width: 100%;
            font-size: 0.7rem;
            font-weight: var(--font-w-bold);
            justify-content: end;
            align-items: center;
            display: flex;
        }

        .notification-inner-list li a .top .dot {
            width: 7px;
            height: 7px;
            margin-left: 5px;
            background-color: rgb(var(--color-blue));
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
            display: block;
        }

        .notification-inner-list li .notification-list-empty {
            opacity: 0.5;
            padding: 30px 0px;
            align-items: center;
            flex-direction: column;
            display: flex;
        }

        .notification-inner-list li .notification-list-empty .icon {
            font-size: 3rem;
        }

        .notification-inner-list li .notification-list-empty span {
            width: 100%;
            margin-top: 10px;
            font-weight: var(--font-w-bold);
            font-size: 0.9rem;
            text-align: center;
            display: block;
        }

        .form-user-popup-menu-con {
            position: relative;
        }

        .form-user-popup-menu-con .comment-user-menu {
            width: 130px;
            top: 45px;
            left: 60px;
            background-color: rgb(var(--color-white));
            padding: 7px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            gap: 5px;
            flex-wrap: wrap;
            z-index: 99999999999999;
            position: absolute;
            display: flex;
        }

        .form-user-popup-menu-con .comment-user-menu li {
            width: 100%;
            display: block;
        }

        .form-user-popup-menu-con
            .comment-user-menu
            li
            .comment-user-menu-item {
            width: 100%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgba(var(--color-light-gray));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            border: none;
            outline: none;
            font-size: 0.75rem;
            font-weight: var(--font-w-bold);
            padding: 5px;
            cursor: pointer;
            text-align: left;
            font-family: var(--body-font);
            color: rgb(var(--color-black));
            align-items: center;
            display: flex;
        }

        .form-user-popup-menu-con .comment-user-menu li .btn-follow {
            width: 100%;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .form-user-popup-menu-con .comment-user-menu li .btn-unfollow {
            width: 100%;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .top-form-user-popup-menu-con {
            position: relative;
        }

        .top-form-user-popup-menu-con
            .form-user-popup-menu-con
            .comment-user-menu {
            top: 35px;
            left: 0px;
        }

        .header-search-box-container {
            position: relative;
        }

        .header-search-input {
            width: 200px;
            position: relative;
            display: block;
        }

        .header-search-input input {
            width: 100%;
            height: 30px;
            padding: 5px 10px 7px 10px;
            font-family: var(--body-font);
            color: rgb(var(--color-black));
            font-size: 0.9rem;
            border: 1px solid rgba(var(--color-black), 0.2);
            outline: none;
        }

        .header-search-input .search-button {
            width: 28px;
            height: 28px;
            top: 1px;
            right: 0;
            background-color: rgb(var(--color-blue));
            color: rgb(var(--color-white));
            font-size: 0.8rem;
            border: none;
            outline: none;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            position: absolute;
            display: flex;
        }

        .header-search-result-list-container {
            width: 250px;
            background: rgb(var(--color-white));
            top: 35px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            overflow-x: hidden;
            position: absolute;
            display: none;
        }

        .header-searching-company-loading {
            width: 100%;
            padding: 15px 0px;
            font-size: 0.9rem;
            justify-content: center;
            align-items: center;
            font-weight: var(--font-w-bold);
            color: rgba(var(--color-black), 0.8);
            display: none;
        }

        .header-searching-company-loading > .icon {
            color: rgb(var(--color-blue));
            font-size: 1.2rem;
            margin-right: 10px;
        }

        .header-search-result-list-container.htmx-request {
            display: block;
        }

        .header-search-result-list-container.htmx-request
            > .header-searching-company-loading {
            display: flex;
        }

        .header-search-result-list-container.htmx-request
            > #header-search-result-list-content {
            display: none;
        }

        .header-search-result-list-container .header-search-result-list {
            width: 100%;
            max-height: 260px;
            overflow: auto;
            display: block;
        }

        .header-search-result-list-container .header-search-result-list > li {
            width: 100%;
            padding: 5px;
            align-items: center;
            border-bottom: 1px solid rgba(var(--color-black), 0.1);
            display: block;
        }

        .header-search-result-list-container
            .header-search-result-list
            > li
            > .header-btn-search-list-item {
            width: 100%;
            align-items: center;
            justify-content: space-between;
            display: flex;
        }

        .header-search-result-list-container
            .header-search-result-list
            > li
            > .header-btn-search-list-item
            > .company-detail {
            align-items: center;
            display: flex;
        }

        .header-search-result-list-container
            .header-search-result-list
            > li
            > .header-btn-search-list-item
            > .company-detail
            > .company-image {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            display: block;
        }

        .header-search-result-list-container
            .header-search-result-list
            > li
            > .header-btn-search-list-item
            > .company-detail
            > .company-name {
            font-weight: var(--font-w-bold);
            font-size: 0.9rem;
            column-gap: 5px;
            display: flex;
        }

        .header-search-result-list-container
            .header-search-result-list
            > li
            > .header-btn-search-list-item
            > .company-detail
            > .company-name
            .tick::before,
        .header-search-result-list-container
            .header-search-result-list
            > li
            > .header-btn-search-list-item
            > .company-detail
            > .company-name
            .tick::after,
        .header-search-result-list-container
            .header-search-result-list
            > li
            > .header-btn-search-list-item
            > .company-detail
            > .company-name
            .tick {
            width: 13px;
            height: 13px;
        }

        .btn-header-search {
            padding: 6px 10px;
            background-color: transparent;
            border: none;
            outline: none;
            font-size: 1.2rem;
            color: rgb(var(--color-black));
        }

        .btn-header-search > * {
            pointer-events: none;
        }

        .not-fount-page-con {
            flex-wrap: wrap;
            justify-content: center;
            display: flex;
        }

        .not-fount-title {
            font-size: 10rem;
            font-weight: var(--font-w-bold);
            opacity: 0.2;
        }

        .not-fount-page-con p {
            width: 100%;
            font-size: 1rem;
            opacity: 0.7;
            line-height: 1.6rem;
            margin-bottom: 20px;
            text-align: center;
            display: block;
        }

        .grup-user-list-item {
            position: relative;
        }

        .grup-user-list-item .comment-user-menu {
            width: 130px;
            top: 0;
            left: 0;
            background-color: rgb(var(--color-white));
            padding: 7px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            gap: 5px;
            flex-wrap: wrap;
            left: 45px;
            top: 35px;
            z-index: 9;
            position: absolute;
            display: flex;
        }

        .grup-user-list-item .comment-user-menu li {
            width: 100%;
            display: block;
        }

        .grup-user-list-item .comment-user-menu li .comment-user-menu-item {
            width: 100%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgba(var(--color-light-gray));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            border: none;
            outline: none;
            font-size: 0.75rem;
            font-weight: var(--font-w-bold);
            padding: 5px;
            cursor: pointer;
            text-align: left;
            font-family: var(--body-font);
            color: rgb(var(--color-black));
            align-items: center;
            display: flex;
        }

        .grup-user-list-item .comment-user-menu li .btn-unfollow {
            width: 100%;
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(var(--color-red));
            color: rgb(var(--color-white));
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        .grup-user-list-item .comment-user-menu li .btn-follow {
            width: 100%;
            background-color: rgb(var(--color-blue));
            border: none;
            outline: none;
            font-weight: var(--font-w-bold);
            font-family: var(--body-font);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: rgb(var(--color-black));
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px,
                rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            font-size: 0.75rem;
            padding: 5px;
            align-items: center;
            display: flex;
        }

        /* // Large devices (desktops, less than 1200px) */
        @media (max-width: 1710px) {
            .left-sidebar-box {
                width: 40%;
            }

            .left-sidebar-box-open .home-search-container {
                width: 60%;
                right: -40%;
            }
        }

        @media (max-width: 1410px) {
            .left-sidebar-box {
                width: 45%;
            }

            .left-sidebar-box-open .home-search-container {
                width: 60%;
                right: -40%;
            }
        }

        @media (max-width: 1255px) {
            .left-sidebar-box {
                width: 50%;
            }

            .left-sidebar-box-open .home-search-container {
                width: 50%;
                right: -50%;
            }
        }

        @media (max-width: 1199.98px) {
        }

        @media (max-width: 1024px) {
            .left-sidebar-box {
                width: 60%;
            }
        }

        /* // Medium devices (tablets, less than 992px) */
        @media (max-width: 991.98px) {
            /*========== GridSystem ==========*/
            .col-md-1 {
                grid-column: span 1;
            }

            .col-md-2 {
                grid-column: span 2;
            }

            .col-md-3 {
                grid-column: span 3;
            }

            .col-md-4 {
                grid-column: span 4;
            }

            .col-md-5 {
                grid-column: span 5;
            }

            .col-md-6 {
                grid-column: span 6;
            }

            .col-md-7 {
                grid-column: span 7;
            }

            .col-md-8 {
                grid-column: span 8;
            }

            .col-md-9 {
                grid-column: span 9;
            }

            .col-md-10 {
                grid-column: span 10;
            }

            .col-md-11 {
                grid-column: span 11;
            }

            .col-md-12 {
                grid-column: span 12;
            }

            .d-md-none {
                display: none;
            }

            /*========== GridSystem End ==========*/

            .popup-login {
                width: 70%;
            }
        }

        /* // Small devices (landscape phones, less than 768px) */
        @media (max-width: 768px) {
            /*========== GridSystem ==========*/
            .col-sd-1 {
                grid-column: span 1;
            }

            .col-sd-2 {
                grid-column: span 2;
            }

            .col-sd-3 {
                grid-column: span 3;
            }

            .col-sd-4 {
                grid-column: span 4;
            }

            .col-sd-5 {
                grid-column: span 5;
            }

            .col-sd-6 {
                grid-column: span 6;
            }

            .col-sd-7 {
                grid-column: span 7;
            }

            .col-sd-8 {
                grid-column: span 8;
            }

            .col-sd-9 {
                grid-column: span 9;
            }

            .col-sd-10 {
                grid-column: span 10;
            }

            .col-sd-11 {
                grid-column: span 11;
            }

            .col-sd-12 {
                grid-column: span 12;
            }

            .mt-sd-10 {
                margin-top: 10px;
            }

            .mt-sd-20 {
                margin-top: 20px;
            }

            .ai-sd-center {
                align-items: center;
            }

            .jc-sd-center {
                justify-content: center;
            }

            .d-sd-grid {
                display: grid !important;
            }

            .d-sd-none {
                display: none !important;
            }

            .d-sd-flex {
                display: flex !important;
            }

            /*========== GridSystem End ==========*/
            .video-container {
                position: relative;
                width: 100%;
                height: 0;
                padding-bottom: 56.25%; /* 16:9 aspect ratio */
            }

            .video-container iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .subject-detail .subject-detail-header {
                grid-template-columns: 1fr;
                display: grid;
            }

            .subject-detail .subject-detail-header .subject-info-right {
                width: 100%;
                display: block;
            }

            .left-sidebar-box {
                width: 70%;
            }

            .popup-login {
                width: 90%;
            }

            .message-box-rigth {
                /* height: 100dvh; */
            }

            .footer-social-container {
                align-items: center;
                justify-content: center;
                flex-direction: column;
                margin-top: 20px;
                display: flex;
            }

            .footer-social-container .footer-social-list,
            .footer-social-container .footer-title {
                width: fit-content;
            }
        }

        /* // Extra small devices (portrait phones, less than 576px) */
        @media (max-width: 800px) {
            /*========== GridSystem ==========*/
            .col-esd-1 {
                grid-column: span 1;
            }

            .col-esd-2 {
                grid-column: span 2;
            }

            .col-esd-3 {
                grid-column: span 3;
            }

            .col-esd-4 {
                grid-column: span 4;
            }

            .col-esd-5 {
                grid-column: span 5;
            }

            .col-esd-6 {
                grid-column: span 6;
            }

            .col-esd-7 {
                grid-column: span 7;
            }

            .col-esd-8 {
                grid-column: span 8;
            }

            .col-esd-9 {
                grid-column: span 9;
            }

            .col-esd-10 {
                grid-column: span 10;
            }

            .col-esd-11 {
                grid-column: span 11;
            }

            .col-esd-12 {
                grid-column: span 12;
            }

            .mb-esd-20 {
                margin-bottom: 20px;
            }

            .mt-esd-20 {
                margin-top: 20px;
            }

            .jc-esd-center {
                justify-content: center !important;
            }

            .d-esd-flex {
                display: flex !important;
            }

            .d-esd-block {
                display: block !important;
            }

            .d-esd-none {
                display: none !important;
            }

            /*========== GridSystem End ==========*/

            body {
                padding-bottom: 55px;
            }

            .message-box-rigth
                .message-detail-message-list
                .message-item
                .message-item-inner
                .user-image {
                min-width: 50px;
            }

            .akis-marquee {
                height: 150px;
            }

            .akis-user-list .user-item .user-item-inner {
                grid-template-columns: 1fr;
                display: grid;
            }

            .forum-top-title {
                padding-bottom: 15px;
            }

            .akis-detail-user-info {
                justify-content: center;
                grid-template-columns: 1fr;
                display: grid;
            }

            .akis-detail-info {
                justify-content: center;
                display: flex;
            }

            .forum-detail-header {
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
            }

            .profile-sum {
                width: 100%;
                grid-template-columns: auto auto auto;
                column-gap: 5px;
                display: grid !important;
            }

            .profile-sum .btn-follow,
            .profile-sum .btn-unfollow,
            .profile-sum .btn-sm {
                width: 100% !important;
                margin: 0px !important;
                font-size: 0.6rem;
            }

            .left-sidebar-box {
                width: 100vw;
            }

            .left-sidebar-box-open .home-search-container {
                right: 0;
                width: 100%;
            }

            .left-sidebar-box .left-sidebar-user-info > .user-image > img {
                width: 100px;
                height: 100px;
                min-width: 100px;
            }

            .left-sidebar-box
                .left-sidebar-user-info
                > .user-image
                > .user-status {
                left: 11px;
                bottom: 5px;
            }

            .mobil-user-menu-popup {
                max-width: 100%;
            }

            .profil-ozet-yorum-baslik {
                font-size: 0.9rem;
            }

            .left-sidebar-box .btn-all-comment {
                font-size: 0.7rem;
            }

            .follow-list-popup {
                width: 90%;
            }

            .home-search-container .search-box-container {
                width: 95%;
            }

            .home-search-container {
                background-size: auto;
                background-position-x: 85%;
            }

            .home-search-container .home-search-logo {
                width: 250px;
            }

            .home-search-container .search-form-input > input {
                padding: 15px 20px 15px 0px;
                font-size: 1rem;
            }

            .home-search-container .search-form-input > button {
                width: 49px;
                height: 49px;
                font-size: 1.1rem;
            }

            .left-sidebar-box .left-sidebar-user-info {
                flex-direction: column;
            }

            .left-sidebar-box .left-sidebar-user-info > .user-detail {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 10px;
            }

            .popup-login {
                grid-template-columns: 1fr;
            }

            .akis-user-list {
                grid-template-columns: 1fr;
            }

            .contact-page-title {
                font-size: 1.5rem;
            }

            .footer-item {
                flex-direction: column;
                margin-top: 20px;
                justify-content: center;
                align-items: center;
                display: flex;
            }

            .footer-item > * {
                width: fit-content !important;
            }

            .mobil-user-bar {
                display: flex;
            }
        }

        @media (max-width: 465px) {
            .subject-detail
                .subject-detail-header
                .user-info
                .user-detail
                .user-info-inner {
                flex-wrap: wrap;
            }

            .subject-detail
                .subject-detail-header
                .user-info
                .user-detail
                .user-info-inner
                .user-name {
                width: 100%;
                margin-bottom: 5px;
            }

            .vote-list-container .vote-list li .icon-con {
                left: 0;
            }

            .vote-list-container .vote-list li {
                padding-left: 45px;
            }
        }

        @media (max-width: 400px) {
            .subject-detail .subject-detail-header .user-info .user-image img {
                height: 80px;
                width: 80px;
                min-width: 80px;
            }
        }

        @media (max-width: 375px) {
            html {
                font-size: 14px;
            }

            .subject-detail .subject-detail-header .user-info {
                flex-wrap: wrap;
                justify-content: center;
                display: flex;
            }

            .subject-detail .subject-detail-header .user-info .user-image {
                margin: 0px;
            }

            .subject-detail .subject-detail-header .user-info .user-detail {
                align-items: center;
            }

            .subject-detail
                .subject-detail-header
                .user-info
                .user-detail
                .user-info-inner
                .user-name {
                justify-content: center;
                margin-top: 5px;
            }

            .subject-detail
                .subject-detail-header
                .user-info
                .user-detail
                .user-info-inner {
                justify-content: center;
            }

            .subject-detail .subject-detail-header .user-info .user-detail {
                height: auto;
            }

            .subject-comment-list-item .comment-item-user-image {
                width: 70px;
                height: 70px;
                min-width: 70px;
            }

            .subject-comment-list-item .forum-comment-item-detail {
                margin-top: 15px;
            }

            .profile-comment-item-user-image {
                width: 50px;
                min-width: 50px;
                height: 50px;
                border: 2px solid rgb(var(--color-blue));
                border-bottom: 2px solid rgb(var(--color-black));
            }

            .profile-comment-item-user-name {
                flex-wrap: wrap;
            }

            .profile-comment-item-detail .mobile-date {
                width: 100%;
                justify-content: start;
            }
        }

        @media (max-width: 320px) {
            .profile-sum {
                /*grid-template-columns: 1fr 1fr;*/
                row-gap: 5px;
            }

            .profile-sum .btn:last-child {
                grid-column: span 2;
                justify-content: center;
            }

            .left-sidebar-box .vote-list {
                border-top-width: 1px;
                border-left-width: 2px;
                flex-direction: column;
            }
            .left-sidebar-box .vote-list > li {
                padding: 0px;
                margin-top: 10px;
                padding-left: 48px !important;
                align-items: start;
            }
            .left-sidebar-box .vote-list > li > .icon-con {
                left: 10px;
                top: 50%;
                transform: translateY(-50%) rotate(45deg);
            }

            .d-eesd-none {
                display: none;
            }
        }

        .mention-list {
            display: none;
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            width: 200px;
            max-height: 150px;
            overflow-y: auto;
            z-index: 100;
        }

        .mention-item {
            padding: 5px;
            cursor: pointer;
        }

        .mention-item:hover {
            background: #f0f0f0;
        }

        #konu-link a:hover {
            color: #007aff !important;
        }

        .sending-emoji-list .more-emojis {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 6px;
            border-radius: 4px;
            background: #eee;
            font-weight: bold;
        }
    }
    .left-sidebar-box .vote-list > li > .icon-con {
        left: 10px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    .d-eesd-none {
        display: none;
    }
}

.mention-list {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    width: 200px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 100;
}

.mention-item {
    padding: 5px;
    cursor: pointer;
}

.mention-item:hover {
    background: #f0f0f0;
}

#konu-link a:hover {
    color: #007aff !important;
}

.sending-emoji-list .more-emojis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 4px;
    background: #eee;
    font-weight: bold;
}
[tooltip]::after {
    white-space: normal;
    min-width: 6em;
}

/* Kategori İçerik Wrapper */
.category-content-wrapper {
    display: flex;
    width: 100%;
    position: relative;
    padding: 5px 0;
    align-items: center;
}

.category-info {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
}

.category-details {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
}

.category-stats {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #777;
    margin-top: 3px;
}

.topic-count,
.comment-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Son Konu Stilleri - İnce Tasarım */
.last-topic-container {
    width: 400px;
    border-left: 1px solid #eee;
    margin-left: auto;
    border-radius: 4px;
}

.last-topic-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.last-topic-info {
    flex: 1;
}

.last-topic-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.last-topic-title a {
    color: #444;
    text-decoration: none;
}

.last-topic-title a:hover {
    color: rgb(23, 224, 226);
}

.last-topic-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #888;
}

.last-topic-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.author-avatar i {
    color: #999;
    font-size: 14px;
}

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

.author-name {
    font-size: 12px;
    font-weight: 500;
    color: #444;
    text-decoration: none;
}

.author-name:hover {
    color: rgb(23, 224, 226);
}

.author-type {
    font-size: 10px;
    color: #888;
}

.no-last-topic {
    width: 400px;
    text-align: center;
    color: #888;
    font-size: 13px;
    border-left: 1px solid #eee;
    margin-left: auto;
    border-radius: 4px;
}

/* Responsive ayarlamalar */
@media (max-width: 992px) {
    .category-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .last-topic-container,
    .no-last-topic {
        width: 100%;
        margin-top: 10px;
        border-left: none;
        border-top: 1px solid #eee;
    }

    .category-info {
        width: 100%;
        padding-right: 0;
    }
}

.forum-topics-container {
    width: 100%;
    border-radius: 8px;
    /* overflow: hidden; */
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.forum-topic-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    align-items: center;
}


.sticky-topic {
    background: rgb(173, 245, 255);
    margin-bottom: 9px;
}

.topic-left {
    display: flex;
    align-items: center;
    margin-right: 15px;
    min-width: 40px;
}

.topic-pin {
    margin-right: 10px;
    color: #666;
    font-size: 18px;
}

.topic-avatar {
    position: relative;
    width: 40px;
    height: 40px;
}

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

.user-status {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    bottom: 0;
    right: 0;
    border: 2px solid #fff;
}

.user-status.online {
    background-color: #4caf50;
}

.topic-content {
    flex: 1;
    min-width: 0;
    padding-right: 15px;
}

.topic-title {
    font-size: 15px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.topic-title a {
    display: flex;
    align-items: center;
    color: #333;
    text-decoration: none;
}

.topic-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    font-weight: 600;
}

.topic-badge i {
    margin-right: 4px;
}

.topic-text {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}

.topic-text.visited {
    color: #666;
    text-shadow: none !important;
}

.topic-meta {
    display: flex;
    font-size: 13px;
    color: #777;
}

.topic-author {
    margin-right: 12px;
}

.topic-date {
    color: #888;
}

/* Son yorum bölümü */
.last-reply-section {
    justify-content: center;
    min-width: 300px;
    padding: 0 15px;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
}

.last-reply-info {
    font-size: 13px;
}

.last-reply-user {
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.last-reply-date {
    color: #888;
    font-size: 12px;
}

/* İstatistik bölümü */
.topic-stats {
    min-width: 150px;
    padding-left: 15px;
}

.stats-section {
    display: flex;
    flex-direction: column;
}

.stats-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-bottom: 2px;
}

.stats-label {
    margin-right: 5px;
    color: #888;
}

.stats-value {
    font-weight: 600;
    color: #555;
}

.sticky-separator {
    height: 2px;
    background-color: #ddd;
    margin: 0 16px;
}

/* Responsive tasarım */
@media (max-width: 992px) {
    .topic-text {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .d-esd-none {
        display: none;
    }

    .topic-content {
        padding-right: 0;
    }

    .topic-text {
        max-width: 250px;
    }
}

@media (max-width: 576px) {
    .topic-meta {
        display: none;
    }

    .topic-text {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .last-topic-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .last-topic-author {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px dashed #eee;
    }
}

.video-iframe {
    aspect-ratio: 3 / 2;
    max-height: 360px;
    max-width: 640px;
}

.btn-yetkili-islemler {
    position: relative;
    padding: 5px 10px;
    border-radius: 20px;
    background-color: #f5f5f5;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-yetkili-islemler:hover {
    background-color: #5c6bc0;
    color: white;
}
.yetkili-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 160px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 1000;
    display: none;
    margin-top: 5px;
    overflow: hidden;
}

.yetkili-menu.active {
    display: block;
    animation: fadeIn 0.2s ease;
}
.yetkili-menu-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f0f0f0 !important;
    color: #999 !important;
}

.yetkili-menu-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    color: #333;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
    font-size: 13px;
    border-radius: 0 !important;
    width: 100% !important;
}

.yetkili-menu-item:hover {
    background-color: #f4f6ff;
}

.yetkili-menu-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.yetkili-menu-item.danger {
    color: #e74c3c;
}

.yetkili-menu-item.danger:hover {
    background-color: #fff0f0;
    color: red;
}

.yetkili-menu-divider {
    height: 1px;
    background-color: #eee;
    margin: 5px 0;
}
.forum-comment-bottom-btn-group button,
.forum-comment-bottom-btn-group a {
    border-radius: 20px;
    border: none;
    background-color: #f5f5f5;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
}

.forum-comment-bottom-btn-group button:hover,
.forum-comment-bottom-btn-group a:hover {
    background-color: #3498db;
    color: white;
}