html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.mobile-display {
    display: none !important;
    visibility:hidden !important;
}

@media (min-width:500px) {
    .mobile-display {
        display: block !important;
        visibility:visible !important;
        
    }
}

.btn-salam {
    color: black;
    border: solid 2px #6a762a;
    background-color:white;
    border-radius:5px;
}

    .btn-salam:hover {
        background-color: #6a762a;
        color: white;
    }

.text-salam{
    color:#071437 !important;
}

/*th {
    text-align: center !important;
    vertical-align: middle !important; 

}*/
th {
    /*    color: #e !important;*/
    font-weight: 300 !important;
    padding: 15px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    /*    font-size:14px !important;*/
}

td {
    padding:15px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    font-weight:500 !important;
    font-size:13px !important;
}

   
    td:hover {
/*        background-color: #dedede !important;  */
/*        color: dedede !important;  */
/*        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05) !important;  */
    }

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


.spinner {
    position: absolute;
    width: 9px;
    height: 9px;
}

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(9 7 7 / 60%);
    backdrop-filter: blur(5px); /* Enhanced blur effect for a glass-like feel */
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

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


.loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Adjust as needed */
}

.loader {
    --c1: #000000;
    --c2: #303992;
    width: 35px;
    height: 60px;
    border-top: 4px solid var(--c1);
    border-bottom: 4px solid var(--c1);
    background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px, var(--c1) 0) 50%/7px 8px no-repeat;
    display: grid;
    overflow: hidden;
    animation: l5-0 2s infinite linear;
}

    .loader::before,
    .loader::after {
        content: "";
        grid-area: 1/1;
        width: 75%;
        height: calc(50% - 4px);
        margin: 0 auto;
        border: 2px solid var(--c1);
        border-top: 0;
        box-sizing: content-box;
        border-radius: 0 0 40% 40%;
        -webkit-mask: linear-gradient(#000 0 0) bottom/4px 2px no-repeat, linear-gradient(#000 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        background: linear-gradient(var(--d, 0deg), var(--c2) 50%, #0000 0) bottom /100% 205%, linear-gradient(var(--c2) 0 0) center/0 100%;
        background-repeat: no-repeat;
        animation: inherit;
        animation-name: l5-1;
    }

    .loader::after {
        transform-origin: 50% calc(100% + 2px);
        transform: scaleY(-1);
        --s: 3px;
        --d: 180deg;
    }

.loading-text {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    animation: blink 1.5s infinite;
}

@keyframes l5-0 {
    80% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0.5turn);
    }
}

@keyframes l5-1 {
    10%, 70% {
        background-size: 100% 205%, var(--s, 0) 100%;
    }

    70%, 100% {
        background-position: top, center;
    }
}

@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.5;
    }
}

.ui-switch {
    --switch-bg-light: #e2e1e6;
    --switch-bg-dark: #333;
    --switch-width: 60px;
    --switch-height: 28px;
    --circle-diameter: 24px;
    --circle-bg: white;
}

.ui-switch input {
    display: none;
}

.slider {
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--switch-bg-light);
    border-radius: 999px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    padding: 2px 8px;
}

.menu-icon {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-in-out;
}

.circle {
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    position: absolute;
    background: var(--circle-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 3px;
    transition: right 0.3s ease-in-out;
}

    .circle i {
        font-size: 14px;
        transition: color 0.3s ease-in-out;
    }

/* Move the circle to the left for Dark Mode */
.ui-switch input:checked + .slider .circle {
    right: calc(100% - var(--circle-diameter) - 3px);
}

.ui-switch input:checked + .slider {
    background: var(--switch-bg-dark);
}

    /* Adjust icons for Dark Mode */
    .ui-switch input:checked + .slider #theme-icon {
        color: #fff;
    }

    .ui-switch input:checked + .slider #sun-icon {
        opacity: 1;
    }

    .ui-switch input:checked + .slider #moon-icon {
        opacity: 0.5;
    }

/* Adjust icons for Light Mode */
.ui-switch input:not(:checked) + .slider #theme-icon {
    color: #333;
}

.ui-switch input:not(:checked) + .slider #sun-icon {
    opacity: 0.5;
}

.ui-switch input:not(:checked) + .slider #moon-icon {
    opacity: 1;
}

.parent-table {
    background-color: #efefef;
    padding: 10px;
    border-radius: 35px;
}
.parent-table-text{
    color:black !important;
}
.card-table {
    background-color: #efefef;
    padding: 10px;
    border-radius: 35px;
    /*    border-top-right-radius:70px;*/
}

.form-body {
    background-color: #efefef;
    /*    background-color: #e2e7f0;*/
    padding: 8px;
    border-radius: 35px;
}
.menu-text{
    font-size:0.9px;
}



