:root {
    --navbar-height: 50px;
}
/* default (mobile) */
@media (min-width: 375px) {
    :root {
        --navbar-height: 52px;
    }
    /* lg and up */
}
body {
   background-color: var(--surface-page);
}

html {
  font-size: 14px;
}

@media (min-width: 744px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 576px) {

    #notifydropdown {
        width: 100vw !important;
        border-radius: 0;
        position: fixed !important;
        top: 53.75px;
        left: 0;
        right: 0 !important;
        bottom: 0;
        border-radius: 0px;
        background-color: #F9F9F9;
    }

    #messagenotifydropdown {
        width: 100vw !important;
        border-radius: 0;
        position: fixed !important;
        top: 53.75px;
        left: 0;
        right: 0 !important;
        bottom: 0;
        border-radius: 0px;
        background-color: #F9F9F9;
    }
}

@media (max-width: 744px) {
    .e-filemanager .e-navigation {
        display: none ;
    }

    .e-filemanager .e-details-view {
        width: 100%;
    }
}

.rounded-background-for-icon {
    width: 48px;
    height: 48px;
    border: 8px solid var(--Primary-50, #F9F6FE);
    border-radius: 28px;
    background: var(--Neutral-50, #FCFCFD);
    display: flex;
    justify-content: center;
    align-items: center;
}

.rounded-background-for-icon-danger {
    width: 48px;
    height: 48px;
    border: 8px solid var(--Danger-50, #F9F6FE);
    border-radius: 28px;
    background: var(--Neutral-50, #FCFCFD);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 744px) {
    .btn-icon-only {
        gap: 0;
    }

        .btn-icon-only .btn-text {
            display: none;
        }
}

/* Remove underline on hover/focus for dropdown links */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:visited {
    text-decoration: none !important;
}

    /* (Keep accessible focus ring without underline) */
    .dropdown-menu .dropdown-item:focus-visible {
        text-decoration: none !important;
        outline: none;
    }

/* Tabs Design */
.table-tabs {
    height: 42px;
    border-bottom: .5px solid var(--gray-300);
    width: 100%;
    display: flex;
    align-items: center;
}

.tab-menu {
    height: 100%;
    flex: 1 1 33.333%;
    max-width: 150px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gray-500);
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    transition: 0.1s all;
}

    .tab-menu.active {
        background-color: var(--gray-200);
        color: var(--primary-400);
        border-bottom: 1.5px solid var(--primary-400);
        font-weight: 500;
    }

    .tab-menu:hover {
        background-color: var(--gray-200);
        color: var(--primary-400);
        font-weight: 500;
    }

@supports (width: clamp(0px, 33.333%, 150px)) {
    .tab-menu {
        flex: 0 0 auto;
        width: clamp(0px, 33.333%, 150px);
        max-width: none;
    }
}

.row-warning {
    background: var(--warning-50);
}

.row-success {
    background: var(--success-50);
}

.row-danger {
    background: var(--danger-50);
}

.row-info {
    background: var(--info-50);
}

.row-primary {
    background: var(--primary-50);
}

input:invalid:not(:focus) {
    color: var(--danger-400);
}


/* Container for the circular progress bar */
.progress-circle-container {
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
}

/* Background circle */
    .progress-circle-container .progress-circle .progress-bg {
        stroke: var(--color-white,#fff);
        stroke-width: 2;
    }

/* Progress circle with dynamic color */
    .progress-circle-container .progress-circle .progress-bar {
        transform: rotate(-90deg);
        transform-origin: center;
        transition: stroke 0.3s ease;
    }

    /* Dynamic Colors */
        .progress-circle-container .progress-circle .progress-bar.red {
            stroke: var(--danger-400);
        }

        .progress-circle-container .progress-circle .progress-bar.yellow {
            stroke: var(--warning-400);
        }

        .progress-circle-container .progress-circle .progress-bar.light-green {
            stroke: var(--success-50);
        }

        .progress-circle-container .progress-circle .progress-bar.dark-green {
            stroke: var(--success-400);
        }

/* Text inside the circle */
.progress-circle-container .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: var(--color-black, #000);
}