.banner {
    background-color: #018cd1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.categories-head {
    margin-bottom: 25px;
}

.categories-head .card {
    padding: 25px;
}

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

.card-text:hover {
    white-space: normal;
    width: auto;
    overflow: visible;
    text-overflow: inherit;
}

.categories-count {
    color: white;
    font-size: 20px;
    background-color: #008bd0;
    padding: 5px 10px;
    border-radius: 5px;
}

.categories-count:hover {
    background-color: #e12023;
}


.content-wrapper a {
    cursor: pointer;
}

.main-button {
    padding: 10px;
    border: 0px;
    border-radius: 10px;
    background-color: #008bd0;
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.main-button:hover {
    background-color: #e31e27;
    color: white;
}


.create-course-div {
    padding: 50px;
}

.course-create-body {
    padding: 50px;
    background-color: #f5f5f9;
}

.create-course-div {
    box-shadow: -3px 16px 46px #9a979b;
}


.add-course-heading {
    padding-bottom: 25px;
}

.course-creation-main-div h3 {
    color: #535353;
}

.dropdown-menu .form-check {
    padding-left: 40px;
    width: 300px;
}

.placeholder-container {
    color: #6c757d;
}

.form-check-input {
    background-color: #cfcfcf;

}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

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

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


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

.download-arrow {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #008bd0;
    position: relative;
    display: inline-block;
    margin-right: 10px;
    animation: bounce 1s linear infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(5px);
    }
}

.table a {
    color: #6a6b6d;
    text-decoration: none;
}

.box-shadow-card {
    box-shadow: -3px 16px 46px #0d0d0e;
    background-color: #ffffff;
    padding: 25px;
}

.main-student-inner-view {
    padding: 25px;
}

.main-student-inner-view .tab-content button {
    background-color: #008bd0;
    border-radius: 50px;
    border-width: 0px;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}


.edit-name-div button {
    background-color: #008bd0;
    border-radius: 50px;
    border-width: 0px;
    color: white;
    padding-left: 10px;
    padding-right: 10px;

}

.main-student-inner-view .tab-content i {
    margin-left: 10px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}
/*
.main-student-inner-view .tab-content i:hover {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
} */

.main-student-inner-view input,
.main-student-inner-view textarea {
    width: calc(25% - 16px);
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.main-student-inner-view input:focus,
.main-student-inner-view textarea:focus {
    outline: none;
    border-color: #5b9bd5;
    box-shadow: 0 0 5px rgba(91, 155, 213, 0.5);
}

#viewMoreButton {
    background-color: #008bd0;
    color: white;
    border-width: 0px;
}

#viewMoreButton:hover {

    background-color: #e51e23;
}

.software-count {

    color: white;
    font-size: 20px;
    background-color: #008bd0;
    padding: 5px 10px;
    border-radius: 5px;
}

.dashboard-main-body .card-link {
    color: #535353;

}

.dashboard-main-body .card-body {
    width: max-content;
    padding: 15px;
}

.count-container {
    /*background-color: #ffeeaac7;
    padding-top: 20px;*/
    border-radius: 0.5rem;
}


.count-container .card:hover {
    background-color: rgba(201, 23, 255, 0.014);
}

#studentTabs {
    height: 45px;
    border: 0px;
    box-shadow: 10px 7px 10px #0000004d;
    padding: 2px;
    background-color: white;
}

#studentTabs button {
    border: 1px solid rgba(128, 128, 128, 0.267);
    background-color: white;
}

#studentTabs button:hover {
    background-color: #008bd0;
    color: white;
}

#studentTabs .active {
    background-color: #008bd0;
    color: white;
}

.login-main-div {
    box-shadow: 20px 20px 20px;
    background-color: white;
}

.login-main-div button {
    background-color: #008bd0;
    color: white;
    border-radius: 50px;
    height: 40px;
    border: 0px;
}

.login-main-div button:hover {
    background-color: #008bd0;
}

.student-search-box {
    border: 1px solid black;
    transition: border 0.3s ease;
}

.student-search-box:focus {
    border: none;
}



.search-box {
    width: 100%;
    padding: 10px 30px 10px 10px;
    border: 0px solid #ccc;
    border-radius: 5px;
    outline: none;
}

#course_select_div button {
    border: 1px solid #d9dee3;
}

#addon_select_div button {
    border: 1px solid #d9dee3;
}

.growthChart_div {
    padding: 10px;
    justify-content: left;
    display: flex;
}

.edit-details-button-container {
    justify-content: right;
    display: flex;
}

.edit-details-button-container span {
    background-color: #008bd0;
    color: white;
    padding: 2px;
    /*border: 2px inset white;*/
    display: block;
    margin-bottom: 5px;
}

.edit-details-button-container span:active {
    border: 2px solid white;


}

.student-dates input {
    width: 100%;
}

.main-student-inner-view input::placeholder {
    color: #697a8d;
}

#edit_intsallment {
    padding: 20px;
    margin: 20px;
    background-color: white;
}

#edit_intsallment .card {
    padding: 10px;
}

.reschedule-button {
    background-color: #008bd0;
    padding: 4px;
    color: white;
    border-radius: 5%;

}

.reschedule-button:hover {
    /*border: 2px inset white;*/
    transition: border-color 0.3s ease-in-out;
    background-color: #de2127;

}

.search-clear-button {
    padding: 5px;
    border: 0px;
    border-radius: 2px;
    color: white;
    background-color: rgb(252, 248, 255);
    width: max-content;
    margin-bottom: 2px;
    color: #404042;
    transition: transform 0.2s ease;
    /* Add transition for a smooth effect */
}