/* From Uiverse.io by e-coders */
@keyframes ldio-4j5ay0xf86g {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.ldio-4j5ay0xf86g div {
    left: 94px;
    top: 48px;
    position: absolute;
    animation: ldio-4j5ay0xf86g linear 1s infinite;
    background: #303992;
    width: 10px;
    height: 15px;
    border-radius: 6px / 12px;
    transform-origin: 6px 52px;
}

    .ldio-4j5ay0xf86g div:nth-child(1) {
        transform: rotate(0deg);
        animation-delay: -0.9166666666666666s;
        background: #303992;
    }

    .ldio-4j5ay0xf86g div:nth-child(2) {
        transform: rotate(30deg);
        animation-delay: -0.8333333333333334s;
        background: #303992;
    }

    .ldio-4j5ay0xf86g div:nth-child(3) {
        transform: rotate(60deg);
        animation-delay: -0.75s;
        background: #303992;
    }

    .ldio-4j5ay0xf86g div:nth-child(4) {
        transform: rotate(90deg);
        animation-delay: -0.6666666666666666s;
        background: #009000;
    }

    .ldio-4j5ay0xf86g div:nth-child(5) {
        transform: rotate(120deg);
        animation-delay: -0.5833333333333334s;
        background: #009000;
    }

    .ldio-4j5ay0xf86g div:nth-child(6) {
        transform: rotate(150deg);
        animation-delay: -0.5s;
        background: #009000;
    }

    .ldio-4j5ay0xf86g div:nth-child(7) {
        transform: rotate(180deg);
        animation-delay: -0.4166666666666667s;
        background: #009000;
    }

    .ldio-4j5ay0xf86g div:nth-child(8) {
        transform: rotate(210deg);
        animation-delay: -0.3333333333333333s;
        background: #303992;
    }

    .ldio-4j5ay0xf86g div:nth-child(9) {
        transform: rotate(240deg);
        animation-delay: -0.25s;
        background: #009000
    }

    .ldio-4j5ay0xf86g div:nth-child(10) {
        transform: rotate(270deg);
        animation-delay: -0.16666666666666666s;
        background: #303992;
    }

    .ldio-4j5ay0xf86g div:nth-child(11) {
        transform: rotate(300deg);
        animation-delay: -0.08333333333333333s;
        background: #303992;
    }

    .ldio-4j5ay0xf86g div:nth-child(12) {
        transform: rotate(330deg);
        animation-delay: 0s;
        background: #009000;
    }

.loadingio-spinner-spinner-977el9wwy2v {
    width: 150px;
    height: 150px;
    display: inline-block;
    overflow: hidden;
}

.ldio-4j5ay0xf86g {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

    .ldio-4j5ay0xf86g div {
        box-sizing: content-box;
    }

/* From Uiverse.io by vk-uiux */
.cardskelton {
    width: 18rem;
    padding: 1rem;
    text-align: center;
    border-radius: .8rem;
    background-color: white;
}

.card__skeleton {
    background-image: linear-gradient( 90deg, #ccc 0px, rgb(229 229 229 / 90%) 40px, #ccc 80px );
    background-size: 300%;
    background-position: 100% 0;
    border-radius: inherit;
    animation: shimmer 1.5s infinite;
}

.card__title {
    height: 15px;
    margin-bottom: 15px;
}

.card__description {
    height: 100px;
}

@keyframes shimmer {
    to {
        background-position: -100% 0;
    }
}


/* From Uiverse.io by Nawsome */
.card-loader {
    position: relative;
    width: 330px;
    height: 220px;
    margin-bottom: 10px;
    border: 1px solid #d3d3d3;
    padding: 15px;
    background-color: #f5f5f5;
    overflow: hidden;
    border-radius: 30px;
}

    .card-loader:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(110deg, rgba(227, 227, 227, 0) 0%, rgba(227, 227, 227, 0) 40%, rgba(227, 227, 227, 0.5) 50%, rgba(227, 227, 227, 0) 60%, rgba(227, 227, 227, 0) 100%);
        animation: gradient-animation_2 1.2s linear infinite;
    }

    .card-loader .wrapper {
        width: 100%;
        height: 100%;
        position: relative;
    }

        .card-loader .wrapper > div {
            background-color: #cacaca;
        }

    .card-loader .round {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .card-loader .button {
        display: inline-block;
        height: 32px;
        width: 75px;
    }

    .card-loader .line-a {
        position: absolute;
        top: 11px;
        left: 58px;
        height: 10px;
        width: 100px;
    }

    .card-loader .line-b {
        position: absolute;
        top: 34px;
        left: 58px;
        height: 10px;
        width: 150px;
    }

    .card-loader .line-c {
        position: absolute;
        top: 57px;
        left: 0px;
        height: 10px;
        width: 100%;
    }

    .card-loader .line-d {
        position: absolute;
        top: 80px;
        left: 0px;
        height: 10px;
        width: 92%;
    }

@keyframes gradient-animation_2 {
    0% {
        transform: translateX(-100%);
    }

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

/* From Uiverse.io by adamgiebl */
.transferbtn {
    display: flex;
    align-items: center;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.15rem;
    padding: 0.55rem 1rem;
    color: white;
    background: #303992;
    background: -o-linear-gradient(top, #2a428c 10%, #007a3b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #2a428c), to(#007a3b));
    background: linear-gradient(180deg, #2a428c 10%, #007a3b 100%);
    border-radius: 0.725rem;
    border: none;
    letter-spacing: 0.05em;
 
}

button svg {
    margin-right: 3px;
/*    transform: rotate(30deg);*/
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button span {
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button:hover svg {
    transform: translateX(5px) rotate(90deg);
}

button:hover span {
    transform: translateX(7px);
}

.cancelbtn {
    display: flex;
    align-items: center;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
    font-size: 17px;
    padding: 0.8em 1.3em 0.8em 0.9em;
    color: white;
    background: #b30000; /* Solid fallback red */
    background: -o-linear-gradient(top, #d32f2f 10%, #8b0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #d32f2f), to(#8b0000));
    background: linear-gradient(180deg, #d32f2f 10%, #8b0000 100%);
    border-radius: 35px;
    border: none;
    letter-spacing: 0.05em;
    border-radius: 16px;
}

button svg {
    margin-right: 3px;
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button span {
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button:hover svg {
    transform: translateX(5px) rotate(90deg);
}

button:hover span {
    transform: translateX(7px);
}
.text-skeleton {
    display: inline-block;
    width: 100px; /* Adjust width as needed */
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: loading 1.5s infinite linear;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


#tasks-card {
    width: 250px;
    height: 200px;
    background: #2a428c;
/*    background: -o-linear-gradient(top, #2a428c 10%, #007a3b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #2a428c), to(#007a3b));
    background: linear-gradient(180deg, #2a428c 10%, #007a3b 100%);*/
    border-radius: 20px;
    color: white;
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    cursor: pointer;
}

#card-content {
    padding: 20px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

    #card-content #task-card-title {
        font-size: 15px;
      
    }

    #card-content .card-para {
        color: inherit;
        font-size: 14px;
    }

#tasks-card:hover {
    transform: rotateY(10deg) rotateX(10deg) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#tasks-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2a428c; /* Fallback solid deep blue */
    background: -o-linear-gradient(top, #2a428c 10%, #007a3b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #2a428c), to(#007a3b));
    background: linear-gradient(180deg, #2a428c 10%, #007a3b 100%);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    z-index: 1;
}

#tasks-card:hover:before {
    transform: translateX(-100%);
}

#tasks-card:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    z-index: 1;
}

#tasks-card:hover:after {
    transform: translateX(100%);
}
.g1 {
    background: #3494E6; /* fallback for old browsers */
    background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fad0c4, #ffdde1);
}
.g2 {
    background: #7F7FD5; /* fallback for old browsers */
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb, #cfd9df, #e2ebf0);
}
.g3 {
    background: #7F7FD5; /* fallback for old browsers */
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb, #cfd9df, #e2ebf0);
}
.g4 {
    background: #3494E6; /* fallback for old browsers */
    background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fad0c4, #ffdde1);
}


.chart-container {
    max-height: 500px !important; /* Adjust based on layout */
    overflow-y: auto !important;

}

.receipt {
    /*border-radius: 30px !important;*/
    padding: 2.1rem !important;
}


/* From Uiverse.io by Maximinodotpy */
.floatInputLabel {
    font-family: 'Segoe UI', sans-serif;
    margin: 2em 0 1em 0;
    max-width: 100%;
    position: relative;
}

    .floatInputLabel input {
        font-size: 100%;
        padding: 0.8em;
        outline: none;
        border: 1px solid #303992;
        background-color: transparent;
        border-radius: 10px;
        width: 100%;
    }

    .floatInputLabel label {
        font-size: 100%;
        position: absolute;
        left: 0;
        padding: 0.8em;
        margin-left: 0.5em;
        pointer-events: none;
        transition: all 0.3s ease;
        color: #009000;
    }

    .floatInputLabel :is(input:focus, input:valid) ~ label {
        transform: translateY(-50%) scale(.9);
        margin: 0em;
        margin-left: 1.3em;
        padding: 0.4em;
        background-color: white;
    }

    .floatInputLabel :is(input:focus, input:valid) {
        border-color: #303992;
    }

.icon-sm{
    width:16px !important;
    height:16px !important;
}
.mh-400{
    height:400px !important;
}
.maincenter {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;

    box-sizing: border-box;
    background-color: #f8f9fa;
    /*    text-align: center;*/
}
/*.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    cursor: pointer;
    color: #999;
    z-index: 2;
}

    .toggle-password:hover {
        color: #333;
    }

.position-relative {
    position: relative;
}*/