@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


:root {
    /* SETTINGS FOR DEFAULT LIGHT MDOE */
    /* COLORS */
    /* MAIN COLORS */

    --background: #f9f9f9;
    --secondary-background: #f0f0f0;
    --primary-color: #FFFFFF;
    --secondary-color: #ebebeb;
    --accent-color: #1c63b1;
    /* default blue #1c63b1*/

    --primary-text-color: #464646;
    --secondary-text-color: #757575;
    --accent-text-color: #000000;
    --primary-icon-color: #757575;
    --white-color: #FFFFFF;
    /* END MAIN COLORS */

    /* --dark: #363949;
    --grey: #ededed;
    --dark-grey: #dfdfdf; */

    --success: #388E3C;
    --danger: #D32F2F;
    --orange: #ff8800;
    --warning: #FBC02D;
    --light: #f6f6f9;
    --primary: #1976D2;
    --light-primary: #CFE8FF;
    --light-danger: #FECDD3;
    --light-warning: #FFF2C6;
    --light-success: #BBF7D0;

    /* --primary-text: #212121; */
    /* --secondary-text: #94a3b8; */
    /* --accent: linear-gradient(135deg, #4f46e5, #06b6d4); */
    --danger: #ef4444;
    --success: #0c9467;
    --modal-background: #0000007a;
    --warning: #ff8800;
    --info: #105fad;
    --gray: #ebebeb;

    /* APP VALUES */
    --title-font-size: 2.5rem;
    --subtitle-font-size: 1.5rem;

    --primary-font-size: 1.1rem;
    --secondary-font-size: .9rem;
    --small-font-size: 0.7rem;
    --smaller-font-size: 0.6rem;

    --big-icon-font-size: 2.5rem;
    --normal-icon-font-size: 1.5rem;
    --primary-icon-font-size: 1.2rem;
    --small-icon-font-size: 1rem;
    --smaller-icon-font-size: .7rem;


    --padding: 20px;
    --primary-padding: 15px;
    --primary-padding-tb: 15px 0;
    --primary-padding-lr: 0 15px;
    --border-radius: 15px;
    --border-radius-normal: 10px;
    --border-radius-small: 5px;
    /* --box-shadow: rgba(0, 0, 0, 0.1); */
    --card-background: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 1);
    --hover-background: rgba(221, 221, 221, 0.4);
    --box-shadow: 5px 0px 12px 0px rgba(0, 0, 0, 0.18);
    /* 0 8px 32px 0 rgba(0, 0, 0, 0.1);*/
    --hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    --transition: all 0.3s ease-in-out;
    --transition-time: 0.3s;

    --modal-padding: 15px;
    --modal-content-padding: 20px;
    --dialog-content-margin: 15px 0;
    --dialog-content-padding: 25px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}



html {
    overflow-x: hidden;
    scrollbar-width: none;
    padding-bottom: 15px;
}

/* body.blue{
    --accent-color: #2563EB;
} */
body.green {
    --accent-color: #10B981;
}

body.pink {
    --accent-color: #F43F5E;
}

body.yellow {
    --accent-color: #F59E0B;
}

body.orange {
    --accent-color: #FB923C;
}

body.purple {
    --accent-color: #7C3AED;
}

body.dark.blue {
    --accent-color: #3B82F6;
}

/* body.dark.green{
    --accent-color: #22C55E;
} */
body.dark.pink {
    --accent-color: #EC4899;
}

body.dark.yellow {
    --accent-color: #FACC15;
}

body.dark.orange {
    --accent-color: #F97316;
}

body.dark.purple {
    --accent-color: #A855F7;
}

body.dark {
    --background: #181818;
    --secondary-background: #252525;

    --primary-color: #181a1e;
    --secondary-color: #353535;
    --accent-color: #22C55E;

    --gray: rgb(54, 54, 54);

    --primary-text-color: #E0E0E0;
    --secondary-text-color: #757575;
    --accent-text-color: #BDBDBD;
    --primary-icon-color: #c9c9c9;

    --card-background: rgba(255, 255, 255, 0.1);
    --box-shadow: 5px 0px 12px 0px rgba(0, 0, 0, 0.5);

    --hover-shadow: 0 8px 16px rgba(184, 184, 184, 0.2);
    --hover-background: rgba(184, 184, 184, 0.2);
}



