:root {
    --danger-color-dimmer: #D0000005;
    --danger-color-dim: #D0000040;
    --success-color-dim: #09c10935;
    --success-color-dimmer: #09c10905;
    --success-color-hover: #049904;
}

.courses-list {
    max-height: 400px;
    overflow: auto;
}


.selected-course-name {
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.change-course {
    font-size: 10px;
}

.enrollment-box {
    display: inline-block;
    padding: 20px 30px;
    font-size: 16px;
    font-weight: 500;
    color: white;
    border-radius: 8px;
    /* background: linear-gradient(135deg, #FFFFFF, #F1F1F1);*/
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    text-align: start;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #F8EDED;
    gap: 6px;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Creates 5 equal-width columns */
    gap: 10px; /* Adds space between the grid items */
}

.text-heading {
    color: #DE3163
}

.text-red {
    color: #e74c3c;
}

.text-orange {
    color: #f39c12:
}

.text-maroon {
    color: #641e16;
}

.text-violet {
    color: #8e44ad;
}

.green {
    color: #86D293;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
    top: 10px; /* Creates space above the table */
}


    .custom-table th, .custom-table td {
        padding: 10px 20px; /* Adds padding inside table cells */
        text-align: left; /* Aligns the text to the left */
    }

    .custom-table thead {
        background-color: #C0C0C0; /* Silver color for the header background */
        color: white; /* White text color for the header */
    }

    .custom-table tbody tr:nth-child(even) {
        background-color: #f2f2f2; /* Adds a light gray background for even rows */
    }

    .custom-table tbody tr:hover {
        background-color: #ddd; /* Adds a hover effect for rows */
    }

.full-width-table {
    width: 100%; /* Table takes the full width of its parent container */
    border-collapse: collapse; /* Ensures no space between table cells */
}

    .full-width-table th, .full-width-table td {
        padding: 10px 20px; /* Adds padding inside cells */
        text-align: left; /* Aligns text to the left */
    }

    .full-width-table thead {
        background-color: #C0C0C0; /* Silver background for the header */
        color: white;
    }

    .full-width-table tbody tr:nth-child(even) {
        background-color: #f2f2f2; /* Zebra-striping effect */
    }

    .full-width-table tbody tr:hover {
        background-color: #ddd; /* Hover effect for rows */
    }

.payment-detail {
    display: flex;
    text-align: start;
    font-size: 24px;
    font-weight: 500;
    margin-top: 20px;
}

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

.student-detail {
    margin-top: 60px;
    font-size: 24px;
    font-weight: 500;
    text-align: start;
}

.font-size {
    font-size: 16px;
    text-align: start;
    font-weight: 700;
    margin-top: 60px;
}

.sub-heading {
    border: 1px;
    background-color: aqua;
    padding: 4px;
    text-align: center;
}

.shine-success {
    background: linear-gradient(110deg, var(--success-color-dimmer) 8%, var(--success-color-dim) 18%, var(--success-color-dimmer) 33%);
    -webkit-animation: 1.5s shine linear infinite;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}

.shine-danger {
    background: linear-gradient(110deg, var(--danger-color-dimmer) 1%, var(--danger-color-dim) 18%, var(--danger-color-dimmer) 33%);
    -webkit-animation: 1.5s shine linear infinite;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}



.analytics-card {
    border-radius: 4px;
    border: 1px solid rgba(4, 32, 69, 0.10);
    background: #FFF;
    padding: 16px;
    height: 100%;
}

.card-title-text {
    font-size: 9px;
}

.card-heading-text {
    font-weight: 500;
}

.card-actions {
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center;
}

.trending-text {
    font-family: DM Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}
.blue-box {
    background: linear-gradient(135deg, #00b4d8, #0077b6);
}

.blue-outline-box, .blue-box {
    border-color: #00b4d877; /* Bright blue for consistency */
}
.green-box {
    background: linear-gradient(135deg, #009e50, #007a3d);
}

.green-outline-box, .green-box {
    border-color: #007a3d77; /* Darker green for consistency */
}

.orange-box {
    background: linear-gradient(135deg, #ff7043, #ff3d00);
}

.orange-outline-box, .orange-box {
    border-color: #ff704377; /* Bright orange for consistency */
}

.brown-box {
    background: linear-gradient(135deg, #ff5722, #ff3d00);
}

.brown-outline-box, .brown-box {
    border-color: #ff572277; /* Bright brown for consistency */
}

.purple-box {
    background: linear-gradient(135deg, #9c27b0, #e91e63);
}

.purple-outline-box, .purple-box {
    border-color: #9c27b077; /* Bright purple for consistency */
}

.violet-box {
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
}


.violet-outline-box, .violet-box {
    border-color: #8e2de277; /* Bright violet for consistency */
}

.violet-outline-box, .purple-outline-box, .brown-outline-box, .orange-outline-box, .green-outline-box, .blue-outline-box {
    background: white;
}

/* Custom Button styling to match Select box */
.custom-button-for-report {
    padding: 10px 18px; /* Same padding as select box */
    border-radius: 4px; /* Same border-radius */
    background-color: #ffffff; /* Select background color */
    border: 1px solid #d9d9d9; /* Same border color */
    font-size: 14px; /* Adjust font size to match */
    width: 200px; /* Same width as Select */
    display: flex;
    align-items: center;
    justify-content: start;
    cursor: pointer;
}

    .custom-button-for-report:hover {
        /*  background-color: #f0f0f0;*/ /* Hover background color for better UX */
        border-color: #1890ff; /* Hover border color */
    }

    .custom-button-for-report:focus {
        outline: none; /* Remove focus outline if desired */
        border-color: #007bff; /* Highlight focus with blue border */
    }



@-webkit-keyframes shine {
    to {
        background-position-x: -200%;
    }
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}



@media(min-width:600px) {
    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Creates 5 equal-width columns */
        gap: 20px; /* Adds space between the grid items */
    }
}

@media(min-width:900px) {

    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Creates 5 equal-width columns */
        gap: 10px; /* Adds space between the grid items */
    }
}