.search-clear-button:hover {
    transform: scale(1.2);
}


.slider {
    margin-right: 10px;
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: white;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #008bd0;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    background: #008bd0;
    cursor: pointer;
}

.slider-container {
    display: flex;
    align-items: center;
}

.discount-save {
    padding: 5px;
    margin: 5px;
}

#studentTabs button {
    width: 160px;

}

.chat-container {
    padding: 50px;
}

.remark-text-area {
    width: 650px !important;
    margin-left: 85px;
    border: 0px !important;
}

.chat-message {
    padding: 20px;
    border: 4px solid white;
    box-shadow: 0px 5px 5px;
}

.remark-text-area-container {
    display: flex;
    height: 100px;
    ;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 0px 4px;
}

.chat-message p {
    color: rgba(0, 0, 0, 0.795);
    font-size: 18px;
}

.dp-table {
    margin: 10px;
    background-color: white;
    margin-bottom: 40px;
}

.dp-table input {
    width: 100px;
}

.main-settings-container {

    padding: 10px;
    background-color: white;
}

.create-button-small {
    background-color: #008bd0;
    color: white;
    border: 0px;
}

.day-com-div {
    padding: 10px;
    border: 0.5px solid #80808036;
}


.day-com .create-button-small {
    height: 30px;
    width: 50px;
    margin-left: 30px;
    margin-top: 5px;
}

.time-com-div {
    padding: 10px;
    border: 0.5px solid #80808036;
}

.time-com-div .create-button-small {
    height: 30px;
    width: 50px;
    margin-left: 30px;
    margin-top: 35px;
}

.create-button-small2 {
    background-color: #008bd0;
    color: white;
    border: 0px;
}

.fetch-details {
    border-radius: 0px !important;
    border: 2px inset rgba(255, 255, 255, 0) !important;
}

.fetch-details-disabled {
    border-radius: 0px !important;
    border: 2px inset rgba(255, 255, 255, 0) !important;
    background-color: grey !important;
}


.fetch-details:active {
    border-radius: 0px !important;
    border: 2px outset rgb(255, 255, 255) !important;
}

#available_students_table_container {
    border: 1px inset #80808029;
    margin-top: 15px;
}

#available_students_table_container .fetch-details {
    width: 80px
}

.month-toggle-button {
    background-color: #0185cd;
    border: 1px solid #ffffffee;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    box-shadow: 1px 1px 1px white;
}

.month-toggle-button:hover {
    box-shadow: 0px 0px 0px;
    background-color: #2601cd49;
}

.name-span {
    background-color: #ddcfcf2b;
}

.id-card-main-container {
    margin: 10px;
}

.upload-card-section {
    background-color: white;
    padding: 10px;
    margin: 5px;
    border-radius: 10px;
    box-shadow: 1px 1px 20px #00000029;
}

.id-upload-input {
    width: 290px !important;
    height: 45px !important;
    margin-right: 11px !important;
}

.upload-card-section .main-button {
    width: 75px;
}

.show-id-button {
    margin: 5px;
    color: white;
    background-color: #008bd0;
    border: 0px;
    box-shadow: 2px 2px 0px black;
}

.show-id-button:active {
    box-shadow: 0px 0px 0px;

}

.select-box {
    width: 68px;
    background-color: white !important;
    border: 1px solid #8080804f;
}

.course-search {
    border: 1px solid #8080803b;
    width: 400px;
}

.mod-boxes {

    border-radius: 0px !important;
    border: 2px inset rgba(255, 255, 255, 0) !important;
    margin: 4px;
}


.p-e * {
    background-color: white !important;
    color: black;
}

.p-e {
    border: 1px inset rgba(128, 128, 128, 0.39) !important;
    border-radius: 2px !important;
}

.dashboard-card {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    width: 235px;
    height: 119px;
}

.dashboard-card .card-body {
    padding-bottom: 0;
}

.dashboard-label {
    display: block;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #566a7f;
    font-size: 18px;
    text-align: right;
    margin-left: 55px;
}

.dashboard-title {
    color: #333;
    font-size: 36px;
    text-align: center;
    text-shadow: 2px 2px 4px #ddd;
}

.dashboard-icon {
    position: absolute;
    top: 10px;
    left: 18px;
}

.dashboard-icon img {
    border-radius: 33px;
    padding: 5px;
}

.dashboard-chart {
    margin-bottom: 1.5rem;
}

.blur {
    filter: blur(2px);
}

.blur button {
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.blur input {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.blur a {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.payment-basic-div {
    padding: 12px;
    margin: 11px;
    background-color: white;
    box-shadow: 2px 2px 2px grey;
}

.fee-installments {
    background-color: white;
    box-shadow: 2px 2px 2px grey;

}

.alice-blue {
    background-color: aliceblue !important;
}

.personal-div {
    margin: 25px;
    box-shadow: 2px 2px 2px grey;
    background-color: white;
}

.sm-boxes {
    height: 118px;
    background-color: white;
}

.course-sm-div {
    position: absolute;
    margin-right: 7px;
    margin-left: -18px;
    margin-top: 35px;
    box-shadow: 0px 0px 4px;
    z-index: 999;
}

.course-icon {
    background-color: #ffffff00;
    color: rgb(102, 97, 97);
    padding: 0px;
    position: absolute;
    height: 31px;
    width: 30px;
    border-radius: 15px;
    margin-left: 91px;
    margin-left: 99px;
    margin-top: -35px;
    font-size: 15px !important;
}