body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: var(--background);
    color: var(--primary-text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

i {
    color: var(--primary-icon-color);
}

span {
    font-size: var(--secondary-font-size);
}

strong {
    font-size: var(--secondary-font-size);
}

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

a:hover {
    text-decoration: underline;
    color: var(--accent-color);
}

/* LOGIN */

.login-section {
    /* width: 100%;
    height: 100%; */
}

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

.login-app-name-icon {
    margin: 15px 0;
}

.login-text {
    margin: 50px 0 25px 0;
}

.bi-twitter-x {
    font-size: var(--primary-font-size);
}

.login-card {
    position: fixed;
    top: 15%;
    width: 50%;
    max-width: 450px;
    min-width: 350px;
    /* margin-top: 20%; */
    /* width: 60%;
    height: 60%; */
    background: var(--secondary-background);
    box-shadow: var(--box-shadow);
    padding: var(--primary-padding);
    border-radius: var(--border-radius);
}

.password-eye {
    right: 45px;
    margin-top: 13px;
    position: absolute;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.login-footer {
    margin: 30px;
}

.login-btn {
    width: 250px;
}

.login-btn:hover {
    background: var(--hover-background);
}

/* CHOOSE PROFILE */

.header {
    text-align: center;
    margin: 30px 0;
}

.title {
    font-size: var(--title-font-size);
    font-weight: 600;
    margin-bottom: 10px;
    background: var(--primary-text-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-subtitle {
    font-size: var(--subtitle-font-size);
    font-weight: bold;
    /* color: var(--secondary-text-color);  */
}

.subtitle {
    font-size: var(--secondary-font-size);
    color: var(--secondary-text-color);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.profiles-page-logout {
    position: fixed;
    top: 5%;
    right: 5%;
    color: var(--primary-text-color);
    font-size: var(--secondary-font-size);
}

.profiles-page-logout:hover {
    color: var(--accent-color);
}

.profiles-section {
    margin-top: 40px;
}

.section-title {
    font-size: var(--primary-font-size);
    margin-bottom: 20px;
    text-align: left;
    color: var(--primary-text-color);
}

.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.profile-card {
    /* width: 250px; */
    background: var(--secondary-background);
    border-radius: var(--border-radius);
    backdrop-filter: blur(12px);
    /* border: 1px solid var(--glass-border); */
    padding: var(--padding);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    position: relative;
    cursor: pointer;
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow);
    background: var(--secondary-color);
}

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

.status-badge {
    background: var(--success);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: var(--small-font-size);
}

.delete-btn {
    color: var(--danger);
    font-size: var(--small-icon-font-size);
    cursor: pointer;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 10px auto;
    border: 3px solid var(--secondary-color);
    object-fit: cover;
    padding: 2px;
}

.profile-name {
    font-size: var(--secondary-text-color);
    font-weight: 600;
    margin: 10px 0;
    color: var(--primary-text-color);
}

.profile-details {
    font-size: var(--subtitle-font-size);
    color: var(--secondary-text-color);
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.add-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--secondary-background);
    border-radius: var(--border-radius);
    border: 1px dashed var(--glass-border);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    cursor: pointer;
}

.add-card:hover {
    transform: translateY(-5px);
    background: var(--secondary-color)
}

.add-icon {
    font-size: var(--big-icon-font-size);
    color: var(--primary-icon-color);
}

.add-card p {
    margin-top: 10px;
    color: var(--secondary-text-color);
    font-size: var(--subtitle-font-size);
}

.shared-profile {
    width: 290px;
}

.modal {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--modal-background);
    justify-content: center;
    align-items: center;
    z-index: 1109;
}

.modal-container {
    position: absolute;
    padding: var(--modal-padding);
    width: 60%;
    max-width: 500px;
    border-radius: var(--border-radius);
    background-color: var(--background);
}

.modal-container.width80 {
    width: 80%;
    max-width: 1200px;
    /* border-radius: var(--border-radius);
    background-color: var(--background); */
}

.modal-header {
    padding-top: 15px;
    display: flex;
    position: relative;
}

.modal-title {
    width: 100%;
    /* position: absolute; */

    font-size: var(--subtitle-font-size);
    text-align: center;
}

.close {
    position: absolute;
    right: 0;
    color: var(--danger);
    cursor: pointer;
    font-size: var(--normal-icon-font-size);
}

.modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: var(--modal-content-padding);
}

.modal-item {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
}

.modal-item-title {
    font-size: var(--primary-font-size);
    color: var(--primary-text-color);
    margin-bottom: 0px;
    margin-left: 10px;
}

.modal-groups-list {
    margin-top: 8px;
    background: var(--gray);
    width: 100%;
    /* height: 220px; */
    min-height: 150px;
    max-height: 300px;
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    overflow: scroll;
    justify-content: space-between;
    scrollbar-width: none;
}

.modal-groups-list-item {
    width: 180px;
    cursor: pointer;
    /* min-height: 30px; */
    padding: 15px;
    margin: 2px;
    border: 2px solid var(--secondary-background);
    background: var(--background);
    border-radius: var(--border-radius);
}

.modal-groups-list-item:hover {
    color: white;
    background: var(--accent-color);
}

.modal-groups-list-item:hover i {
    color: white;
}

.modal-groups-list-item-selected {
    border: 2px solid var(--accent-color);
}

.modal-footer {

    width: 100%;
    display: flex;
    justify-content: center;

}

.dialog {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--modal-background);
    justify-content: center;
    align-items: center;
}

.dialog-container {
    position: absolute;

    padding: 15px;
    width: 60%;
    max-width: 500px;
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
}

.dialog-header {
    display: flex;
    position: relative;
}

.dialog-title {
    width: 100%;
    /* position: absolute; */
    font-size: var(--secondary-font-size);
    text-align: center;
}

.dialog-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: var(--dialog-content-margin);
    padding: var(--dialog-content-padding);
}

.dialog-input-title {
    font-size: var(--subtitle-font-size);
    color: var(--primary-color);
}

.dialog-footer {

    width: 100%;
    gap: 25px;
    display: flex;
    justify-content: right;

}

.holder {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--modal-background);
    z-index: 999999;
}

.preloader {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: rotatePreloader 2s infinite ease-in;
    z-index: 999999;
}

@keyframes rotatePreloader {
    0% {
        transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    }

    100% {
        transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
    }
}

.preloader div {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.preloader div:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0%;
    width: 10%;
    height: 10%;
    background-color: #fff;
    transform: translateX(-50%);
    border-radius: 50%;
}

.preloader div:nth-child(1) {
    transform: rotateZ(0deg);
    animation: rotateCircle1 2s infinite linear;
    z-index: 9;
}

@keyframes rotateCircle1 {
    0% {
        opacity: 0;
    }

    0% {
        opacity: 1;
        transform: rotateZ(36deg);
    }

    7% {
        transform: rotateZ(0deg);
    }

    57% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(2) {
    transform: rotateZ(36deg);
    animation: rotateCircle2 2s infinite linear;
    z-index: 8;
}

@keyframes rotateCircle2 {
    5% {
        opacity: 0;
    }

    5.0001% {
        opacity: 1;
        transform: rotateZ(0deg);
    }

    12% {
        transform: rotateZ(-36deg);
    }

    62% {
        transform: rotateZ(-36deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(3) {
    transform: rotateZ(72deg);
    animation: rotateCircle3 2s infinite linear;
    z-index: 7;
}

@keyframes rotateCircle3 {
    10% {
        opacity: 0;
    }

    10.0002% {
        opacity: 1;
        transform: rotateZ(-36deg);
    }

    17% {
        transform: rotateZ(-72deg);
    }

    67% {
        transform: rotateZ(-72deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(4) {
    transform: rotateZ(108deg);
    animation: rotateCircle4 2s infinite linear;
    z-index: 6;
}

@keyframes rotateCircle4 {
    15% {
        opacity: 0;
    }

    15.0003% {
        opacity: 1;
        transform: rotateZ(-72deg);
    }

    22% {
        transform: rotateZ(-108deg);
    }

    72% {
        transform: rotateZ(-108deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(5) {
    transform: rotateZ(144deg);
    animation: rotateCircle5 2s infinite linear;
    z-index: 5;
}

@keyframes rotateCircle5 {
    20% {
        opacity: 0;
    }

    20.0004% {
        opacity: 1;
        transform: rotateZ(-108deg);
    }

    27% {
        transform: rotateZ(-144deg);
    }

    77% {
        transform: rotateZ(-144deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(6) {
    transform: rotateZ(180deg);
    animation: rotateCircle6 2s infinite linear;
    z-index: 4;
}

@keyframes rotateCircle6 {
    25% {
        opacity: 0;
    }

    25.0005% {
        opacity: 1;
        transform: rotateZ(-144deg);
    }

    32% {
        transform: rotateZ(-180deg);
    }

    82% {
        transform: rotateZ(-180deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(7) {
    transform: rotateZ(216deg);
    animation: rotateCircle7 2s infinite linear;
    z-index: 3;
}

@keyframes rotateCircle7 {
    30% {
        opacity: 0;
    }

    30.0006% {
        opacity: 1;
        transform: rotateZ(-180deg);
    }

    37% {
        transform: rotateZ(-216deg);
    }

    87% {
        transform: rotateZ(-216deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(8) {
    transform: rotateZ(252deg);
    animation: rotateCircle8 2s infinite linear;
    z-index: 2;
}

@keyframes rotateCircle8 {
    35% {
        opacity: 0;
    }

    35.0007% {
        opacity: 1;
        transform: rotateZ(-216deg);
    }

    42% {
        transform: rotateZ(-252deg);
    }

    92% {
        transform: rotateZ(-252deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(9) {
    transform: rotateZ(288deg);
    animation: rotateCircle9 2s infinite linear;
    z-index: 1;
}

@keyframes rotateCircle9 {
    40% {
        opacity: 0;
    }

    40.0008% {
        opacity: 1;
        transform: rotateZ(-252deg);
    }

    47% {
        transform: rotateZ(-288deg);
    }

    97% {
        transform: rotateZ(-288deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(10) {
    transform: rotateZ(324deg);
    animation: rotateCircle10 2s infinite linear;
    z-index: 0;
}

@keyframes rotateCircle10 {
    45% {
        opacity: 0;
    }

    45.0009% {
        opacity: 1;
        transform: rotateZ(-288deg);
    }

    52% {
        transform: rotateZ(-324deg);
    }

    102% {
        transform: rotateZ(-324deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

/* Dashboard style */

/* Color-switcher */

.color-switcher {
    position: fixed;
    top: 15%;
    right: -180px;
    width: 180px;
    padding: 10px;
    background: var(--secondary-background);
    z-index: 9992;
}

.color-switcher.color-switcher-active {
    right: 0;
}

.color-switcher-title {
    display: flex;
    font-size: var(--accent-color);
    color: var(--primary-text-color);
    margin-bottom: 10px;
    border-bottom: 1px solid #333333;
    padding: 5px 0;
    text-align: center;
    justify-content: center;
}

.color-switcher-icon {
    position: absolute;
    top: -0px;
    left: -43px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--accent-color);
    font-size: var(--normal-icon-font-size);
    background-color: var(--secondary-background);
}


.theme-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.theme-color {
    display: block;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
}

/* DASHBOARD HEADER STYLE */

.dashboard-container {
    position: absolute;
}

.dashboard-main {
    justify-content: center;
}

.dashbord-header {
    /* margin-left: 250px; */
    /* Add the blur effect */
    width: 100%;
    height: 55px;
    background-color: var(--background);
    box-shadow: var(--box-shadow);
}

.header-content {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: var(--padding);

}

.dsahboard-header-user-name {
    margin-right: 0px;
}

.admin-header-dropdownmenu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 170px;
    position: absolute;
    right: 40px;
    top: 55px;
    padding: 5px;
    background: var(--background);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius-small);
    z-index: 1;
}

.dropdown-menu-content {}

.dropdown-menu-item {
    margin: 5px;
    padding: 5px;
    border-radius: var(--border-radius-small);
}

.dropdown-menu-item:hover {
    cursor: pointer;
    background: var(--secondary-background);
}

.dropdown-menu-item-title {
    margin-left: 8px;
}


.dashboard-profile-header {
    display: flex;
    flex-direction: row;
    /* height: 100%; */
    top: 50px;
    right: 0px;
    align-items: center;
    margin-right: 50px;
}

.dashboard-profile-avatar {
    margin-right: 5px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid var(--secondary-color);
}

.humburger {
    font-size: var(--primary-font-size);
}

.notification-icon {
    font-size: var(--primary-font-size);
    margin-right: 30px;
}

.notification-badge {
    position: fixed;
    margin-left: 10px;
    border-radius: 50%;
    margin-top: 0px;
    border: 1px solid var(--secondary-background);
    background-color: var(--danger);
    padding: 3px;
    width: 7px;
    height: 7px;
    /* color: var(--danger); */
    font-size: var(--normal-icon-font-size);
}

.notifications-board {
    position: absolute;
    right: 200px;
    top: 50px;
    width: 400px;
    height: 70%;
    background-color: var(--background);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: 15px;
    z-index: 1;
}

.notifications-header {
    /* position: static; */
    margin-top: 15px;
}

.notifications-header-title {
    font-weight: bold;
    font-size: var(--subtitle-font-size);
}

.notifications-content {
    height: 90%;
    margin-top: 10px;
    margin-bottom: 15px;
    overflow-x: scroll;
    scrollbar-width: none;
}

.notification-info {
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    /* height: 100px; */
    min-height: 100px;
    background: var(--secondary-background);
    /* box-shadow: var(--box-shadow); */
    border-radius: var(--border-radius);
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.notification-text {
    /* font-weight: bold; */
}

.notification-date {
    margin-top: 15px;
    width: 100%;
    text-align: right;
    right: 0;
    font-size: var(--small-font-size);
    color: var(--accent-color);
}

.dashboard-mode-header {
    margin-right: 25px;
}

/* Toggle Container */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Toggle Label */
.toggle-label {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 18px;
}

/* Hide Default Checkbox */
.toggle-label input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Slider */
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--secondary-color);
    border-radius: 30px;
    transition: 0.4s;
}

/* Slider Handle */
.slider:before {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: var(--primary-text-color);
    border-radius: 50%;
    transition: 0.4s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Checked State */
input:checked+.slider {
    background-color: var(--background);
}

input:checked+.slider:before {
    transform: translateX(22px);
}

.checkbox {
    opacity: 0;
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.bi.bi-sun-fill {
    font-size: var(--small-icon-font-size);
}

.bi.bi-moon-stars-fill {
    font-size: var(--small-icon-font-size);
}

.checkbox-label {
    background-color: var(--secondary-background);
    box-shadow: var(--box-shadow);
    width: 47px;
    height: 20px;
    border-radius: 50px;
    position: relative;
    padding: 3px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkbox-label .ball {
    background-color: var(--secondary-text-color);
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: transform 0.2s linear;
}

.checkbox:checked+.checkbox-label .ball {
    transform: translateX(24px);
}

.header-app-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: var(--subtitle-font-size);

}

.header-app-icon {
    font-size: var(--normal-icon-font-size);
}






/* SIDEBAR STYLES */


.sidebar {
    /* position: relative; */
    width: 300px;
    padding-bottom: 10px;
    /* max-width: 300px; */
    /* min-width: 260px; */
    height: 100%;
    box-shadow: var(--box-shadow);
    background-color: var(--background);
    transition: all 0.5s ease-in-out;
    /* Smooth transition */
    /* transform: translateX(0); */
    /* opacity: 1; */
}

.sidebar.hide {
    transform: translateX(-100%);
    /* Slide sidebar completely out of view */
    opacity: 0;
    /* Make it invisible */
    pointer-events: none;
    /* Disable interaction when hidden */
}

.sidebar-profile-header {
    padding: 5px;
}

.profile-sidebar-avatar {
    margin: 10px 10px;
}

.sidebar-profile-header-name {}

.profile-sidebar-name {
    margin: 0;
}


.profile-sidebar-owner-name {
    margin-top: 1px;
    font-size: x-small;

}


.sidebar-profile-info {
    justify-content: space-between;
    gap: 5px;
    padding-bottom: var(--primary-padding);
    padding: 0px var(--primary-padding) var(--primary-padding) var(--primary-padding);
}

.i-view-profile {
    position: absolute;
    /* right: 0px; */
    background-color: var(--card-background);
    border-radius: 5px;
    padding: 0px 4px;
    margin-right: 25px;
}

.sidebar-profile-span-info {
    font-size: var(--small-font-size);
}

.sidebar-header {
    margin-top: 15px;
    /* margin-bottom: 25px; */
}


.sidebar-content {
    margin: 5px 5px 5px 5px;
    scrollbar-width: none;
    overflow-x: scroll;
}

.sidebar-section {
    /* margin-bottom: 25px; */
    margin: 0px 5px 0px 5px;
    padding: 0px 10px 0px 10px;
}

.hr-text {
    position: relative;
    outline: 0;
    border: 0;
    color: var(--primary-color);
    text-align: center;
    height: 1.5em;
    margin-bottom: 10px;

    /* opacity: 1; */
    &:before {
        content: '';
        background: linear-gradient(to right, transparent, var(--secondary-color), transparent);
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1.5px;
    }

    &:after {
        content: attr(data-content);
        position: relative;
        display: inline-block;
        color: black;

        padding: 0 .5em;
        line-height: 1.5em;
        color: var(--secondary-color);
    }

}

.separator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensures the text is centered horizontally */
    text-align: center;
    color: var(--primary-text-color);
}

.separator::before,
.separator::after {
    content: '';
    position: absolute;
    top: 50%;
    /* Align the gradient line vertically with the text */
    transform: translateY(-50%);
    /* Center the pseudo-elements vertically */
    width: 100%;
    /* Adjusts to the full width */
    height: 2px;
    /* Thickness of the decorative line */
    background: linear-gradient(to right, transparent, var(--secondary-color), transparent);
}

.separator::before {
    left: 0;
    /* Aligns the left gradient */
    width: 45%;
    /* Adjusts width for space before text */
}

.separator::after {
    right: 0;
    /* Aligns the right gradient */
    width: 45%;
    /* Adjusts width for space after text */
}

.separator:not(:empty)::before {
    margin-right: .5em;
    /* Space between text and left line */
}

.separator:not(:empty)::after {
    margin-left: .5em;
    /* Space between text and right line */
}

.sidebar-section-item {
    cursor: pointer;
    margin: 5px;
    justify-content: space-between;
    padding: 8px;
    border-radius: 5px;

}

.group-item {
    border-radius: 5px;
    background-color: var(--secondary-color);
}

.sidebar-section-item:hover {
    background-color: var(--accent-color);
    color: var(--white-color);

}

.sidebar-section-item:hover i {
    /* background-color: var(--accent-color); */
    color: var(--white-color);

}

.sidebar-active {
    /* color: var(--accent-color); */
    background-color: var(--secondary-background);
    color: var(--accent-color);
}

.sidebar-active i {
    color: var(--accent-color);
}

.sidebar-section-item:hover .sidebar-section-item-badge {
    background-color: var(--white-color);
    color: black;

}

.sidebar-section-title {
    margin-bottom: 10px;
    font-size: var(--secondary-font-size);
    font-weight: bolder;
}

.sidebar-section-item-icon {
    margin-right: 5px;
}

.sidebar-section-icon {
    margin-right: 5px;
}

.sidebar-section-item-title {
    font-size: var(--secondary-font-size);
}

.sidebar-section-item-badge {
    display: flex;
    font-size: var(--small-font-size);
    background: var(--primary-color);
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 0px 7px 0px 7px;
    border-radius: 5px;
}

.groups-container-title-badge {
    font-size: var(--smaller-font-size);
    background: var(--secondary-background);
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 5px;
    margin-left: 5px;
    border-radius: 5px;
}

.sidebar-groups-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.create-group {
    font-weight: bold;
    font-size: var(--small-icon-font-size);
    display: flex;
    padding: 0px 5px 0px 5px;
    cursor: pointer;
    align-items: center;
    border-radius: 5px;
    /* color: var(--accent-color); */
}

.create-group:hover {
    /* background-color: var(--accent-color); */
    color: var(--accent-color);
}

.groups-container {
    margin: 5px;
}

.sidebar-profile-groups-list {
    display: grid;
    grid-template-rows: 0fr;

    transition: 300ms ease-in-out;
    margin-top: 5px;
    background: var(--secondary-color);
    border-radius: 5px;



    >div {
        overflow: scroll;
        scrollbar-width: none;
        scroll-behavior: smooth;
        max-height: 150px;
    }
}

.list-show {
    grid-template-rows: 1fr;
}

.groups-arrow {
    display: flex;
    align-items: center;
    transition: 200ms ease;
}

.groups-arrow:hover {
    color: var(--accent-color);
}

.groups-arrow.rotate {
    rotate: -180deg;
}

/* SIDE BAR FOOTER */

.sidebar-footer {
    padding: 5px;
    position: relative;
    bottom: 0;
}

.sidebar-section-footer-item {
    cursor: pointer;

    justify-content: space-between;
    padding: 8px;
    border-radius: 5px;
}

.footer-title-info {
    display: flex;
    justify-content: center;
    cursor: default;
    font-size: x-small;
    color: var(--accent-color);
    width: 100%;

}

.dashboard-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

.main-content {
    width: 100%;
    height: 100%;
    /* margin: 15px; */
    padding: 25px;
    border-radius: var(--border-radius);
    overflow-y: scroll;
    scrollbar-width: none;
    /* box-shadow: var(--box-shadow); */
    /* background: var(--secondary-background); */
}

footer {
    width: 100%;
    display: flex;
    margin-bottom: 5px;
    flex-direction: row;
    justify-content: center;
}

.footer-info {
    font-size: var(--small-font-size);
}


/* DASHBOARD MAIN CONTENT */

.card {
    background: var(--background);
    border-radius: var(--border-radius-normal);
    backdrop-filter: blur(12px);
    /* border: 1px solid var(--glass-border);*/
    padding: var(--padding);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    position: relative;
    cursor: pointer;
    width: 450px;
    margin: 10px 5px;
}

.card-dashboard-home-content {
    align-items: center;
    min-height: 180px;
    background: var(--secondary-background);
    /* padding: ; */
}

.card-pages {
    /* height: 10px; */
    min-height: 20px;
    width: 250px;
}

.dashboard-pages-cards-container {
    margin-top: 30px;
    width: 100%;
    /* position: relative; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* margin-left: 15px; */
}

.dashboard-pages-auto-post-grid-container {
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */
}

.card-head {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.card-head-pages {
    margin: 0px;
    padding: 0px;
    height: 100%;
    align-items: center;
}

.card-title {
    font-weight: bold;
    font-size: var(--subtitle-font-size);
}

.card-dashboard-content {
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
    /* align-items: center; */
    flex-wrap: wrap;
    padding: 5px 5px;
}

.running {
    color: var(--success);
    font-size: var(--small-icon-font-size);
    margin: 0px 4px;
    animation: blink 2s infinite;
    /* Infinite loop animation */
}

.stopped {
    color: var(--danger);
    font-size: var(--small-icon-font-size);
    margin: 0px 4px;
}

.paused {
    color: var(--warning);
    font-size: var(--small-icon-font-size);
    margin: 0px 4px;
}

/* Animation for blinking */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
        /* Fully visible */
    }

    50% {
        opacity: 0;
        /* Hidden */
    }
}


/* FAB Container */

.fab-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.fab {
    position: fixed;
    bottom: 50px;
    /* bottom: 20px;
    right: 30px;
    z-index: 1000; */
    width: 450px;
    height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 16px 16px;
    background: var(--secondary-background);
}

.fab span {
    padding: 0px 15px;
}

.fab span:hover {
    color: var(--accent-color);
    transition: translateY(-5px);
}

.main-content-header {
    margin: 25px 0 0 50px;
}

.dashboard-page-section {
    margin-top: 50px;
    margin-left: 30px;
    width: 100%;

}

.dashboard-page-section-secodery-content {
    margin-top: 20px;
}

.dashboard-page-section-content {
    margin-top: 10px;
}

.modal-list {
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding: 15px;
    max-height: 550px;
}

.page-list {
    width: 96%;
    height: 5%;
    padding: 15px;
    overflow: scroll;
    scrollbar-width: none;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius-small);
}

.page-list-item {
    width: 100%;
    list-style: none;
    margin: 5px;
}

.page-list-item-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: var(--border-radius-small);
    padding: 10px;
    background: var(--secondary-background);
}

.page-list-item-container:hover {
    border: .3px solid var(--accent-color);
}

.page-list-item-container-title {
    display: flex;
    gap: 15px;
    width: 20%;
    /* justify-content: left; */

}

.page-list-item-container-title.more-width {
    display: flex;
    gap: 15px;
    width: 80%;
    /* justify-content: left; */

}

.page-list-item-container-info {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 25%; /* 15% */
}

.page-list-item-container-info.modal-list-item {
    gap: 10px;
    width: 15%;
}

.page-list-item-container-info.modal-list-item.more-width {
    gap: 10px;
    width: 25%;
}

.page-list-item-container-status-padge {
    display: flex;
    justify-content: center;
    width: 10%;
}

.list-badge {
    opacity: 0.7;
    font-weight: bold;
}

.list-btn {
    background: var(--background);
    padding: 3px 3px 0 3px;
    border-radius: var(--border-radius-small);
    margin: 3px;
}

.list-btn:hover {
    cursor: pointer;
    color: var(--accent-color);

}

.page-list-item-container-ends {
    /* position: absolute; */
}

/* DASHBOARD HOME STYLE */

.dashboard-content-section {
    margin: 35px 0 0 35px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 98%;
    min-height: 100%;
    background: var(--background);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius-normal);
    /* gap: ; */
    /* justify-content: center; */
    /* justify-content: start; */
}

.dashboard-home-content-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.card-dashboard-home-content {
    margin-right: 50px;
    margin-bottom: 30px;
}


.card-dashboard-item {
    flex-direction: row;
    justify-content: space-between;
}

.card-dashboard-item span {
    margin: 4px 4px;
    font-size: var(--secondary-font-size);
    font-weight: bold;
}

.card-dashboard-item-info {
    margin-right: 0px;
    font-weight: bold;
    font-size: var(--secondary-font-size);
    position: relative;
    color: var(--accent-color);
}


/* DASHBOARD PROFILE STYLE */


.dashboard-profile-content {
    /* background-color: var(--background); */
    /* width: 100%; */
    /* height: 100%; */
    /* overflow: scroll; */
    /* scrollbar-width: none; */
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius-small);
    padding: 15px;
    /* display: flex; */
    /* flex-direction: column; */
}

.profile-header-bgimg {
    width: 100%;
    height: 200px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

.dashboard-profile-content-header {
    /* position: fixed; */
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: row; */
    margin-left: 50px;
    gap: 10px;
    /* width: 100%; */
    /* justify-content: start; */
}

.dashboard-profile-page-avatar {
    height: 120px;
    width: 120px;
    margin: 0px;
}

.dashboard-profile-page-name {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    /* align-items: start; */
    /* justify-content: center; */
    /* width: 350px; */
    margin-top: 40px;
    gap: 5px;
}

.dashboard-profile-status {
    margin-top: 30px;
    margin-left: 20px;
    /* width: 0%; */
}

.dashboard-profile-badges {
    /* margin-top: 25px; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    gap: 10px;
}

.dashboard-profile-content-clan {
    margin-top: 35px;
}

.dashboard-profile-content-clan-settings {
    display: flex;
    gap: 15px;
    align-items: center;
    line-height: 20px;
    padding: 5px;
}

.leave-clan {

    font-weight: bold;
    cursor: pointer;
    color: var(--danger);

}

.leave-clan:hover {
    background: var(--danger);
    color: var(--white-color);
}


/* GROUP PAGE STYLES */
.dashboard-group-header {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.group-head-btns {
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: row;
    border-radius: var(--border-radius-normal);
    background-color: var(--secondary-background);
    box-shadow: var(--box-shadow);
    /* padding: 8px 0 8px 16px; */
    gap: 50px;
    font-size: var(--primary-icon-font-size);
}

.group-head-btns-actions {
    display: flex;
    flex-direction: row;
    padding: 10px 0 8px 24px;
    gap: 80px;
    font-size: var(--primary-icon-font-size);
}

.delete-group {
    display: flex;
    height: 100%;
    border-top-right-radius: var(--border-radius-normal);
    border-bottom-right-radius: var(--border-radius-normal);
    align-items: center;
    padding: 0 15px;
    font-weight: bold;
    background-color: var(--gray);
}

.delete-group:hover {
    cursor: pointer;
    background-color: var(--danger);
    font-weight: bold;
    color: var(--white-color);

}

.dashboard-group-sessions {
    padding-left: 25px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
    gap: 20px 50px;
    margin-top: 30px;
}

.account-card {
    padding: 0;
}

/* .account-card:hover {
    z-index: 9997;
} */

.account-header {
    position: relative;
}

.img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.account-status {
    position: absolute;
    top: 10px;
    left: 15px;
    border-radius: 6px;
    /* box-shadow: var(--box-shadow); */
    padding: 2px 4px;
    font-size: small;

}

.account-status>i {
    font-size: smaller;
    margin-left: 5px;
    color: var(--success);
}

.account-profile-img {
    vertical-align: middle;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.account-details {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-left: 80px;
    position: relative;
    margin: 10px 0;
    font-size: var(--font-size);
}

.account-profile-img {
    position: absolute;
    top: -50px;
    left: 20px;
}

.account-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: left; */

}

.account-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}

.screen-name-at {
    font-size: var(--primary-icon-font-size);
    color: var(--accent-color);
}

.account-username {
    font-size: 16px;
    /* margin-left: 5px; */
    color: var(--accent-color);
    font-weight: light;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}

.account-username:hover {
    font-weight: bold;
}

.followers-count {
    font-size: 16px;
    color: var(--accent-color);
    font-weight: light;
}

.account-actions {
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 8px 8px;
    background-color: var(--secondary-background);
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow);
}

.account-actions span {
    padding: 0px 15px;
}

.account-actions span i {
    font-size: var(--primary-icon-font-size);
}

.account-actions span i:hover {
    /* background-color: var(--secondary-background); */
    border-radius: var(--border-radius-small);
}

.account-actions span:hover {
    color: var(--accent-color);
}

/* DASHBOARD AUTOPOST STYLE */

.page-groups-list {
    display: flex;
    flex-wrap: wrap;
    overflow: scroll;
    /* scrollbar-width: none; */
    overflow-x: hidden;
    padding: 15px;
    background: var(--secondary-background);
    height: 170px;
    gap: 15px;
    justify-content: center;
    border-radius: var(--border-radius);
}

/* MEDIA GALLERY STYLE */

.media-gallery {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: #000000c5;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.media-gallery-content {
    position: fixed;
    margin-top: 7%;
    background-color: var(--secondary-background);
    height: 70%;
    width: 72%;
    border-radius: var(--border-radius-normal);
}

.media-gallery-container {
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 25px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
    height: 90%;
}

.media-card {
    position: relative;
    direction: rtl;
    width: 300px;
    height: 200px;
    overflow: hidden;
    border-radius: var(--border-radius-normal);
    padding: 3px;
    box-shadow: var(--box-shadow);
    background-color: var(--background);
    max-height: 210px;
}

.media-card:hover{
    cursor: pointer;
}

.media-gallery-img {
    border-radius: var(--border-radius-small);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-btns {
    position: absolute;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    margin: 15px;
}

.media-btns:hover{
    cursor: default ;
}

.btn-delete-media {
    background-color: #00000070;
    padding: 3px 7px 3px 7px;
    border-radius: var(--border-radius-small);
}

.media-card-selected {
    background-color: var(--accent-color);
}

.upload-area {
    border: 2px dashed #999;
    border-radius: 10px;
    /* width: 300px; */
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-background);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
    color: var(--primary-text-color);
  }

  .upload-area.dragover {
    background-color: var(--secondary-background);
    border-color: #6666ff;
  }

  #fileInput {
    display: none;
  }

  .upload-area img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  .placeholder {
    z-index: 1;
    pointer-events: none;
  }





























input[type="datetime-local"] {
    padding: 10px;
    /* font-size: 16px; */
    border: 1px solid #ccc;
    background: var(--secondary-background);
    border-radius: var(--border-radius-normal);
    color: var(--primary-text-color);
    margin-top: -10px;
}

.selector {
    cursor: pointer;
    border: none;
    background-color: var(--secondary-background);
    outline: none;
    min-width: 120px;
    max-width: 200px;
    text-align: center;
    margin: 0 15px 0 15px;
    color: var(--primary-text-color);
    font-weight: normal;
    font-size: var(--font-size);
    padding: 5px;
    border-radius: var(--border-radius-normal);

}

.selected-option {
    background-color: var(--accent-color);
    color: white;
}

.input-1 {
    margin-top: 10px;
    border: none;
    border-bottom: 1px solid var(--secondary-text-color);
    background: none;
    outline: none;
    color: var(--primary-text-color);
    font-size: var(--secondary-font-size);
    background: var(--secondary-background);
    text-align: center;
}

.input-2 {
    margin-top: 10px;
    border: none;
    height: 45px;
    padding: 15px;
    background: var(--gray);
    border-radius: var(--border-radius);
    outline: none;
    color: var(--primary-text-color);
    font-size: var(--secondary-font-size);
}

.textarea-modal {
    margin-top: 10px;
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    background: var(--gray);
    border-radius: var(--border-radius);
    font-size: 16px;
    border: none;
    resize: none;
    outline: none;
}

.ta-multi-sessions {
    height: 350px;
}

.btn {
    /* position: absolute; */
    /* right: 0; */
    /* border: 1px solid var(--secondary-color); */
    /* border-radius: var(--border-radius-small); */
    cursor: pointer;
    color: var(--primary-text-color);
    padding: 10px;
    background: none;
}

.btn:hover {
    background-color: var(--accent-color);
    /* border-radius: var(--border-radius-normal); */
    color: var(--white-color);
}

.btn-2 {
    width: 100%;
    cursor: pointer;
    color: var(--primary-text-color);
    padding: 10px;
    background-color: var(--secondary-color);
}

.btn-2:hover {
    background-color: var(--accent-color);
    /* border-radius: var(--border-radius-normal); */
    color: var(--white-color);
}

.btn-3 {
    /* position: absolute; */
    /* right: 0; */
    /* border: 1px solid var(--secondary-color); */
    /* border-radius: var(--border-radius-small); */
    cursor: pointer;
    color: var(--primary-text-color);
    padding: 10px;
    background-color: var(--secondary-color);
}

.btn-3:hover {
    background-color: var(--accent-color);
    /* border-radius: var(--border-radius-normal); */
    color: var(--white-color);
}

.btn-danger {
    /* position: absolute; */
    right: 0;
    /* border: 1px solid var(--secondary-color); */
    /* border-radius: var(--border-radius-small); */
    background: var(--danger);
    cursor: pointer;
    color: var(--white-color);
    padding: 10px;
    background: none;
}

.btn-link:hover {
    background: none;
    color: var(--accent-color);
    text-decoration: underline;
}

.display-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
    justify-content: left;
}

.flex-gap {
    gap: 15px;
}

.row {
    flex-direction: row;
}

.col {
    flex-direction: column;
}

.modal-footer-row {
    flex-direction: row;
}

.flex-center {
    justify-content: center;
    justify-items: center;
}

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

.flex-space-around {
    justify-content: space-around;
}

.bold {
    font-weight: bold;
}

.none-background {
    background: none;
}

.none-background-color {
    background-color: none;
}

.secondary-bg {
    background: var(--secondary-background);
}

.primary-bg {
    background: var(--background);
}

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

.border-none {
    border: none;
}

.success {
    color: var(--success);
}

.danger {
    color: var(--danger);
}

.danger:hover {
    color: var(--danger);
    cursor: pointer;
}

.danger-btn {
    color: var(--danger);
}

.danger-btn:hover {
    color: var(--white-color);
    background-color: var(--danger);
    cursor: pointer;
}

.success-bg {
    color: var(--white-color);
    background: var(--success);
}

.success-bg:hover {
    color: var(--white-color);
    background: var(--success);
}

.success-color{
    color: var(--success);
}

.danger-bg {
    color: var(--white-color);
    background: var(--danger);
}

.danger-bg:hover {
    color: var(--white-color);
    background: var(--danger);
}

.grey-bg,
.grey-bg:hover {
    background: var(--secondary-color);
    color: var(--primary-text-color);
}

.gray-bg {
    background: var(--gray);
}

.orange-bg {
    background: var(--orange);
}

.dark-bg {
    background: var(--primary-color);
}

.warning-bg {
    background: var(--warning);
}

.warning-color{
    color: var(--warning);
}

.info-bg {
    color: var(--white-color);
    background: var(--info);
}

.info-bg:hover {
    color: var(--white-color);
    background: var(--info);
}

.hide {
    display: none;
}

.padding {
    padding: var(--primary-padding);
}

.padding-tb {
    padding: var(--primary-padding-tb);
}

.padding-lr {
    padding: var(--primary-padding-lr);
}

.fill-wh {
    width: 100%;
    height: 100%;
}

.fill-w {
    width: 100%;
}

.fill-h {
    height: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

.bold {
    font-weight: bold;
}

.dark-tc {
    color: var(--light);
}

.hint-text {
    color: var(--accent-color);
    font-size: var(--small-font-size);
    font-style: italic;
}

.border-rounded {
    border-radius: 50px;
    /* border: .5px solid var(--primary-color); */
}

.secondery-text {
    font-size: var(--subtitle-font-size);
}

.underline-text {
    text-decoration: underline;
}

.input-with-icon {
    align-items: center;
}

.input-container span {
    margin-left: 5px;
}

.no-hover-bg:hover {
    background-color: none;
}

.accent-color {
    color: var(--accent-color);
}

.red-color {
    color: var(--danger);
}

.red-color i {
    color: var(--danger);
}

.hover-bg-accent:hover {
    background-color: var(--accent-color);
}

.hover-color-accent:hover {
    color: var(--accent-color);
}

.hover-color-accent:hover i {
    color: var(--accent-color);
}

.primary-font-size {
    font-size: var(--primary-font-size);
}

.secondary-font-size {
    font-size: var(--secondary-font-size);
}

.small-font-size {
    font-size: var(--small-font-size);
}

.smaller-font-size {
    font-size: var(--smaller-font-size);
}

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

.no-content-icon {
    font-size: var(--big-icon-font-size);
}

.no-content-icon-title {
    font-size: var(--primary-font-size);
    font-weight: bold;
}

.fab-icon {
    font-size: var(--normal-icon-font-size);
}

.list-item-style {
    margin: 5px;
    padding: 5px;
    border-radius: var(--border-radius-small);
    /* background: var(--secondary-background); */
}

.card-dashboard-content-fit {
    height: 90%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
}

.card-dashboard-head-fit {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* align-items: center; */
    margin-top: 30px;
}

td,
th {
    /* border: 1px solid #dddddd; */
    /* text-align: left; */
    padding: 8px;
}

/* Global checkbox switch */

.cbx-switch-toggle {
    height: 0;
    width: 0;
    visibility: hidden;
}

.cbx-switch-toggle-label {
    margin-top: 3px;
    cursor: pointer;
    text-indent: -9999px;
    width: 40px;
    height: 15px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

.cbx-switch-toggle-label:after {
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

.cbx-switch-toggle:checked+.cbx-switch-toggle-label {
    background: var(--success);
}

.cbx-switch-toggle:checked+.cbx-switch-toggle-label.danger {
    background: var(--danger);
}

input:checked+.cbx-switch-toggle-label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.switch-main-label {
    width: 100%px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 5px;
}

.disabled {
    cursor: none;
    pointer-events: none; /* يمنع النقر */
    opacity: 0.5; /* يجعل العنصر باهتًا */
  }
























/* CUSTOM NOTIFICATIONS STYLE */

.notification {
    position: relative;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    display: flex;
    align-items: center;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    background-color: #fff;
    color: #000;
    width: 400px;
    /* العرض الثابت للإشعار */
    max-width: 90%;
    /* التأكد من أن العرض لا يتجاوز 90% من عرض الشاشة */
    margin-bottom: 10px;
    /* gap بين الإشعارات */
    z-index: 1000000;
}

.notification.show {
    opacity: 1;
    transform: translateY(0);
}

.notification.hide {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* نوع الإشعارات (نجاح، خطأ، تحذير، معلومات) */
.notification.success {
    background-color: #4CAF50;
    color: white;
}

.notification.error {
    background-color: #f44336;
    color: white;
}

.notification.warning {
    background-color: #ff9800;
    color: white;
}

.notification.info {
    background-color: #2196F3;
    color: white;
}

/* شريط التقدم */
.notification-progress {
    position: absolute;
    bottom: 0;
    /* يبدأ من الأسفل */
    left: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 5px;
    /* عرض شريط التقدم */
    height: 0%;
    /* سيتم زيادته تدريجيًا */
    background-color: rgba(255, 255, 255, 0.5);
    /* لون شريط التقدم */
    transition: height 0ms linear, bottom 0ms linear;
}

/* تخصيص لون شريط التقدم بناءً على نوع الإشعار */
.notification.success .notification-progress {
    background-color: #2E7D32;
}

.notification.error .notification-progress {
    background-color: #D32F2F;
}

.notification.warning .notification-progress {
    background-color: #F57C00;
}

.notification.info .notification-progress {
    background-color: #1976D2;
}

/* الحاوية الخاصة بالإشعارات (للتأكد من عرضها في المكان الصحيح) */
.notification-container {
    position: absolute;
    z-index: 1111;
    display: flex;
    flex-direction: column;
    /* لضمان أن الإشعارات تظهر تحت بعضها البعض */
}

/* CUSTOM DIALOG STYLE */
#dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-background);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1110;
    opacity: 0;
    transition: opacity var(--transition-time) ease;
}

/* Dialog Box */

#dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-background);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1110;
    opacity: 0;
    transition: opacity var(--transition-time) ease;
}

/* Dialog Box */
#dialog-box {
    background-color: var(--background);
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    /* 0 4px 15px rgba(0, 0, 0, 0.2) */
    width: 80%;
    max-width: 500px;
    transform: translateY(-30px);
    transition: transform var(--transition-time) ease;
}

/* Header of dialog */
#dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: var(--dialog-header-bg); */
    padding: 15px;
    /* color: white; */
    border-radius: 8px 8px 0 0;
    font-size: var(--subtitle-font-size);
    font-weight: bold;
}

/* Style for the close button (icon) */
#dialog-header i {
    font-size: 20px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    color: var(--danger);
}

#dialog-header i:hover {
    opacity: 0.7;
}

/* Content of the dialog */
#dialog-content {
    padding: 15px;
    /* color: var(--dialog-text-color); */
    font-size: var(--primary-font-size);
}

/* Button container */
#dialog-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

/* Button Styles */
button {
    padding: 5px 10px;
    border: none;
    background-color: var(--button-bg);
    color: var(--button-color);
    border-radius: var(--button-radius);
    cursor: pointer;
    /* font-size: 16px; */
    transition: background-color var(--transition-time) ease;
    border-radius: var(--border-radius-small);
}

button:hover {
    background-color: var(--accent-color);
    border-radius: var(--border-radius-small);
    color: var(--white-color);
}

/* Hide dialog animation */
#dialog-overlay.show {
    opacity: 1;
    display: flex;
}

#dialog-box.show {
    transform: translateY(0);
}

@media (prefers-color-scheme: dark) {
    .dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        /* يجعلها بيضاء */
    }
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    cursor: pointer;
}

@media (max-width: 1366px) {
    .card {
        margin: 10px 10px;
    }
.card-dashboard-home-content {
    margin-right: 30px; 
} 
.dashboard-home-content-cards .card { 
    width: 305px; 
} 
.dashboard-group-sessions .card { 
    width: 380px; 
} 
.card-pages {
    width: 220px;
}
.modal-group-multi-task .modal-container {
    height: 92%;
    overflow: auto;
}
.modal-session-signin .modal-container {
    height: 92%;
    overflow: auto;
}
.sidebar { 
    min-width: 230px;
}
.sidebar-section { 
    padding: 0px;  
}
}