@charset "UTF-8";
/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
/******* Base *******/
/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #6A7287;
  line-height: 1.5;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}

::selection {
  background: #3D5EE1;
  color: #FFF;
  text-shadow: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: inherit;
}

* {
  outline: none;
}

button {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
button:focus {
  box-shadow: none !important;
}

p {
  margin-bottom: 20px;
}
p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 700;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: #202C4B;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  margin-bottom: 0;
}

ol, ul {
  list-style: none;
  margin-block-end: 0;
  padding: 0;
}

ul {
  list-style: none;
}
ul.list-disc {
  list-style: disc;
  padding-left: 15px;
}
ul.list-disc ul {
  list-style-type: circle;
}
ul.list-decimal {
  list-style: decimal;
  padding-left: 15px;
}
ul.list-decimal ul {
  list-style-type: decimal;
}
ul.list-icon {
  list-style: none;
  padding-left: 0;
}
ul.list-icon > li {
  padding-left: 1.875rem;
  counter-increment: li;
}
ul.list-icon > li i,
ul.list-icon > li .feather-icon,
ul.list-icon > li .svg-icon {
  display: inline-block;
  height: 20px;
  width: 20px;
  text-align: center;
  margin-left: -1.25rem;
  position: relative;
  left: -10px;
  padding: 1px;
  top: -1px;
}
ul.list-icon > li i {
  font-size: 20px;
  top: 5px;
}
ul .btn-primary:not(:disabled):not(.disabled):active:focus, ul .btn-primary:not(:disabled):not(.disabled).active:focus {
  box-shadow: none;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.bg-primary {
  background-color: #3D5EE1 !important;
}

.bg-secondary {
  background-color: #6FCCD8 !important;
}

.bg-info {
  background-color: #0F65CD !important;
}

.bg-success {
  background-color: #1ABE17 !important;
}

.bg-warning {
  background-color: #EAB300 !important;
}

.bg-danger {
  background-color: #E82646 !important;
}

.bg-dark {
  background-color: #202C4B !important;
}

.bg-light {
  background-color: #E9EDF4 !important;
}

.bg-white {
  background-color: #FFF;
}

.bg-pink {
  background-color: #E83E8C !important;
}

.bg-purple {
  background-color: #4A00E5 !important;
}

.bg-teal {
  background-color: #02a8b5 !important;
}

.bg-blue {
  background-color: #339DFF !important;
}

.bg-gray {
  background: #F4F6FA;
}

.bg-primary {
  background-color: #3D5EE1 !important;
}
.bg-primary.bg-opacity-10 {
  background-color: rgba(61, 94, 225, 0.1) !important;
}
.bg-primary.bg-opacity-25 {
  background-color: rgba(61, 94, 225, 0.25) !important;
}
.bg-primary.bg-opacity-50 {
  background-color: rgba(61, 94, 225, 0.5) !important;
}
.bg-primary.bg-opacity-75 {
  background-color: rgba(61, 94, 225, 0.75) !important;
}
.bg-primary.bg-opacity-100 {
  background-color: #3d5ee1 !important;
}

.bg-secondary {
  background-color: #6FCCD8 !important;
}
.bg-secondary.bg-opacity-10 {
  background-color: rgba(111, 204, 216, 0.1) !important;
}
.bg-secondary.bg-opacity-25 {
  background-color: rgba(111, 204, 216, 0.25) !important;
}
.bg-secondary.bg-opacity-50 {
  background-color: rgba(111, 204, 216, 0.5) !important;
}
.bg-secondary.bg-opacity-75 {
  background-color: rgba(111, 204, 216, 0.75) !important;
}
.bg-secondary.bg-opacity-100 {
  background-color: #6fccd8 !important;
}

.bg-info {
  background-color: #0F65CD !important;
}
.bg-info.bg-opacity-10 {
  background-color: rgba(15, 101, 205, 0.1) !important;
}
.bg-info.bg-opacity-25 {
  background-color: rgba(15, 101, 205, 0.25) !important;
}
.bg-info.bg-opacity-50 {
  background-color: rgba(15, 101, 205, 0.5) !important;
}
.bg-info.bg-opacity-75 {
  background-color: rgba(15, 101, 205, 0.75) !important;
}
.bg-info.bg-opacity-100 {
  background-color: #0f65cd !important;
}

.bg-success {
  background-color: #1ABE17 !important;
}
.bg-success.bg-opacity-10 {
  background-color: rgba(26, 190, 23, 0.1) !important;
}
.bg-success.bg-opacity-25 {
  background-color: rgba(26, 190, 23, 0.25) !important;
}
.bg-success.bg-opacity-50 {
  background-color: rgba(26, 190, 23, 0.5) !important;
}
.bg-success.bg-opacity-75 {
  background-color: rgba(26, 190, 23, 0.75) !important;
}
.bg-success.bg-opacity-100 {
  background-color: #1abe17 !important;
}

.bg-warning {
  background-color: #EAB300 !important;
}
.bg-warning.bg-opacity-10 {
  background-color: rgba(234, 179, 0, 0.1) !important;
}
.bg-warning.bg-opacity-25 {
  background-color: rgba(234, 179, 0, 0.25) !important;
}
.bg-warning.bg-opacity-50 {
  background-color: rgba(234, 179, 0, 0.5) !important;
}
.bg-warning.bg-opacity-75 {
  background-color: rgba(234, 179, 0, 0.75) !important;
}
.bg-warning.bg-opacity-100 {
  background-color: #eab300 !important;
}

.bg-danger {
  background-color: #E82646 !important;
}
.bg-danger.bg-opacity-10 {
  background-color: rgba(232, 38, 70, 0.1) !important;
}
.bg-danger.bg-opacity-25 {
  background-color: rgba(232, 38, 70, 0.25) !important;
}
.bg-danger.bg-opacity-50 {
  background-color: rgba(232, 38, 70, 0.5) !important;
}
.bg-danger.bg-opacity-75 {
  background-color: rgba(232, 38, 70, 0.75) !important;
}
.bg-danger.bg-opacity-100 {
  background-color: #e82646 !important;
}

.bg-dark {
  background-color: #202C4B !important;
}
.bg-dark.bg-opacity-10 {
  background-color: rgba(32, 44, 75, 0.1) !important;
}
.bg-dark.bg-opacity-25 {
  background-color: rgba(32, 44, 75, 0.25) !important;
}
.bg-dark.bg-opacity-50 {
  background-color: rgba(32, 44, 75, 0.5) !important;
}
.bg-dark.bg-opacity-75 {
  background-color: rgba(32, 44, 75, 0.75) !important;
}
.bg-dark.bg-opacity-100 {
  background-color: #202c4b !important;
}

.bg-light {
  background-color: #E9EDF4 !important;
}
.bg-light.bg-opacity-10 {
  background-color: rgba(233, 237, 244, 0.1) !important;
}
.bg-light.bg-opacity-25 {
  background-color: rgba(233, 237, 244, 0.25) !important;
}
.bg-light.bg-opacity-50 {
  background-color: rgba(233, 237, 244, 0.5) !important;
}
.bg-light.bg-opacity-75 {
  background-color: rgba(233, 237, 244, 0.75) !important;
}
.bg-light.bg-opacity-100 {
  background-color: #e9edf4 !important;
}

.bg-skyblue {
  background-color: #05C3FB !important;
}

.bg-primary {
  background-color: #3D5EE1 !important;
  border: 1px solid #3D5EE1 !important;
  color: #FFF;
}

.bg-secondary {
  background-color: #6FCCD8 !important;
  border: 1px solid #6FCCD8 !important;
  color: #FFF;
}

.bg-success {
  background-color: #1ABE17 !important;
  border: 1px solid #1ABE17 !important;
  color: #FFF;
}

.bg-info {
  background-color: #0F65CD !important;
  border: 1px solid #0F65CD !important;
  color: #FFF;
}

.bg-warning {
  background-color: #EAB300 !important;
  border: 1px solid #EAB300 !important;
  color: #FFF;
}

.bg-danger {
  background-color: #E82646 !important;
  border: 1px solid #E82646 !important;
  color: #FFF;
}

.bg-dark {
  background-color: #202C4B !important;
  border: 1px solid #202C4B !important;
  color: #FFF;
}

.bg-light {
  background-color: #E9EDF4 !important;
  border: 1px solid #E9EDF4 !important;
  color: #FFF;
}

.bg-black {
  background-color: #000 !important;
  border: 1px solid #000 !important;
  color: #FFF;
}

.bg-purple {
  background-color: #4A00E5 !important;
  border: 1px solid #4A00E5 !important;
  color: #FFF;
}

.bg-yellow {
  background-color: #ffff00 !important;
  border: 1px solid #ffff00 !important;
  color: #FFF;
}

.bg-teal {
  background-color: #02a8b5 !important;
  border: 1px solid #02a8b5 !important;
  color: #FFF;
}

.bg-soft-primary {
  background-color: #ECEFFC;
  color: #3D5EE1;
}

.bg-soft-secondary {
  background-color: #D4F0F3;
  color: #6FCCD8;
}

.bg-soft-success {
  background-color: #BAECB9;
  color: #1ABE17;
}

.bg-soft-danger {
  background-color: #F8BEC8;
  color: #E82646;
}

.bg-soft-warning {
  background-color: #FDE9C1;
  color: #EAB300;
}

.bg-soft-info {
  background-color: rgba(15, 101, 205, 0.3);
  color: #0F65CD;
}

.bg-soft-light {
  background-color: rgba(233, 237, 244, 0.9);
  color: #6A7287;
}

.bg-soft-dark {
  background-color: rgba(32, 44, 75, 0.3);
  color: #FFF;
}

.bg-light {
  color: #6A7287;
}

.bg-primary-gradient {
  background: linear-gradient(180deg, #F3F6FF 0%, #FFFFFF 100%) !important;
  color: #FFF;
}

.bg-secondary-gradient {
  background: linear-gradient(180deg, #E8FCFF 0%, #FFFFFF 100%) !important;
  color: #FFF;
}

.bg-warning-gradient {
  background: linear-gradient(180deg, #FEF8EA 0%, #FFFFFF 100%) !important;
  color: #FFF;
}

.bg-info-gradient {
  background: linear-gradient(180deg, #E7F1FC 0%, #FFFFFF 100%) !important;
  color: #FFF;
}

.bg-success-gradient {
  background: linear-gradient(180deg, #E8F9E8 0%, #FFFFFF 100%) !important;
  color: #FFF;
}

.bg-danger-gradient {
  background: linear-gradient(180deg, #FDE9ED 0%, #FFFFFF 100%) !important;
  color: #FFF;
}

.bg-orange-gradient {
  background: linear-gradient(to right, #FD7E14 0%, 100%) !important;
  color: #FFF;
}

.bg-purple-gradient {
  background: linear-gradient(to right, #4A00E5 0%, #9b25b7 100%) !important;
  color: #FFF;
}

.bg-teal-gradient {
  background: linear-gradient(180deg, #E6F9FF 0%, #FFFFFF 100%) !important;
  color: #FFF;
}

.bg-light-gradient {
  background: linear-gradient(180deg, #D1D6DE 0%, #FFFFFF 100%) !important;
  color: #000;
}

.bg-dark-gradient {
  background: linear-gradient(180deg, #F3F6FF 0%, #FFFFFF 100%) !important;
  color: #FFF;
}

.bg-outline-primary {
  background-color: #FFF;
  border: 1px solid #3D5EE1;
  color: #3D5EE1;
}

.bg-outline-secondary {
  background-color: #FFF;
  border: 1px solid #6FCCD8;
  color: #6FCCD8;
}

.bg-outline-warning {
  background-color: #FFF;
  border: 1px solid #EAB300;
  color: #EAB300;
}

.bg-outline-info {
  background-color: #FFF;
  border: 1px solid #0F65CD;
  color: #0F65CD;
}

.bg-outline-success {
  background-color: #FFF;
  border: 1px solid #1ABE17;
  color: #1ABE17;
}

.bg-outline-danger {
  background-color: #FFF;
  border: 1px solid #E82646;
  color: #E82646;
}

.bg-outline-dark {
  background-color: #FFF;
  border: 1px solid #202C4B;
  color: #202C4B;
}

.bg-outline-light {
  background-color: #FFF;
  border: 1px solid #E9EDF4 !important;
  color: #000 !important;
}

.bg-primary-transparent {
  background-color: #F2F5FF !important;
  color: #3D5EE1 !important;
}
.bg-primary-transparent:hover {
  background-color: #F2F5FF !important;
  color: #3D5EE1 !important;
}

.bg-secondary-transparent {
  background-color: #E8FCFF !important;
  color: #6FCCD8 !important;
}
.bg-secondary-transparent:hover {
  background-color: #E8FCFF !important;
  color: #6FCCD8 !important;
}

.bg-info-transparent {
  background-color: #E7F1FC !important;
  color: #0F65CD !important;
}
.bg-info-transparent:hover {
  background-color: #E7F1FC !important;
  color: #0F65CD !important;
}

.bg-success-transparent {
  background-color: #E8F9E8 !important;
  color: #1ABE17 !important;
}
.bg-success-transparent:hover {
  background-color: #E8F9E8 !important;
  color: #1ABE17 !important;
}

.bg-warning-transparent {
  background-color: #FEF8EA !important;
  color: #EAB300 !important;
}
.bg-warning-transparent:hover {
  background-color: #FEF8EA !important;
  color: #EAB300 !important;
}

.bg-danger-transparent {
  background-color: #FDE9ED !important;
  color: #E82646 !important;
}
.bg-danger-transparent:hover {
  background-color: #FDE9ED !important;
  color: #E82646 !important;
}

.bg-light-transparent {
  background-color: rgba(233, 237, 244, 0.5) !important;
  color: #E9EDF4 !important;
}
.bg-light-transparent:hover {
  background-color: rgba(233, 237, 244, 0.5) !important;
  color: #6A7287 !important;
}

.bg-skyblue-transparent {
  background-color: #E6F9FF !important;
  color: #05C3FB !important;
}
.bg-skyblue-transparent:hover {
  background-color: #E6F9FF !important;
  color: #05C3FB !important;
}

.bg-gray-100 {
  background-color: #E6E8EB;
}

.bg-gray-200 {
  background-color: #CDD0D7;
}

.bg-gray-300 {
  background-color: #B5B9C3;
}

.bg-gray-400 {
  background-color: #9CA1AF;
}

.bg-gray-500 {
  background-color: #838A9B;
}

.bg-gray-600 {
  background-color: #6A7287;
}

.bg-gray-700 {
  background-color: #515B73;
}

.bg-gray-800 {
  background-color: #39435F;
}

.bg-gray-900 {
  background-color: #202C4B;
}

.bg-light-100 {
  background-color: #FDFDFE !important;
}

.bg-light-300 {
  background-color: #F8FAFC !important;
}

.bg-light-400 {
  background-color: #F6F8FB !important;
}

.bg-light-500 {
  background-color: #F4F6FA !important;
}

.bg-success-800 {
  background-color: #48CB45 !important;
}

.svg-primary {
  fill: #3D5EE1;
}

.svg-secondary {
  fill: #6FCCD8;
}

.svg-success {
  fill: #1ABE17;
}

.svg-danger {
  fill: #E82646;
}

.svg-warning {
  fill: #EAB300;
}

.svg-white {
  fill: #FFF;
}

.svg-black {
  fill: #000;
}

.svg-pink {
  fill: #E83E8C;
}

.svg-orange {
  fill: #FD7E14;
}

.svg-purple {
  fill: #4A00E5;
}

.svg-indigo {
  fill: #05C3FB;
}

.svg-info {
  fill: #0F65CD;
}

.svg-yellow {
  fill: #ffff00;
}

.svg-light {
  fill: #E9EDF4;
}

.svg-dark {
  fill: #202C4B;
}

.svg-teal {
  fill: #02a8b5;
}

.svg-default {
  fill: #6A7287;
}

.color-container {
  width: 5rem;
  height: 5rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 3rem;
}

.text-container {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
}

.color-box {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
}

.badge-soft-pending {
  background: #E6F9FF;
  color: #05C3FB;
}

.bg-pending {
  background: #05C3FB;
  color: #FFF;
}

.bg-light-200 {
  background: #FBFBFD;
}

.bg-light-300 {
  background: #F8FAFC;
}

.bg-teal-transparent {
  background: #E6F9FF;
}

.bg-transparent-primary {
  background: #F2F5FF;
}

.bg-transparent-dark {
  background: #F3F6FF;
}

.bg-transparent-pending {
  background: #E6F9FF;
}

.bg-transparent-warning {
  background: #FEF8EA;
}

.bg-transparent-light {
  background: #E9EDF4;
}

.bg-transparent-danger {
  background: #FDE9ED;
}

.bg-transparent-success {
  background: #E8F9E8;
}

.bg-transparent-info {
  background: #E7F1FC;
}

.bg-light-gray {
  background: #F4F6FA;
}

.bg-light-orange {
  background: #D8DFF9;
}
.bg-light-orange span {
  background: #D8DFF9;
}

.bg-light-red {
  background: #FAD4DA;
}
.bg-light-red span {
  background: #FAD4DA;
}

.bg-light-green {
  background: #BAECB9;
}
.bg-light-green span {
  background: #BAECB9;
}

.bg-01 {
  background: url("../img/bg/star-bg-01.svg") no-repeat;
}

.bg-02 {
  background: url("../img/bg/star-bg-02.svg") no-repeat;
}

.bg-03 {
  background-image: url("../img/bg/bg-01.png"), url("../img/bg/shape-05.png");
  background-position: right, right;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 575.98px) {
  .bg-03 {
    background-image: none;
  }
}

.account-page .bg-01 {
  background-image: url(../img/authentication/authentication-bg.svg);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100%;
}

/****** Layout ******/
/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  border-radius: 50px !important;
}

::-webkit-scrollbar-track {
  background: #F4F6FA;
}

::-webkit-scrollbar-thumb {
  background: #CDD0D7;
}

::-webkit-scrollbar-thumb:hover {
  background: #CDD0D7;
}

.swal2-header .swal2-title {
  font-size: 18px;
}

.checkboxs {
  display: block;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 25px;
}
.checkboxs input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkboxs input ~ .checkmarks {
  border: 1px solid #E9EDF4;
  border-radius: 2px;
}

.checkboxs input:checked ~ .checkmarks {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
}
.checkboxs input:checked ~ .checkmarks:after {
  display: block;
}

.checkboxs .checkmarks {
  height: 18px;
  width: 18px;
  position: absolute;
  top: 2px;
  left: 0;
}
.checkboxs .checkmarks::after {
  content: "";
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-weight: 600;
  font-size: 10px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.page-wrapper {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  margin: 0 0 0 252px;
  padding: 56px 0 0;
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
@media (max-width: 991.98px) {
  .page-wrapper {
    margin: 0;
    padding: 60px 0 0;
  }
}
.page-wrapper .content {
  padding: 24px;
  background: #FBFBFD;
  padding-bottom: 0;
}
@media (max-width: 991.98px) {
  .page-wrapper .content {
    padding: 15px;
    padding-bottom: 0;
  }
}
.page-wrapper .content.content-two {
  padding-bottom: 24px;
}
@media (max-width: 767.98px) {
  .page-wrapper .content.content-two {
    padding-bottom: 15px;
  }
}

.page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.page-header .breadcrumb {
  margin-bottom: 0;
}
@media (max-width: 575.98px) {
  .page-header {
    flex-direction: column;
    align-items: self-start;
  }
}
.page-header .page-title {
  margin-bottom: 10px;
}
.page-header h3 {
  font-weight: 700;
  color: #202C4B;
  font-size: 18px;
}
@media (max-width: 991.98px) {
  .page-header h3 {
    font-size: 14px;
  }
}
.page-header h4 {
  font-weight: 600;
  color: #202C4B;
  font-size: 18px;
  margin-bottom: 5px;
}
@media (max-width: 991.98px) {
  .page-header h4 {
    font-size: 18px;
  }
}
.page-header h6 {
  font-size: 14px;
  color: #515B73;
  font-weight: 400;
}
@media (max-width: 991.98px) {
  .page-header h6 {
    font-size: 12px;
  }
}
@media (max-width: 575.98px) {
  .page-header h6 {
    font-size: 12px;
    margin-bottom: 20px;
  }
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.header {
  height: 56px;
  z-index: 999;
  background: #FFF;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-bottom: 1px solid #E9EDF4;
}
.header .flag-nav > a img {
  border-radius: 50%;
  width: 22px;
  height: 22px;
}
.header .searchinputs {
  padding: 0;
  position: relative;
}
@media (max-width: 1199.98px) {
  .header .searchinputs {
    display: none;
  }
}
.header .searchinputs input {
  width: 284px;
  height: 42px;
  border: 1px solid #E9EDF4;
  background: #FFF;
  padding: 5px 10px;
  padding-right: 45px;
  border-radius: 5px;
  color: #202C4B;
}
@media (max-width: 1199.98px) {
  .header .searchinputs input {
    width: 170px;
  }
}
.header .searchinputs input::placeholder {
  color: #9CA1AF;
}
.header .searchinputs .search-addon button {
  z-index: 9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  width: 24px;
  height: 24px;
  box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.0509803922);
  border-radius: 5px;
  cursor: pointer;
  background: #FFF;
  border: 0;
  padding: 0;
  color: #202C4B;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
@media (min-width: 992px) {
  .header .dropdown-menu {
    top: 85px;
    min-width: 200px;
    visibility: hidden;
    opacity: 0;
    border: 0;
    display: block;
    border-radius: 5px;
    box-shadow: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.36);
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    left: unset !important;
    right: 0 !important;
  }
}
@media (max-width: 991.98px) {
  .header .dropdown-menu {
    transition: none;
  }
}
.header .dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  margin-top: 8px !important;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.header .header-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  float: left;
  height: 56px;
  position: relative;
  text-align: center;
  width: 252px;
  z-index: 1;
  background: #FFF;
  padding: 0 15px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-right: 1px solid #E9EDF4;
}
.header .header-left .logo {
  display: inline-block;
  line-height: 0;
}
.header .header-left .logo img {
  width: 130px;
}
@media (max-width: 991.98px) {
  .header .header-left .logo {
    text-align: center;
    width: 100%;
  }
  .header .header-left .logo img {
    width: 140px;
  }
}
@media (max-width: 991.98px) {
  .header .header-left .dark-logo {
    text-align: center;
    width: 100%;
  }
  .header .header-left .dark-logo img {
    width: 140px;
  }
}
.header .header-left .logo-small {
  display: none;
}
@media (max-width: 991.98px) {
  .header .header-left {
    position: absolute;
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .header .header-left #toggle_btn {
    display: none;
  }
}
@media (min-width: 992px) {
  .header #toggle_btn {
    font-size: 18px;
    padding: 4px;
    border-radius: 6px;
  }
  .header #toggle_btn .bar-icon {
    display: inline-block;
    width: 21px;
  }
  .header #toggle_btn .bar-icon span {
    background-color: #FFF;
    display: block;
    float: left;
    height: 2px;
    width: 21px;
    margin: 0 0 5px;
    border-radius: 50px;
  }
  .header #toggle_btn .bar-icon span:nth-child(2) {
    width: 15px;
  }
}
.header .bar-icon {
  display: inline-block;
  width: 31px;
  margin-top: 20px;
}
.header .bar-icon span {
  background-color: #3D5EE1;
  display: block;
  float: left;
  height: 3px;
  margin-bottom: 7px;
  width: 31px;
  border-radius: 2px;
  transition: all 0.5s;
}
.header .bar-icon span:nth-child(2) {
  width: 16px;
}
.header .menu-opened .slide-nav .bar-icon {
  display: inline-block;
  width: 31px;
  margin-top: 20px;
}
.header .menu-opened .slide-nav .bar-icon span:first-child {
  position: relative;
  top: 10px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
.header .menu-opened .slide-nav .bar-icon span:nth-child(2) {
  display: none;
}
.header .menu-opened .slide-nav .bar-icon span:last-child {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
}
.header .menu-user-list {
  min-width: 450px;
  border-radius: 6px;
  padding: 24px;
}
.header .menu-user-list .list-appointment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid #E2E5F1;
  border-radius: 6px;
}
.header .menu-user-list .list-appointment-content {
  display: flex;
  align-self: center;
}
.header .menu-user-list .list-appointment-content .list-appointment-img {
  font-size: 24px;
  margin-right: 20px;
  position: relative;
}
.header .menu-user-list .list-appointment-content .list-appointment-img::after {
  position: absolute;
  content: "";
  background: #E2E5F1;
  width: 1px;
  height: 20px;
  top: 10px;
  right: -10px;
}
.header .menu-user-list .list-appointment-content h5 {
  color: #131022;
}
.header .menu-user-list .list-appointment-content h6 {
  font-weight: 400;
  font-size: 14px;
}
.header .menu-user-list .list-appointment-btn {
  font-size: 20px;
}
.header .profilename {
  padding: 0px;
}
.header .profilename .profileset {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 10px 3px;
}
.header .profilename .profileset h6 {
  font-size: 14px;
  color: #6A7287;
  font-weight: 500;
}
.header .profilename .profileset h5 {
  font-size: 12px;
  color: #3D5EE1;
  font-weight: 400;
}
.header .profilename .profileset .profilesets {
  margin-left: 10px;
}
.header .profilename .profileset .user-img img {
  margin-top: 0;
}
.header .profilename .dropdown-item {
  padding: 8px 5px !important;
}
.header .show .user-info::after {
  transform: rotate(-140deg);
  top: 10px;
}
.header .user-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  position: relative;
  overflow: hidden;
  padding: 0 30px 0 0;
}
@media (max-width: 1199.98px) {
  .header .user-info span.user-detail {
    display: none;
  }
}
.header .user-info:before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 0;
  border-left: 0;
  border-right: 2px solid #9CA1AF;
  border-bottom: 2px solid #9CA1AF;
  border-radius: 1px;
  transform: rotate(45deg);
  transition: all 0.5s;
  top: 8px;
  position: absolute;
  right: 12px;
}
@media (max-width: 1199.98px) {
  .header .user-info:before {
    top: 12px;
  }
}
.header .user-info .user-role {
  display: block;
  color: #3D5EE1;
  font-size: 12px;
  font-weight: 400;
}
.header .user-info .user-letter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  color: #FFF;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 15px;
  margin-right: 10px;
}
@media (max-width: 1199.98px) {
  .header .user-info .user-letter {
    margin-right: 0;
  }
}
.header .user-info .user-letter img {
  border-radius: 5px;
}
.header .user-info .user-name {
  font-size: 15px;
  font-weight: 500;
  color: #6A7287;
  display: flex;
  align-items: center;
}
.header .user-info .user-name img {
  margin-left: 10px;
}
.header .header-user {
  padding: 15px 24px;
  display: contents;
}
.header .header-user .user-menu {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  margin: 0;
  position: relative;
  height: 100%;
  border-bottom: 0;
  padding: 0 24px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
@media (max-width: 991.98px) {
  .header .header-user .user-menu {
    display: none;
  }
}
.header .header-user .user-menu .status {
  position: absolute;
  content: "";
  background: #3D5EE1;
  width: 10px;
  height: 10px;
  border-radius: 50px;
  top: 3px;
  right: 3px;
}
.header .header-user .user-menu .header-title h3 {
  font-size: 24px;
  font-weight: 700;
}
.header .header-user .user-menu .header-title h6 {
  font-size: 12px;
  font-weight: 600;
}
.header .header-user .user-menu > li {
  margin-left: 5px;
  margin-inline-end: 0;
}
.header .header-user .user-menu > li:first-child {
  margin-left: 0;
}
.header .header-user .user-menu > li.date-picker-list {
  margin-left: 0;
  margin-right: 10px;
}
.header .header-user .user-menu > li:last-child {
  margin-left: 15px;
}
@media (max-width: 1199.98px) {
  .header .header-user .user-menu > li {
    margin-left: 5px;
  }
}
.header .header-user .user-menu > li svg {
  width: 18px;
  color: #67748E;
}
.header .header-user .user-menu > li a:hover svg {
  color: #3D5EE1;
}
.header .header-user .user-menu .dropdown-toggle::after {
  border: 0;
  display: none;
}
.header .header-user .user-menu .nav-searchinputs {
  margin-right: auto;
  margin-left: 25px;
}
.header .header-user .user-menu .nav-item-box > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  background: #FFF;
  box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.0509803922);
  color: #515B73;
  border-radius: 5px;
  width: 36px;
  height: 36px;
  position: relative;
  border: 0;
}
.header .header-user .user-menu .nav-item-box > a:hover {
  background: #EDF1F6;
}
.header .header-user .user-menu .nav-item-email.nav-item-box {
  margin-left: 5px;
}
.header .header-user .user-menu.nav > li > a {
  padding: 0;
  display: flex;
  line-height: normal;
  color: #3E4265;
}
.header .header-user .user-menu.nav > li > a.btn-header-list {
  color: #FFF;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.header .header-user .user-menu.nav > li > a .badge {
  color: #FFF;
  font-weight: 700;
  position: absolute;
  top: 4px;
  right: 4px;
  background: #3D5EE1;
  width: 15px;
  height: 15px;
  font-size: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.header .header-user .user-menu.nav > li > a i {
  font-size: 18px;
}
.header .header-user .user-menu.nav > li > a .badge-success {
  background: #1ABE17;
  border: 3px solid #FFF;
  padding: 0;
  top: inherit;
  bottom: -3px;
  right: -3px;
}
.header .header-user .user-menu.nav > li.flag-nav a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.header .header-user .user-menu.nav > li.flag-nav a .dropdown-menu {
  max-height: 150px;
  min-width: 120px;
  overflow-y: auto;
}
.header .header-user .user-menu.nav > li.flag-nav a .dropdown-menu .dropdown-item {
  padding: 5px 15px;
}
.header .header-user .user-menu.nav > li.flag-nav .dropdown-menu {
  padding: 15px;
  min-width: 210px;
}
.header .header-user .user-menu.nav > li.flag-nav .dropdown-menu .dropdown-item {
  padding: 10px 10px;
  color: #67748E;
  border-radius: 10px;
  transition: none;
}
.header .header-user .user-menu.nav > li.flag-nav .dropdown-menu .dropdown-item.active {
  color: #FFF;
}
.header .header-user .user-menu.nav > li.flag-nav .dropdown-menu .dropdown-item.active, .header .header-user .user-menu.nav > li.flag-nav .dropdown-menu .dropdown-item:hover {
  background: #F7F7F7 url(../img/icons/check.svg) no-repeat calc(100% - 12px) center;
}
.header .header-user .user-menu.nav > li.flag-nav .dropdown-menu a img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 10px;
}
.header .page-title-box {
  float: left;
  height: 60px;
  margin-bottom: 0;
  padding: 17px 20px;
  border-radius: 0;
}
@media (max-width: 991.98px) {
  .header .page-title-box {
    display: none;
  }
}
.header .page-title-box a {
  color: #3D5EE1;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #3D5EE1;
  margin: 0;
  padding: 5px;
  border-radius: 5px;
}
.header .page-title-box a:hover {
  background: #3D5EE1;
  color: #FFF;
}
.header .mobile_btn {
  display: none;
  float: left;
}
@media (max-width: 991.98px) {
  .header .mobile_btn {
    color: #3D5EE1;
    font-size: 24px;
    height: 60px;
    line-height: 60px;
    width: 60px;
    z-index: 10;
    padding: 0 20px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }
}
.header .responsive-search {
  display: none;
  color: #FFF;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  padding: 0 15px;
}
@media (max-width: 991.98px) {
  .header .responsive-search {
    display: block;
  }
}
.header .top-nav-search form {
  position: relative;
}
@media (max-width: 991.98px) {
  .header .top-nav-search form {
    display: none;
  }
}
.header .top-nav-search form .form-control {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  height: 40px;
  padding: 10px 50px 10px 15px;
  border-radius: 50px;
}
.header .top-nav-search form .form-control::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.header .top-nav-search form .btn {
  background-color: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.7);
  min-height: 40px;
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 991.98px) {
  .header .top-nav-search.active form {
    display: block;
    position: absolute;
    left: 0;
  }
  .header .top-nav-search.active form .form-control {
    background-color: #FFF;
  }
  .header .top-nav-search.active form .btn {
    background-color: transparent;
    border-color: transparent;
    min-height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 7px 15px;
  }
}
.header .userset {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.header .userset .usernames {
  line-height: initial;
  text-align: right;
  padding-right: 10px;
}
.header .userset .usernames span {
  display: block;
  line-height: initial;
}
.header .menu-drop-user .dropdown-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  color: #6A7287;
  padding: 7px 10px !important;
}
.header .menu-drop-user .dropdown-item svg {
  stroke-width: 1px;
  margin-right: 10px;
  width: 18px;
}
.header .menu-drop-user .logout {
  color: #E82646;
}
@media (max-width: 991.98px) {
  .header .has-arrow .dropdown-toggle > span:nth-child(2) {
    display: none;
  }
  .header .has-arrow .dropdown-toggle:after {
    display: none !important;
  }
}
.header .profilename .user-img .status {
  bottom: 7px;
  top: unset;
  right: 0;
  background: #1ABE17;
}
.header .user-img {
  display: inline-block;
  position: relative;
}
.header .user-img img {
  width: 38px;
  border-radius: 50%;
}
.header .user-img .status {
  border: 2px solid #FFF;
  height: 10px;
  width: 10px;
  margin: 0;
  position: absolute;
  right: 0;
  bottom: 30px;
  border-radius: 50%;
  display: inline-block;
  background: #1ABE17;
}
.header .mobile-user-menu {
  color: #FFF;
  display: none;
  float: right;
  font-size: 24px;
  height: 60px;
  line-height: 60px;
  text-align: right;
  width: 60px;
  z-index: 10;
  padding: 0 20px;
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 991.98px) {
  .header .mobile-user-menu {
    display: block;
  }
}
.header .mobile-user-menu a {
  color: #3D5EE1;
  padding: 0;
}
.header .mobile-user-menu a::after {
  display: none;
}
.header .mobile-user-menu .dropdown-menu {
  padding: 0;
}
.header .mobile-user-menu .dropdown-menu a {
  color: #39435F;
  line-height: 40px;
  padding: 0 10px;
}

.logo-small img {
  width: 30px;
}

@media (min-width: 992px) {
  .mini-sidebar.expand-menu .header-left {
    flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
  }
  .mini-sidebar .header-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    width: 80px;
    padding: 0;
    flex-direction: column;
  }
  .mini-sidebar .header-left .logo-small {
    display: block;
    padding: 10px 0 0;
  }
  .mini-sidebar .header-left .logo {
    display: none;
  }
  .mini-sidebar .menu-arrow {
    display: none !important;
  }
  .mini-sidebar .chat-user {
    display: none !important;
  }
  .mini-sidebar .user-menu .badge {
    display: flex !important;
  }
  .mini-sidebar.expand-menu .menu-arrow {
    display: block !important;
  }
  .mini-sidebar.expand-menu .chat-user {
    display: block !important;
  }
  .mini-sidebar.expand-menu .logo-small {
    display: none;
  }
  .mini-sidebar.expand-menu .logo {
    display: block;
  }
  .mini-sidebar.expand-menu #toggle_btn {
    opacity: 1;
  }
  .mini-sidebar.expand-menu .header-left {
    padding: 0 15px;
    display: flex;
  }
  .mini-sidebar .noti-dot:before {
    display: none;
  }
}
.nav-list {
  position: relative;
}
.nav-list .nav .dark-mode-list .dark-mode-toggle {
  width: 66px;
  height: 36px;
  background: #FBFBFD;
  border: 1px solid #E9EDF4;
  font-size: 16px;
  border-radius: 5px;
  padding: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}
.nav-list .nav .dark-mode-list .dark-mode-toggle i {
  font-size: 16px;
  color: #202C4B;
  border-radius: 5px;
  line-height: 26px;
  width: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.nav-list .nav .dark-mode-list .dark-mode-toggle i.light-mode.active {
  color: #FFF;
  background: #1ABE17;
}
.nav-list .nav .dark-mode-list .dark-mode-toggle i.dark-mode.active {
  color: #FFF;
  background: #202C4B;
}
.nav-list .nav li .btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.nav-list .nav li .btn-header-list {
  color: #2CA87F;
  background: #D1F2D1;
  border: 1px solid #2CA87F;
}
.nav-list .nav li .btn-header-list:hover {
  color: #FFF;
  background: #2CA87F;
}
.nav-list .nav li .btn-help {
  color: #3C2371;
  background: #F3EDFF;
}
.nav-list .nav li .btn-help:hover {
  color: #FFF;
  background: #3C2371;
}
.nav-list .nav li .btn-chart-pie {
  color: #6FCCD8;
  background: #FEF8EA;
}
.nav-list .nav li .btn-chart-pie:hover {
  color: #FFF;
  background: #6FCCD8;
}

.mobile-show {
  display: none;
}
@media (max-width: 991.98px) {
  .mobile-show {
    display: block;
  }
}

.show .user-info::after {
  transform: rotate(-140deg);
  top: 10px;
}

.header .flag-nav .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
}
.header .flag-nav .dropdown-menu .dropdown-item img {
  width: 18px;
  height: 13px;
  border-radius: 10px;
  margin-right: 5px;
}

.nav-item-box a {
  position: relative;
}

.header .userset.show .user-info::before {
  transform: rotate(-136deg);
  top: 10px;
}

.header .date-range {
  padding-left: 30px !important;
}
.header .cal-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.dark-mode-toggle {
  display: none;
}
.dark-mode-toggle.activate {
  display: block;
}

.dark-logo {
  display: none;
  line-height: 0;
}
.dark-logo img {
  width: 130px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.sidebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #FFF;
  border-right: 1px solid #E9EDF4;
  margin-top: 0;
  z-index: 1001;
  position: fixed;
  top: 56px;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 252px;
}
@media (max-width: 991.98px) {
  .sidebar {
    margin-left: -575px;
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 1041;
    background: #FFF;
  }
}
@media (max-width: 575.98px) {
  .sidebar {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .sidebar .slimScrollDiv {
    width: 100% !important;
  }
}
.sidebar .sidebar-inner {
  width: 100%;
}
.sidebar .sidebar-menu {
  padding: 15px;
}
.sidebar .sidebar-menu .clinicdropdown {
  margin-bottom: 24px;
}
.sidebar .sidebar-menu .clinicdropdown > a {
  background: #FFF;
  border: 1px solid #E9EDF4;
  box-shadow: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.3607843137);
  border-radius: 5px;
  padding: 10px;
}
.sidebar .sidebar-menu .clinicdropdown > a img {
  border-radius: 50%;
}
.sidebar .sidebar-menu .clinicdropdown > a .user-names {
  margin-left: 10px;
}
.sidebar .sidebar-menu .clinicdropdown > a .user-names h5 {
  font-size: 14px;
  font-weight: 400;
  color: #515B73;
  margin-bottom: 2px;
}
.sidebar .sidebar-menu .clinicdropdown > a .user-names h6 {
  font-size: 14px;
  font-weight: 400;
  color: #838A9B;
  margin-bottom: 0;
}
.sidebar .sidebar-menu > ul > li {
  margin-bottom: 24px;
}
.sidebar .sidebar-menu > ul > li:last-child ul {
  margin-bottom: 0;
}
.sidebar .sidebar-menu > ul > li.active a {
  color: #FFF;
}
.sidebar .sidebar-menu > ul > li.active svg {
  color: #FE9F43;
}
.sidebar .sidebar-menu > ul > li svg {
  min-width: 16px;
  width: 16px;
  height: 16px;
  margin-right: 10px;
}
.sidebar .sidebar-menu > ul > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  padding: 10px 15px;
  position: relative;
  color: #6FCCD8;
}
.sidebar .sidebar-menu > ul > li > a svg {
  color: #637381;
}
.sidebar .sidebar-menu > ul > li > a img {
  color: #637381;
}
.sidebar .sidebar-menu > ul > li > a.active {
  background: rgba(254, 159, 67, 0.08);
  color: #FE9F43;
  border-radius: 5px;
}
.sidebar .sidebar-menu > ul > li > a.active svg {
  color: #FFF;
}
.sidebar .sidebar-menu > ul > li > a.active img {
  filter: invert(72%) sepia(76%) saturate(1430%) hue-rotate(327deg) brightness(103%) contrast(101%);
}
.sidebar .sidebar-menu > ul > li > a.active span {
  color: #FE9F43;
}
.sidebar .sidebar-menu > ul > li > a.active .menu-arrow {
  background: #FFEDDC;
}
.sidebar .sidebar-menu > ul > li > a.active .menu-arrow::before {
  border-color: #FE9F43;
}
.sidebar .sidebar-menu > ul > li > a span {
  font-size: 15px;
  font-weight: 500;
  color: #6A7287;
}
.sidebar .sidebar-menu > ul > li.active a {
  background: rgba(254, 159, 67, 0.08);
  border-radius: 5px;
}
.sidebar .sidebar-menu > ul > li.active a img {
  filter: invert(72%) sepia(76%) saturate(1430%) hue-rotate(327deg) brightness(103%) contrast(101%);
}
.sidebar .sidebar-menu > ul > li.active a span {
  color: #FE9F43;
}
.sidebar .sidebar-menu > ul > li.submenu ul {
  display: none;
}
.sidebar .sidebar-menu > ul > li.submenu ul li a {
  font-weight: 500;
  font-size: 14px;
  position: relative;
  display: block;
  padding: 8px 8px 8px 40px;
  padding-left: 30px;
}
.sidebar .sidebar-menu > ul > li ul {
  display: block;
  margin-bottom: 15px;
}
.sidebar .sidebar-menu > ul > li ul li {
  margin-bottom: 5px;
  border-radius: 5px;
  overflow: hidden;
}
.sidebar .sidebar-menu > ul > li ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  font-weight: 400;
  font-size: 14px;
  color: #6A7287;
  position: relative;
  width: 100%;
  padding: 8px;
}
.sidebar .sidebar-menu > ul > li ul li a i {
  color: #515B73;
  font-size: 16px;
  background: #F6F8FB;
  border-radius: 5px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar .sidebar-menu > ul > li ul li a span {
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  color: #202C4B;
  margin-left: 10px;
}
.sidebar .sidebar-menu > ul > li ul li a.active {
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul > li ul li a.active a span {
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul > li ul li a.active:after {
  background: #FE9F43;
  border: 2px solid #FDB;
}
.sidebar .sidebar-menu > ul > li ul li a:hover {
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul > li ul li a:hover:after {
  background: #FE9F43;
  border: 2px solid #FDB;
}
.sidebar .sidebar-menu > ul > li ul li a:hover span {
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul > li ul > li.active a {
  background: #F2F5FF;
  border-radius: 5px;
  color: #FFF;
}
.sidebar .sidebar-menu > ul > li ul > li.active a i {
  background: #FFF;
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul > li ul > li.active a span {
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul > li ul > li.active a .menu-arrow::before {
  border-right: 2px solid #3D5EE1;
  border-bottom: 2px solid #3D5EE1;
}
.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop {
  background: #F2F5FF;
  border-radius: 5px;
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop i {
  color: #FFF;
  background: #FFF;
}
.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop span {
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul > li .submenu-hdr {
  font-weight: 600;
  font-size: 12px;
  color: #9CA1AF;
  margin: 0 0 14px 0;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
}
.sidebar .sidebar-menu > ul > li .submenu-hdr span {
  flex-shrink: 0;
}
.sidebar .sidebar-menu > ul > li .submenu-hdr::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #E9EDF4;
  margin-left: 8px;
}
.sidebar .sidebar-menu > ul > li:first-child h6 {
  margin-top: 0;
}
.sidebar .sidebar-menu > ul > li .submenu ul {
  display: none;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.sidebar .sidebar-menu > ul > li .submenu ul li {
  margin-bottom: 0;
}
.sidebar .sidebar-menu > ul li {
  margin-bottom: 5px;
}
.sidebar .sidebar-menu > ul li .submenu > ul {
  margin: 0;
  margin-top: 10px;
}
.sidebar .sidebar-menu > ul li .submenu > ul li a {
  padding-left: 40px;
  font-size: 14px;
  position: relative;
}
.sidebar .sidebar-menu > ul li .submenu > ul li a:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #E9EDF4;
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar .sidebar-menu > ul li .submenu > a.subdrop {
  background: #F2F5FF;
}
.sidebar .sidebar-menu > ul li .submenu > a.subdrop i {
  background: #FFF;
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul li .submenu > a.active {
  background: #F2F5FF;
  border-radius: 5px;
}
.sidebar .sidebar-menu > ul li .submenu > a.active i {
  background: #FFF;
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul li .submenu > a.active span {
  color: #3D5EE1;
}
.sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
  border-right: 2px solid #3D5EE1;
  border-bottom: 2px solid #3D5EE1;
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two a.subdrop {
  background: transparent;
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two ul {
  margin-top: 0;
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two ul li a {
  margin-left: 20px;
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two.submenu-three ul li a {
  margin-left: 40px;
}
.sidebar .sidebar-menu .submenu-open:last-child {
  margin-bottom: 0;
}
.sidebar .sidebar-menu .submenu-open:last-child ul {
  border-bottom: none;
  padding-bottom: 0;
}
.sidebar .sidebar-menu .submenu-open .submenu.submenu-two ul li a {
  margin-left: 45px;
}
.sidebar .sidebar-menu .submenu-open .submenu.submenu-two.submenu-three ul li a {
  margin-left: 65px;
}
.sidebar .sidebar-menu .submenu-open .submenu ul li a {
  margin-left: 25px;
  padding-bottom: 4px;
  font-size: 14px;
  color: #6A7287;
}
.sidebar .sidebar-menu .submenu-open .submenu ul li a::after {
  content: "";
  background: rgba(50, 71, 92, 0.38);
  width: 8px;
  height: 8px;
  border: 2px solid #FFF;
  border-radius: 50px;
  position: absolute;
  top: 16px;
  left: 0;
}
.sidebar .sidebar-menu .submenu-open .submenu ul li a:hover {
  color: #3D5EE1;
}
.sidebar .sidebar-menu .submenu-open .submenu ul li a:hover:after {
  background: #FE9F43;
  border: 2px solid #FDB;
}
.sidebar .sidebar-menu .menu-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  text-rendering: auto;
  line-height: 40px;
  font-size: 18px;
  line-height: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translatey(-50%);
  -webkit-transform: translatey(-50%);
  -ms-transform: translatey(-50%);
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.sidebar .sidebar-menu .menu-arrow::before {
  height: 6px;
  width: 6px;
  border-top: 0;
  content: "";
  border-left: 0;
  border-right: 2px solid #9CA1AF;
  border-bottom: 2px solid #9CA1AF;
  transform: rotate(-45deg);
  position: absolute;
  left: 5px;
  top: 5px;
}
.sidebar .sidebar-menu .menu-arrow.inside-submenu {
  right: 10px;
}
.sidebar .sidebar-menu .menu-arrow.inside-submenu.inside-submenu-two {
  right: 30px;
}
.sidebar .sidebar-menu.subdrop .menu-arrow {
  transform: translateY(-50%) rotate(90deg);
  background: #FFEDDC;
}
.sidebar .nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  padding: 10px;
  color: #6FCCD8;
  position: relative;
}
.sidebar .nav-link.active {
  color: #3D5EE1;
  background: transparent;
  position: relative;
}
.sidebar .nav-link.active:after {
  content: "";
  border-width: 10px;
  border-color: transparent #3D5EE1 transparent transparent;
  border-style: solid;
  position: absolute;
  top: 36px;
  right: 0;
}
.sidebar .sidebar-left {
  width: 100px;
  -webkit-box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.05);
  box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.05);
}
.sidebar .sidebar-right {
  width: 250px;
  height: 100%;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: none;
}
@media (max-width: 991.98px) {
  .sidebar .sidebar-right {
    width: calc(100% - 70px);
  }
}
.sidebar .sidebar-right .slimScrollDiv {
  width: 250px !important;
  overflow: visible !important;
}
@media (max-width: 991.98px) {
  .sidebar .sidebar-right .slimScrollDiv {
    width: 100% !important;
  }
}
.sidebar .sidebar-right .tab-content {
  padding: 20px 20px 40px;
}
@media (max-width: 991.98px) {
  .sidebar .sidebar-right .tab-content {
    padding: 10px;
  }
}
.sidebar .sidebar-right p {
  font-size: 10px;
  color: #838A9B;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.sidebar .sidebar-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar .sidebar-right ul li.active a {
  background: linear-gradient(46.62deg, #3D5EE1 0%, #673AB7 93.64%);
  color: #FFF;
}
.sidebar .sidebar-right ul li a {
  font-weight: 400;
  font-size: 14px;
  color: #6FCCD8;
}
.sidebar .sidebar-right ul li a.active {
  color: #3D5EE1;
}
.sidebar .sidebar-right .menu-arrow {
  -webkit-transition: -webkit-transform 0.15s;
  -o-transition: -o-transform 0.15s;
  transition: transform 0.15s;
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  text-rendering: auto;
  line-height: 40px;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 18px;
  top: 0px;
  position: relative;
  font-weight: 700;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
}
.sidebar .sidebar-right .menu-arrow:before {
  content: "\f105";
}
.sidebar .sub-menu a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}
.sidebar li a.subdrop .menu-arrow {
  transform: translateY(-50%) rotate(90deg);
}
.sidebar .nav-items .nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 0;
  border-bottom: 1px solid #9CA1AF;
  padding: 20px 0;
  -webkit-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.sidebar .nav-items .nav-link:hover {
  box-shadow: 0 0 0 150px #673AB7 inset;
  color: #FFF;
}
.sidebar .nav-items .nav-link span {
  margin-top: 15px;
  font-weight: 500;
}
.sidebar .sidemenu a {
  width: 100%;
  font-weight: 500;
  display: block;
  border-radius: 5px;
  margin: 0 0 10px;
  padding: 10px;
}
.sidebar .sidemenu a:hover {
  background: linear-gradient(46.62deg, #3D5EE1 0%, #673AB7 93.64%);
  color: #FFF;
}
.sidebar .sidemenu a:hover svg {
  color: #FFF;
}
.sidebar .sidemenu a svg {
  stroke-width: 1px;
}

@media (min-width: 992px) {
  .mini-sidebar .page-wrapper {
    margin-left: 80px;
  }
  .mini-sidebar .user-names {
    display: none;
  }
  .mini-sidebar .header-left #toggle_btn {
    opacity: 1;
    transform: rotate(180deg);
  }
  .mini-sidebar .header-left #toggle_btn:after {
    border: 0;
  }
  .mini-sidebar .sidebar .sidebar-menu .clinicdropdown > a {
    padding: 5px;
  }
  .mini-sidebar .sidebar .sidebar-menu > ul > li ul li.submenu ul li a {
    padding-left: 40px;
  }
  .mini-sidebar.expand-menu .header-left #toggle_btn {
    opacity: 1;
    transform: rotate(180deg);
  }
  .mini-sidebar.expand-menu .sidebar .sidebar-menu .clinicdropdown > a {
    padding: 10px 15px;
  }
  .mini-sidebar .sidebar-right {
    display: none;
  }
  .mini-sidebar .sidebar .sidebar-menu ul li a span {
    display: none;
  }
  .mini-sidebar .sidebar .sidebar-menu ul li .submenu-hdr {
    font-size: 0;
  }
  .mini-sidebar .sidebar .sidebar-menu ul li .submenu-hdr::after {
    margin-left: 0;
  }
  .mini-sidebar .sidebar .sidebar-menu ul li svg {
    margin-right: 0;
  }
  .mini-sidebar .sidebar {
    width: 80px;
    overflow: hidden;
  }
  .mini-sidebar.expand-menu .sidebar {
    display: block;
  }
  .expand-menu.mini-sidebar .sidebar .sidebar-menu .submenu-hdr {
    display: flex;
    font-size: 12px;
  }
  .expand-menu.mini-sidebar .sidebar .sidebar-menu .submenu-hdr::after {
    margin-left: 8px;
  }
  .expand-menu.mini-sidebar .sidebar .user-names {
    display: none;
  }
  .expand-menu .sidebar-right {
    display: block;
    -webkit-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .expand-menu .sidebar {
    width: 252px;
  }
  .expand-menu .sidebar .sidebar-menu ul > li > a {
    padding: 8px;
  }
  .expand-menu .sidebar .sidebar-menu ul > li > a span {
    display: inline-block;
    line-height: 0;
  }
  .expand-menu .sidebar .sidebar-menu ul > li svg {
    margin-right: 10px;
  }
  .expand-menu .sidebar .sidebar-menu .submenu-hdr {
    display: flex;
  }
  .expand-menu .header-left {
    width: 252px;
  }
  #toggle_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    float: left;
  }
}
body.mini-sidebar .sidebar .sidebar-menu > ul > li.submenu-open ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  font-weight: 500;
  font-size: 15px;
  color: #67748E;
  position: relative;
  width: 100%;
}
body.mini-sidebar .sidebar .sidebar-menu > ul > li ul > li.active a {
  justify-content: center;
}
body.mini-sidebar .sidebar .sidebar-menu > ul li a {
  justify-content: center;
}
body.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul > li.submenu-open ul li a {
  justify-content: left;
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  padding-left: 18px;
}
body.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul > li ul > li.active a {
  justify-content: start;
}
body.mini-sidebar.expand-menu .sidebar .user-names {
  display: block !important;
}
body.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul li a {
  justify-content: start;
}

.sidebarrightmenu .sidebar-right {
  display: block;
}

.slide-nav .sidebar {
  margin-left: 0;
}

.sidebar-overlay {
  display: none;
  height: 100%;
  width: 100%;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 60px;
  left: 0;
}
.sidebar-overlay.opened {
  display: block;
}

.mini-sidebar .active.subdrop ~ ul {
  display: none !important;
}

.mini-sidebar.expand-menu .active.subdrop ~ ul {
  display: block !important;
}

.active.subdrop ~ ul {
  display: block !important;
}

.mini-sidebar .header #toggle_btn {
  opacity: 0;
  height: 0;
  width: 0;
}

.mini-sidebar.expand-menu .header #toggle_btn {
  opacity: 1;
  height: auto;
  width: auto;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.notification-dropdown {
  max-width: 100%;
  min-width: 450px !important;
}
.notification-dropdown .topnav-dropdown-header {
  border-bottom: 1px solid #E9EDF4;
}

.topnav-dropdown-header {
  padding: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.topnav-dropdown-header .notification-title {
  font-size: 16px;
  color: #000;
  margin-bottom: 0;
  font-weight: 700;
}

.notification-dropdown .noti-content {
  height: 270px;
  overflow-y: auto;
  position: relative;
}

.activity {
  width: 100%;
}
.activity .activity-box {
  position: relative;
}
.activity .activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.activity .activity-list li {
  background-color: #FFF;
  position: relative;
  border: 1px solid #9CA1AF;
  margin: 0 0 10px;
  padding: 10px;
  font-size: 15px;
  border-radius: 6px;
  display: flex;
  align-items: start;
}
.activity .activity-list li .activity-user {
  margin-right: 10px;
}
.activity .activity-list li .activity-user > a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.activity .activity-list li .activity-content {
  background-color: #FFF;
  position: relative;
  flex: 1;
}
.activity .activity-list li .time {
  color: #838A9B;
  display: block;
  font-size: 12px;
  line-height: 1.35;
}
.activity .activity-list li a.name {
  color: #000;
}
.activity .activity-list li a {
  font-weight: 600;
  font-size: 14px;
}
.activity .activity-list li a:hover {
  color: #3D5EE1;
}
.activity .activity-list li a img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

#notification_item {
  position: relative;
}
#notification_item .notification-dropdown {
  right: 0;
  left: unset;
  transform: none;
  transition: 0.5s all;
  display: none;
  top: 50px;
}
#notification_item.notification-item-show .notification-dropdown {
  display: block;
  transition: 0.5s all;
  visibility: visible;
  opacity: 1;
}

#global-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-loader {
  position: relative;
  width: 48px;
  height: 48px;
}

.notification-status-dot {
  width: 6px;
  height: 6px;
  background: #E82646;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1;
}
.notification-status-dot:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate1 2s;
  animation: pulsate1 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid #F8BEC8;
  top: -2px;
  left: -2px;
  background: #F493A3;
  z-index: -1;
}

@-webkit-keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;
  }
}
@keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;
  }
}
.chat-status-dot {
  width: 6px;
  height: 6px;
  background: #05C3FB;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1;
}
.chat-status-dot:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate1 2s;
  animation: pulsate1 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid #B4EDFE;
  top: -2px;
  left: -2px;
  background: #82E1FD;
  z-index: -1;
}

.noti-delete {
  display: none;
  transition: 0.5s all;
}

.noti-hover:hover .noti-delete {
  display: block;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.sidebar-contact {
  position: fixed;
  top: 0%;
  right: -350px;
  transform: translateY(-50%);
  width: 350px;
  height: auto;
  background: #fff;
  box-sizing: border-box;
  transition: 0.5s;
  z-index: 9999;
}
.sidebar-contact .toggle-theme {
  position: absolute;
  width: 35px;
  text-align: center;
  cursor: pointer;
  background: #3D5EE1;
  top: 225px;
  right: 350px;
  padding: 6px;
  height: 35px;
  color: #FFF;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.sidebar-contact .toggle-theme .fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

#theme-settings {
  width: 26px;
  height: 26px;
  border: 1px solid #E9EDF4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}

.input-themeselect label {
  width: 100%;
}

.sidebar-themesettings {
  transition: all 0.5s;
  width: 400px !important;
  height: 100vh;
  z-index: 99999;
  overflow: auto;
  max-width: 100%;
}
.sidebar-themesettings.open {
  right: 0;
}
.sidebar-themesettings .themesettings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #E9EDF4;
}
.sidebar-themesettings .themesettings-header h4 {
  color: #202C4B;
  font-size: 18px;
}
.sidebar-themesettings .themesettings-inner .themesettings-content {
  border-bottom: 1px solid #E9EDF4;
  margin-bottom: 15px;
}
.sidebar-themesettings .themesettings-inner .themesettings-content h6 {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin-bottom: 15px;
}
.sidebar-themesettings .input-themeselect {
  background: #F4F6FA;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #E9EDF4;
  margin-bottom: 15px;
}
.sidebar-themesettings .input-themeselect input[type=radio] {
  display: none;
}
.sidebar-themesettings .input-themeselect input[type=radio]:checked ~ label .checkboxs-theme:after {
  background-color: #4A00E5;
  border-color: #4A00E5;
  content: "";
}
.sidebar-themesettings .input-themeselect input[type=radio]:checked ~ label .checkboxs-theme::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  right: 4px;
  position: absolute;
  top: -14px;
  z-index: 9;
}
.sidebar-themesettings .input-themeselect img {
  height: 80px;
}
.sidebar-themesettings .input-themeselect .checkboxs-theme {
  position: relative;
  width: 100%;
  display: block;
}
.sidebar-themesettings .input-themeselect .checkboxs-theme:after {
  position: absolute;
  content: "";
  border: 1px solid #E8E8E8;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  right: 0;
  top: -17px;
}

.sidebar-themeoverlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  top: 0;
  left: -100%;
  z-index: 10000;
}
.sidebar-themeoverlay.open {
  left: 0;
}

.sidebar-themesettings.offcanvas.offcanvas-end {
  width: 400px !important;
}

.theme-colorsset label {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: relative;
  border: 1px solid #E9EDF4;
  position: relative;
}
.theme-colorsset label::before {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.theme-colorsset label.primary-clr::before {
  background: #3D5EE1;
}
.theme-colorsset label.bg-primary::before {
  background: #3D5EE1;
}
.theme-colorsset label.violet-clr::before {
  background: #673AB7;
}
.theme-colorsset label.orange-clr::before {
  background: #FD7E14;
}
.theme-colorsset label.pink-clr::before {
  background: #E83E8C;
}
.theme-colorsset label.green-clr::before {
  background: #2CA87F;
}
.theme-colorsset label.red-clr::before {
  background: #DC2626;
}
.theme-colorsset input[type=radio] {
  display: none;
}
.theme-colorsset input[type=radio]:checked ~ label:after {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.theme-colorselect input[type=radio] {
  display: none;
}
.theme-colorselect input[type=radio]:checked ~ label {
  outline-color: #3D5EE1;
}
.theme-colorselect input[type=radio]:checked ~ label:after {
  content: "\f058";
  font-family: "Fontawesome";
  color: #3D5EE1;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.theme-colorselect input[type=radio]:checked ~ label.primary-topbar:after, .theme-colorselect input[type=radio]:checked ~ label.dark-topbar:after {
  color: #FFF;
}
.theme-colorselect label {
  width: 28px;
  height: 45px;
  border-radius: 5px;
  position: relative;
  outline-offset: 3px;
  outline: 1px solid #E9EDF4;
}
.theme-colorselect label.white-topbar {
  background: #FFF;
  border: 1px solid #E9EDF4;
}
.theme-colorselect label.dark-topbar {
  background: #202C4B;
}
.theme-colorselect label.primary-topbar {
  background: #3D5EE1;
}
.theme-colorselect label.grey-topbar {
  background: #E6E8EB;
}
.theme-colorselect label.bg-darkblack {
  background: #39435F;
}
.theme-colorselect label.bg-darkblue {
  background: #07396D;
}

.theme-layout.active img {
  border: 1px solid #3D5EE1;
  border-radius: 5px;
}
.theme-layout input[type=radio] {
  display: none;
}
.theme-layout input[type=radio]:checked ~ label .layout-img img {
  border-color: #3D5EE1;
}
.theme-layout input[type=radio]:checked ~ label .layout-type {
  position: relative;
  padding-left: 15px;
}
.theme-layout input[type=radio]:checked ~ label .layout-type:after {
  content: "\f058";
  font-family: "Fontawesome";
  color: #3D5EE1;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  display: block;
}
.theme-layout label .layout-img img {
  border: 1px solid #E9EDF4;
  border-radius: 5px;
}
.theme-layout label:after {
  display: none;
}

.theme-mode input[type=radio] {
  display: none;
}
.theme-mode input[type=radio]:checked ~ label {
  border-color: #3D5EE1;
}
.theme-mode input[type=radio]:checked ~ label .avatar {
  color: #3D5EE1;
  background-color: #F2F5FF;
}
.theme-mode label {
  border: 1px solid #E9EDF4;
}
.theme-mode label .avatar {
  background-color: #E9EDF4;
  color: #202C4B;
}

.theme-sidebarbg input[type=radio] {
  display: none;
}
.theme-sidebarbg input[type=radio]:checked ~ label img {
  border-color: #3D5EE1 !important;
}
.theme-sidebarbg label {
  height: 73px;
}
.theme-sidebarbg label img {
  width: 46px;
  height: 73px;
  object-fit: cover;
  border: 2px solid #E9EDF4;
}

.theme-sidebarcolor input[type=radio] {
  display: none;
}
.theme-sidebarcolor input[type=radio]:checked ~ label {
  border-color: #3D5EE1 !important;
  position: relative;
}
.theme-sidebarcolor input[type=radio]:checked ~ label:after {
  content: "\f058";
  font-family: "Fontawesome";
  color: #3D5EE1;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.theme-sidebarcolor input[type=radio]:checked ~ label.bg-dark:after {
  color: #FFF;
}
.theme-sidebarcolor label {
  width: 93px;
  height: 40px;
  border: 1px solid #E9EDF4;
}

.custom-btn-close {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #838A9B;
  color: #FFF;
  margin: 0;
  padding: 0;
  background-image: none;
}
.custom-btn-close:hover {
  background-color: #E82646;
}

/******* Components ******/
/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.avatar {
  position: relative;
  height: 2.625rem;
  width: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #FFF;
  font-weight: 500;
}
.avatar a.badge:hover {
  color: #FFF;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.avatar.avatar-rounded {
  border-radius: 50%;
}
.avatar.avatar-rounded img {
  border-radius: 50%;
}
.avatar.avatar-radius-0 {
  border-radius: 0;
}
.avatar.avatar-radius-0 img {
  border-radius: 0;
}
.avatar .avatar-badge {
  position: absolute;
  inset-block-start: -4%;
  inset-inline-end: -0.375rem;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.625rem;
  border: 2px solid #FFF;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar.online:before, .avatar.offline:before {
  position: absolute;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  inset-inline-end: 0;
  inset-block-end: 0;
  border: 2px solid #FFF !important;
  z-index: 1;
}
.avatar.online:before {
  background-color: #1ABE17;
}
.avatar.offline:before {
  background-color: #838A9B;
}
.avatar.avatar-xs {
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  font-size: 0.65rem;
}
.avatar.avatar-xs .avatar-badge {
  padding: 0.25rem;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.5rem;
  inset-block-start: -25%;
  inset-inline-end: -0.5rem;
}
.avatar.avatar-sm {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.65rem;
}
.avatar.avatar-sm .avatar-badge {
  padding: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  font-size: 0.5rem;
  inset-block-start: -28%;
  inset-inline-end: -0.45rem;
}
.avatar.avatar-sm.online:before, .avatar.avatar-sm.offline:before {
  width: 0.5rem;
  height: 0.5rem;
}
.avatar.avatar-md {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.8rem;
}
.avatar.avatar-md .avatar-badge {
  padding: 0.4rem;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.65rem;
  inset-block-start: -6%;
  inset-inline-end: -13%;
}
.avatar.avatar-md.online:before, .avatar.avatar-md.offline:before {
  width: 0.75rem;
  height: 0.75rem;
}
.avatar.avatar-md svg {
  width: 1.5rem;
  height: 1.5rem;
}
.avatar.avatar-lg {
  width: 2.813rem;
  height: 2.813rem;
  line-height: 2.813rem;
  font-size: 1rem;
}
.avatar.avatar-lg .avatar-badge {
  inset-block-start: -15%;
  inset-inline-end: -0.25%;
}
.avatar.avatar-lg.online:before, .avatar.avatar-lg.offline:before {
  width: 0.8rem;
  height: 0.8rem;
}
.avatar.avatar-lg svg {
  width: 1.8rem;
  height: 1.8rem;
}
.avatar.avatar-xl {
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  font-size: 1.25rem;
}
.avatar.avatar-xl .avatar-badge {
  inset-block-start: -8%;
  inset-inline-end: -0.2%;
}
.avatar.avatar-xl.online:before, .avatar.avatar-xl.offline:before {
  width: 0.95rem;
  height: 0.95rem;
}
.avatar.avatar-xxl {
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  font-size: 1.5rem;
}
.avatar.avatar-xxl .avatar-badge {
  inset-block-start: -4%;
  inset-inline-end: 0rem;
}
.avatar.avatar-xxl.online:before, .avatar.avatar-xxl.offline:before {
  width: 1.05rem;
  height: 1.05rem;
  inset-block-end: 0.25rem;
}
.avatar.avatar-xxxl {
  width: 6rem;
  height: 6rem;
  line-height: 6rem;
  font-size: 1.75rem;
}
.avatar.avatar-xxxl .avatar-badge {
  inset-block-start: -4%;
  inset-inline-end: 0rem;
}
.avatar.avatar-xxxl.online:before, .avatar.avatar-xxxl.offline:before {
  width: 1.05rem;
  height: 1.05rem;
  inset-block-end: 0.25rem;
}

.avatar-list-stacked {
  padding: 0;
}
.avatar-list-stacked.avatar-group-overlapped .avatar {
  margin-right: -0.875rem;
}
.avatar-list-stacked.avatar-group-overlapped .avatar:hover {
  z-index: 1;
}
.avatar-list-stacked.avatar-group-lg .avatar {
  width: 3.25rem;
  height: 3.25rem;
}
.avatar-list-stacked.avatar-group-lg .avatar > .initial-wrap {
  font-size: 0.95rem;
}
.avatar-list-stacked.avatar-group-lg.avatar-group-overlapped .avatar {
  margin-right: -1rem;
}
.avatar-list-stacked.avatar-group-sm .avatar {
  width: 2rem;
  height: 2rem;
}
.avatar-list-stacked.avatar-group-sm .avatar > .initial-wrap {
  font-size: 0.6rem;
}
.avatar-list-stacked.avatar-group-sm.avatar-group-overlapped .avatar {
  margin-right: -0.625rem;
}
.avatar-list-stacked.avatar-group-xs .avatar {
  width: 1rem;
  height: 1rem;
  margin-inline-end: -6px !important;
}
.avatar-list-stacked.avatar-group-xs .avatar > .initial-wrap {
  font-size: 0.6rem;
}
.avatar-list-stacked.avatar-group-xs.avatar-group-overlapped .avatar {
  margin-right: -6px;
}
.avatar-list-stacked .avatar {
  margin-inline-end: -0.875rem !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
  transition: transform ease 200ms;
}
.avatar-list-stacked .avatar:last-child {
  margin-inline-end: 0 !important;
}
.avatar-list-stacked .avatar:hover {
  z-index: 1;
  transform: translateY(-0.188rem);
}

.avatar-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.avatar-group .avatar {
  width: 2.625rem;
  height: 2.625rem;
}
.avatar-group .avatar .avatar-img,
.avatar-group .avatar > .initial-wrap {
  border: 2px solid #FFF;
  font-size: 0.9rem;
}
.avatar-group.avatar-group-overlapped .avatar {
  margin-right: -0.875rem;
}
.avatar-group.avatar-group-overlapped .avatar:hover {
  z-index: 1;
}
.avatar-group.avatar-group-lg .avatar {
  width: 3.25rem;
  height: 3.25rem;
}
.avatar-group.avatar-group-lg .avatar > .initial-wrap {
  font-size: 0.95rem;
}
.avatar-group.avatar-group-lg.avatar-group-overlapped .avatar {
  margin-right: -1rem;
}
.avatar-group.avatar-group-sm .avatar {
  width: 2rem;
  height: 2rem;
}
.avatar-group.avatar-group-sm .avatar > .initial-wrap {
  font-size: 0.6rem;
}
.avatar-group.avatar-group-sm.avatar-group-overlapped .avatar {
  margin-right: -0.625rem;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #3D5EE1;
  text-shadow: unset;
}

.bootstrap-datetimepicker-widget table th {
  font-size: 15px;
  font-weight: 500;
  color: #202C4B;
  width: 30px;
  height: 40px;
  line-height: 40px;
}
.bootstrap-datetimepicker-widget table th.prev, .bootstrap-datetimepicker-widget table th.next {
  padding-bottom: 16px;
}
.bootstrap-datetimepicker-widget table th.prev span, .bootstrap-datetimepicker-widget table th.next span {
  width: 24px;
  height: 24px;
  font-size: 12px;
  border: 1px solid #E9EDF4;
  border-radius: 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.bootstrap-datetimepicker-widget table th.prev span:hover, .bootstrap-datetimepicker-widget table th.next span:hover {
  background: #202C4B;
  border-color: #202C4B;
  color: #FFF;
}
.bootstrap-datetimepicker-widget table td {
  font-size: 15px;
  color: #515B73;
}
.bootstrap-datetimepicker-widget table td.day {
  width: 30px;
  height: 32px;
  line-height: 32px;
}

.bootstrap-datetimepicker-widget {
  z-index: 999 !important;
}
.bootstrap-datetimepicker-widget .picker-switch {
  padding-bottom: 16px;
}

.bootstrap-datetimepicker-widget table td.today:before {
  border-bottom-color: #3D5EE1;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  background: transparent;
}

.border-success {
  border-color: #1ABE17 !important;
}

.shadow-sm {
  box-shadow: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.36) !important;
}

.shadow-md {
  box-shadow: 0px 4px 9px -1px rgba(19, 16, 34, 0.03), 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05) !important;
}

.list-group-item {
  border-color: #E9EDF4 !important;
  color: inherit;
}

.list-group a.active {
  background: #ECEFFC;
  color: #3D5EE1;
}
.list-group a:hover {
  background: #ECEFFC;
  color: #3D5EE1;
}

.list-styled-dotted li {
  list-style-type: disc;
}

.custom-offcanvas.offcanvas.offcanvas-end {
  width: 600px !important;
}
.custom-offcanvas.offcanvas.offcanvas-end .offcanvas-header .close-btn {
  width: 20px;
  height: 20px;
  color: #FFF;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  background-color: #838A9B;
  border: 1px solid #838A9B;
}
.custom-offcanvas.offcanvas.offcanvas-end .offcanvas-header .close-btn:hover {
  background: #E82646;
  border-color: #E82646;
}

.w-40 {
  width: 40%;
}
@media (max-width: 767.98px) {
  .w-40 {
    width: 100%;
  }
}

hr {
  border-color: #E9EDF4;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.btn-primary {
  color: #FFF;
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  font-size: 14px;
  font-size: 14px;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check) + .btn:active {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
}

button {
  cursor: pointer;
}
button:focus {
  outline: 0;
  box-shadow: none;
}

.btn {
  border-radius: 5px;
  padding: 0.5rem 0.85rem;
  font-size: 14px;
  transition: all 0.5s;
  font-weight: 500;
}
.btn:focus {
  box-shadow: none !important;
}
.btn:hover {
  transition: all 0.5s;
}
.btn.btn-lg {
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
}
.btn.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.btn.btn-primary {
  background-color: #3D5EE1;
  border: 1px solid #3D5EE1;
  color: #FFF;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary.focus, .btn.btn-primary:active, .btn.btn-primary.active {
  background-color: rgb(33.5223214286, 70.396875, 216.7776785714);
  border: 1px solid rgb(33.5223214286, 70.396875, 216.7776785714);
  color: #FFF;
}
.btn.btn-secondary {
  background-color: #6FCCD8;
  border: 1px solid #6FCCD8;
  color: #FFF;
}
.btn.btn-secondary:hover, .btn.btn-secondary:focus, .btn.btn-secondary.focus, .btn.btn-secondary:active, .btn.btn-secondary.active {
  background-color: rgb(82.9081967213, 194.0508196721, 208.3918032787);
  border: 1px solid rgb(82.9081967213, 194.0508196721, 208.3918032787);
  color: #FFF;
}
.btn.btn-success {
  background-color: #1ABE17;
  border: 1px solid #1ABE17;
  color: #FFF;
}
.btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success.focus, .btn.btn-success:active, .btn.btn-success.active {
  background-color: rgb(21.6422535211, 158.1549295775, 19.1450704225);
  border: 1px solid rgb(21.6422535211, 158.1549295775, 19.1450704225);
  color: #FFF;
}
.btn.btn-info {
  background-color: #0F65CD;
  border: 1px solid #0F65CD;
  color: #FFF;
}
.btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info.focus, .btn.btn-info:active, .btn.btn-info.active {
  background-color: rgb(12.5659090909, 84.6104545455, 171.7340909091);
  border: 1px solid rgb(12.5659090909, 84.6104545455, 171.7340909091);
  color: #FFF;
}
.btn.btn-warning {
  background-color: #EAB300;
  border: 1px solid #EAB300;
  color: #FFF;
}
.btn.btn-warning:hover, .btn.btn-warning:focus, .btn.btn-warning.focus, .btn.btn-warning:active, .btn.btn-warning.active {
  background-color: rgb(198.3, 151.691025641, 0);
  border: 1px solid rgb(198.3, 151.691025641, 0);
  color: #FFF;
}
.btn.btn-danger {
  background-color: #E82646;
  border: 1px solid #E82646;
  color: #FFF;
}
.btn.btn-danger:hover, .btn.btn-danger:focus, .btn.btn-danger.focus, .btn.btn-danger:active, .btn.btn-danger.active {
  background-color: rgb(211.84625, 22.45375, 53.69375);
  border: 1px solid rgb(211.84625, 22.45375, 53.69375);
  color: #FFF;
}
.btn.btn-dark {
  background-color: #202C4B;
  border: 1px solid #202C4B;
  color: #FFF;
}
.btn.btn-dark:hover, .btn.btn-dark:focus, .btn.btn-dark.focus, .btn.btn-dark:active, .btn.btn-dark.active {
  background-color: rgb(21.323364486, 29.3196261682, 49.976635514);
  border: 1px solid rgb(21.323364486, 29.3196261682, 49.976635514);
  color: #FFF;
}
.btn.btn-light {
  background-color: #E9EDF4;
  border: 1px solid #E9EDF4;
  color: #FFF;
}
.btn.btn-light:hover, .btn.btn-light:focus, .btn.btn-light.focus, .btn.btn-light:active, .btn.btn-light.active {
  background-color: rgb(209.2, 217.5272727273, 232.1);
  border: 1px solid rgb(209.2, 217.5272727273, 232.1);
  color: #FFF;
}
.btn.btn-black {
  background-color: #000;
  border: 1px solid #000;
  color: #FFF;
}
.btn.btn-black:hover, .btn.btn-black:focus, .btn.btn-black.focus, .btn.btn-black:active, .btn.btn-black.active {
  background-color: hsl(0, 0%, -7%);
  border: 1px solid hsl(0, 0%, -7%);
  color: #FFF;
}
.btn.btn-purple {
  background-color: #4A00E5;
  border: 1px solid #4A00E5;
  color: #FFF;
}
.btn.btn-purple:hover, .btn.btn-purple:focus, .btn.btn-purple.focus, .btn.btn-purple:active, .btn.btn-purple.active {
  background-color: rgb(62.4637554585, 0, 193.3);
  border: 1px solid rgb(62.4637554585, 0, 193.3);
  color: #FFF;
}
.btn.btn-yellow {
  background-color: #ffff00;
  border: 1px solid #ffff00;
  color: #FFF;
}
.btn.btn-yellow:hover, .btn.btn-yellow:focus, .btn.btn-yellow.focus, .btn.btn-yellow:active, .btn.btn-yellow.active {
  background-color: rgb(219.3, 219.3, 0);
  border: 1px solid rgb(219.3, 219.3, 0);
  color: #FFF;
}
.btn.btn-teal {
  background-color: #02a8b5;
  border: 1px solid #02a8b5;
  color: #FFF;
}
.btn.btn-teal:hover, .btn.btn-teal:focus, .btn.btn-teal.focus, .btn.btn-teal:active, .btn.btn-teal.active {
  background-color: rgb(1.6098360656, 135.2262295082, 145.6901639344);
  border: 1px solid rgb(1.6098360656, 135.2262295082, 145.6901639344);
  color: #FFF;
}
.btn.btn-primary {
  background-color: #506EE4;
  border: 1px solid #506EE4;
  color: #FFF;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary.focus, .btn.btn-primary:active, .btn.btn-primary.active {
  background-color: rgb(49.0717821782, 84.3737623762, 223.2282178218);
  border: 1px solid rgb(49.0717821782, 84.3737623762, 223.2282178218);
  color: #FFF;
}
.btn.btn-light {
  background-color: #E9EDF4;
  border: 1px solid #E9EDF4;
  color: #515B73;
}
.btn.btn-light:hover, .btn.btn-light:focus, .btn.btn-light.focus, .btn.btn-light:active, .btn.btn-light.active {
  background-color: rgb(222.8, 228.6545454545, 238.9);
  border: 1px solid #E9EDF4;
  color: #515B73;
}
.btn.btn-white {
  background-color: #FFF;
  border-color: #FFF;
  color: #202C4B;
}

.btn-group .btn {
  padding: 0.45rem 0.75rem;
}

.btn-group-lg .btn {
  padding: 0.65rem 1rem;
}

.btn-group-sm .btn {
  padding: 0.25rem 0.5rem;
}

.btn.btn-w-xs {
  min-width: 5.625rem;
}
.btn.btn-w-sm {
  min-width: 6.975rem;
}
.btn.btn-w-md {
  min-width: 8.125rem;
}
.btn.btn-w-lg {
  min-width: 9.375rem;
}

.btn-icon i {
  padding: 0rem;
  margin: -0.5rem;
}
.btn-icon.btn-sm {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.8rem;
}
.btn-icon.btn-lg {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.2rem;
}

.btn-list > button, .btn-list > a {
  margin: 0 0.375rem 0.375rem 0;
}

[dir=rtl] .btn-list button,
[dir=rtl] .btn-list div,
[dir=rtl] .btn-list a,
[dir=rtl] .btn-list input {
  margin: 0 0 0.375rem 0.375rem;
}

.btn-list {
  margin-block-end: -0.5rem;
}

.btn-square {
  border-radius: 0;
}

.btn-group-pill .btn:first-child {
  border-radius: 60px 0 0 60px;
}

.btn-group-pill .btn:last-child {
  border-radius: 0 60px 60px 0;
}

.btn-group-square .btn:first-child {
  border-radius: 0px 0 0 0px;
}

.btn-group-square .btn:last-child {
  border-radius: 0 0px 0px 0;
}

.btn.btn-primary-light {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}
.btn.btn-primary-light:hover, .btn.btn-primary-light:focus, .btn.btn-primary-light:active {
  background-color: #3D5EE1;
  color: #FFF;
  border-color: #3D5EE1;
}
.btn.btn-secondary-light {
  background-color: rgba(111, 204, 216, 0.1);
  color: #6FCCD8;
}
.btn.btn-secondary-light:hover, .btn.btn-secondary-light:focus, .btn.btn-secondary-light:active {
  background-color: #6FCCD8;
  color: #FFF;
  border-color: #6FCCD8;
}
.btn.btn-warning-light {
  background-color: rgba(234, 179, 0, 0.1);
  color: #EAB300;
}
.btn.btn-warning-light:hover, .btn.btn-warning-light:focus, .btn.btn-warning-light:active {
  background-color: #EAB300;
  color: #FFF;
  border-color: #EAB300;
}
.btn.btn-info-light {
  background-color: rgba(15, 101, 205, 0.1);
  color: #0F65CD;
}
.btn.btn-info-light:hover, .btn.btn-info-light:focus, .btn.btn-info-light:active {
  background-color: #0F65CD;
  color: #FFF;
  border-color: #0F65CD;
}
.btn.btn-success-light {
  background-color: rgba(26, 190, 23, 0.1);
  color: #1ABE17;
}
.btn.btn-success-light:hover, .btn.btn-success-light:focus, .btn.btn-success-light:active {
  background-color: #1ABE17;
  color: #FFF;
  border-color: #1ABE17;
}
.btn.btn-danger-light {
  background-color: rgba(232, 38, 70, 0.1);
  color: #E82646;
}
.btn.btn-danger-light:hover, .btn.btn-danger-light:focus, .btn.btn-danger-light:active {
  background-color: #E82646;
  color: #FFF;
  border-color: #E82646;
}

.btn.btn-primary-ghost {
  background-color: transparent;
  color: #3D5EE1;
  border: 1px solid #3D5EE1;
}
.btn.btn-primary-ghost:active {
  color: #3D5EE1;
  border: 1px solid #3D5EE1;
  background-color: transparent;
}
.btn.btn-dark {
  background: #202C4B !important;
  border-color: #202C4B !important;
  box-shadow: none;
  color: #FFF;
}
.btn.btn-dark:hover {
  background: #252a30 !important;
}
.btn.btn-secondary-ghost {
  background-color: transparent;
  color: #6FCCD8;
  border: 1px solid #6FCCD8;
}
.btn.btn-secondary-ghost:active {
  color: #6FCCD8;
  border: 1px solid #6FCCD8;
  background-color: transparent;
}
.btn.btn-warning-ghost {
  background-color: transparent;
  color: #EAB300;
  border: 1px solid #EAB300;
}
.btn.btn-warning-ghost:active {
  color: #EAB300;
  border: 1px solid #EAB300;
  background-color: transparent;
}
.btn.btn-info-ghost {
  background-color: transparent;
  color: #0F65CD;
  border: 1px solid #0F65CD;
}
.btn.btn-info-ghost:active {
  color: #0F65CD;
  border: 1px solid #0F65CD;
  background-color: transparent;
}
.btn.btn-success-ghost {
  background-color: transparent;
  color: #1ABE17;
  border: 1px solid #1ABE17;
}
.btn.btn-success-ghost:active {
  color: #1ABE17;
  border: 1px solid #1ABE17;
  background-color: transparent;
}
.btn.btn-danger-ghost {
  background-color: transparent;
  color: #E82646;
  border: 1px solid #E82646;
}
.btn.btn-danger-ghost:active {
  color: #E82646;
  border: 1px solid #E82646;
  background-color: transparent;
}

.btn-list button {
  margin: 0 0.375rem 0.375rem 0;
}

.btn-outline-primary {
  border: 1px solid #3D5EE1 !important;
  color: #3D5EE1 !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.focus, .btn-outline-primary:active, .btn-outline-primary.active {
  background-color: #3D5EE1 !important;
  border: 1px solid #3D5EE1 !important;
  box-shadow: 0 3px 10px rgba(61, 94, 225, 0.5);
  color: #FFF !important;
}

.btn-outline-secondary {
  border: 1px solid #6FCCD8 !important;
  color: #6FCCD8 !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary.focus, .btn-outline-secondary:active, .btn-outline-secondary.active {
  background-color: #6FCCD8 !important;
  border: 1px solid #6FCCD8 !important;
  box-shadow: 0 3px 10px rgba(111, 204, 216, 0.5);
  color: #FFF !important;
}

.btn-outline-success {
  border: 1px solid #1ABE17 !important;
  color: #1ABE17 !important;
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success.focus, .btn-outline-success:active, .btn-outline-success.active {
  background-color: #1ABE17 !important;
  border: 1px solid #1ABE17 !important;
  box-shadow: 0 3px 10px rgba(26, 190, 23, 0.5);
  color: #FFF !important;
}

.btn-outline-danger {
  border: 1px solid #E82646 !important;
  color: #E82646 !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger.focus, .btn-outline-danger:active, .btn-outline-danger.active {
  background-color: #E82646 !important;
  border: 1px solid #E82646 !important;
  box-shadow: 0 3px 10px rgba(232, 38, 70, 0.5);
  color: #FFF !important;
}

.btn-outline-warning {
  border: 1px solid #EAB300 !important;
  color: #EAB300 !important;
}
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning.focus, .btn-outline-warning:active, .btn-outline-warning.active {
  background-color: #EAB300 !important;
  border: 1px solid #EAB300 !important;
  box-shadow: 0 3px 10px rgba(234, 179, 0, 0.5);
  color: #FFF !important;
}

.btn-outline-info {
  border: 1px solid #0F65CD !important;
  color: #0F65CD !important;
}
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info.focus, .btn-outline-info:active, .btn-outline-info.active {
  background-color: #0F65CD !important;
  border: 1px solid #0F65CD !important;
  box-shadow: 0 3px 10px rgba(15, 101, 205, 0.5);
  color: #FFF !important;
}

.btn-outline-light {
  border: 1px solid #E9EDF4 !important;
  color: #515B73 !important;
}
.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light.focus, .btn-outline-light:active, .btn-outline-light.active {
  background-color: #E9EDF4 !important;
  border: 1px solid #E9EDF4 !important;
  color: #515B73 !important;
}

.btn-outline-dark {
  border: 1px solid #202C4B !important;
  color: #202C4B !important;
}
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark.focus, .btn-outline-dark:active, .btn-outline-dark.active {
  background-color: #202C4B !important;
  border: 1px solid #202C4B !important;
  box-shadow: 0 3px 10px rgba(32, 44, 75, 0.5);
  color: #FFF !important;
}

.btn-soft-primary {
  background-color: #C5CFF6 !important;
  color: #3D5EE1 !important;
}
.btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary.focus, .btn-soft-primary:active, .btn-soft-primary.active {
  box-shadow: 0 3px 12px rgba(61, 94, 225, 0.2);
  border-color: #3D5EE1;
}

.btn-soft-secondary {
  background-color: #D4F0F3 !important;
  color: #6FCCD8 !important;
}
.btn-soft-secondary:hover, .btn-soft-secondary:focus, .btn-soft-secondary.focus, .btn-soft-secondary:active, .btn-soft-secondary.active {
  box-shadow: 0 3px 12px rgba(111, 204, 216, 0.2);
  border-color: #6FCCD8;
}

.btn-soft-success {
  background-color: #BAECB9 !important;
  color: #1ABE17 !important;
}
.btn-soft-success:hover, .btn-soft-success:focus, .btn-soft-success.focus, .btn-soft-success:active, .btn-soft-success.active {
  box-shadow: 0 3px 12px rgba(26, 190, 23, 0.2);
  border-color: #1ABE17;
}

.btn-soft-danger {
  background-color: #F8BEC8 !important;
  color: #E82646 !important;
}
.btn-soft-danger:hover, .btn-soft-danger:focus, .btn-soft-danger.focus, .btn-soft-danger:active, .btn-soft-danger.active {
  box-shadow: 0 3px 12px rgba(232, 38, 70, 0.2);
  border-color: #E82646;
}

.btn-soft-warning {
  background-color: #FDE9C1 !important;
  color: #EAB300 !important;
}
.btn-soft-warning:hover, .btn-soft-warning:focus, .btn-soft-warning.focus, .btn-soft-warning:active, .btn-soft-warning.active {
  box-shadow: 0 3px 12px rgba(234, 179, 0, 0.2);
  border-color: #EAB300;
}

.btn-soft-info {
  background-color: rgba(15, 101, 205, 0.3) !important;
  color: #0F65CD !important;
}
.btn-soft-info:hover, .btn-soft-info:focus, .btn-soft-info.focus, .btn-soft-info:active, .btn-soft-info.active {
  box-shadow: 0 3px 12px rgba(15, 101, 205, 0.2);
  border-color: #0F65CD;
}

.btn-soft-light {
  background-color: rgba(233, 237, 244, 0.9) !important;
  color: #6A7287 !important;
}
.btn-soft-light:hover, .btn-soft-light:focus, .btn-soft-light.focus, .btn-soft-light:active, .btn-soft-light.active {
  box-shadow: 0 3px 12px rgba(233, 237, 244, 0.2);
  border-color: #E9EDF4;
  border-color: #6A7287;
}

.btn-soft-dark {
  background-color: rgba(32, 44, 75, 0.3) !important;
  color: #FFF !important;
}
.btn-soft-dark:hover, .btn-soft-dark:focus, .btn-soft-dark.focus, .btn-soft-dark:active, .btn-soft-dark.active {
  box-shadow: 0 3px 12px rgba(32, 44, 75, 0.2);
  border-color: #202C4B;
}

.primary-hover:hover {
  background: #3D5EE1 !important;
  color: #FFF;
}

.page-loader {
  width: 48px;
  height: 48px;
  border: 4px solid;
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent #3D5EE1 #3D5EE1 transparent;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s ease-in-out infinite;
}

.page-loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  border: 12px solid;
  border-color: transparent #6FCCD8 #6FCCD8 transparent;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.warning-btn-hover:hover {
  background: #EAB300 !important;
  border-color: #EAB300 !important;
  color: #FFF;
}

.success-btn-hover:hover {
  background: #1ABE17 !important;
  border-color: #1ABE17 !important;
  color: #FFF;
}

.danger-btn-hover:hover {
  background: #E82646 !important;
  border-color: #E82646 !important;
  color: #FFF !important;
}

.secondary-btn-hover:hover {
  background: #6FCCD8 !important;
  border-color: #6FCCD8 !important;
  color: #FFF;
}

.primary-btn-hover:hover {
  background: #3D5EE1 !important;
  border-color: #3D5EE1 !important;
  color: #FFF !important;
}

@media (max-width: 575.98px) {
  .btn {
    padding: 5px 12px;
  }
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.badge.badge-primary {
  background: rgba(61, 94, 225, 0.1);
  box-shadow: 0 1px 1px rgba(61, 94, 225, 0.5);
  color: #3D5EE1;
}

.badge.badge-primary {
  background: #3D5EE1;
  color: #FFF;
}
.badge.badge-soft-primary {
  background: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}

.badge.badge-secondary {
  background: #6FCCD8;
  color: #FFF;
}
.badge.badge-soft-secondary {
  background: rgba(111, 204, 216, 0.1);
  color: #6FCCD8;
}

.badge.badge-success {
  background: #1ABE17;
  color: #FFF;
}
.badge.badge-soft-success {
  background: rgba(26, 190, 23, 0.1);
  color: #1ABE17;
}

.badge.badge-info {
  background: #0F65CD;
  color: #FFF;
}
.badge.badge-soft-info {
  background: rgba(15, 101, 205, 0.1);
  color: #0F65CD;
}

.badge.badge-warning {
  background: #EAB300;
  color: #FFF;
}
.badge.badge-soft-warning {
  background: rgba(234, 179, 0, 0.1);
  color: #EAB300;
}

.badge.badge-danger {
  background: #E82646;
  color: #FFF;
}
.badge.badge-soft-danger {
  background: rgba(232, 38, 70, 0.1);
  color: #E82646;
}

.badge.badge-dark {
  background: #202C4B;
  color: #FFF;
}
.badge.badge-soft-dark {
  background: rgba(32, 44, 75, 0.1);
  color: #202C4B;
}

.badge.badge-light {
  background: #E9EDF4;
  color: #FFF;
}
.badge.badge-soft-light {
  background: rgba(233, 237, 244, 0.1);
  color: #E9EDF4;
}

.badge.badge-black {
  background: #000;
  color: #FFF;
}
.badge.badge-soft-black {
  background: rgba(0, 0, 0, 0.1);
  color: #000;
}

.badge.badge-purple {
  background: #4A00E5;
  color: #FFF;
}
.badge.badge-soft-purple {
  background: rgba(74, 0, 229, 0.1);
  color: #4A00E5;
}

.badge.badge-yellow {
  background: #ffff00;
  color: #FFF;
}
.badge.badge-soft-yellow {
  background: rgba(255, 255, 0, 0.1);
  color: #ffff00;
}

.badge.badge-teal {
  background: #02a8b5;
  color: #FFF;
}
.badge.badge-soft-teal {
  background: rgba(2, 168, 181, 0.1);
  color: #02a8b5;
}

.badge {
  padding: 0.25rem 0.45rem;
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 4px;
}
.badge.badge-xs {
  font-size: 10px;
  padding: 0px 5px;
  line-height: 18px;
}
.badge.badge-sm {
  font-size: 11px;
  padding: 5px 8px;
  line-height: 11px;
}
.badge.badge-md {
  font-size: 12px;
  padding: 5px 12px;
  line-height: 1.5;
}
.badge.badge-lg {
  font-size: 14px;
  padding: 0px 10px;
  line-height: 30px;
}
.badge.badge-xl {
  font-size: 16px;
  padding: 0px 15px;
  line-height: 35px;
}
.badge.badge-soft-skyblue {
  background: #E6F9FF;
  color: #05C3FB;
}

.badge.arrow {
  width: 20px;
  height: 20px;
  background: #FBFBFD;
  color: #202C4B;
}
.badge.arrow:hover {
  background: #3D5EE1;
  color: #FFF;
}

.badge.bg-light.arrow:hover {
  background: #202C4B !important;
}

.badge-primary-hover:hover {
  background: #3D5EE1 !important;
  border-color: #3D5EE1 !important;
  color: #FFF !important;
}

.badge-danger-hover:hover {
  background: #E82646 !important;
  border-color: #E82646 !important;
  color: #FFF !important;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.border-container {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #E9EDF4;
}

.border {
  border: 1px solid #E9EDF4 !important;
}
.border.border-dashed {
  border-style: dashed !important;
}
.border.border-dotted {
  border-style: dotted !important;
}
.border.border-primary {
  border: 1px solid #3D5EE1 !important;
  opacity: 1;
}
.border.border-primary.border-opacity-10 {
  border-color: rgba(61, 94, 225, 0.1) !important;
}
.border.border-primary.border-opacity-25 {
  border-color: rgba(61, 94, 225, 0.25) !important;
}
.border.border-primary.border-opacity-50 {
  border-color: rgba(61, 94, 225, 0.5) !important;
}
.border.border-primary.border-opacity-75 {
  border-color: rgba(61, 94, 225, 0.75) !important;
}
.border.border-primary.border-opacity-100 {
  border-color: #3d5ee1 !important;
}
.border.border-secondary {
  border: 1px solid #6FCCD8 !important;
  opacity: 1;
}
.border.border-secondary.border-opacity-10 {
  border-color: rgba(111, 204, 216, 0.1) !important;
}
.border.border-secondary.border-opacity-25 {
  border-color: rgba(111, 204, 216, 0.25) !important;
}
.border.border-secondary.border-opacity-50 {
  border-color: rgba(111, 204, 216, 0.5) !important;
}
.border.border-secondary.border-opacity-75 {
  border-color: rgba(111, 204, 216, 0.75) !important;
}
.border.border-secondary.border-opacity-100 {
  border-color: #6fccd8 !important;
}
.border.border-info {
  border: 1px solid #0F65CD !important;
  opacity: 1;
}
.border.border-info.border-opacity-10 {
  border-color: rgba(15, 101, 205, 0.1) !important;
}
.border.border-info.border-opacity-25 {
  border-color: rgba(15, 101, 205, 0.25) !important;
}
.border.border-info.border-opacity-50 {
  border-color: rgba(15, 101, 205, 0.5) !important;
}
.border.border-info.border-opacity-75 {
  border-color: rgba(15, 101, 205, 0.75) !important;
}
.border.border-info.border-opacity-100 {
  border-color: #0f65cd !important;
}
.border.border-success {
  border: 1px solid #1ABE17 !important;
  opacity: 1;
}
.border.border-success.border-opacity-10 {
  border-color: rgba(26, 190, 23, 0.1) !important;
}
.border.border-success.border-opacity-25 {
  border-color: rgba(26, 190, 23, 0.25) !important;
}
.border.border-success.border-opacity-50 {
  border-color: rgba(26, 190, 23, 0.5) !important;
}
.border.border-success.border-opacity-75 {
  border-color: rgba(26, 190, 23, 0.75) !important;
}
.border.border-success.border-opacity-100 {
  border-color: #1abe17 !important;
}
.border.border-warning {
  border: 1px solid #EAB300 !important;
  opacity: 1;
}
.border.border-warning.border-opacity-10 {
  border-color: rgba(234, 179, 0, 0.1) !important;
}
.border.border-warning.border-opacity-25 {
  border-color: rgba(234, 179, 0, 0.25) !important;
}
.border.border-warning.border-opacity-50 {
  border-color: rgba(234, 179, 0, 0.5) !important;
}
.border.border-warning.border-opacity-75 {
  border-color: rgba(234, 179, 0, 0.75) !important;
}
.border.border-warning.border-opacity-100 {
  border-color: #eab300 !important;
}
.border.border-danger {
  border: 1px solid #E82646 !important;
  opacity: 1;
}
.border.border-danger.border-opacity-10 {
  border-color: rgba(232, 38, 70, 0.1) !important;
}
.border.border-danger.border-opacity-25 {
  border-color: rgba(232, 38, 70, 0.25) !important;
}
.border.border-danger.border-opacity-50 {
  border-color: rgba(232, 38, 70, 0.5) !important;
}
.border.border-danger.border-opacity-75 {
  border-color: rgba(232, 38, 70, 0.75) !important;
}
.border.border-danger.border-opacity-100 {
  border-color: #e82646 !important;
}
.border.border-white {
  border: 1px solid #FFF !important;
  opacity: 1;
}
.border.border-white.border-opacity-10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.border.border-white.border-opacity-25 {
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.border.border-white.border-opacity-50 {
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.border.border-white.border-opacity-75 {
  border-color: rgba(255, 255, 255, 0.75) !important;
}
.border.border-white.border-opacity-100 {
  border-color: white !important;
}
.border.border-light {
  border: 1px solid #E9EDF4 !important;
  opacity: 1;
}
.border.border-light.border-opacity-10 {
  border-color: rgba(233, 237, 244, 0.1) !important;
}
.border.border-light.border-opacity-25 {
  border-color: rgba(233, 237, 244, 0.25) !important;
}
.border.border-light.border-opacity-50 {
  border-color: rgba(233, 237, 244, 0.5) !important;
}
.border.border-light.border-opacity-75 {
  border-color: rgba(233, 237, 244, 0.75) !important;
}
.border.border-light.border-opacity-100 {
  border-color: #e9edf4 !important;
}
.border.border-dark {
  border: 1px solid #202C4B !important;
  opacity: 1;
}
.border.border-dark.border-opacity-10 {
  border-color: rgba(32, 44, 75, 0.1) !important;
}
.border.border-dark.border-opacity-25 {
  border-color: rgba(32, 44, 75, 0.25) !important;
}
.border.border-dark.border-opacity-50 {
  border-color: rgba(32, 44, 75, 0.5) !important;
}
.border.border-dark.border-opacity-75 {
  border-color: rgba(32, 44, 75, 0.75) !important;
}
.border.border-dark.border-opacity-100 {
  border-color: #202c4b !important;
}
.border.border-orange {
  border: 1px solid #FD7E14 !important;
  opacity: 1;
}
.border.border-orange.border-opacity-10 {
  border-color: rgba(253, 126, 20, 0.1) !important;
}
.border.border-orange.border-opacity-25 {
  border-color: rgba(253, 126, 20, 0.25) !important;
}
.border.border-orange.border-opacity-50 {
  border-color: rgba(253, 126, 20, 0.5) !important;
}
.border.border-orange.border-opacity-75 {
  border-color: rgba(253, 126, 20, 0.75) !important;
}
.border.border-orange.border-opacity-100 {
  border-color: #fd7e14 !important;
}
.border.border-opacity-10 {
  --bs-border-opacity: 0.1 !important;
}
.border.border-opacity-25 {
  --bs-border-opacity: 0.25 !important;
}
.border.border-opacity-50 {
  --bs-border-opacity: 0.5 !important;
}
.border.border-opacity-75 {
  --bs-border-opacity: 0.75 !important;
}
.border.border-opacity-100 {
  --bs-border-opacity: 1 !important;
}
.border.border-1 {
  border-width: 1px !important;
}
.border.border-2 {
  border-width: 2px !important;
}
.border.border-3 {
  border-width: 3px !important;
}
.border.border-4 {
  border-width: 4px !important;
}
.border.border-5 {
  border-width: 5px !important;
}
.border.border-block-start-dashed {
  border-top-style: dashed;
}
.border.border-block-start-dotted {
  border-top-style: dotted;
}
.border.border-inline-end-dashed {
  border-inline-end-style: dashed;
}
.border.border-inline-end-dotted {
  border-inline-end-style: dotted;
}
.border.border-block-end-dashed {
  border-bottom-style: dashed;
}
.border.border-block-end-dotted {
  border-bottom-style: dotted;
}
.border.border-inline-start-dashed {
  border-inline-start-style: dashed;
}
.border.border-inline-start-dotted {
  border-inline-start-style: dotted;
}
.border.border-0 {
  border: 0 !important;
}
.border.border-top-0 {
  border-block-start: 0 !important;
}
.border.border-end-0 {
  border-inline-end: 0 !important;
}
.border.border-bottom-0 {
  border-block-end: 0 !important;
}
.border.border-start-0 {
  border-inline-start: 0 !important;
}

.border-top {
  border-top: 1px solid #E9EDF4 !important;
}
.border-top.border-block-start-dashed {
  border-top-style: dashed !important;
}
.border-top.border-block-start-dotted {
  border-top-style: dotted !important;
}
.border-top.border-primary {
  border-color: #3D5EE1 !important;
}
.border-top.border-secondary {
  border-color: #6FCCD8 !important;
}
.border-top.border-warning {
  border-color: #EAB300 !important;
}
.border-top.border-info {
  border-color: #0F65CD !important;
}
.border-top.border-success {
  border-color: #1ABE17 !important;
}
.border-top.border-danger {
  border-color: #E82646 !important;
}
.border-top.border-light {
  border-color: #E9EDF4 !important;
}
.border-top.border-dark {
  border-color: #202C4B !important;
}

.border-end {
  border-inline-end: 1px solid #E9EDF4 !important;
}
.border-end.border-inline-end-dashed {
  border-inline-end-style: dashed !important;
}
.border-end.border-inline-end-dotted {
  border-inline-end-style: dotted !important;
}
.border-end.border-primary {
  border-color: #3D5EE1 !important;
}
.border-end.border-secondary {
  border-color: #6FCCD8 !important;
}
.border-end.border-warning {
  border-color: #EAB300 !important;
}
.border-end.border-info {
  border-color: #0F65CD !important;
}
.border-end.border-success {
  border-color: #1ABE17 !important;
}
.border-end.border-danger {
  border-color: #E82646 !important;
}
.border-end.border-light {
  border-color: #E9EDF4 !important;
}
.border-end.border-dark {
  border-color: #202C4B !important;
}

.border-bottom {
  border-bottom: 1px solid #E9EDF4 !important;
}
.border-bottom.border-block-end-dashed {
  border-bottom-style: dashed !important;
}
.border-bottom.border-block-end-dotted {
  border-bottom-style: dotted !important;
}
.border-bottom.border-primary {
  border-color: #3D5EE1 !important;
}
.border-bottom.border-secondary {
  border-color: #6FCCD8 !important;
}
.border-bottom.border-warning {
  border-color: #EAB300 !important;
}
.border-bottom.border-info {
  border-color: #0F65CD !important;
}
.border-bottom.border-success {
  border-color: #1ABE17 !important;
}
.border-bottom.border-danger {
  border-color: #E82646 !important;
}
.border-bottom.border-light {
  border-color: #E9EDF4 !important;
}
.border-bottom.border-dark {
  border-color: #202C4B !important;
}
.border-bottom.border-skyblue {
  border-color: #05C3FB !important;
}

.border-start {
  border-inline-start: 1px solid #E9EDF4 !important;
}
.border-start.border-inline-start-dashed {
  border-inline-start-style: dashed !important;
}
.border-start.border-inline-start-dotted {
  border-inline-start-style: dotted !important;
}
.border-start.border-primary {
  border-color: #3D5EE1 !important;
}
.border-start.border-secondary {
  border-color: #6FCCD8 !important;
}
.border-start.border-warning {
  border-color: #EAB300 !important;
}
.border-start.border-info {
  border-color: #0F65CD !important;
}
.border-start.border-success {
  border-color: #1ABE17 !important;
}
.border-start.border-danger {
  border-color: #E82646 !important;
}
.border-start.border-light {
  border-color: #E9EDF4 !important;
}
.border-start.border-dark {
  border-color: #202C4B !important;
}

.border-primary {
  border-color: #3D5EE1 !important;
}

.border-secondary {
  border-color: #6FCCD8 !important;
}

.border-warning {
  border-color: #EAB300 !important;
}

.border-info {
  border-color: #0F65CD !important;
}

.border-success {
  border-color: #1ABE17 !important;
}

.border-danger {
  border-color: #E82646 !important;
}

.border-skyblue {
  border-color: #05C3FB !important;
}

.border-3 {
  border-width: 3px !important;
}

.br-1 {
  border-radius: 0.0625rem;
}

.br-2 {
  border-radius: 0.125rem;
}

.br-3 {
  border-radius: 0.1875rem;
}

.br-4 {
  border-radius: 0.25rem;
}

.br-5 {
  border-radius: 0.3125rem !important;
}

.br-6 {
  border-radius: 0.375rem;
}

.br-7 {
  border-radius: 0.4375rem;
}

.br-8 {
  border-radius: 0.5rem;
}

.br-9 {
  border-radius: 0.5625rem;
}

.br-10 {
  border-radius: 0.625rem;
}

.br-15 {
  border-radius: 0.9375rem;
}

.br-20 {
  border-radius: 1.25rem;
}

.rounded {
  border-radius: 4px !important;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.calendar-events {
  border: 1px solid transparent;
  cursor: move;
  padding: 10px 15px;
}
.calendar-events:hover {
  border-color: #E9EDF4;
  background-color: #FFF;
}

.calendar-events i {
  margin-right: 8px;
}

.calendar {
  float: left;
  margin-bottom: 0;
}

.fc-toolbar.fc-header-toolbar {
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
  margin-bottom: 10px;
}
.fc-toolbar.fc-header-toolbar .fc-left, .fc-toolbar.fc-header-toolbar .fc-right {
  margin-bottom: 10px;
}

.fc-toolbar h2 {
  font-size: 18px;
  font-weight: 600;
  font-family: "Roboto", sans-serif;
  line-height: 30px;
  text-transform: uppercase;
}

.fc-day-grid-event .fc-time {
  font-family: "Roboto", sans-serif;
}

.fc-day {
  background: #FFF;
}

.fc-toolbar .fc-state-active,
.fc-toolbar .ui-state-active,
.fc-toolbar button:focus,
.fc-toolbar button:hover,
.fc-toolbar .ui-state-hover {
  z-index: 0;
}

.fc th.fc-widget-header {
  background: #F4F6FA;
  font-size: 14px;
  text-transform: uppercase;
}

.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-popover {
  border-color: #E9EDF4;
}

.fc-basic-view .fc-day-number,
.fc-basic-view .fc-week-number {
  padding: 2px 5px;
}

.fc-button {
  background: #F4F6FA;
  border: none;
  color: #515B73;
  text-transform: capitalize;
  box-shadow: none !important;
  border-radius: 5px !important;
  margin: 0 3px !important;
  padding: 6px 12px !important;
  height: auto !important;
}

.fc-text-arrow {
  font-family: inherit;
  font-size: 16px;
}

.fc-state-hover {
  background: #F8FAFC;
}

.fc-state-highlight {
  background: #F8FAFC;
}

.fc-state-down,
.fc-state-active,
.fc-state-disabled {
  background-color: #3D5EE1 !important;
  color: #FFF !important;
  text-shadow: none !important;
}

.fc-cell-overlay {
  background: #F8FAFC;
}

.fc-unthemed .fc-today {
  background: #FFF;
}

.fc-event {
  border-radius: 2px;
  border: none;
  color: #FFF !important;
  cursor: move;
  font-size: 13px;
  margin: 1px 7px;
  padding: 5px 5px;
  text-align: center;
}

.fc-basic-view td.fc-week-number span {
  padding-right: 8px;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}

.fc-basic-view td.fc-day-number {
  padding-right: 8px;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}

.event-form .input-group .form-control {
  height: 40px;
}

.fc-theme-standard .fc-scrollgrid {
  border: 1px solid #E9EDF4;
}

.fc .fc-col-header-cell-cushion {
  color: #202C4B;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
}

.fc th {
  background: #F4F6FA;
  border-color: #F4F6FA;
  height: 40px;
  line-height: 40px;
}
.fc th.columnheader:last-child {
  border-right: #F4F6FA;
}
.fc td {
  border-color: #E9EDF4;
}
.fc .fc-daygrid-day-number {
  color: #202C4B;
  font-size: 14px;
}
.fc .fc-toolbar-title {
  font-size: 18px;
  font-weight: 600;
  color: #202C4B;
}

.fc-event {
  border: 1px solid #FFF;
  border-radius: 5px;
  background: #FFF;
  color: #000;
  padding: 5px;
}
.fc-event.progress-danger {
  border-color: #E82646;
}
.fc-event.progress-info {
  border-color: #0F65CD;
}
.fc-event.progress-pending {
  border-color: #05C3FB;
}
.fc-event.progress-success {
  border-color: #1ABE17;
}

.fc-event-main {
  color: #202C4B !important;
}

.fc .fc-button-primary {
  background-color: #F4F6FA;
  border-color: #F4F6FA;
  color: #515B73;
  font-size: 14px;
  height: 26px;
  border-radius: 5px;
  padding: 2px 5px !important;
  text-transform: capitalize;
}
.fc .fc-button-primary:hover, .fc .fc-button-primary.active, .fc .fc-button-primary:active {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
}
.fc .fc-button-primary:focus {
  box-shadow: none;
}
.fc .fc-button-primary.fc-dayGridMonth-button, .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary.fc-today-button {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  height: 26px;
  border-radius: 0;
  border-width: 1px 0;
  padding: 0;
}
.fc .fc-button-primary.fc-dayGridMonth-button:hover, .fc .fc-button-primary:not(:disabled).fc-button-active:hover, .fc .fc-button-primary.fc-today-button:hover {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
}
.fc .fc-button-primary.fc-dayGridMonth-button:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary.fc-today-button:focus {
  box-shadow: none;
}
.fc .fc-button-primary.fc-custombtn-button {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  padding: 7px 20px 7px 40px !important;
}
.fc .fc-button-primary.fc-custombtn-button::before {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-family: "Fontawesome";
  content: "\f055";
}

.fc .fc-list-event:hover td {
  background-color: transparent;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.apexcharts-legend.apexcharts-align-center.position-right {
  display: none;
}

.apexcharts-toolbar {
  display: none !important;
}

#sales_charts,
.chart-set {
  overflow: hidden;
}

.apexcharts-canvas {
  width: 100% !important;
}

.apex-charts .apexcharts-canvas {
  margin: 0 auto;
}

.apexcharts-legend {
  padding: 0 !important;
}

.h-250 {
  height: 250px;
}

#attendance_chart2 {
  margin: 24px 0 0;
}
#attendance_chart2 .attendance-percentage {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100px;
  text-align: center;
  color: #515B73;
}
#attendance_chart2 .attendance-percentage span {
  font-size: 28px;
  color: #202C4B;
}
#attendance_chart2 .apexcharts-legend-marker {
  width: 8px !important;
  height: 3px !important;
  border-radius: 5px !important;
}

#attendance_chart {
  margin: 24px 0;
}
#attendance_chart .attendance-percentage {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  max-width: 100px;
  text-align: center;
  color: #515B73;
}
#attendance_chart .attendance-percentage span {
  font-size: 28px;
  color: #202C4B;
}
#attendance_chart .apexcharts-legend-marker {
  width: 8px !important;
  height: 3px !important;
  border-radius: 5px !important;
}

#exam-result-chart {
  margin-left: -15px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.chat-user-actives .call-meet-blk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  background: #FFF;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.chat-user-actives .call-meet-blk:hover {
  background-color: #000;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.chat-user-actives .call-meet-blk .meet-border {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  width: 39px;
  height: 39px;
  background: #FFF;
  border: 0.5px solid #B5B9C3;
  border-radius: 10px;
  margin-right: 10px;
}
.chat-user-actives .call-meet-blk .meet-border svg {
  width: 16px;
  color: #339DFF;
}
.chat-user-actives .call-meet-blk .recent-user-titles h5 {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin-bottom: 5px;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-user-actives .call-meet-blk .recent-user-titles p {
  font-size: 10px;
  color: #6A7287;
}

.new-join-link .chat-user-actives .meet-border {
  background: gray;
  border: 0;
  border-radius: 6px;
}
.new-join-link .chat-user-actives .meet-border:hover {
  background: #3D5EE1;
}
.new-join-link .chat-user-actives .meet-border:hover svg {
  color: #FFF;
}
.new-join-link .chat-user-actives .meet-border svg {
  color: #3D5EE1;
}
.new-join-link .chat-user-actives .recent-user-titles h5 {
  color: #3D5EE1;
  width: 100%;
  margin-bottom: 0;
  font-size: 15px;
}

.meet-chat-blk .join-call .join-video {
  position: relative;
  margin-bottom: 25px;
}
.meet-chat-blk .join-call .join-video img {
  border-radius: 10px;
}
.meet-chat-blk .join-call .join-video .video-avatar {
  color: #FFF;
  background: #5D5D5D;
  font-size: 50px;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.meet-chat-blk .join-call .join-video .video-avatar.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: 426px;
}
.meet-chat-blk .join-call .join-video .call-icons {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.meet-chat-blk .join-call .join-video .call-icons .call-items {
  border-radius: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
}
.meet-chat-blk .join-call .join-video .call-icons .call-items .call-item {
  display: inline-block;
  text-align: center;
  margin-right: 15px;
}
.meet-chat-blk .join-call .join-video .call-icons .call-items .call-item:last-child {
  margin-right: 0px;
}
.meet-chat-blk .join-call .join-video .call-icons .call-items .call-item a {
  color: #FFF;
  background: #FFF;
  border-radius: 10px;
  width: 54px;
  height: 54px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  font-size: 20px;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .meet-chat-blk .join-call .join-video .call-icons .call-items .call-item a {
    width: 45px;
    height: 45px;
  }
}
.meet-chat-blk .join-call .join-video .call-icons .call-items .call-item a i {
  color: #6A7287;
}
.meet-chat-blk .join-call .join-video .call-icons .call-items .call-item a.stop {
  color: #FFF;
  background: #E82646;
}
.meet-chat-blk .join-call .join-video .call-icons .call-items .call-item a.stop i {
  color: #FFF;
}
.meet-chat-blk .join-call .join-video .meet-drop ul li i {
  font-size: 18px;
}
.meet-chat-blk .join-call .join-content {
  text-align: center;
  max-width: 500px;
  margin: auto;
}
.meet-chat-blk .join-call .join-content h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}
@media (max-width: 767.98px) {
  .meet-chat-blk .join-call .join-content h4 {
    font-size: 18px;
  }
}
.meet-chat-blk .join-call .join-content p {
  font-size: 13px;
  color: #6A7287;
}

.conference-meet-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.conference-meet-group .meeting-list {
  width: 100%;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.conference-meet-group .meeting-list.add-meeting {
  width: 65%;
  margin-right: 24px;
}
@media (max-width: 767.98px) {
  .conference-meet-group .meeting-list.add-meeting {
    display: none;
    margin-right: 0px;
  }
}
.conference-meet-group .right-user-side {
  width: 0;
  opacity: 0;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.conference-meet-group .right-user-side.right-side-party {
  width: 0;
  opacity: 0;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.conference-meet-group .right-user-side.right-side-party .party-msg-blk .last-call-time .call-recent {
  background: none;
}
.conference-meet-group .right-user-side.right-side-party .party-msg-blk .last-call-time .call-recent svg {
  color: #3D5EE1;
  width: 14px;
}
.conference-meet-group .right-user-side.chat-rooms {
  width: 0;
  opacity: 0;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.conference-meet-group .right-user-side.chat-rooms .slime-grp {
  padding: 0;
}
.conference-meet-group .right-user-side.chat-rooms .slime-grp .left-chat-title {
  padding: 20px;
  border-bottom: 1px solid #E9EDF4;
  border-radius: 10px 10px 0 0;
}
.conference-meet-group .right-user-side.chat-rooms.open-chats {
  width: 35%;
  opacity: 1;
}
@media (max-width: 767.98px) {
  .conference-meet-group .right-user-side.chat-rooms.open-chats {
    width: 100%;
  }
}
.conference-meet-group .right-user-side.open-message {
  width: 35%;
  opacity: 1;
}
@media (max-width: 767.98px) {
  .conference-meet-group .right-user-side.open-message {
    width: 100%;
  }
}

.meet-drop {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  position: absolute;
  top: 20px;
  right: 20px;
}
.meet-drop.meet-mutes {
  background: #3D5EE1;
  right: inherit;
  left: 20px;
}
.meet-drop.meet-mutes ul li a {
  color: #FFF;
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
@media (max-width: 767.98px) {
  .meet-drop.meet-mutes ul li a {
    width: 38px;
    height: 38px;
  }
}
.meet-drop.meet-mutes-bottom {
  background: #3D5EE1;
  bottom: 20px;
  border-radius: 50px;
  top: inherit;
}
.meet-drop.meet-mutes-bottom ul li a {
  color: #FFF;
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
@media (max-width: 767.98px) {
  .meet-drop.meet-mutes-bottom ul li a {
    width: 38px;
    height: 38px;
  }
}
.meet-drop.meet-mutes-bottom ul li a i {
  font-size: 20px;
}

.meet-call-menu-blk .video-call-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
@media (max-width: 767.98px) {
  .meet-call-menu-blk .video-call-action {
    display: block;
  }
}
.meet-call-menu-blk .video-call-action ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.meet-call-menu-blk .video-call-action ul li {
  margin-right: 5px;
}
.meet-call-menu-blk .video-call-action ul li:last-child {
  margin-right: 0;
}
.meet-call-menu-blk .video-call-action ul li a {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: #CDD0D7;
  border: 1px solid #CDD0D7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  color: #000;
  font-size: 18px;
}
.meet-call-menu-blk .video-call-action ul li a.call-end {
  background-color: #E82646;
  border-color: #E82646;
  color: #FFF;
  width: 60px;
  height: 60px;
  rotate: 135deg;
  font-size: 20px;
}
.meet-call-menu-blk .video-call-action ul li a.stop {
  color: #FFF;
  background: #E82646;
  border-color: #E82646;
}
.meet-call-menu-blk .video-call-action ul li a.stop i {
  color: #FFF;
}
.meet-call-menu-blk .video-call-action ul li.active a {
  background: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
}
.meet-call-menu-blk .video-call-action ul li.active a img {
  filter: invert(1) brightness(100);
}
@media (max-width: 767.98px) {
  .meet-call-menu-blk .video-call-action ul {
    margin-bottom: 5px;
    justify-content: center;
  }
}
@media (max-width: 767.98px) {
  .meet-call-menu-blk .video-call-action ul:last-child {
    margin-bottom: 0px;
  }
}

.recording-time {
  position: relative;
  padding-left: 20px;
}
.recording-time::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 4px;
  background-color: #E82646;
  width: 13px;
  height: 13px;
  border-radius: 50px;
}
.recording-time::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  background-color: #FFF;
  width: 7px;
  height: 7px;
  border-radius: 50px;
  animation: blink-animation 1.5s steps(5, start) infinite;
  -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}

.page-content {
  width: 100%;
}

.join-call {
  width: 100%;
  margin: 0 auto;
}

.join-video {
  position: relative;
  margin-bottom: 25px;
}
.join-video img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.join-video.join-video-front img {
  height: 423px;
}

.video-avatar {
  color: #FFF;
  background: #B5B9C3;
  font-size: 50px;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.video-avatar h4 {
  font-weight: 700;
  font-size: 24px;
  color: #FFF;
}

.video-avatar.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.join-video.video-hide > img,
.video-wrap.video-hide > video {
  display: none;
}

.join-content p {
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 25px;
  color: #000;
}
.join-content label {
  font-size: 18px;
  margin-bottom: 0;
  color: #000;
  font-weight: 700;
}

.part-name {
  position: absolute;
  top: 20px;
  left: 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  padding: 5px 15px;
}
.part-name h4 {
  font-weight: 500;
  font-size: 15px;
  color: #6A7287;
  margin-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
  .part-name h4 {
    font-size: 13px;
  }
}
.part-name.sub-part-name {
  background: #FFF;
  bottom: 10px;
  top: inherit;
}
.part-name.sub-part-name h4 {
  color: #202C4B;
  font-size: 12px;
}

.grid-join .part-name {
  background: rgba(0, 0, 0, 0.3);
  top: inherit;
  bottom: 20px;
}
.grid-join .part-name h4 {
  color: #FFF;
}

.join-hover-img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.join-hover-img .event-user-group .avatar-group {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 10px;
  border-radius: 50px;
}
.join-hover-img .event-user-group .avatar-group .avatar {
  width: 26px;
  height: 26px;
  border: 1px solid #FFF;
}
.join-hover-img .event-user-group .avatar-group .avatar + .avatar {
  margin-left: -16px;
}
.join-hover-img .event-user-group .avatar-group .avatar:last-child {
  margin-right: 0px;
}

.more-icon {
  position: absolute;
  bottom: 10px;
  right: 12px;
}
@media (max-width: 767.98px) {
  .more-icon {
    bottom: 8px;
    right: 13px;
  }
}
.more-icon a {
  color: #6A7287;
  width: 30px;
  height: 30px;
  background: #FFF;
  border-radius: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.more-icon a:hover {
  opacity: 0.8;
}
.more-icon a.other-mic-off.stop i {
  color: #E82646;
}
.more-icon.audio-more-icon a.other-mic-off.stop {
  background-color: #E82646 !important;
}
.more-icon.audio-more-icon a.other-mic-off.stop i {
  color: #FFF;
}

.call-recent.recent-part a.other-mic-off.stop, .call-recent.recent-part a.other-video-off.stop {
  background: #E82646 !important;
}
.call-recent.recent-part a.other-mic-off.stop i, .call-recent.recent-part a.other-video-off.stop i {
  color: #FFF;
}

.meeting .part-name {
  top: 15px;
  left: 15px;
}
.meeting .more-icon {
  top: 15px;
  right: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.vertical-view .vertical-sec .part-name h4 {
  font-size: 14px;
  font-weight: 400;
}

.horizontal-view .join-video.single-user .part-name h4 {
  font-size: 14px;
  font-weight: 400;
}

.meeting-wrapper, .meeting {
  width: inherit;
  max-width: inherit;
}

.meet-footer {
  position: fixed;
  bottom: 25px;
  width: 100%;
  max-width: 950px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 3;
}

.show-chat-list, .show-invite-list,
.show-chat-list .user-sidebar-right,
.show-invite-list .invite-sidebar-right {
  transition: all 0.8s ease;
}

.user-sidebar-right, .invite-sidebar-right {
  background: #dedede;
  border-radius: 10px;
  width: 410px;
  position: absolute;
  top: 105px;
  bottom: 117px;
  right: 0;
  margin-right: -410px;
  transition: all 0.8s ease;
  overflow: hidden;
  font-size: 13px;
  z-index: 3;
}

.join-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.join-contents.grid-view {
  align-content: center;
}

.ripple {
  width: 114px;
  height: 114px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.multigrid-view .text-box {
  height: 61px;
  width: 61px;
}

.multigrid-view .ripple {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.meeting .join-video {
  margin: 0 5px 10px;
  width: 100%;
}

.join-video.user-active {
  background: #415B6A;
  border-radius: 10px;
  width: 100%;
  height: 370px;
}
.join-video.user-active.audio-calls {
  height: calc(100vh - 250px);
  padding: 60px 0;
}
.join-video.vertical-active {
  margin-right: 24px;
}
.join-video.single-user {
  width: 100%;
  min-height: 230px;
  box-sizing: border-box;
  margin-right: 24px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  text-align: center;
  height: auto;
  background: #415B6A;
  border-radius: 10px;
  padding: 0;
  flex-grow: 1;
}
@media (max-width: 1399.98px) {
  .join-video.single-user {
    width: 100%;
  }
}
@media (max-width: 1199.98px) {
  .join-video.single-user {
    min-height: 203px;
  }
}
@media (max-width: 991.98px) {
  .join-video.single-user {
    min-height: 230px;
  }
}
.join-video.single-user:nth-child(even) {
  margin-right: 0px;
}
@media (max-width: 767.98px) {
  .join-video.single-user:nth-child(even) {
    margin-right: 10px;
  }
}
@media (max-width: 767.98px) {
  .join-video.single-user {
    width: 100%;
    min-height: 257px;
  }
}

@media (max-width: 767.98px) {
  .multi-grid .join-video.single-user {
    width: 45%;
  }
}
.multi-grid .join-video.single-user:nth-child(even) {
  margin-right: 24px;
}
@media (max-width: 767.98px) {
  .multi-grid .join-video.single-user:nth-child(even) {
    margin-right: 0px;
  }
}
.multi-grid .join-video.single-user:nth-child(4n) {
  margin-right: 0px;
}
@media (max-width: 767.98px) {
  .multi-grid .join-video.single-user:nth-child(4n):nth-child(4n) {
    margin-right: 0px;
  }
}

.multigrid-view .join-video.single-user {
  flex-grow: 0;
}

.horizontal-view .join-video.single-user:nth-child(even) {
  margin-right: 24px;
}
.horizontal-view .join-video.single-user:nth-child(5) {
  margin-right: 0px;
}
@media (max-width: 767.98px) {
  .horizontal-view .join-video.single-user:nth-child(3n) {
    margin-right: 0;
  }
}

.text-avatar {
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.text-avatar h4 {
  color: #FFF;
}

.text-box {
  height: 86px;
  width: 86px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 36px;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.more-icon.mic-view .mic-on, .more-icon .mic-off {
  display: none;
}

.more-icon.mic-view .mic-off {
  display: inline-flex;
}

.grid-view .join-video.single-user {
  width: 47%;
}
@media (max-width: 767.98px) {
  .grid-view .join-video.single-user {
    width: 40%;
  }
}
@media (max-width: 767.98px) {
  .grid-view .join-video.single-user:nth-child(2n) {
    margin-right: 0px;
  }
}
@media (max-width: 767.98px) {
  .grid-view .join-video.single-user:nth-child(3n) {
    margin-right: 24px;
  }
}

.join-contents.multigrid-view {
  max-width: 100%;
  justify-content: center;
}

.meeting {
  position: absolute;
  top: 80px;
  bottom: 107px;
  left: 0;
  right: 0;
}

.meeting-list {
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
}

.user-active .more-icon .handraise-on {
  display: none;
}
.user-active .more-icon .handraise-on.active {
  display: block;
  animation: mymove 5s;
}

.user-active .more-icon .handraise-on.active .meeting .join-video.user-active::before {
  animation: mymove 5s infinite;
  opacity: 1;
}

@keyframes mymove {
  from {
    color: #0074E0;
  }
  to {
    color: transparent;
  }
}
.join-contents.vertical-view {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  align-content: center;
  max-width: 1300px;
}
@media (max-width: 767.98px) {
  .join-contents.vertical-view {
    display: block;
  }
}
.join-contents.vertical-view .join-video.user-active {
  flex: 1;
  margin-bottom: 24px;
}
.join-contents.vertical-view .join-video.single-user {
  width: 97%;
  flex-grow: 1;
  display: flex;
}
@media (max-width: 767.98px) {
  .join-contents.vertical-view .join-video.single-user {
    width: 100%;
  }
}
.join-contents.vertical-view .vertical-sec {
  width: 20%;
}
@media (max-width: 991.98px) {
  .join-contents.vertical-view .vertical-sec {
    width: 30%;
  }
}
@media (max-width: 767.98px) {
  .join-contents.vertical-view .vertical-sec {
    width: 100%;
  }
}
.join-contents.vertical {
  flex-direction: column;
  height: 200px;
}

.meeting .join-contents.vertical .join-video.user-active {
  flex: 1 0 100%;
}

.meeting .join-contents.vertical .join-video.single-user {
  flex: 0;
}

.meeting .join-contents.vertical .join-video {
  width: auto;
}

.chat-footer .btn:hover {
  background: rgb(31.4732142857, 66.09375, 203.5267857143);
  color: #FFF;
}

.join-contents.show-whiteboard {
  display: none;
}
.join-contents.single-view {
  padding-top: 0;
  margin-top: 25px;
  position: relative;
}
.join-contents.single-view .single-user {
  position: absolute;
  right: 8px;
  top: 40px;
  width: 130px;
  height: 130px;
  min-height: 130px;
}
.join-contents.single-view .single-user img {
  height: 130px;
}

.record-time {
  position: absolute;
  top: 20px;
  z-index: 1;
  position: absolute;
  left: 20px;
}
.record-time span {
  background-color: rgba(255, 255, 255, 0.2);
  display: inline-block;
  border-radius: 130px;
  color: #FFF;
  font-size: 14px;
  font-weight: 600;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 34px;
  position: relative;
  padding-left: 15px;
}
.record-time span:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  background-color: #FFF;
  width: 18px;
  height: 18px;
  border-radius: 50px;
}
.record-time span:after {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  background-color: #E82646;
  width: 8px;
  height: 8px;
  border-radius: 50px;
  animation: blink-animation 1.5s steps(5, start) infinite;
  -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.volume-col {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

.volume-col .inner-volume-col {
  background-color: #B5B9C3;
  border-radius: 130px;
  width: 30px;
  height: 120px;
  position: relative;
  z-index: 9;
}

.volume-col #volume {
  position: absolute;
  left: 50%;
  top: 15px;
  margin: 0 auto;
  height: 80px;
  width: 5px;
  background: #FFF;
  border-radius: 15px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.volume-col #volume .ui-slider-range-min {
  height: 5px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #3D5EE1;
  border: none;
  border-radius: 10px;
  outline: none;
}

.volume-col #volume .ui-slider-handle {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #3D5EE1;
  position: absolute;
  left: 50%;
  margin-top: -8px;
  cursor: pointer;
  outline: none;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.volume-col #player {
  width: auto;
  height: 104px;
  position: relative;
  margin: 0 auto;
  top: 0px;
}

.volume-col #player i {
  position: absolute;
  margin-top: -6px;
  color: #666;
}

.volume-col .volume-icons {
  color: #FFF;
  margin-left: 0px;
  font-size: 18px;
  margin-top: 22px;
}

.chat-msg-blk {
  padding: 15px;
}
.chat-msg-blk .chats {
  max-width: 100%;
  margin-bottom: 1.5rem;
  display: flex;
  display: -webkit-flex;
}
@media (max-width: 767.98px) {
  .chat-msg-blk .chats {
    max-width: 100%;
  }
}
.chat-msg-blk .chats .chat-action-btns .chat-user-time .chats-dot a {
  color: #2CA87F;
}
.chat-msg-blk .chats.chats-right {
  margin-left: auto;
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
}
.chat-msg-blk .chats.chats-right .chat-content {
  order: 1;
  -webkit-order: 1;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content {
  background-color: #E9EDF4;
  border-radius: 8px;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .chat-time {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col {
  position: relative;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col ul li {
  margin-right: 8px;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col ul li:last-child {
  margin-right: 0px;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col ul li .image-download-col {
  position: relative;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col ul li .image-download-col.image-not-download a img {
  -webkit-filter: blur(4px);
  filter: blur(1px);
  border-color: #000;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col ul li .image-download-col.image-not-download span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col ul li .image-download-col.image-not-download span i {
  color: #FFF;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col ul li .image-download-col .download-action {
  position: absolute;
  right: 8px;
  bottom: 8px;
  line-height: 0;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col ul li .image-download-col .download-action a {
  color: #FFF;
  font-size: 10px;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content .download-col ul li .image-download-col img {
  border-radius: 5px;
}
.chat-msg-blk .chats.chats-right .chat-content .message-content::before {
  border-bottom: 6px solid transparent;
  border-left: 6px solid #E9EDF4;
  border-right: 0;
  border-top: 6px solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  top: 8px;
  right: -4px;
  left: auto;
}
.chat-msg-blk .chats.chats-right .chat-action-btns {
  order: 2;
  -webkit-order: 2;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
}
.chat-msg-blk .chats.chats-right .chat-action-btns .chat-user-time .chats-dot a {
  color: #2CA87F;
}
.chat-msg-blk .chats .message-content {
  background-color: #E9EDF4;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  margin-bottom: 5px;
  position: relative;
}
.chat-msg-blk .chats .message-content h4 {
  font-size: 13px;
  color: #202C4B;
  margin-bottom: 0px;
  line-height: 1.4;
  font-weight: 500;
}
.chat-msg-blk .chats .message-content .chat-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  font-size: 10px;
  font-weight: 500;
  color: #2CA87F;
  margin-bottom: 0;
}
.chat-msg-blk .chats .message-content .chat-time svg {
  width: 10px;
}
.chat-msg-blk .chats .message-content::before {
  border-bottom: 6px solid transparent;
  border-right: 6px solid #E9EDF4;
  border-top: 6px solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  top: 8px;
  left: -4px;
  right: auto;
}
.chat-msg-blk .chats .chat-profile-name h6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: left;
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  font-size: 8px;
  font-weight: 500;
  color: #6A7287;
}
.chat-msg-blk .chats .chat-profile-name h6 i {
  font-size: 12px;
  color: #008024;
}
.chat-msg-blk .chat-line {
  margin: 0px 0 20px;
  position: relative;
  text-align: center;
  width: 100%;
}
.chat-msg-blk .chat-line:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background-color: #2CA87F;
  width: 100%;
  height: 1px;
}
.chat-msg-blk .chat-line .chat-date {
  background-color: #2CA87F;
  color: #2CA87F;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 3px;
  display: inline-block;
  font-weight: 600;
  position: relative;
}

.right-user-side.call-user-side .slime-grp .right-sidebar-profile {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  border-bottom: 0;
  padding-bottom: 10px;
}
.right-user-side.call-user-side .slime-grp .right-sidebar-profile .profile-call-blk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.right-user-side.call-user-side .slime-grp .right-sidebar-profile .edit-group svg {
  width: 16px;
  color: #2CA87F;
}
.right-user-side.call-user-side .slime-grp .chat-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  border-bottom: 1px solid #2CA87F;
  padding-bottom: 20px;
}
.right-user-side.call-user-side .slime-grp .chat-options ul li a {
  color: #2CA87F;
  width: 30px;
  height: 30px;
  background-color: gray;
  padding: 0;
  border-radius: 50px;
}
.right-user-side.call-user-side .slime-grp .chat-options ul li a:hover {
  background: #3D5EE1;
  border-color: #3D5EE1;
}
.right-user-side.call-user-side .slime-grp .chat-options ul li a:hover svg {
  color: #FFF;
}
.right-user-side.call-user-side .slime-grp .chat-options ul li a svg {
  width: 15px;
}
.right-user-side.right-side-party .slime-grp {
  padding: 0px;
}
.right-user-side.right-side-party .slime-grp .card-body-blk {
  padding: 20px;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list {
  border-radius: 0.25rem;
  display: flex;
  display: -webkit-flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  padding: 5px;
  display: flex;
  display: -webkit-flex;
  border-radius: 6px;
  background-color: #F6F7F8;
  margin-bottom: 10px;
  border: 0;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item:hover {
  background-color: #F6F7F8;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .avatar {
  margin-right: 0.8rem;
  display: inline-block;
  margin-bottom: 0;
  height: 40px;
  width: 40px;
  position: relative;
  flex-shrink: 0;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .avatar::before {
  top: 0;
  bottom: inherit;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .avatar img {
  border-radius: 0px;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  flex-grow: 1;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .name-list-user {
  display: grid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .name-list-user h5 {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 2px;
  color: #6A7287;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .name-list-user p {
  font-size: 12px;
  color: #E82646;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .name-list-user p svg {
  width: 14px;
  height: 14px;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .chat-user-time .chats-dot a {
  color: #E82646;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .last-chat-time .text-muted {
  font-size: 10px;
  color: #202C4B;
  font-weight: 500;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .last-chat-time .new-message-count {
  width: 20px;
  height: 20px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  line-height: 0;
  font-size: 11px;
  background-color: #3D5EE1;
  color: #FFF;
  border-radius: 50%;
  margin-left: auto;
  margin-top: 5px;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .last-call-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .last-call-time .call-recent a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  width: 30px;
  height: 30px;
  background: #B8BCC9;
  color: #202C4B;
  border-radius: 50px;
}
.right-user-side.right-side-party .slime-grp .card-body-blk .user-list .user-list-item .users-list-body .last-call-time .call-recent a svg {
  color: #202C4B;
}
.right-user-side .slimScrollDiv {
  height: calc(100vh - 110px) !important;
}
.right-user-side .slimScrollDiv .slimscroll {
  height: calc(100vh - 110px) !important;
}
.right-user-side.audio .slimScrollDiv {
  height: calc(100vh - 305px) !important;
}
.right-user-side.audio .slimScrollDiv .slimscroll {
  height: calc(100vh - 305px) !important;
}
.right-user-side .slime-grp {
  background: #FFF;
  padding: 15px;
}
.right-user-side .slime-grp .chat-footer {
  position: sticky;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 15px;
  background: #FFF;
  border-radius: 10px;
}
.right-user-side .slime-grp .chat-footer form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  position: relative;
}
.right-user-side .slime-grp .chat-footer form .comman-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.right-user-side .slime-grp .chat-footer form .comman-icon a {
  color: #6A7287;
}
.right-user-side .slime-grp .chat-footer form .smile-col {
  right: inherit;
  left: 15px;
}
.right-user-side .slime-grp .chat-footer form .attach-col {
  right: inherit;
  left: 45px;
}
.right-user-side .slime-grp .chat-footer form .micro-col {
  right: 50px;
  left: inherit;
}
.right-user-side .slime-grp .chat-footer form .micro-col a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16px;
}
.right-user-side .slime-grp .chat-footer form .send-chat {
  right: 5px;
}
.right-user-side .slime-grp .chat-footer form .send-chat a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  width: 34px;
  height: 34px;
  background: #3D5EE1;
  border-radius: 50px;
}
.right-user-side .slime-grp .chat-footer form .send-chat a:hover {
  background: #1b2950;
}
.right-user-side .slime-grp .chat-footer form .send-chat a:hover svg {
  color: #FFF;
}
.right-user-side .slime-grp .chat-footer form .send-chat a svg {
  width: 14px;
  color: #FFF;
}
.right-user-side .slime-grp .chat-footer form .chat_form {
  border-radius: 20px;
  margin-right: 0px;
  background: #FFF;
  border: 1px solid rgba(145, 158, 171, 0.3);
  border-radius: 6px;
  height: 48px;
  padding: 10px 70px;
}
.right-user-side .slime-grp .chat-footer form .chat_form::placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.2);
}

.owl-carousel.video-slide .owl-nav.disabled {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  width: 100%;
}
.owl-carousel.video-slide .owl-nav {
  top: calc(50% - 24px);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  position: absolute;
}
@media (max-width: 1399.98px) {
  .owl-carousel.video-slide .owl-nav {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
  }
}
.owl-carousel.video-slide .owl-nav button.owl-next, .owl-carousel.video-slide .owl-nav button.owl-prev {
  background-color: #F4F6FA;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  width: 20px;
  height: 20px;
}
.owl-carousel.video-slide .owl-nav button.owl-next:hover, .owl-carousel.video-slide .owl-nav button.owl-prev:hover {
  background-color: #3D5EE1;
}
.owl-carousel.video-slide .owl-nav button.owl-next:hover i, .owl-carousel.video-slide .owl-nav button.owl-prev:hover i {
  color: #FFF;
}
.owl-carousel.video-slide .owl-nav button.owl-next i, .owl-carousel.video-slide .owl-nav button.owl-prev i {
  color: #6A7287;
}

.audio-call-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  height: 100%;
}
.audio-call-group ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-evenly;
  -webkit-justify-content: space-evenly;
  -ms-flex-pack: space-evenly;
  width: 100%;
}
.audio-call-group ul li {
  position: relative;
}
.audio-call-group ul li.active .avatar::before {
  content: "";
  width: 220px;
  height: 220px;
  position: absolute;
  border: 1px solid #3D5EE1;
  border-radius: 50%;
  left: -25px;
  top: -25px;
}
@media (max-width: 991.98px) {
  .audio-call-group ul li.active .avatar::before {
    width: 150px;
    height: 150px;
    left: -10px;
    top: -10px;
  }
}
@media (max-width: 767.98px) {
  .audio-call-group ul li.active .avatar::before {
    width: 100px;
    height: 100px;
    left: -5px;
    top: -5px;
  }
}
.audio-call-group ul li .avatar {
  width: 170px;
  height: 170px;
  margin: 0;
  position: relative;
}
@media (max-width: 991.98px) {
  .audio-call-group ul li .avatar {
    width: 130px;
    height: 130px;
  }
}
@media (max-width: 767.98px) {
  .audio-call-group ul li .avatar {
    width: 90px;
    height: 90px;
  }
}
.audio-call-group ul li .avatar img {
  width: 100%;
  position: relative;
}
.audio-call-group ul li .user-audio-call h5 {
  font-size: 14px;
  color: #FFF;
  font-weight: 400;
  text-transform: capitalize;
  text-align: center;
  margin-top: 35px;
}
@media (max-width: 767.98px) {
  .audio-call-group ul li .user-audio-call h5 {
    margin-top: 15px;
  }
}
.audio-call-group ul li .more-icon {
  position: absolute;
  bottom: 10px;
  right: inherit;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 9;
}
@media (max-width: 767.98px) {
  .audio-call-group ul li .more-icon {
    bottom: 0px;
  }
}
.audio-call-group ul li .more-icon a {
  background-color: #3D5EE1;
  color: #FFF;
}

.audio-volume {
  position: absolute;
  width: fit-content;
  height: 134px;
  bottom: 20px;
  left: 20px;
  background: #B5B9C3;
  border-radius: 50px;
  padding: 10px 14px;
  width: 30px;
  padding-bottom: 30px;
}
.audio-volume .volume-icons a {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 30px;
  left: 0;
  border-radius: 50px;
  background: #FFF;
  border: 1px solid #EAB300;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}

.custom-input {
  width: 100%;
  height: 4px;
  width: 3px;
  height: 100%;
  background: #FFF;
  border-radius: 5px;
  writing-mode: vertical-lr;
}

.custom-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #3D5EE1 !important;
  border-radius: 50%;
  cursor: pointer;
}

.custom-input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #3D5EE1 !important;
  border-radius: 50%;
  cursor: pointer;
}

.table-top-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
@media (max-width: 575.98px) {
  .table-top-head.low-stock-top-head {
    flex-wrap: wrap;
    justify-content: start;
  }
}
.table-top-head.low-stock-top-head li {
  margin-bottom: 10px;
}
.table-top-head.low-stock-top-head li:last-child {
  margin-right: 0;
}
.table-top-head li {
  margin-right: 10px;
  flex-shrink: 0;
}
.table-top-head li:last-child {
  margin-right: 0;
}
.table-top-head li #collapse-header {
  margin-right: 0;
}
@media (max-width: 991.98px) {
  .table-top-head li #collapse-header {
    display: none;
  }
}
.table-top-head li a {
  height: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  border: 1px solid #B5B9C3;
  background: #FFF;
  border-radius: 8px;
  padding: 6px;
}
.table-top-head li a svg {
  color: #202C4B;
}
.table-top-head li a:hover {
  background: #e3e3e3;
}
.table-top-head li a label {
  margin-right: 10px;
}
.table-top-head li a.btn-secondary {
  background-color: #202C4B;
  color: #FFF;
  padding: 10px;
  font-weight: 700;
  font-size: 14px;
}
.table-top-head li a.btn-secondary:hover {
  background-color: #3D5EE1;
}
.table-top-head li a.btn-secondary svg {
  width: 16px;
  margin-right: 5px;
  color: #FFF;
}
@media (max-width: 767.98px) {
  .table-top-head li a.btn-secondary {
    padding: 5px;
    font-size: 14px;
  }
}
.table-top-head li a .action-edit.sales-action {
  color: #339DFF;
}
.table-top-head li .status-toggle {
  height: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  border: 1px solid #E6E8EB;
  background: #FFF;
  border-radius: 8px;
  padding: 6px 10px;
}
.table-top-head li .status-toggle label {
  margin-right: 10px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.main-chat-blk .slimscroll {
  height: calc(100vh - 60px) !important;
}
.main-chat-blk .slimscroll-active-sidebar a {
  color: #6A7287;
}
.main-chat-blk .emoj-group ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.main-chat-blk .emoj-group ul li + li {
  margin-left: 10px;
}
.main-chat-blk .emoj-group ul li a {
  width: 34px;
  height: 34px;
  background: #F4F6FA;
  border-radius: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.main-chat-blk .message-content {
  position: relative;
}
.main-chat-blk .message-content:hover .emoj-group {
  opacity: 1;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.main-chat-blk .emoj-group {
  position: absolute;
  top: 50%;
  right: -100px;
  opacity: 0;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.main-chat-blk .rig-emoji-group {
  position: absolute;
  right: 210px;
}
.main-chat-blk .wrap-emoji-group {
  position: absolute;
  right: 290px;
}
.main-chat-blk .emoj-group-list-foot {
  display: none;
  position: absolute;
  top: -50px;
  left: -90px;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.main-chat-blk .emoj-group-list-foot ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F4F6FA;
  border-radius: 50px;
  padding: 5px;
}
.main-chat-blk .emoj-group-list-foot ul li a {
  padding: 0;
  display: flex;
  align-items: center;
}
.main-chat-blk .emoj-group-list-foot ul li.add-emoj a {
  background: #F4F6FA;
}
.main-chat-blk .emoj-group-list-foot ul li.add-emoj a i {
  font-size: 20px;
}
.main-chat-blk .down-emoji-circle {
  position: absolute;
  left: 10px !important;
  top: -38px !important;
}
.main-chat-blk .emoj-action-foot .down-emoji-circle ul {
  padding: 10px;
}
.main-chat-blk .down-emoji-circle ul li + li {
  margin-left: 14px;
}
.main-chat-blk .emoj-action-foot .down-emoji-circle ul li:last-child a {
  width: 34px;
  height: 34px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-chat-blk .chat-page-wrapper .content {
  padding: 0;
}
.main-chat-blk .chat-page-wrapper .sidebar {
  position: initial;
}
@media (max-width: 991.98px) {
  .main-chat-blk .chat-page-wrapper .sidebar {
    margin-left: 0;
  }
}
.main-chat-blk .chat-page-wrapper .left-chat-title {
  padding: 12px;
  border-bottom: 1px solid #E9EDF4;
  min-height: 72px;
}
.main-chat-blk .chat-page-wrapper .setting-title-head h4 {
  font-size: 18px;
  color: #202C4B;
  font-weight: 700;
}
.main-chat-blk .chat-page-wrapper .chat .slimscroll {
  height: calc(100vh - 135px) !important;
}
.main-chat-blk .chat-page-wrapper .dropdown-menu .dropdown-item {
  font-size: 14px;
  cursor: pointer;
  padding: 7px 14px;
  font-weight: 500;
}
.main-chat-blk .chat-page-wrapper .dropdown-menu .dropdown-item i {
  font-size: 16px;
}
.main-chat-blk .chat-page-wrapper .dropdown-menu .dropdown-item span {
  float: right;
  font-size: 18px;
}
.main-chat-blk .chat-page-wrapper .dropdown-menu .dropdown-item.active {
  background: none;
  color: inherit;
}
.main-chat-blk .chat-page-wrapper .dropdown-menu {
  background: #FFF;
  box-sizing: border-box;
  box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  min-width: 173px;
}
.main-chat-blk .chat-page-wrapper .dropdown-menu .dropdown-item {
  margin: 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.main-chat-blk .chat-page-wrapper .dropdown-menu.chat-drop-menu .dropdown-item i {
  font-size: 16px;
}
.main-chat-blk .chat-page-wrapper .dropdown-menu .dropdown-item:hover,
.main-chat-blk .chat-page-wrapper .dropdown-menu .dropdown-item:focus,
.main-chat-blk .chat-page-wrapper .dropdown-menu .dropdown-item:active {
  background-color: #F4F6FA;
}
.main-chat-blk .chat-page-wrapper .dropdown-menu .dropdown-item span {
  margin-right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.main-chat-blk .chat-page-wrapper .contact-close_call {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@-webkit-keyframes wave {
  0%, 100%, 60% {
    -webkit-transform: initial;
    transform: initial;
  }
  30% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes wave {
  0%, 100%, 60% {
    -webkit-transform: initial;
    transform: initial;
  }
  30% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
.main-chat-blk .chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  background: #FFF;
}
.main-chat-blk .chat .chat-header {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  padding: 15px 24px;
  align-items: center;
  border-bottom: 1px solid #E9EDF4;
  background: #FFF;
  position: relative;
}
.main-chat-blk .chat .chat-header .user-details {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}
.main-chat-blk .chat .chat-header .user-details figure {
  margin-right: 1rem;
}
.main-chat-blk .chat .chat-header .user-details h5 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1;
  color: #202C4B;
}
.main-chat-blk .chat .chat-header .chat-options ul {
  margin-bottom: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}
.main-chat-blk .chat .chat-header .chat-options ul > li > a {
  font-size: 14px;
  color: #202C4B;
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.main-chat-blk .chat .chat-header .chat-options ul > li > a i {
  font-size: 20px;
}
.main-chat-blk .chat .chat-header .chat-options ul > li > a:not(.no-bg):hover {
  background-color: #E6E8EB;
  border-color: #E6E8EB;
}
.main-chat-blk .chat .chat-body {
  flex: 1;
  padding: 24px;
}
.main-chat-blk .chat .chat-body:not(.no-message) {
  overflow: hidden;
}
.main-chat-blk .chat .chat-body .messages {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: flex-start;
  -webkit-align-items: flex-start;
}
.main-chat-blk .chat .chat-body .messages .chats {
  max-width: 75%;
  margin-bottom: 1.5rem;
  display: flex;
  display: -webkit-flex;
}
.main-chat-blk .chat .chat-body .messages .chats:last-child {
  margin-bottom: 0;
}
.main-chat-blk .chat .chat-body .messages .chats .chat-time {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 0;
}
.main-chat-blk .chat .chat-body .messages .chats .chat-time .avatar {
  margin-right: 1rem;
}
.main-chat-blk .chat .chat-body .messages .chats .chat-time h5 {
  font-size: 15px;
  margin-bottom: 0;
}
.main-chat-blk .chat .chat-body .messages .chats .chat-time .time {
  color: #FFF;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
}
.main-chat-blk .chat .chat-body .messages .chats .chat-time .time i {
  color: rgba(247, 247, 247, 0.5);
}
.main-chat-blk .chat .chat-body .messages .chats .chat-time .time i img {
  width: 14px;
  height: auto;
  margin-left: 2px;
  vertical-align: 0px;
}
.main-chat-blk .chat .chat-body .messages .chats .message-content {
  border-radius: 0px 15px 15px 15px;
  background: #F2F5FF;
  padding: 14px 20px;
  color: #202C4B;
  font-size: 14px;
  font-weight: 400;
}
.main-chat-blk .chat .chat-body .messages .chats .message-content a {
  color: #299cdb;
}
.main-chat-blk .chat .chat-body .messages .chats .message-content.award-link a {
  color: #202C4B;
  margin-bottom: 2px;
  display: block;
}
.main-chat-blk .chat .chat-body .messages .chats .message-content.award-link img {
  border-radius: 10px;
}
.main-chat-blk .chat .chat-body .messages .chats .message-content.chat-award-link a {
  display: flex;
}
.main-chat-blk .chat .chat-body .messages .chats .message-content.fancy-msg-box .image-not-download span {
  position: absolute;
  color: #FFF;
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.main-chat-blk .chat .chat-body .messages .chat-profile-name h6 {
  margin-bottom: 0;
}
.main-chat-blk .chat .chat-body .messages .chat-profile-name h6 span {
  font-size: 12px;
  color: #838A9B;
  font-weight: 400;
  padding-left: 10px;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right {
  margin-left: auto;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .chat-time {
  justify-content: flex-end;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .message-content {
  border-radius: 15px 0px 15px 15px;
  background: #F2F5FF;
  color: #202C4B;
  padding: 15px;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .message-content .chat-time {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .message-content .chat-time .time {
  color: #838A9B;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .message-content .chat-time .time i {
  color: #299cdb;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .chat-action-btns {
  order: 2;
  -webkit-order: 2;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .chat-action-btns .chat-action-col {
  width: 20px;
  text-align: center;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .chat-action-btns .chat-read-col {
  display: flex;
  display: -webkit-flex;
  align-items: flex-end;
  -webkit-align-items: flex-end;
  padding-bottom: 22px;
  color: #6A7287;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .chat-content {
  order: 1;
  -webkit-order: 1;
}
.main-chat-blk .chat .chat-body .messages .chats.chats-right .chat-avatar {
  padding: 8px 0px 0 15px;
}
.main-chat-blk .chat .chat-body .messages .download-col {
  position: relative;
}
.main-chat-blk .chat .chat-body .messages .download-col ul {
  list-style: none;
  padding: 0;
  margin: 0 0 5px 0;
  display: flex;
  display: -webkit-flex;
}
.main-chat-blk .chat .chat-body .messages .download-col ul li + li {
  margin-left: 5px;
}
.main-chat-blk .chat .chat-body .messages .download-col .image-download-col {
  position: relative;
}
.main-chat-blk .chat .chat-body .messages .download-col .image-download-col a > img {
  border: 1px solid transparent;
  width: 80px;
  border-radius: 8px;
}
.main-chat-blk .chat .chat-body .messages .download-col .image-download-col.image-not-download a > img {
  -webkit-filter: blur(1px);
  filter: blur(1px);
}
.main-chat-blk .chat .chat-body .messages .file-download {
  position: relative;
  background: #E9EDF4;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 7px;
}
.main-chat-blk .chat .chat-body .messages .file-download .file-type {
  width: 54px;
  height: 54px;
  background-color: #FFF;
  border-radius: 4px;
}
.main-chat-blk .chat .chat-body .messages .file-download .file-type i {
  color: #838A9B;
  font-size: 24px;
}
.main-chat-blk .chat .chat-body .messages .file-download .file-details span.file-name {
  color: #202C4B;
  display: inline-block;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
}
.main-chat-blk .chat .chat-body .messages .file-download .file-details ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
  margin-bottom: 0;
}
.main-chat-blk .chat .chat-body .messages .file-download .file-details ul li {
  list-style: none;
  color: #202C4B;
  font-size: 14px;
  position: relative;
}
.main-chat-blk .chat .chat-body .messages .file-download .file-details ul li::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 13px;
  background: #C2C2C2;
  right: -8px;
  top: 5px;
}
.main-chat-blk .chat .chat-body .messages .file-download .file-details ul li:last-child::before {
  display: none;
}
.main-chat-blk .chat .chat-body .messages .file-download .file-details ul li a {
  color: #3D5EE1;
}
.main-chat-blk .chat .chat-body .messages .file-download .file-details ul li + li {
  padding-left: 15px;
}
.main-chat-blk .chat .chat-body.no-message {
  user-select: none;
}
.main-chat-blk .chat .chat-footer {
  position: relative;
}
.main-chat-blk .chat .chat-footer form {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
}
@media (max-width: 991.98px) {
  .main-chat-blk .chat .chat-footer form {
    padding-bottom: 15px;
  }
}
.main-chat-blk .chat .chat-footer form .form-buttons .btn {
  margin-left: 0px;
  color: #9CA1AF;
  font-size: 20px;
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.main-chat-blk .chat .chat-footer form .form-buttons .btn:last-child {
  margin-right: 0;
}
.main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #3D5EE1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #FFF !important;
  margin-left: 10px;
}
.main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn:hover {
  background-color: #FFF;
  border-color: #39435F;
}
.main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn:hover i {
  color: #39435F;
}
.main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn:focus {
  box-shadow: none;
}
.main-chat-blk .chat .chat-footer form .attach-col {
  right: inherit;
  left: 60px;
}
.main-chat-blk .chat .chat-footer form .attach-col i {
  color: #39435F;
  font-size: 20px;
}
.main-chat-blk .chat .chat-footer form .smile-col {
  right: inherit;
  left: 15px;
}
.main-chat-blk .chat .chat-footer form .smile-col i {
  color: #39435F;
  font-size: 20px;
  font-size: 22px;
}
.main-chat-blk .chat .chat-footer form .smile-foot {
  margin-right: 10px;
}
.main-chat-blk .chat .chat-footer form .smile-foot .action-circle {
  width: 38px;
  height: 38px;
  background: #FFF;
  border-radius: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.main-chat-blk .chat .chat-footer form .smile-foot .action-circle:hover {
  background-color: #E6E8EB;
  border-color: #E6E8EB;
}
.main-chat-blk .chat .chat-footer form .smile-foot .action-circle i {
  font-size: 18px;
}
.main-chat-blk .chat-options ul.list-inline .list-inline-item {
  margin-bottom: 0;
}
.main-chat-blk .chat-options.chat-option-profile .list-inline-item a {
  background: #3D5EE1;
  width: 38px;
  height: 38px;
  border-radius: 50px;
  color: #202C4B;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  color: #FFF !important;
}
.main-chat-blk .chat-options.chat-option-profile .list-inline-item a:hover {
  background: rgb(31.4732142857, 66.09375, 203.5267857143);
  color: #FFF;
}
.main-chat-blk .chat-options.chat-option-profile .list-inline {
  border-bottom: 1px solid #E9EDF4;
  margin-bottom: 0;
  padding-bottom: 15px;
}
.main-chat-blk .last-seen-profile span {
  color: #202C4B;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 12px;
  display: block;
}
.main-chat-blk .right_sidebar_profile {
  margin-top: 0px;
}
.main-chat-blk .chat-search {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
  opacity: 0;
  visibility: hidden;
}
.main-chat-blk .chat-search input[type=text] {
  padding: 8px 8px 8px 35px;
  width: 100%;
  min-height: 47px;
  border-radius: 0px 0px 5px 5px;
  background-color: #FFF;
  color: #202C4B;
}
.main-chat-blk .chat-search.visible-chat {
  opacity: 1;
  visibility: visible;
  top: 100%;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
  z-index: 9;
}
.main-chat-blk .form-control-feedback {
  z-index: 2;
  display: block;
  text-align: center;
  pointer-events: none;
  color: rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.main-chat-blk .form-control-feedback i {
  font-size: 16px;
  color: #202C4B;
}
.main-chat-blk .user-chat-search {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
  opacity: 0;
  visibility: hidden;
}
.main-chat-blk .user-chat-search input[type=text] {
  padding: 8px 8px 8px 35px;
  width: 100%;
  min-height: 47px;
  border-radius: 0px 0px 5px 5px;
  border: 1px solid #E5E7EB;
  font-size: 13px;
  background-color: #FFF;
  color: #202C4B;
  font-size: 15px;
  font-weight: 500;
}
.main-chat-blk .user-chat-search input[type=text]:hover {
  border-color: #CDD0D7;
}
.main-chat-blk .user-chat-search input[type=text]:focus {
  border-color: #CDD0D7;
}
.main-chat-blk .user-chat-search input[type=text]:focus-visible {
  border-color: #CDD0D7;
}
.main-chat-blk .user-chat-search.visible-chat {
  opacity: 1;
  visibility: visible;
  top: 100%;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
  z-index: 9;
}
.main-chat-blk .all-chats {
  position: relative;
}
.main-chat-blk .close-btn-chat {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  color: #202C4B;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  position: absolute;
  right: 12px;
  top: 9px;
  cursor: pointer;
}
.main-chat-blk .user-close-btn-chat {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  color: #202C4B;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  position: absolute;
  right: 12px;
  top: 9px;
  cursor: pointer;
}
.main-chat-blk .chat-avatar {
  padding: 8px 15px 0 8px;
  display: flex;
  display: -webkit-flex;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  flex-shrink: 0;
}
.main-chat-blk .chat-profile-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 5px;
}
.main-chat-blk .chat-profile-name .chat-action-col a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.main-chat-blk .chats.chats-right {
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
}
.main-chat-blk .chat-voice-group ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  padding: 0;
  margin-bottom: 0;
}
.main-chat-blk .chat-voice-group ul li span {
  width: 28px;
  height: 28px;
  background: #3D5EE1;
  border-radius: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.main-chat-blk .chat-voice-group li {
  margin-bottom: 0;
  color: #202C4B;
  font-size: 14px;
  font-weight: 400;
  list-style: none;
}
.main-chat-blk .chat-voice-group li + li {
  padding-left: 10px;
}
.main-chat-blk .review-files p {
  margin-bottom: 5px;
  color: #202C4B;
  font-size: 14px;
}
.main-chat-blk .like-chat-grp ul {
  padding: 0;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  margin-top: 10px;
}
.main-chat-blk .like-chat-grp ul li {
  list-style: none;
}
.main-chat-blk .like-chat-grp ul li a {
  border: 1px solid #E0E0E0;
  border-radius: 50px;
  padding: 3px 12px;
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  color: #202C4B;
  font-weight: 400;
  font-size: 14px;
}
.main-chat-blk .like-chat-grp ul li a img {
  margin-left: 5px;
}
.main-chat-blk .like-chat-grp ul li + li {
  margin-left: 10px;
}
.main-chat-blk .like-chat-grp ul li.like-chat a {
  background: #FEF6DC;
}
.main-chat-blk .like-chat-grp ul li.comment-chat a {
  background: #FFE8E9;
}
.main-chat-blk .chat-line {
  margin: 0px 0 20px;
  position: relative;
  text-align: center;
  width: 100%;
}
.main-chat-blk .chat-line:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background-color: #E9EDF4;
  width: 100%;
  height: 1px;
}
.main-chat-blk .chat-date {
  border-radius: 100px;
  background: #E9EDF4;
  color: #202C4B;
  font-size: 14px;
  padding: 4px 20px;
  display: inline-block;
  font-weight: 400;
  position: relative;
  border: 1px solid #E9EDF4;
}
.main-chat-blk .chat + .sidebar-group {
  margin-right: 0px;
}
.main-chat-blk .chat + .sidebar-group .sidebar {
  margin-right: 0px;
}
.main-chat-blk .chat-message-grp {
  padding: 24px;
  padding-top: 0;
}
.main-chat-blk .chat-message-grp ul {
  padding: 0;
}
.main-chat-blk .chat-message-grp ul li {
  list-style: none;
  margin-bottom: 15px;
}
.main-chat-blk .chat-message-grp ul li:last-child {
  margin-bottom: 0px;
}
.main-chat-blk .chat-message-grp ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}
.main-chat-blk .chat-message-grp ul li a:hover .stared-group h6 {
  color: #39435F;
}
.main-chat-blk .stared-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.main-chat-blk .stared-group span {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  margin-right: 10px;
  background: #F4F6FA;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.main-chat-blk .stared-group span i {
  font-size: 16px;
}
.main-chat-blk .count-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.main-chat-blk .count-group span {
  width: 16px;
  height: 16px;
  border-radius: 50px;
  color: #FFF;
  font-size: 10px;
  background: #3D5EE1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  margin-right: 5px;
}
.main-chat-blk .count-group i {
  color: #424242;
  font-size: 16px;
}
.main-chat-blk .nav.nav-tabs.chat-tabs .nav-item .nav-link {
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  background-color: transparent;
  border: 0;
}
.main-chat-blk .nav.nav-tabs.chat-tabs .nav-item .nav-link.active {
  font-size: 16px;
  font-weight: bold;
  color: #647EE7;
}
.main-chat-blk .header-top ul li a {
  color: #000;
  font-size: 18px;
}
.main-chat-blk .user-list {
  border-radius: 0.25rem;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}
.main-chat-blk .user-list li a {
  padding: 17px 20px;
  display: flex;
  display: -webkit-flex;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 10px;
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.main-chat-blk .user-list li .avatar {
  margin-right: 0.8rem;
  display: inline-block;
  margin-bottom: 0;
  height: 46px;
  width: 46px;
  border-radius: 50%;
  position: relative;
  z-index: 0;
}
.main-chat-blk .user-list .avatar > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-chat-blk .user-list .avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-chat-blk .avatar-away::before {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 0px;
  right: 2px;
  border: 2px solid #FFF;
  z-index: 9;
  background-color: #ffff00;
}
.main-chat-blk .avatar-offline::before {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 0px;
  right: 2px;
  border: 2px solid #FFF;
  z-index: 9;
}
.main-chat-blk .avatar-online::before {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 0px;
  right: 2px;
  border: 2px solid #FFF;
  z-index: 9;
  background-color: #2CA87F;
}
.main-chat-blk .animate-typing-col {
  color: #1ABE17;
}
.main-chat-blk .animate-typing-col .dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: -1px;
  background: #1ABE17;
  -webkit-animation: wave 1.3s linear infinite;
  animation: wave 1.3s linear infinite;
  opacity: 0.6;
}
.main-chat-blk .animate-typing-col .dot:nth-child(2) {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.main-chat-blk .animate-typing-col .dot:nth-child(3) {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.main-chat-blk .chat_form {
  border-radius: 20px;
  margin-right: 0px;
  background: #FFF;
  box-shadow: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.36);
  border-radius: 6px;
  height: 40px;
  padding: 10px 10px;
}
.main-chat-blk .contact-close a {
  color: #202C4B;
  opacity: 0.5;
  border-color: #B5B9C3;
}
.main-chat-blk .main-wrapper .content .sidebar-group.right-sidebar .sidebar {
  width: 310px;
}
.main-chat-blk .left-sidebar {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
}
.main-chat-blk .left-sidebar-wrap {
  background: #FFF;
  overflow: hidden;
  width: 448px;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  flex: 1;
}
.main-chat-blk .right-sidebar {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  background-color: #E9EDF4;
  opacity: 100%;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  position: relative;
  width: 320px;
}
.main-chat-blk .right-sidebar .right-sidebar-wrap {
  background-color: #FFF;
  border-left: 1px solid #E9EDF4;
  border-radius: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  height: calc(100vh - 0px);
}
.main-chat-blk .right-sidebar .right-sidebar-wrap .sidebar-body {
  padding: 0;
}
.main-chat-blk .right-sidebar .right-sidebar-wrap .right-sidebar-profile {
  padding: 24px;
  padding-bottom: 0;
  margin-bottom: 15px;
}
.main-chat-blk .right-sidebar .contact-close_call .close_profile {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  color: #202C4B;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
.main-chat-blk .right-sidebar .contact-close_call .close_profile.close-star {
  color: #EAB300;
}
.main-chat-blk .right-sidebar .contact-close_call .close_profile.close-trash {
  color: #E82646;
}
.main-chat-blk .right-sidebar.video-right-sidebar {
  width: 371px;
}
.main-chat-blk .right-sidebar.video-right-sidebar .chat {
  margin-left: 0 !important;
  display: block;
}
.main-chat-blk .right-sidebar.video-right-sidebar .chat .chat-body {
  padding-bottom: 110px;
}
.main-chat-blk .member-details {
  margin-bottom: 10px;
}
.main-chat-blk .chat-member-details {
  padding: 0 24px;
}
.main-chat-blk .chat-member-details .member-details ul {
  padding: 0;
  border-bottom: 1px solid #EDEDED;
}
.main-chat-blk .chat-member-details .member-details ul li {
  list-style: none;
  margin-bottom: 15px;
}
.main-chat-blk .chat-member-details .member-details ul li h6 {
  font-size: 15px;
  font-weight: 400;
  color: #202C4B;
  margin-bottom: 5px;
}
.main-chat-blk .chat-member-details .member-details ul li h5 {
  font-size: 15px;
  font-weight: 500;
  color: #202C4B;
  margin-bottom: 0px;
}
.main-chat-blk .chat-member-details .member-details ul li span {
  font-size: 16px;
  font-weight: 400;
  color: #202C4B;
}
.main-chat-blk .chat-member-details .member-details ul li a {
  font-size: 15px;
  font-weight: 500;
  color: #39435F;
  border-radius: 100px;
  padding: 5px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-chat-blk .chat-member-details .member-details ul li a:hover {
  color: #202C4B;
}
.main-chat-blk .chat-member-details .member-details ul li a + a {
  margin-left: 10px;
}
.main-chat-blk .right-sidebar.show-right-sidebar {
  margin-right: 0;
}
.main-chat-blk .right-sidebar.video-right-sidebar.show-right-sidebar {
  margin-right: 0;
}
.main-chat-blk .right-sidebar.hide-right-sidebar {
  margin-right: -320px;
}
.main-chat-blk .right-sidebar.video-right-sidebar.hide-right-sidebar {
  margin-right: -371px;
}
.main-chat-blk .chat-cont-type {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-chat-blk .chat-cont-type .chat-type-wrapper {
  margin-bottom: 0;
}
.main-chat-blk .chat-cont-type .chat-type-wrapper p {
  color: #838A9B;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 0;
}
.main-chat-blk .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #FFF;
  border: 1px solid #E9EDF4;
  border-radius: 50%;
}
.main-chat-blk .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.main-chat-blk .right-sidebar-profile > .avatar {
  background: rgba(66, 11, 161, 0.1);
}
.main-chat-blk .group_img {
  position: relative;
  display: inline-block;
}
.main-chat-blk .group-name-search {
  margin-bottom: 14px;
}
.main-chat-blk .right-sidebar-head {
  padding: 0px 24px;
}
.main-chat-blk .right-sidebar-head h5 {
  font-size: 15px;
  font-weight: 600;
  color: #202C4B;
  margin-bottom: 0px;
}
.main-chat-blk .right-sidebar-head.share-media .share-media-blk {
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs {
  border-bottom: 1px solid #E9EDF4;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .nav-tabs {
  margin-bottom: 15px;
  padding: 5px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .nav .nav-item.active {
  background: #3D5EE1;
  border-radius: 6px;
  color: #202C4B;
  color: #FFF;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .nav .nav-item {
  padding: 2px 10px;
  font-size: 14px;
  color: #202C4B;
  font-weight: 500;
  border: 0;
  margin-right: 10px;
  background: #fff;
  color: #202C4B;
  border-radius: 6px;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .nav .nav-item:last-child {
  margin-right: 0px;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .share-media-img li {
  margin: 0px 6px 6px 0px;
  position: relative;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .share-media-img li img {
  border-radius: 8px;
  width: 84px;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .share-media-img li span {
  position: absolute;
  color: #FFF;
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .share-media-img li span i {
  font-size: 20px;
  color: #FFF;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .share-media-img li:hover span i {
  color: #B5B9C3;
}
.main-chat-blk .right-sidebar-head.share-media .about-media-tabs .share-media-img li.blur-media img {
  filter: blur(2px);
}
.main-chat-blk .media-file {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  margin-bottom: 15px;
}
.main-chat-blk .media-file:last-child {
  margin-bottom: 0;
}
.main-chat-blk .media-doc-blk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.main-chat-blk .media-doc-blk span {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background: #F5F5F5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  margin-right: 10px;
}
.main-chat-blk .media-doc-blk span i {
  font-size: 24px;
}
.main-chat-blk .document-detail ul {
  padding: 0;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.main-chat-blk .document-detail ul li {
  list-style: none;
  color: #202C4B;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}
.main-chat-blk .document-detail ul li::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 13px;
  background: #C2C2C2;
  right: -8px;
  top: 5px;
}
.main-chat-blk .document-detail ul li:last-child::before {
  display: none;
}
.main-chat-blk .document-detail ul li + li {
  padding-left: 15px;
}
.main-chat-blk .document-detail h6 {
  color: #202C4B;
  font-size: 15px;
  font-weight: 500;
}
.main-chat-blk .media-download a {
  color: #202C4B;
}
.main-chat-blk .media-link-grp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 15px;
}
.main-chat-blk .media-link-detail h6 a {
  color: #202C4B;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 5px;
}
.main-chat-blk .media-link-detail span a {
  color: #202C4B;
  font-size: 14px;
  font-weight: 400;
  word-break: break-all;
}
.main-chat-blk .media-link-detail a:hover {
  color: #39435F;
}
.main-chat-blk .share-media-blk a {
  color: #39435F;
  font-weight: 500;
}
.main-chat-blk .link-img {
  flex-shrink: 0;
}
.main-chat-blk .link-img img {
  border-radius: 4px;
  margin-right: 10px;
}
.main-chat-blk .chat-action-col > a {
  color: #202C4B;
}
.main-chat-blk .dreams_chat {
  width: 40px;
  height: 40px;
  object-fit: cover;
}
.main-chat-blk .chatimage img {
  width: 120px;
  height: 120px;
}
.main-chat-blk .avatar-group .avatar + .avatar {
  margin-left: -0.75rem;
}
.main-chat-blk ul.list-inline .list-inline-item {
  margin-bottom: 0.5rem;
}
.main-chat-blk .avatar {
  border-radius: 50%;
}
.main-chat-blk .avatar > a {
  width: 100%;
  height: 100%;
  display: block;
  transition: color 0.3s;
  color: #3D5EE1;
}
.main-chat-blk .avatar > a > img,
.main-chat-blk .avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-chat-blk .avatar.avatar-sm {
  height: 1.3rem;
  width: 1.3rem;
}
.main-chat-blk .avatar.avatar-xl {
  height: 100px;
  width: 100px;
}
.main-chat-blk .add-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-chat-blk .add-section ul li {
  float: left;
  border-radius: 50px;
  width: 28px;
  height: 28px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.main-chat-blk .add-section ul li + li {
  margin-left: 10px;
}
.main-chat-blk .add-section ul li a {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  font-size: 20px;
}
.main-chat-blk .all-chats .add-section ul li:hover {
  background-color: #F4F6FA;
  border-color: #F4F6FA;
}
.main-chat-blk .online {
  color: #1ABE17;
  font-weight: 500;
}
.main-chat-blk .fav-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  margin-bottom: 15px;
}
.main-chat-blk .fav-title h6 {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.main-chat-blk .fav-title h6 i {
  font-size: 22px;
}
.main-chat-blk .fav-title a {
  margin-bottom: 0;
  color: #3D5EE1;
  font-weight: 500;
}
.main-chat-blk .fav-title a:hover {
  color: rgb(31.4732142857, 66.09375, 203.5267857143);
}
.main-chat-blk .profile-name span {
  color: #6A7287;
  font-size: 12px;
  display: inline-block;
  margin-top: 9px;
}
.main-chat-blk .dropdown-menu .dropdown-item span.edit-profile-icon,
.main-chat-blk .dropdown-menu .dropdown-item span.profile-icon-col {
  font-size: 15px;
}
.main-chat-blk .avatar {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.main-chat-blk .avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-chat-blk .avatar-away::before,
.main-chat-blk .avatar-offline::before,
.main-chat-blk .avatar-online::before {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  content: "";
  border: 2px solid #FFF;
}
.main-chat-blk .avatar-online::before {
  background-color: #1ABE17;
}
.main-chat-blk .avatar-offline::before {
  background-color: #E82646;
}
.main-chat-blk .avatar-away::before {
  background-color: #EAB300;
}
.main-chat-blk .avatar .border {
  border-width: 3px !important;
}
.main-chat-blk .avatar .rounded {
  border-radius: 6px !important;
}
.main-chat-blk .avatar-xs {
  width: 1.65rem;
  height: 1.65rem;
}
.main-chat-blk .avatar-xs .border {
  border-width: 2px !important;
}
.main-chat-blk .avatar-xs .rounded {
  border-radius: 4px !important;
}
.main-chat-blk .avatar-xs.avatar-away::before,
.main-chat-blk .avatar-xs.avatar-offline::before,
.main-chat-blk .avatar-xs.avatar-online::before {
  border-width: 1px;
}
.main-chat-blk .avatar-sm {
  width: 2.5rem;
  height: 2.5rem;
}
.main-chat-blk .avatar-sm .border {
  border-width: 3px !important;
}
.main-chat-blk .avatar-sm .rounded {
  border-radius: 4px !important;
}
.main-chat-blk .avatar-sm.avatar-away::before,
.main-chat-blk .avatar-sm.avatar-offline::before,
.main-chat-blk .avatar-sm.avatar-online::before {
  border-width: 2px;
}
.main-chat-blk .avatar-lg .border {
  border-width: 3px !important;
}
.main-chat-blk .avatar-lg .rounded {
  border-radius: 8px !important;
}
.main-chat-blk .avatar-lg.avatar-away::before,
.main-chat-blk .avatar-lg.avatar-offline::before,
.main-chat-blk .avatar-lg.avatar-online::before {
  border-width: 3px;
}
.main-chat-blk .avatar-xl {
  width: 5rem;
  height: 5rem;
}
.main-chat-blk .avatar-xl .border {
  border-width: 4px !important;
}
.main-chat-blk .avatar-xl .rounded {
  border-radius: 8px !important;
}
.main-chat-blk .avatar-xl.avatar-away::before,
.main-chat-blk .avatar-xl.avatar-offline::before,
.main-chat-blk .avatar-xl.avatar-online::before {
  border-width: 4px;
}
.main-chat-blk .avatar-xxl {
  width: 5.125rem;
  height: 5.125rem;
}
.main-chat-blk .avatar-xxl .border {
  border-width: 6px !important;
}
.main-chat-blk .avatar-xxl .rounded {
  border-radius: 8px !important;
}
.main-chat-blk .avatar-xxl.avatar-away::before,
.main-chat-blk .avatar-xxl.avatar-offline::before,
.main-chat-blk .avatar-xxl.avatar-online::before {
  border-width: 4px;
}
.main-chat-blk .contact-close {
  float: right;
  left: 95%;
  right: 0px;
  position: relative;
  top: 5%;
}
.main-chat-blk .nav.nav-tabs {
  border: none;
  line-height: 2;
}
.main-chat-blk .badge {
  padding: 5px 10px;
  font-size: 11px;
}
.main-chat-blk .badge.badge-success {
  background: #1ABE17;
}
.main-chat-blk .badge.badge-danger {
  background: #E82646;
}
.main-chat-blk .badge.badge-secondary {
  background: #6FCCD8;
}
.main-chat-blk .badge.badge-info {
  background: #0F65CD;
}
.main-chat-blk .badge.badge-warning {
  background: #EAB300;
}
.main-chat-blk .badge.badge-primary {
  background: #3D5EE1;
}
.main-chat-blk .btn {
  position: relative;
}
.main-chat-blk .btn .badge {
  padding: 2px 6px;
  right: 7px;
  top: -7px;
  position: absolute;
}
.main-chat-blk .input-group .input-group-text {
  font-size: 14px;
}
.main-chat-blk .tooltip > .tooltip-inner {
  text-align: left;
  max-width: 500px;
  --bs-tooltip-bg: $primary;
}
.main-chat-blk .tooltip {
  --bs-tooltip-bg: $primary;
}
.main-chat-blk .tooltip .arrow {
  display: none;
  background-color: #3D5EE1;
}
.main-chat-blk .tooltip .tooltip-inner {
  background-color: #3D5EE1;
}
.main-chat-blk .sticky-top {
  z-index: auto;
}
.main-chat-blk .tab-content {
  padding-top: 30px;
}
.main-chat-blk .main-wrapper {
  height: 100vh;
  overflow: hidden;
}
.main-chat-blk .main-wrapper .content {
  display: flex;
  display: -webkit-flex;
}
.main-chat-blk .main-wrapper .content .sidebar-group {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  position: relative;
  z-index: 99;
  width: 340px;
}
@media (max-width: 767.98px) {
  .main-chat-blk .main-wrapper .content .sidebar-group {
    width: 100%;
  }
}
.main-chat-blk .main-wrapper .content .sidebar-group .sidebar {
  background: #FFF;
  overflow: hidden;
  width: 340px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-right: 1px solid #E9EDF4;
}
@media (max-width: 767.98px) {
  .main-chat-blk .main-wrapper .content .sidebar-group .sidebar {
    width: 100% !important;
  }
}
.main-chat-blk .main-wrapper .content .sidebar-group .sidebar:not(.active) {
  display: none;
}
.main-chat-blk .chat-header ul {
  margin-bottom: 0;
}
.main-chat-blk .chat-header ul li:not(.list-inline-item) {
  margin-bottom: 0;
  width: 48px;
  margin-right: 15px !important;
}
.main-chat-blk .chat-header ul li:last-child {
  margin-right: 0 !important;
}
.main-chat-blk .sidebar-body {
  flex: 1;
  overflow: auto;
  padding: 24px 24px 10px;
  width: 100%;
}
.main-chat-blk .pin-chat img {
  margin-right: 6px;
}
.main-chat-blk .sidebar-body .profile-name {
  font-weight: 600;
  color: #202C4B;
  font-size: 18px;
  margin-bottom: 0;
}
.main-chat-blk .sidebar .user-list li a {
  padding: 10px;
  display: flex;
  display: -webkit-flex;
  cursor: pointer;
  margin-bottom: 15px;
  border: 1px solid #E9EDF4;
  box-shadow: none;
  border-radius: 5px;
  position: relative;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
}
.main-chat-blk .sidebar .user-list li a:hover {
  background-color: #F4F6FA;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
}
.main-chat-blk .sidebar .user-list li figure {
  margin-right: 1rem;
}
.main-chat-blk .sidebar .user-list li.unread h5 {
  color: #FFF;
}
.main-chat-blk .sidebar .user-list li.unread p {
  color: #FFF;
}
.main-chat-blk .rightside_tab {
  padding-top: 5px !important;
}
.main-chat-blk .chat-pin {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
}
.main-chat-blk .chat-pin .green-check {
  color: #1ABE17;
}
.main-chat-blk .chat-pin img {
  width: 10px;
}
.main-chat-blk .group-setting .stared-group span {
  width: 50px;
  height: 50px;
}
.main-chat-blk .check-star i {
  color: #EAB300;
}
.main-chat-blk .emoj-group-list {
  display: none;
  position: absolute;
  top: -50px;
  left: -90px;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.main-chat-blk .emoj-group-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F4F6FA;
  border-radius: 50px;
  padding: 5px;
}
.main-chat-blk .emoj-group-list ul li a {
  padding: 0;
}
.main-chat-blk .emoj-group-list ul li.add-emoj a {
  background: #F4F6FA;
}
.main-chat-blk .emoj-group-list ul li.add-emoj a i {
  font-size: 20px;
}
.main-chat-blk .chat .slimscroll {
  height: calc(100vh - 60px) !important;
}
.main-chat-blk .bootstrap-datetimepicker-widget span {
  position: relative;
}

.chat-window .card .card-header {
  background-color: #FFF;
  border-bottom: 1px solid #B5B9C3;
}
.chat-window .badge-success {
  background-color: #1ABE17 !important;
}

.chat-page .footer {
  display: none;
}

.chat-search .input-group .form-control {
  margin: 0;
  padding: 0 0 0 36px;
  height: 46px;
}
.chat-search .input-group .input-group-prepend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  color: #515B73;
  pointer-events: none;
  z-index: 4;
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
}

.chat-cont-left .chat-scroll {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 0;
}
.chat-cont-left .chat-scroll .media {
  border-bottom: 1px solid #B5B9C3;
  margin: 0;
  padding: 10px;
  -webkit-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}
.chat-cont-left .chat-scroll .media.active {
  background-color: #E6E8EB;
}
.chat-cont-left .chat-scroll .media:hover {
  background-color: #E6E8EB;
}
.chat-cont-left .chat-scroll .media .media-img-wrap {
  margin: 0 15px 0 0;
  position: relative;
}
.chat-cont-left .chat-scroll .media .media-img-wrap .avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-cont-left .chat-scroll .media .media-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}
.chat-cont-left .chat-scroll .media .media-body .user-name {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #202C4B;
  font-size: 16px;
  font-weight: 700;
}
.chat-cont-left .chat-scroll .media .media-body .user-last-chat {
  color: #39435F;
  font-size: 14px;
  line-height: 24px;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-cont-left .chat-scroll .media .media-body .last-chat-time {
  color: #6A7287;
  font-size: 13px;
}
.chat-cont-left .chat-scroll .media .media-body div:last-child {
  text-align: right;
}

.chat-cont-right {
  -webkit-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}
.chat-cont-right .chat-scroll {
  max-height: calc(100vh - 293px);
  overflow-y: auto;
}
.chat-cont-right .msg_head .back-user-list {
  display: none;
  margin: 0 0 0 -10px;
  padding: 0 10px;
}
.chat-cont-right .img_cont {
  position: relative;
  height: 45px;
  width: 45px;
}
.chat-cont-right .img_cont .user_img {
  height: 45px;
  min-width: 45px;
  width: 45px;
  border: 1.5px solid #3D5EE1;
}
.chat-cont-right .user_info {
  margin: 0 auto 0 15px;
  padding: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-cont-right ul.list-unstyled {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.chat-cont-right ul.list-unstyled .media.sent {
  margin-bottom: 20px;
}
.chat-cont-right ul.list-unstyled .media.sent .avatar {
  order: 3;
  height: 30px;
  width: 30px;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 20px 0 0;
  padding: 0;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .msg-box {
  margin: 0;
  padding: 0 0 0 50px;
  position: relative;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .msg-box + .msg-box {
  margin: 5px 0 0;
  padding: 0;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .msg-box p {
  margin: 0;
  padding: 0;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .msg-box:first-child::before {
  border-bottom: 6px solid transparent;
  border-left: 6px solid #e3e3e3;
  border-top: 6px solid #e3e3e3;
  border-right: 6px solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  right: -12px;
  left: auto;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .msg-box > div {
  margin: 0;
  padding: 10px 15px;
  border-radius: 10px;
  background-color: #e3e3e3;
  display: inline-block;
  position: relative;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .msg-box:first-child > div {
  border-radius: 10px 0 10px 10px;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-attachments {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -1px;
  padding: 4px 0;
  width: 100%;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-attachments .chat-attachment {
  position: relative;
  max-width: 130px;
  overflow: hidden;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-attachments .chat-attachment:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  content: "";
  opacity: 0.4;
  -webkit-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-attachments .chat-attachment:hover .chat-attach-download {
  opacity: 1;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-attachments > div {
  margin: 0 1px;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-attachments img {
  max-width: 100%;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-attachments .chat-attach-download {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
  color: #FFF;
  width: 32px;
  line-height: 32px;
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  margin: 5px 0 0;
  padding: 0;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  clear: both;
  flex-direction: row-reverse;
  list-style: none;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-info li {
  margin: 0;
  padding: 0 0 0 16px;
  position: relative;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-info li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: auto;
  left: 8px;
  transform: translate(-50%, -50%);
  background: #3D5EE1;
  content: "";
  height: 4px;
  width: 4px;
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-info .chat-time {
  color: rgba(50, 65, 72, 0.4);
}
.chat-cont-right ul.list-unstyled .media.sent .media-body .chat-msg-info a {
  color: #39435F;
}
.chat-cont-right ul.list-unstyled .media.received {
  position: relative;
  margin-bottom: 20px;
}
.chat-cont-right ul.list-unstyled .media.received .media-body {
  position: relative;
  margin: 0 0 0 20px;
  padding: 0;
}
.chat-cont-right ul.list-unstyled .media.received .media-body::before {
  border-bottom: 6px solid transparent;
  border-right: 6px solid #3D5EE1;
  border-top: 6px solid #3D5EE1;
  border-left: 6px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  top: 0px;
  right: auto;
  left: -6px;
  width: 0;
}
.chat-cont-right ul.list-unstyled .media.received .media-body > div {
  margin: 0;
  padding: 10px 15px;
  border-radius: 10px;
  background-color: #3D5EE1;
  display: table;
  position: relative;
}
.chat-cont-right ul.list-unstyled .media.received .media-body > div p {
  color: #FFF;
  margin: 0;
  padding: 0;
}
.chat-cont-right ul.list-unstyled .media.received .msg-box {
  display: block;
}
.chat-cont-right ul.list-unstyled .media.received .msg-box + .msg-box {
  margin-top: 5px;
}
.chat-cont-right ul.list-unstyled .media.received .chat-msg-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 5px 0 0;
  padding: 0;
  clear: both;
  list-style: none;
}
.chat-cont-right ul.list-unstyled .media.received .chat-msg-info .chat-time {
  color: rgba(255, 255, 255, 0.8);
}
.chat-cont-right ul.list-unstyled .media.received .chat-msg-attachments {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -1px;
  padding: 4px 0;
  width: 100%;
}
.chat-cont-right ul.list-unstyled .media.received .chat-msg-attachments .chat-attachment {
  position: relative;
  max-width: 130px;
  overflow: hidden;
}
.chat-cont-right ul.list-unstyled .media.received .chat-msg-attachments .chat-attachment:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  content: "";
  opacity: 0.4;
  -webkit-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}
.chat-cont-right ul.list-unstyled .media.received .chat-msg-attachments .chat-attachment:hover .chat-attach-download {
  opacity: 1;
}
.chat-cont-right ul.list-unstyled .media.received .chat-msg-attachments > div {
  margin: 0 1px;
}
.chat-cont-right ul.list-unstyled .media.received .chat-msg-attachments img {
  max-width: 100%;
}
.chat-cont-right ul.list-unstyled .media.received .chat-msg-attachments .chat-attach-download {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0;
  color: #FFF;
  width: 32px;
  line-height: 32px;
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
}
.chat-cont-right ul.list-unstyled .chat-date {
  font-size: 14px;
  margin: 1.875rem 0;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-transform: capitalize;
}
.chat-cont-right ul.list-unstyled .chat-date:before {
  background-color: #E9EDF4;
  content: "";
  height: 1px;
  margin-right: 28px;
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
}
.chat-cont-right ul.list-unstyled .chat-date:after {
  background-color: #E9EDF4;
  content: "";
  height: 1px;
  margin: 0 0 0 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
}

.card-footer {
  background-color: #FFF;
  border-top: 1px solid #B5B9C3;
  margin: 0;
  padding: 1rem 1.5rem;
}
.card-footer .type_msg {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: 0 !important;
  overflow-y: auto;
}

@media (max-width: 991.98px) {
  .chat-window.chat-slide .chat-cont-right {
    right: 0;
    opacity: 1;
    visibility: visible;
  }
  .chat-cont-right {
    position: absolute;
    right: -100px;
    opacity: 0;
    visibility: hidden;
    z-index: 99;
  }
  .chat-cont-right .msg_head .back-user-list {
    display: flex;
    align-items: center;
  }
}
.msg-typing {
  width: auto;
  height: 24px;
  padding-top: 8px;
}
.msg-typing span {
  height: 8px;
  width: 8px;
  float: left;
  background-color: #FFF;
  display: block;
  opacity: 0.4;
  margin: 0 1px;
  border-radius: 50%;
}
.msg-typing span:nth-of-type(1) {
  animation: 1s blink infinite 0.33333s;
}
.msg-typing span:nth-of-type(2) {
  animation: 1s blink infinite 0.66666s;
}
.msg-typing span :nth-of-type(3) {
  animation: 1s blink infinite 0.99999s;
}

@keyframes blink {
  50% {
    opacity: 1;
  }
}
/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.dropdown-auto {
  overflow: auto;
}

.dropdown-divider {
  margin: 0;
}

.dropdown .dropdown-toggle {
  font-weight: 400;
  font-size: 14px;
}
.dropdown .dropdown-toggle:after {
  display: inline-block;
  margin-inline-start: 0.5rem;
  vertical-align: 0;
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.75rem;
  font-weight: 600;
}
.dropdown .dropdown-toggle.btn-primary {
  color: #FFF;
}
.dropdown .dropdown-menu {
  font-family: "Roboto", sans-serif;
}

.dropdown-menu {
  border-color: #E9EDF4;
  box-shadow: 0px 4px 13px -2px rgba(19, 16, 34, 0.06);
  font-size: 0.875rem;
  color: #202C4B;
  background-color: #FFF;
  padding: 0;
  z-index: 10;
}

.dropdown-divider {
  border-color: #E9EDF4;
}

.dropdown-item-text {
  color: #6A7287;
}

.dropdown-header {
  color: #6A7287;
}

.dropdown-item {
  color: #202C4B !important;
  padding: 0.594rem 0.9375rem;
  font-size: 14px;
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: #6A7287;
  opacity: 0.5;
}
.dropdown-item:not(.active):hover, .dropdown-item:not(.active):focus, .dropdown-item:not(.active):active {
  color: #202C4B;
  background-color: #F4F6FA;
}
.dropdown-item.active {
  background-color: #F4F6FA;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f077";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f053";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.btn.dropdown-toggle-split {
  opacity: 0.85;
}

.dropdown-menu-dark {
  background-color: #202C4B;
  border-color: rgba(255, 255, 255, 0.1);
}
.dropdown-menu-dark li a {
  color: #FFF;
}

.btn-list a.dropdown-item {
  margin-block-end: 0;
}
.btn-list .btn-soft-success:hover {
  transform: translateY(0);
}
.btn-list .btn-soft-danger:hover {
  transform: translateY(0);
}
.dropdown-menu.dropdown-menu-primary {
  background-color: #3D5EE1;
}
.dropdown-menu.dropdown-menu-primary li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-primary .dropdown-item:hover, .dropdown-menu.dropdown-menu-primary .dropdown-item:focus, .dropdown-menu.dropdown-menu-primary .dropdown-item:active, .dropdown-menu.dropdown-menu-primary .dropdown-item.active {
  color: #FFF;
}
.dropdown-menu.dropdown-menu-secondary {
  background-color: #6FCCD8;
}
.dropdown-menu.dropdown-menu-secondary li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-secondary .dropdown-item:hover, .dropdown-menu.dropdown-menu-secondary .dropdown-item:focus, .dropdown-menu.dropdown-menu-secondary .dropdown-item:active, .dropdown-menu.dropdown-menu-secondary .dropdown-item.active {
  color: #FFF;
}
.dropdown-menu.dropdown-menu-warning {
  background-color: #EAB300;
}
.dropdown-menu.dropdown-menu-warning li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-warning .dropdown-item:hover, .dropdown-menu.dropdown-menu-warning .dropdown-item:focus, .dropdown-menu.dropdown-menu-warning .dropdown-item:active, .dropdown-menu.dropdown-menu-warning .dropdown-item.active {
  color: #FFF;
}
.dropdown-menu.dropdown-menu-info {
  background-color: #0F65CD;
}
.dropdown-menu.dropdown-menu-info li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-info .dropdown-item:hover, .dropdown-menu.dropdown-menu-info .dropdown-item:focus, .dropdown-menu.dropdown-menu-info .dropdown-item:active, .dropdown-menu.dropdown-menu-info .dropdown-item.active {
  color: #FFF;
}
.dropdown-menu.dropdown-menu-success {
  background-color: #1ABE17;
}
.dropdown-menu.dropdown-menu-success li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-success .dropdown-item:hover, .dropdown-menu.dropdown-menu-success .dropdown-item:focus, .dropdown-menu.dropdown-menu-success .dropdown-item:active, .dropdown-menu.dropdown-menu-success .dropdown-item.active {
  color: #FFF;
}
.dropdown-menu.dropdown-menu-danger {
  background-color: #E82646;
}
.dropdown-menu.dropdown-menu-danger li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-danger .dropdown-item:hover, .dropdown-menu.dropdown-menu-danger .dropdown-item:focus, .dropdown-menu.dropdown-menu-danger .dropdown-item:active, .dropdown-menu.dropdown-menu-danger .dropdown-item.active {
  color: #FFF;
}

.dropdown-menu.dropmenu-item-primary .dropdown-item:hover, .dropdown-menu.dropmenu-item-primary .dropdown-item:focus, .dropdown-menu.dropmenu-item-primary .dropdown-item:active, .dropdown-menu.dropmenu-item-primary .dropdown-item.active {
  background-color: rgba(61, 94, 225, 0.1) !important;
  color: #3D5EE1;
}
.dropdown-menu.dropmenu-item-secondary .dropdown-item:hover, .dropdown-menu.dropmenu-item-secondary .dropdown-item:focus, .dropdown-menu.dropmenu-item-secondary .dropdown-item:active, .dropdown-menu.dropmenu-item-secondary .dropdown-item.active {
  background-color: rgba(111, 204, 216, 0.1) !important;
  color: #6FCCD8;
}
.dropdown-menu.dropmenu-item-warning .dropdown-item:hover, .dropdown-menu.dropmenu-item-warning .dropdown-item:focus, .dropdown-menu.dropmenu-item-warning .dropdown-item:active, .dropdown-menu.dropmenu-item-warning .dropdown-item.active {
  background-color: rgba(234, 179, 0, 0.1) !important;
  color: #EAB300;
}
.dropdown-menu.dropmenu-item-info .dropdown-item:hover, .dropdown-menu.dropmenu-item-info .dropdown-item:focus, .dropdown-menu.dropmenu-item-info .dropdown-item:active, .dropdown-menu.dropmenu-item-info .dropdown-item.active {
  background-color: rgba(15, 101, 205, 0.1) !important;
  color: #0F65CD;
}
.dropdown-menu.dropmenu-item-success .dropdown-item:hover, .dropdown-menu.dropmenu-item-success .dropdown-item:focus, .dropdown-menu.dropmenu-item-success .dropdown-item:active, .dropdown-menu.dropmenu-item-success .dropdown-item.active {
  background-color: rgba(26, 190, 23, 0.1) !important;
  color: #1ABE17;
}
.dropdown-menu.dropmenu-item-danger .dropdown-item:hover, .dropdown-menu.dropmenu-item-danger .dropdown-item:focus, .dropdown-menu.dropmenu-item-danger .dropdown-item:active, .dropdown-menu.dropmenu-item-danger .dropdown-item.active {
  background-color: rgba(232, 38, 70, 0.1) !important;
  color: #E82646;
}

.dropdown-menu.dropmenu-light-primary {
  background-color: rgba(111, 204, 216, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-primary .dropdown-item:hover, .dropdown-menu.dropmenu-light-primary .dropdown-item:focus, .dropdown-menu.dropmenu-light-primary .dropdown-item:active, .dropdown-menu.dropmenu-light-primary .dropdown-item.active {
  color: #FFF;
  background-color: #3D5EE1 !important;
}
.dropdown-menu.dropmenu-light-secondary {
  background-color: rgba(111, 204, 216, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-secondary .dropdown-item:hover, .dropdown-menu.dropmenu-light-secondary .dropdown-item:focus, .dropdown-menu.dropmenu-light-secondary .dropdown-item:active, .dropdown-menu.dropmenu-light-secondary .dropdown-item.active {
  color: #FFF;
  background-color: #6FCCD8 !important;
}
.dropdown-menu.dropmenu-light-info {
  background-color: rgba(15, 101, 205, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-info .dropdown-item:hover, .dropdown-menu.dropmenu-light-info .dropdown-item:focus, .dropdown-menu.dropmenu-light-info .dropdown-item:active, .dropdown-menu.dropmenu-light-info .dropdown-item.active {
  color: #FFF;
  background-color: #0F65CD !important;
}
.dropdown-menu.dropmenu-light-warning {
  background-color: rgba(234, 179, 0, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-warning .dropdown-item:hover, .dropdown-menu.dropmenu-light-warning .dropdown-item:focus, .dropdown-menu.dropmenu-light-warning .dropdown-item:active, .dropdown-menu.dropmenu-light-warning .dropdown-item.active {
  color: #FFF;
  background-color: #EAB300 !important;
}
.dropdown-menu.dropmenu-light-success {
  background-color: rgba(26, 190, 23, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-success .dropdown-item:hover, .dropdown-menu.dropmenu-light-success .dropdown-item:focus, .dropdown-menu.dropmenu-light-success .dropdown-item:active, .dropdown-menu.dropmenu-light-success .dropdown-item.active {
  color: #FFF;
  background-color: #1ABE17 !important;
}
.dropdown-menu.dropmenu-light-danger {
  background-color: rgba(232, 38, 70, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-danger .dropdown-item:hover, .dropdown-menu.dropmenu-light-danger .dropdown-item:focus, .dropdown-menu.dropmenu-light-danger .dropdown-item:active, .dropdown-menu.dropmenu-light-danger .dropdown-item.active {
  color: #FFF;
  background-color: #E82646 !important;
}

.dropdown-divider {
  margin: 0;
}

.bd-example > .dropdown-menu {
  position: static;
  display: block;
}

.card-dropdown > a {
  background: #FFF;
  border-radius: 6px;
  font-weight: 400;
  box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.0509803922);
  border: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #515B73;
  padding: 10px 10px 10px 30px;
  position: relative;
}
.card-dropdown > a .cal-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.card-dropdown > a i {
  font-size: 16px;
  margin-right: 5px;
}
.card-dropdown > a[aria-expanded=true]::after {
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}
.card-dropdown .dropdown-menu {
  border: 0;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0px 4px 9px -1px rgba(19, 16, 34, 0.031372549);
}
.card-dropdown .dropdown-menu li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
}
.card-dropdown .dropdown-menu li a i {
  font-size: 16px;
  margin-right: 8px;
}
.card-dropdown .dropdown-menu li a:hover {
  background: #EDF1F6;
  color: #39435F;
}

.dropdown-md {
  min-width: 320px !important;
}

.dropdown-menu.notes-menu {
  z-index: 99999;
}
.dropdown-menu.notes-menu a.dropdown-item {
  color: #202C4B;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  padding: 8px 15px;
}
.dropdown-menu.notes-menu span {
  margin-right: 8px;
}
.dropdown-menu.notes-menu svg {
  width: 14px;
  height: 14px;
  color: #6A7287;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.table-inbox .starred.fas.fa-star {
  color: #EAB300;
}
.table-inbox .checked {
  background-color: #B5B9C3;
}
.table-inbox th {
  border-color: #F0F2F7;
}
.table-inbox tbody tr td {
  font-size: 14px;
  color: #6FCCD8;
  border-color: #E9EDF4;
}

.unread .name,
.unread .subject,
.unread .mail-date {
  color: #000;
  font-weight: 700;
}

.email-header .btn-white {
  min-width: auto;
  height: 38px;
  border: 1px solid #E9EDF4;
}
.email-header .btn-white i {
  margin-left: 5px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.dropset.btn-icon {
  height: 45px !important;
}

aside {
  padding: 24px;
}

.video-section .item {
  opacity: 0.4;
  transition: 0.4s ease all;
  transform: scale(0.8);
}

@media (max-width: 1000px) {
  .video-section .item {
    margin: 0;
    transform: scale(0.9);
  }
}
.video-section .active .item {
  opacity: 1;
  transform: scale(1);
}

.video-section .owl-item {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}

.video-section video {
  max-width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
}

.delete-alert {
  padding: 10px 20px;
  background: #FAD4DA;
  border: none;
  border-radius: 8px;
}
.delete-alert p {
  font-size: 15px;
}
.delete-alert .btn {
  font-weight: 700;
}

.deleted-info {
  display: none;
}
.deleted-info .bin-bg {
  width: 184px;
  height: 184px;
  border-radius: 100%;
  background: #E9EDF4;
  margin: 0 auto;
}

svg.feather-16 {
  width: 16px;
  height: 16px;
}
svg.feather-14 {
  width: 14px;
  height: 14px;
}

.active-dark-btn a.active {
  background: #202C4B;
  color: #FFF;
}
.active-dark-btn a:hover {
  background: #202C4B;
  color: #FFF;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.custom-file-container {
  box-sizing: border-box;
  position: relative;
  display: block;
}
.custom-file-container .custom-file-container__custom-file {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(2.25rem + 2px);
  margin-bottom: 0;
  margin-top: 5px;
}
.custom-file-container input[type=file] {
  height: auto;
  min-height: calc(1.5em + 0.75rem + 2px);
}
.custom-file-container .custom-file-container__custom-file__custom-file-input {
  box-sizing: border-box;
  min-width: 14rem;
  max-width: 100%;
  height: calc(2.25rem + 2px);
  margin: 0;
  opacity: 0;
}
.custom-file-container .custom-file-container__custom-file__custom-file-control {
  box-sizing: border-box;
  z-index: 1;
  height: auto;
  overflow: hidden;
  line-height: 1.5;
  user-select: none;
  background-clip: padding-box;
  border-radius: 0.25rem;
  height: auto;
  border: 1px solid #E6E8EB;
  color: #6A7287;
  font-size: 15px;
  padding: 8px 10px;
  letter-spacing: 1px;
  background-color: #E6E8EB;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.custom-file-container .custom-file-container__custom-file__custom-file-control__button {
  box-sizing: border-box;
  z-index: 6;
  display: block;
  height: auto;
  padding: 10px 16px;
  line-height: 1.25;
  background-color: rgba(27, 85, 226, 0.23);
  color: #3D5EE1;
  border-left: 1px solid #E9EDF4;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
}
.custom-file-container .custom-file-container__image-preview {
  box-sizing: border-box;
  transition: all 0.2s ease;
  margin-top: 50px;
  margin-bottom: 40px;
  height: 250px;
  width: 100%;
  border-radius: 4px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #FFF;
  overflow: auto;
  padding: 15px;
}
.custom-file-container .custom-file-container__image-multi-preview {
  box-sizing: border-box;
  transition: all 0.2s ease;
  margin-top: 50px;
  margin-bottom: 40px;
  height: 250px;
  width: 100%;
  border-radius: 4px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #FFF;
  overflow: auto;
  padding: 15px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.icons-list {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.icons-list li {
  display: block;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  font-size: 18px;
  border-radius: 50px;
  border: 1px solid #e6ebf1;
  color: #3D5EE1;
  margin: 5px;
  -webkit-box-shadow: 0 2px 3px rgb(215, 197, 255);
  -moz-box-shadow: 0 2px 3px rgb(215, 197, 255);
  box-shadow: 0 2px 3px rgb(215, 197, 255);
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.progress {
  background-color: #E9EDF4;
  height: 0.75rem;
  border-radius: 0.25rem;
}

.progress-stacked {
  background-color: #E9EDF4;
}

.progress-bar {
  color: #FFF;
  background-color: #3D5EE1;
}

@keyframes progress-animate {
  0% {
    width: 0;
  }
}
.progress-animate {
  position: relative;
  border-radius: 0.625rem;
}
.progress-animate .progress-bar {
  position: relative;
  border-radius: 0.625rem;
  animation: 2s progress-animate;
}

.progress.progress-xs, .progress-stacked.progress-xs {
  height: 0.3125rem;
}
.progress.progress-sm, .progress-stacked.progress-sm {
  height: 0.5rem;
}
.progress.progress-lg, .progress-stacked.progress-lg {
  height: 1rem;
}
.progress.progress-xl, .progress-stacked.progress-xl {
  height: 1.25rem;
}

.progress-vertical {
  min-height: 250px;
  height: 250px;
  width: 10px;
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  margin-right: 20px;
}
.progress-vertical .progress-bar {
  width: 100%;
}
.progress-vertical.progress-xl {
  width: 15px;
}
.progress-vertical.progress-lg {
  width: 12px;
}
.progress-vertical.progress-sm {
  width: 8px;
}
.progress-vertical.progress-xs {
  width: 5px;
}

.progress-vertical-bottom {
  min-height: 250px;
  height: 250px;
  position: relative;
  width: 10px;
  display: inline-block;
  margin-bottom: 0;
  margin-right: 20px;
}
.progress-vertical-bottom .progress-bar {
  width: 100%;
  bottom: 0;
  position: absolute;
}
.progress-vertical-bottom.progress-xl {
  width: 15px;
}
.progress-vertical-bottom.progress-lg {
  width: 12px;
}
.progress-vertical-bottom.progress-sm {
  width: 8px;
}
.progress-vertical-bottom.progress-xs {
  width: 5px;
}

.progress-custom {
  overflow: visible;
  position: relative;
}
.progress-custom .progress-bar {
  position: relative;
  overflow: visible;
}
.progress-custom .progress-bar:after {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  box-shadow: 0 0.313rem 0.313rem rgba(61, 94, 225, 0.5);
  background: #FFF;
  position: absolute;
  inset-inline-end: -0.375rem;
  inset-block-start: -0.375rem;
  border: 0.25rem solid #3D5EE1;
}
.progress-custom .progress-bar.bg-secondary:after {
  border: 0.25rem solid #6FCCD8;
  box-shadow: 0 0.313rem 0.313rem rgba(var(--secondary-rgb), 0.2);
}
.progress-custom .progress-bar.bg-warning:after {
  border: 0.25rem solid #EAB300;
  box-shadow: 0 0.313rem 0.313rem rgba(var(--warning-rgb), 0.2);
}
.progress-custom .progress-bar.bg-info:after {
  border: 0.25rem solid #0F65CD;
  box-shadow: 0 0.313rem 0.313rem rgba(var(--info-rgb), 0.2);
}
.progress-custom .progress-bar.bg-success:after {
  border: 0.25rem solid #1ABE17;
  box-shadow: 0 0.313rem 0.313rem rgba(var(--success-rgb), 0.2);
}
.progress-custom .progress-bar.bg-danger:after {
  border: 0.25rem solid #E82646;
  box-shadow: 0 0.313rem 0.313rem rgba(var(--danger-rgb), 0.2);
}
.progress-custom .progress-bar-value {
  width: 1.875rem;
  height: 1.25rem;
  line-height: 1.25rem;
  border-radius: 0.188rem;
  background: #3D5EE1;
  box-shadow: 0 0.313rem 0.313rem rgba(0, 0, 0, 0.4);
  font-size: 0.625rem;
  font-weight: 600;
  color: #FFF;
  text-align: center;
  position: absolute;
  inset-block-end: 1.5rem;
  inset-inline-end: -0.688rem;
}
.progress-custom .progress-bar-value:after {
  content: "";
  border-block-start: 0.438rem solid #3D5EE1;
  border-inline-start: 0.438rem solid transparent;
  border-inline-end: 0.438rem solid transparent;
  position: absolute;
  inset-block-end: -0.375rem;
  inset-inline-start: 28%;
}
.progress-custom .progress-bar-value.bg-secondary {
  background-color: #6FCCD8;
}
.progress-custom .progress-bar-value.bg-secondary:after {
  border-block-start: 0.438rem solid #6FCCD8;
}
.progress-custom .progress-bar-value.bg-success {
  background-color: #1ABE17;
}
.progress-custom .progress-bar-value.bg-success:after {
  border-block-start: 0.438rem solid #1ABE17;
}
.progress-custom .progress-bar-value.bg-warning {
  background-color: #EAB300;
}
.progress-custom .progress-bar-value.bg-warning:after {
  border-block-start: 0.438rem solid #EAB300;
}
.progress-custom .progress-bar-value.bg-danger {
  background-color: #E82646;
}
.progress-custom .progress-bar-value.bg-danger:after {
  border-block-start: 0.438rem solid #E82646;
}
.progress-custom .progress-bar-value.bg-info {
  background-color: #0F65CD;
}
.progress-custom .progress-bar-value.bg-info:after {
  border-block-start: 0.438rem solid #0F65CD;
}

[dir=rtl] .progress-bar-title {
  border-radius: 0 0.313rem 0.313rem 0;
}

.progress-item-1, .progress-item-2, .progress-item-3 {
  position: absolute;
  margin-block-start: -0.25rem;
  z-index: 1;
  height: 0.938rem;
  width: 0.938rem;
  border-radius: 1.563rem;
  background-color: #E9EDF4;
}

.progress-item-1 {
  inset-inline-start: 25%;
}

.progress-item-2 {
  inset-inline-start: 50%;
}

.progress-item-3 {
  inset-inline-start: 75%;
}

.custom-progress-3 {
  overflow: visible;
  border-radius: 0.625rem;
}
.custom-progress-3 .progress-bar {
  position: relative;
  overflow: visible;
  margin: 0.313rem;
  border-radius: 0.25rem;
}
.custom-progress-3 .progress-bar:before {
  content: "";
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  inset-inline-start: 0.125rem;
  background-color: #FFF;
  border-radius: 50%;
}
.custom-progress-3 .progress-bar .progress-bar-value {
  border: 0.125rem solid #3D5EE1;
  width: 2.5rem;
  height: 1.563rem;
  line-height: 1.313rem;
  border-radius: 3.125rem;
  background: #FFF;
  font-size: 0.625rem;
  font-weight: 600;
  color: #3D5EE1;
  text-align: center;
  position: absolute;
  inset-inline-end: -0.625rem;
}
.custom-progress-3 .progress-bar .progress-bar-value.secondary {
  border: 0.125rem solid #6FCCD8;
  color: #6FCCD8;
}
.custom-progress-3 .progress-bar .progress-bar-value.warning {
  border: 0.125rem solid #EAB300;
  color: #EAB300;
}
.custom-progress-3 .progress-bar .progress-bar-value.info {
  border: 0.125rem solid #0F65CD;
  color: #0F65CD;
}
.custom-progress-3 .progress-bar .progress-bar-value.success {
  border: 0.125rem solid #1ABE17;
  color: #1ABE17;
}
.custom-progress-3 .progress-bar .progress-bar-value.danger {
  border: 0.125rem solid #E82646;
  color: #E82646;
}

.custom-progress-4.progress {
  background-color: rgba(61, 94, 225, 0.1);
  border-radius: 0.25rem;
}
.custom-progress-4.progress.secondary {
  background-color: rgba(111, 204, 216, 0.1);
}
.custom-progress-4.progress.secondary .progress-bar-label {
  color: #6FCCD8;
}
.custom-progress-4.progress.warning {
  background-color: rgba(234, 179, 0, 0.1);
}
.custom-progress-4.progress.warning .progress-bar-label {
  color: #EAB300;
}
.custom-progress-4.progress.info {
  background-color: rgba(15, 101, 205, 0.1);
}
.custom-progress-4.progress.info .progress-bar-label {
  color: #0F65CD;
}
.custom-progress-4.progress.success {
  background-color: rgba(26, 190, 23, 0.1);
}
.custom-progress-4.progress.success .progress-bar-label {
  color: #1ABE17;
}
.custom-progress-4.progress.danger {
  background-color: rgba(232, 38, 70, 0.1);
}
.custom-progress-4.progress.danger .progress-bar-label {
  color: #E82646;
}
.custom-progress-4.progress .progress-bar {
  border-radius: 0.25rem;
}
.custom-progress-4.progress .progress-bar-label {
  position: absolute;
  inset-inline-end: 0.313rem;
  font-weight: 600;
  font-size: 0.813rem;
  color: #3D5EE1;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.page-link {
  color: #6A7287;
  background-color: #FFF;
  border: 1px solid #E9EDF4;
}
.page-link:focus {
  box-shadow: none;
  background-color: #E9EDF4;
}
.page-link:hover {
  color: #3D5EE1;
  background-color: #E9EDF4;
  border-color: #E9EDF4;
}

.page-item.active .page-link {
  color: #FFF;
  background-color: #3D5EE1;
  border-color: #3D5EE1;
}

.disabled > .page-link, .page-link.disabled {
  color: #6A7287;
  background-color: #FFF;
  border-color: #E9EDF4;
  opacity: 0.7;
}

[dir=rtl] .pagination .page-link .bx-chevron-left::before {
  content: "\ea50";
}
[dir=rtl] .pagination .page-link .bx-chevron-right::before {
  content: "\ea4d";
}
[dir=rtl] .pagination .page-link .ri-arrow-right-s-line:before {
  content: "\ea64";
}
[dir=rtl] .pagination .page-link .ri-arrow-left-s-line:before {
  content: "\ea6e";
}

.pagination-style-1 .pagination .page-item {
  margin: 0 0.25rem;
}
.pagination-style-1 .pagination .page-item .page-link {
  border: 0;
  border-radius: 4px;
  font-size: 0.8125rem;
}
.pagination-style-1 .pagination .page-item .page-link i {
  font-weight: 600;
}
.pagination-style-1 .pagination .page-item.active .page-link {
  border-radius: 4px;
  background-color: #3D5EE1;
  color: #FFF;
}
.pagination-style-1 .pagination .page-item.active:hover .page-link {
  border-radius: 4px;
  background-color: #3D5EE1;
  color: #FFF;
}
.pagination-style-1 .pagination .page-item:hover .page-link {
  background-color: #E9EDF4;
  color: #3D5EE1;
}

.pagination-style-2 .pagination {
  border-radius: 4px;
}
.pagination-style-2 .pagination .page-item {
  margin: 0 0.25rem;
}
.pagination-style-2 .pagination .page-item .page-link {
  border: 0 !important;
  font-size: 0.8125rem;
}
.pagination-style-2 .pagination .page-item.active .page-link {
  background-color: #FFF;
  color: #3D5EE1;
  position: relative;
  font-weight: bold;
}
.pagination-style-2 .pagination .page-item.active .page-link:before {
  position: absolute;
  content: "";
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 0.1rem;
  background-color: #3D5EE1;
}
.pagination-style-2 .pagination .page-item:hover .page-link {
  background-color: transparent;
}

.pagination-style-3 .pagination {
  border-radius: 50px;
  padding: 0.25rem;
  align-items: center;
}
.pagination-style-3 .pagination .page-item {
  margin: 0 0.25rem;
}
.pagination-style-3 .pagination .page-item .page-link {
  border: 0;
  border-radius: 50px;
  font-size: 0.8125rem;
}
.pagination-style-3 .pagination .page-item .page-link i {
  font-weight: 600;
}
.pagination-style-3 .pagination .page-item.active .page-link {
  background-color: #3D5EE1;
  color: #FFF;
}
.pagination-style-3 .pagination .page-item.active:hover .page-link {
  background-color: #3D5EE1;
}
.pagination-style-3 .pagination .page-item:hover .page-link {
  background-color: #E9EDF4;
}

.pagination-style-4 .pagination .page-item .page-link {
  border: 0 !important;
  font-size: 0.8125rem;
  border-radius: 4px;
}
.pagination-style-4 .pagination .page-item .page-link i {
  font-weight: 600;
}
.pagination-style-4 .pagination .page-item.active .page-link {
  border: 0;
  border-radius: 4px;
  background-color: #3D5EE1;
  color: #FFF;
}
.pagination-style-4 .pagination .page-item.active:hover .page-link {
  background-color: #3D5EE1;
}
.pagination-style-4 .pagination .page-item:hover .page-link {
  background-color: transparent;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: #202C4B;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  margin-bottom: 0;
}

h1,
.h1 {
  font-size: 30px;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  h1,
  .h1 {
    font-size: 28px;
  }
}
@media (max-width: 767.98px) {
  h1,
  .h1 {
    font-size: 24px;
  }
}

h2,
.h2 {
  font-size: 24px;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  h2,
  .h2 {
    font-size: 22px;
  }
}

h3,
.h3 {
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 767.98px) {
  h3,
  .h3 {
    font-size: 18px;
  }
}

h4,
.h4 {
  font-size: 18px;
  font-weight: 600;
}
@media (max-width: 767.98px) {
  h4,
  .h4 {
    font-size: 16px;
  }
}

h5,
.h5 {
  font-size: 16px;
  font-weight: 500;
}

h6,
.h6 {
  font-size: 15px;
  font-weight: 500;
}

.fs-sm {
  font-size: 0.6875rem;
}

.fs-base {
  font-size: 0.875rem;
}

.fs-lg {
  font-size: 1.125rem;
}

.fs-1 {
  font-size: 0.0625rem;
}

.fs-2 {
  font-size: 0.125rem;
}

.fs-3 {
  font-size: 0.1875rem;
}

.fs-4 {
  font-size: 0.25rem;
}

.fs-5 {
  font-size: 0.3125rem !important;
}

.fs-6 {
  font-size: 0.375rem !important;
}

.fs-7 {
  font-size: 0.4375rem;
}

.fs-8 {
  font-size: 0.5rem !important;
}

.fs-9 {
  font-size: 0.5625rem;
}

.fs-10 {
  font-size: 0.75em !important;
}

.fs-11 {
  font-size: 0.6875rem;
}

.fs-12 {
  font-size: 0.75rem;
}

.fs-13 {
  font-size: 0.8125rem;
}

.fs-14 {
  font-size: 0.875rem !important;
}

.fs-15 {
  font-size: 0.9375rem;
}

.fs-16 {
  font-size: 1rem;
}

.fs-17 {
  font-size: 1.0625rem;
}

.fs-18 {
  font-size: 1.125rem;
}

.fs-19 {
  font-size: 1.1875rem;
}

.fs-20 {
  font-size: 1.25rem;
}

.fs-21 {
  font-size: 1.3125rem;
}

.fs-22 {
  font-size: 1.375rem;
}

.fs-23 {
  font-size: 1.4375rem;
}

.fs-24 {
  font-size: 1.5rem;
}

.fs-25 {
  font-size: 1.5625rem;
}

.fs-26 {
  font-size: 1.625rem;
}

.fs-27 {
  font-size: 1.6875rem;
}

.fs-28 {
  font-size: 1.75rem;
}

.fs-29 {
  font-size: 1.8125rem;
}

.fs-30 {
  font-size: 1.875rem;
}

.fs-32 {
  font-size: 2rem;
}

.fs-34 {
  font-size: 2.125rem;
}

.fs-36 {
  font-size: 2.25rem;
}

.fs-38 {
  font-size: 2.375rem;
}

.fs-40 {
  font-size: 2.5rem;
}

.text-default {
  color: #6A7287 !important;
}

.text-muted {
  color: #677788 !important;
}

.text-primary {
  color: #3D5EE1 !important;
  opacity: 1;
}
.text-primary.text-opacity-75 {
  color: rgba(61, 94, 225, 0.75) !important;
}
.text-primary.text-opacity-25 {
  color: rgba(61, 94, 225, 0.25) !important;
}
.text-primary.text-opacity-50 {
  color: rgba(61, 94, 225, 0.5) !important;
}

.text-secondary {
  color: #6FCCD8 !important;
  opacity: 1;
}

.text-info {
  color: #0F65CD !important;
  opacity: 1;
}

.text-success {
  color: #1ABE17 !important;
  opacity: 1;
}

.text-warning {
  color: #EAB300 !important;
  opacity: 1;
}

.text-danger {
  color: #E82646 !important;
  opacity: 1;
}

.text-skyblue {
  color: #05C3FB !important;
  opacity: 1;
}

.text-blue {
  color: #339DFF !important;
}

.text-green {
  color: #2CA87F !important;
}

.text-pink {
  color: #E83E8C !important;
}

.text-teal {
  color: #02a8b5 !important;
}

.text-orange {
  color: #FD7E14 !important;
}

.text-indigo {
  color: #05C3FB !important;
}

.text-purple {
  color: #4A00E5 !important;
}

.text-dark {
  color: #202C4B !important;
}

.text-light {
  color: #E9EDF4 !important;
}

.text-gray {
  color: #838A9B !important;
}

.text-black {
  color: #000 !important;
}

.text-white {
  color: #FFF !important;
}

.text-fixed-white {
  color: #FFF !important;
}

.text-fixed-black {
  color: #000 !important;
}

.text-gray-1 {
  color: #E6E8EB;
}

.text-gray-2 {
  color: #CDD0D7;
}

.text-gray-3 {
  color: #B5B9C3;
}

.text-gray-4 {
  color: #9CA1AF;
}

.text-gray-5 {
  color: #838A9B;
}

.text-gray-6 {
  color: #6A7287;
}

.text-gray-7 {
  color: #515B73;
}

.text-gray-8 {
  color: #39435F;
}

.text-gray-9 {
  color: #202C4B !important;
}

a {
  color: #202C4B;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
a:hover {
  color: #3D5EE1;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
a:focus {
  outline: 0;
}

.link-primary {
  color: #3D5EE1 !important;
}
.link-primary:hover, .link-primary:focus, .link-primary:active {
  color: rgb(31.4732142857, 66.09375, 203.5267857143) !important;
}

.link-secondary {
  color: #6FCCD8 !important;
}
.link-secondary:hover, .link-secondary:focus, .link-secondary:active {
  color: #6FCCD8 !important;
}

.link-success {
  color: #1ABE17 !important;
}
.link-success:hover, .link-success:focus, .link-success:active {
  color: #1ABE17 !important;
}

.link-danger {
  color: #E82646 !important;
}
.link-danger:hover, .link-danger:focus, .link-danger:active {
  color: #E82646 !important;
}

.link-warning {
  color: #EAB300 !important;
}
.link-warning:hover, .link-warning:focus, .link-warning:active {
  color: #EAB300 !important;
}

.link-info {
  color: #0F65CD !important;
}
.link-info:hover, .link-info:focus, .link-info:active {
  color: #0F65CD !important;
}

.link-light {
  color: #E9EDF4 !important;
}
.link-light:hover, .link-light:focus, .link-light:active {
  color: #E9EDF4 !important;
}

.link-dark {
  color: #202C4B !important;
}
.link-dark:hover, .link-dark:focus, .link-dark:active {
  color: #202C4B !important;
}

hr.text-danger {
  border-color: #E82646 !important;
}

.blockquote-container {
  padding: 1.25rem;
  border-left: 4px solid #9CA1AF;
  position: relative;
}
.blockquote-container.text-end {
  border-right: 4px solid #9CA1AF;
  border-left: 0;
}

.blockquote.custom-blockquote {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 1rem;
  border-radius: 4px;
  position: relative;
}
.blockquote.custom-blockquote:before {
  content: "\f10d";
  font-family: "Fontawesome";
  z-index: 0;
  font-size: 2rem;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0.5rem;
}
.blockquote.custom-blockquote.primary {
  background-color: rgba(61, 94, 225, 0.1);
  border-inline-start: 2px solid #3D5EE1;
}
.blockquote.custom-blockquote.primary:before {
  color: rgba(61, 94, 225, 0.1);
}
.blockquote.custom-blockquote.secondary {
  background-color: rgba(111, 204, 216, 0.1);
  border-inline-start: 2px solid #6FCCD8;
}
.blockquote.custom-blockquote.secondary:before {
  color: rgba(111, 204, 216, 0.1);
}
.blockquote.custom-blockquote.info {
  background-color: rgba(15, 101, 205, 0.1);
  border-inline-start: 2px solid #0F65CD;
}
.blockquote.custom-blockquote.info:before {
  color: rgba(15, 101, 205, 0.1);
}
.blockquote.custom-blockquote.warning {
  background-color: rgba(234, 179, 0, 0.1);
  border-inline-start: 2px solid #EAB300;
}
.blockquote.custom-blockquote.warning:before {
  color: rgba(234, 179, 0, 0.1);
}
.blockquote.custom-blockquote.success {
  background-color: rgba(26, 190, 23, 0.1);
  border-inline-start: 2px solid #1ABE17;
}
.blockquote.custom-blockquote.success:before {
  color: rgba(26, 190, 23, 0.1);
}
.blockquote.custom-blockquote.danger {
  background-color: rgba(232, 38, 70, 0.1);
  border-inline-start: 2px solid #E82646;
}
.blockquote.custom-blockquote.danger:before {
  color: rgba(232, 38, 70, 0.1);
}

[data-theme-mode=dark] .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(33, 37, 41, 0.3) !important;
}
[data-theme-mode=dark] .shadow {
  box-shadow: 0 0.5rem 1rem rgba(33, 37, 41, 0.3) !important;
}
[data-theme-mode=dark] .shadow-lg {
  box-shadow: 0 1rem 3rem rgba(33, 37, 41, 0.3) !important;
}

@media screen and (min-width: 576px) {
  .w-sm-auto {
    width: auto;
  }
}
[dir=rtl] .text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.transform-none {
  transform: none !important;
}

.list-circle {
  list-style: circle;
  padding-left: 2rem;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.alert {
  padding: 0.625rem 0.85rem;
  border-radius: 4px;
  font-size: 0.8125rem;
}
.alert.alert-dismissible {
  padding: 0.625rem 2.25rem 0.625rem 0.85rem;
}
.alert i {
  font-size: 20px;
}
.alert .btn-close {
  background-image: none;
  padding: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert .btn-close i {
  font-size: 18px;
  line-height: 18px;
}
.alert:last-child {
  margin-bottom: 0;
}
.alert .alert-link {
  font-weight: 600;
}

[dir=rtl] .alert.alert-dismissible {
  padding: 0.625rem 0.85rem 0.625rem 2.25rem;
}

.alert-warning {
  background-color: rgba(234, 179, 0, 0.1);
  color: #EAB300;
  border-color: rgba(234, 179, 0, 0.1);
}
.alert-warning .alert-link {
  color: #EAB300;
}
.alert-warning .btn-close {
  color: #EAB300;
}
.alert-warning .btn-close.custom-close {
  background-color: #EAB300;
  color: #FFF;
  opacity: 1;
  border-radius: 50px;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  padding: 0.85rem;
}

.alert-primary {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
  border-color: rgba(61, 94, 225, 0.1);
}
.alert-primary .alert-link {
  color: #3D5EE1;
}
.alert-primary .custom-alert-icon {
  color: #3D5EE1;
}
.alert-primary .btn-close {
  color: #3D5EE1;
}
.alert-primary .btn-close.custom-close {
  background-color: #3D5EE1;
  color: #FFF;
  opacity: 1;
  border-radius: 50px;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  padding: 0.85rem;
}

.alert-secondary {
  background-color: rgba(111, 204, 216, 0.1);
  color: #6FCCD8;
  border-color: rgba(111, 204, 216, 0.1);
}
.alert-secondary .alert-link {
  color: #6FCCD8;
}
.alert-secondary .btn-close {
  color: #6FCCD8;
}
.alert-secondary .btn-close.custom-close {
  background-color: #6FCCD8;
  color: #FFF;
  opacity: 1;
  border-radius: 50px;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  padding: 0.85rem;
}

.alert-success {
  background-color: rgba(26, 190, 23, 0.1);
  color: #1ABE17;
  border-color: rgba(26, 190, 23, 0.1);
}
.alert-success .alert-link {
  color: #1ABE17;
}
.alert-success .btn-close {
  color: #1ABE17;
}
.alert-success .btn-close.custom-close {
  background-color: #1ABE17;
  color: #FFF;
  opacity: 1;
  border-radius: 50px;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  padding: 0.85rem;
}

.alert-info {
  background-color: rgba(15, 101, 205, 0.1);
  color: #0F65CD;
  border-color: rgba(15, 101, 205, 0.1);
}
.alert-info .alert-link {
  color: #0F65CD;
}
.alert-info .btn-close {
  color: #0F65CD;
}
.alert-info .btn-close.custom-close {
  background-color: #0F65CD;
  color: #FFF;
  opacity: 1;
  border-radius: 50px;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  padding: 0.85rem;
}

.alert-danger {
  background-color: rgba(232, 38, 70, 0.1);
  color: #E82646;
  border-color: rgba(232, 38, 70, 0.1);
}
.alert-danger .alert-link {
  color: #E82646;
}
.alert-danger .btn-close {
  color: #E82646;
}
.alert-danger .btn-close.custom-close {
  background-color: #E82646;
  color: #FFF;
  opacity: 1;
  border-radius: 50px;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  padding: 0.85rem;
}

.alert-light {
  background-color: #E9EDF4;
  color: #6A7287;
  border-color: #E9EDF4;
}
.alert-light .alert-link {
  color: #6A7287;
}
.alert-light .btn-close {
  color: #6A7287;
}
.alert-light .btn-close.custom-close {
  background-color: #E9EDF4;
  color: #FFF;
  opacity: 1;
  border-radius: 50px;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  padding: 0.85rem;
}

.alert-dark {
  background-color: rgba(32, 44, 75, 0.1);
  color: #6A7287;
  border-color: rgba(32, 44, 75, 0.1);
}
.alert-dark .alert-link {
  color: #6A7287;
}
.alert-dark .btn-close {
  color: #FFF;
}
.alert-dark .btn-close.custom-close {
  background-color: #202C4B;
  color: #FFF;
  opacity: 1;
  border-radius: 50px;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  padding: 0.85rem;
}

.alert-solid-primary {
  background-color: #3D5EE1;
  color: #FFF;
  border-color: #3D5EE1;
}
.alert-solid-primary .btn-close {
  color: #FFF;
}

.alert-solid-secondary {
  background-color: #6FCCD8;
  color: #FFF;
  border-color: #6FCCD8;
}
.alert-solid-secondary .btn-close {
  color: #FFF;
}

.alert-solid-warning {
  background-color: #EAB300;
  color: #FFF;
  border-color: #EAB300;
}
.alert-solid-warning .btn-close {
  color: #FFF;
}

.alert-solid-info {
  background-color: #0F65CD;
  color: #FFF;
  border-color: #0F65CD;
}
.alert-solid-info .btn-close {
  color: #FFF;
}

.alert-solid-success {
  background-color: #1ABE17;
  color: #FFF;
  border-color: #1ABE17;
}
.alert-solid-success .btn-close {
  color: #FFF;
}

.alert-solid-danger {
  background-color: #E82646;
  color: #FFF;
  border-color: #E82646;
}
.alert-solid-danger .btn-close {
  color: #FFF;
}

.alert-solid-light {
  background-color: #E9EDF4;
  color: #6A7287;
  border-color: #9CA1AF;
}

.alert-solid-dark {
  background-color: #202C4B;
  color: #FFF;
  border-color: #202C4B;
}
.alert-solid-dark .btn-close {
  color: #FFF;
}

.alert-outline-primary {
  background-color: #FFF;
  color: #3D5EE1;
  border-color: #3D5EE1;
}
.alert-outline-primary .btn-close {
  color: #3D5EE1;
}

.alert-outline-secondary {
  background-color: #FFF;
  color: #6FCCD8;
  border-color: #6FCCD8;
}
.alert-outline-secondary .btn-close {
  color: #6FCCD8;
}

.alert-outline-info {
  background-color: #FFF;
  color: #0F65CD;
  border-color: #0F65CD;
}
.alert-outline-info .btn-close {
  color: #0F65CD;
}

.alert-outline-warning {
  background-color: #FFF;
  color: #EAB300;
  border-color: #EAB300;
}
.alert-outline-warning .btn-close {
  color: #EAB300;
}

.alert-outline-success {
  background-color: #FFF;
  color: #1ABE17;
  border-color: #1ABE17;
}
.alert-outline-success .btn-close {
  color: #1ABE17;
}

.alert-outline-danger {
  background-color: #FFF;
  color: #E82646;
  border-color: #E82646;
}
.alert-outline-danger .btn-close {
  color: #E82646;
}

.alert-outline-light {
  background-color: #FFF;
  color: #6A7287;
  border-color: #E9EDF4;
}

.alert-outline-dark {
  background-color: #FFF;
  color: #202C4B;
  border-color: #202C4B;
}
.alert-outline-dark .btn-close {
  color: #202C4B;
}

.alert-primary.custom-alert-icon {
  border-inline-start: 0.313rem solid #3D5EE1 !important;
  color: #677788;
  background-color: #FFF;
  border: 1px solid #9CA1AF;
  font-size: 0.813rem;
}
.alert-primary.custom-alert-icon .btn-close {
  color: #6A7287;
}
.alert-primary.custom-alert-icon > i {
  color: #3D5EE1;
}

.alert-secondary.custom-alert-icon {
  border-inline-start: 0.313rem solid #6FCCD8 !important;
  color: #677788;
  background-color: #FFF;
  border: 1px solid #9CA1AF;
  font-size: 0.813rem;
}
.alert-secondary.custom-alert-icon .btn-close {
  color: #6A7287;
}
.alert-secondary.custom-alert-icon > i {
  color: #6FCCD8;
}

.alert-warning.custom-alert-icon {
  border-inline-start: 0.313rem solid #EAB300 !important;
  color: #677788;
  background-color: #FFF;
  border: 1px solid #9CA1AF;
  font-size: 0.813rem;
}
.alert-warning.custom-alert-icon .btn-close {
  color: #6A7287;
}
.alert-warning.custom-alert-icon > i {
  color: #EAB300;
}

.alert-danger.custom-alert-icon {
  border-inline-start: 0.313rem solid #E82646 !important;
  color: #677788;
  background-color: #FFF;
  border: 1px solid #9CA1AF;
  font-size: 0.813rem;
}
.alert-danger.custom-alert-icon .btn-close {
  color: #6A7287;
}
.alert-danger.custom-alert-icon > i {
  color: #E82646;
}

.alert-success.custom-alert-icon {
  border-inline-start: 0.313rem solid #1ABE17 !important;
  color: #677788;
  background-color: #FFF;
  border: 1px solid #9CA1AF;
  font-size: 0.813rem;
}
.alert-success.custom-alert-icon .btn-close {
  color: #6A7287;
}

.alert-info.custom-alert-icon {
  border-inline-start: 0.313rem solid #0F65CD !important;
  color: #677788;
  background-color: #FFF;
  border: 1px solid #9CA1AF;
  font-size: 0.813rem;
}
.alert-info.custom-alert-icon .btn-close {
  color: #6A7287;
}

.alert-light.custom-alert-icon {
  border-inline-start: 0.313rem solid #E9EDF4 !important;
  color: #677788;
  background-color: #FFF;
  border: 1px solid #9CA1AF;
  font-size: 0.813rem;
}
.alert-light.custom-alert-icon .btn-close {
  color: #6A7287;
}

.alert-dark.custom-alert-icon {
  border-inline-start: 0.313rem solid #202C4B !important;
  color: #677788;
  background-color: #FFF;
  border: 1px solid #9CA1AF;
  font-size: 0.813rem;
}
.alert-dark.custom-alert-icon .btn-close {
  color: #6A7287;
}

.custom-alert1 {
  margin-block-end: 0;
  background-color: #FFF;
  border: 0;
  padding: 1.25rem;
  color: #6A7287;
}
.custom-alert1 p {
  margin-block-end: 2.5rem;
  color: #677788;
  font-size: 0.8rem;
}
.custom-alert1 .custom-alert-icon {
  font-size: 40px;
  margin-bottom: 0.85rem;
}
.custom-alert1 .custom-alert-icon i {
  font-size: 40px;
}
.custom-alert1 .btn-close {
  padding: 0;
  margin-block-end: 1rem;
}
.custom-alert1.alert-primary {
  border-block-start: 0.313rem solid #3D5EE1;
}
.custom-alert1.alert-primary .custom-alert-icon {
  color: #3D5EE1;
}
.custom-alert1.alert-secondary {
  border-block-start: 0.313rem solid #6FCCD8;
}
.custom-alert1.alert-secondary .custom-alert-icon {
  color: #6FCCD8;
}
.custom-alert1.alert-warning {
  border-block-start: 0.313rem solid #EAB300;
}
.custom-alert1.alert-warning .custom-alert-icon {
  color: #EAB300;
}
.custom-alert1.alert-danger {
  border-block-start: 0.313rem solid #E82646;
}
.custom-alert1.alert-danger .custom-alert-icon {
  color: #E82646;
}

.alert-img {
  display: flex;
  align-items: center;
}
.alert-img .avatar {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 400px) {
  .btn-close.custom-close {
    margin: 9px 9px 9px 0;
  }
}
.op-7 {
  opacity: 0.7;
}

.op-8 {
  opacity: 0.8;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.custom-popover {
  --bs-popover-max-width: 12.5rem;
  --bs-popover-border-color: #3D5EE1;
  --bs-popover-header-bg: #3D5EE1;
  --bs-popover-header-color: #FFF;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 0.5rem;
}

.popover {
  background-color: #FFF;
  border: 1px solid #9CA1AF;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  font-size: 0.8rem;
  border-radius: 4px;
  z-index: 999;
}
.popover .popover-header {
  background-color: #FFF;
  border-block-end: 1px solid #9CA1AF;
}
.popover .popover-body {
  color: #6A7287;
}
.popover.only-body {
  border-radius: 0.3rem;
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after,
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before,
.bs-popover-top > .popover-arrow::before {
  border-top-color: #E9EDF4;
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before,
.bs-popover-end > .popover-arrow::before {
  border-right-color: #E9EDF4;
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after,
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before,
.bs-popover-start > .popover-arrow::before {
  border-left-color: #E9EDF4;
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after,
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before,
.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,
.bs-popover-bottom .popover-header::before {
  border-bottom-color: #E9EDF4;
}

.header-primary .popover-header {
  background-color: #3D5EE1;
  color: #FFF;
}
.header-primary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .header-primary.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  border-bottom-color: #3D5EE1;
}

.header-secondary .popover-header {
  background-color: #6FCCD8;
  color: #FFF;
}
.header-secondary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .header-secondary.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  border-bottom-color: #6FCCD8;
}

.header-warning .popover-header {
  background-color: #EAB300;
  color: #FFF;
}
.header-warning.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .header-warning.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  border-bottom-color: #EAB300;
}

.header-info .popover-header {
  background-color: #0F65CD;
  color: #FFF;
}
.header-info.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .header-info.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  border-bottom-color: #0F65CD;
}

.header-success .popover-header {
  background-color: #1ABE17;
  color: #FFF;
}
.header-success.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .header-success.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  border-bottom-color: #1ABE17;
}

.header-danger .popover-header {
  background-color: #E82646;
  color: #FFF;
}
.header-danger.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .header-danger.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  border-bottom-color: #E82646;
}

.popover-primary.popover {
  border: 1px solid #3D5EE1;
}
.popover-primary.popover .popover-header {
  background-color: #3D5EE1;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  border-radius: 0.3rem 0.3rem 0 0;
}
.popover-primary.popover .popover-body {
  background-color: #3D5EE1;
  color: #FFF;
  border-radius: 0 0 0.3rem 0.3rem;
}
.popover-primary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-primary.bs-popover-top > .popover-arrow::after, .popover-primary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-primary.bs-popover-top > .popover-arrow::before {
  border-top-color: #3D5EE1;
}
.popover-primary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-primary.bs-popover-end > .popover-arrow::after, .popover-primary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-primary.bs-popover-end > .popover-arrow::before {
  border-right-color: #3D5EE1;
}
.popover-primary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-primary.bs-popover-start > .popover-arrow::after, .popover-primary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-primary.bs-popover-start > .popover-arrow::before {
  border-left-color: #3D5EE1;
}
.popover-primary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-primary.bs-popover-bottom > .popover-arrow::after, .popover-primary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-primary.bs-popover-bottom > .popover-arrow::before, .popover-primary.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-primary.bs-popover-bottom .popover-header::before {
  border-bottom-color: #3D5EE1;
}

.popover-secondary.popover {
  border: 1px solid #6FCCD8;
}
.popover-secondary.popover .popover-header {
  background-color: #6FCCD8;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  border-radius: 0.3rem 0.3rem 0 0;
}
.popover-secondary.popover .popover-body {
  background-color: #6FCCD8;
  color: #FFF;
  border-radius: 0 0 0.3rem 0.3rem;
}
.popover-secondary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-secondary.bs-popover-top > .popover-arrow::after, .popover-secondary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-secondary.bs-popover-top > .popover-arrow::before {
  border-top-color: #6FCCD8;
}
.popover-secondary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-secondary.bs-popover-end > .popover-arrow::after, .popover-secondary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-secondary.bs-popover-end > .popover-arrow::before {
  border-right-color: #6FCCD8;
}
.popover-secondary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-secondary.bs-popover-start > .popover-arrow::after, .popover-secondary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-secondary.bs-popover-start > .popover-arrow::before {
  border-left-color: #6FCCD8;
}
.popover-secondary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-secondary.bs-popover-bottom > .popover-arrow::after, .popover-secondary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-secondary.bs-popover-bottom > .popover-arrow::before, .popover-secondary.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-secondary.bs-popover-bottom .popover-header::before {
  border-bottom-color: #6FCCD8;
}

.popover-warning.popover {
  border: 1px solid #EAB300;
}
.popover-warning.popover .popover-header {
  background-color: #EAB300;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  border-radius: 0.3rem 0.3rem 0 0;
}
.popover-warning.popover .popover-body {
  background-color: #EAB300;
  color: #FFF;
  border-radius: 0 0 0.3rem 0.3rem;
}
.popover-warning.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-warning.bs-popover-top > .popover-arrow::after, .popover-warning.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-warning.bs-popover-top > .popover-arrow::before {
  border-top-color: #EAB300;
}
.popover-warning.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-warning.bs-popover-end > .popover-arrow::after, .popover-warning.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-warning.bs-popover-end > .popover-arrow::before {
  border-right-color: #EAB300;
}
.popover-warning.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-warning.bs-popover-start > .popover-arrow::after, .popover-warning.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-warning.bs-popover-start > .popover-arrow::before {
  border-left-color: #EAB300;
}
.popover-warning.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-warning.bs-popover-bottom > .popover-arrow::after, .popover-warning.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-warning.bs-popover-bottom > .popover-arrow::before, .popover-warning.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-warning.bs-popover-bottom .popover-header::before {
  border-bottom-color: #EAB300;
}

.popover-info.popover {
  border: 1px solid #0F65CD;
}
.popover-info.popover .popover-header {
  background-color: #0F65CD;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  border-radius: 0.3rem 0.3rem 0 0;
}
.popover-info.popover .popover-body {
  background-color: #0F65CD;
  color: #FFF;
  border-radius: 0 0 0.3rem 0.3rem;
}
.popover-info.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-info.bs-popover-top > .popover-arrow::after, .popover-info.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-info.bs-popover-top > .popover-arrow::before {
  border-top-color: #0F65CD;
}
.popover-info.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-info.bs-popover-end > .popover-arrow::after, .popover-info.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-info.bs-popover-end > .popover-arrow::before {
  border-right-color: #0F65CD;
}
.popover-info.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-info.bs-popover-start > .popover-arrow::after, .popover-info.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-info.bs-popover-start > .popover-arrow::before {
  border-left-color: #0F65CD;
}
.popover-info.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-info.bs-popover-bottom > .popover-arrow::after, .popover-info.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-info.bs-popover-bottom > .popover-arrow::before, .popover-info.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-info.bs-popover-bottom .popover-header::before {
  border-bottom-color: #0F65CD;
}

.popover-success.popover {
  border: 1px solid #1ABE17;
}
.popover-success.popover .popover-header {
  background-color: #1ABE17;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  border-radius: 0.3rem 0.3rem 0 0;
}
.popover-success.popover .popover-body {
  background-color: #1ABE17;
  color: #FFF;
  border-radius: 0 0 0.3rem 0.3rem;
}
.popover-success.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-success.bs-popover-top > .popover-arrow::after, .popover-success.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-success.bs-popover-top > .popover-arrow::before {
  border-top-color: #1ABE17;
}
.popover-success.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-success.bs-popover-end > .popover-arrow::after, .popover-success.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-success.bs-popover-end > .popover-arrow::before {
  border-right-color: #1ABE17;
}
.popover-success.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-success.bs-popover-start > .popover-arrow::after, .popover-success.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-success.bs-popover-start > .popover-arrow::before {
  border-left-color: #1ABE17;
}
.popover-success.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-success.bs-popover-bottom > .popover-arrow::after, .popover-success.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-success.bs-popover-bottom > .popover-arrow::before, .popover-success.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-success.bs-popover-bottom .popover-header::before {
  border-bottom-color: #1ABE17;
}

.popover-danger.popover {
  border: 1px solid #E82646;
}
.popover-danger.popover .popover-header {
  background-color: #E82646;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  border-radius: 0.3rem 0.3rem 0 0;
}
.popover-danger.popover .popover-body {
  background-color: #E82646;
  color: #FFF;
  border-radius: 0 0 0.3rem 0.3rem;
}
.popover-danger.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-danger.bs-popover-top > .popover-arrow::after, .popover-danger.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-danger.bs-popover-top > .popover-arrow::before {
  border-top-color: #E82646;
}
.popover-danger.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-danger.bs-popover-end > .popover-arrow::after, .popover-danger.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-danger.bs-popover-end > .popover-arrow::before {
  border-right-color: #E82646;
}
.popover-danger.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-danger.bs-popover-start > .popover-arrow::after, .popover-danger.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-danger.bs-popover-start > .popover-arrow::before {
  border-left-color: #E82646;
}
.popover-danger.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-danger.bs-popover-bottom > .popover-arrow::after, .popover-danger.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-danger.bs-popover-bottom > .popover-arrow::before, .popover-danger.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-danger.bs-popover-bottom .popover-header::before {
  border-bottom-color: #E82646;
}

.popover-purple.popover {
  border: 1px solid #4A00E5;
}
.popover-purple.popover .popover-header {
  background-color: #4A00E5;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  border-radius: 0.3rem 0.3rem 0 0;
}
.popover-purple.popover .popover-body {
  background-color: #4A00E5;
  color: #FFF;
  border-radius: 0 0 0.3rem 0.3rem;
}
.popover-purple.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-purple.bs-popover-top > .popover-arrow::after, .popover-purple.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-purple.bs-popover-top > .popover-arrow::before {
  border-top-color: #4A00E5;
}
.popover-purple.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-purple.bs-popover-end > .popover-arrow::after, .popover-purple.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-purple.bs-popover-end > .popover-arrow::before {
  border-right-color: #4A00E5;
}
.popover-purple.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-purple.bs-popover-start > .popover-arrow::after, .popover-purple.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-purple.bs-popover-start > .popover-arrow::before {
  border-left-color: #4A00E5;
}
.popover-purple.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-purple.bs-popover-bottom > .popover-arrow::after, .popover-purple.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-purple.bs-popover-bottom > .popover-arrow::before, .popover-purple.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-purple.bs-popover-bottom .popover-header::before {
  border-bottom-color: #4A00E5;
}

.popover-teal.popover {
  border: 1px solid #02a8b5;
}
.popover-teal.popover .popover-header {
  background-color: #02a8b5;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  border-radius: 0.3rem 0.3rem 0 0;
}
.popover-teal.popover .popover-body {
  background-color: #02a8b5;
  color: #FFF;
  border-radius: 0 0 0.3rem 0.3rem;
}
.popover-teal.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-teal.bs-popover-top > .popover-arrow::after, .popover-teal.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-teal.bs-popover-top > .popover-arrow::before {
  border-top-color: #02a8b5;
}
.popover-teal.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-teal.bs-popover-end > .popover-arrow::after, .popover-teal.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-teal.bs-popover-end > .popover-arrow::before {
  border-right-color: #02a8b5;
}
.popover-teal.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-teal.bs-popover-start > .popover-arrow::after, .popover-teal.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-teal.bs-popover-start > .popover-arrow::before {
  border-left-color: #02a8b5;
}
.popover-teal.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-teal.bs-popover-bottom > .popover-arrow::after, .popover-teal.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-teal.bs-popover-bottom > .popover-arrow::before, .popover-teal.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-teal.bs-popover-bottom .popover-header::before {
  border-bottom-color: #02a8b5;
}

.popover-primary-light.popover {
  border: 1px solid rgba(61, 94, 225, 0.1);
}
.popover-primary-light.popover .popover-header {
  background-color: rgba(61, 94, 225, 0.1);
  border-block-end: 1px solid rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
  border-radius: 0;
}
.popover-primary-light.popover .popover-body {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}
.popover-primary-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-primary-light.bs-popover-top > .popover-arrow::after, .popover-primary-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-primary-light.bs-popover-top > .popover-arrow::before {
  border-top-color: rgba(61, 94, 225, 0.1);
}
.popover-primary-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-primary-light.bs-popover-end > .popover-arrow::after, .popover-primary-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-primary-light.bs-popover-end > .popover-arrow::before {
  border-right-color: rgba(61, 94, 225, 0.1);
}
.popover-primary-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-primary-light.bs-popover-start > .popover-arrow::after, .popover-primary-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-primary-light.bs-popover-start > .popover-arrow::before {
  border-left-color: rgba(61, 94, 225, 0.1);
}
.popover-primary-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-primary-light.bs-popover-bottom > .popover-arrow::after, .popover-primary-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-primary-light.bs-popover-bottom > .popover-arrow::before, .popover-primary-light.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-primary-light.bs-popover-bottom .popover-header::before {
  border-bottom-color: rgba(61, 94, 225, 0.1);
}

.popover-secondary-light.popover {
  border: 1px solid rgba(111, 204, 216, 0.1);
}
.popover-secondary-light.popover .popover-header {
  background-color: rgba(111, 204, 216, 0.1);
  border-block-end: 1px solid rgba(111, 204, 216, 0.1);
  color: #6FCCD8;
  border-radius: 0;
}
.popover-secondary-light.popover .popover-body {
  background-color: rgba(111, 204, 216, 0.1);
  color: #6FCCD8;
}
.popover-secondary-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-secondary-light.bs-popover-top > .popover-arrow::after, .popover-secondary-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-secondary-light.bs-popover-top > .popover-arrow::before {
  border-top-color: rgba(var(--secondary-rgb), 0.1);
}
.popover-secondary-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-secondary-light.bs-popover-end > .popover-arrow::after, .popover-secondary-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-secondary-light.bs-popover-end > .popover-arrow::before {
  border-right-color: rgba(111, 204, 216, 0.1);
}
.popover-secondary-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-secondary-light.bs-popover-start > .popover-arrow::after, .popover-secondary-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-secondary-light.bs-popover-start > .popover-arrow::before {
  border-left-color: rgba(var(--secondary-rgb), 0.1);
}
.popover-secondary-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-secondary-light.bs-popover-bottom > .popover-arrow::after, .popover-secondary-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-secondary-light.bs-popover-bottom > .popover-arrow::before, .popover-secondary-light.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-secondary-light.bs-popover-bottom .popover-header::before {
  border-bottom-color: rgba(var(--secondary-rgb), 0.1);
}

.popover-warning-light.popover {
  border: 1px solid rgba(234, 179, 0, 0.1);
}
.popover-warning-light.popover .popover-header {
  background-color: rgba(234, 179, 0, 0.1);
  border-block-end: 1px solid rgba(234, 179, 0, 0.1);
  color: #EAB300;
  border-radius: 0;
}
.popover-warning-light.popover .popover-body {
  background-color: rgba(234, 179, 0, 0.1);
  color: #EAB300;
}
.popover-warning-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-warning-light.bs-popover-top > .popover-arrow::after, .popover-warning-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-warning-light.bs-popover-top > .popover-arrow::before {
  border-top-color: rgba(234, 179, 0, 0.1);
}
.popover-warning-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-warning-light.bs-popover-end > .popover-arrow::after, .popover-warning-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-warning-light.bs-popover-end > .popover-arrow::before {
  border-right-color: rgba(234, 179, 0, 0.1);
}
.popover-warning-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-warning-light.bs-popover-start > .popover-arrow::after, .popover-warning-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-warning-light.bs-popover-start > .popover-arrow::before {
  border-left-color: rgba(234, 179, 0, 0.1);
}
.popover-warning-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-warning-light.bs-popover-bottom > .popover-arrow::after, .popover-warning-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-warning-light.bs-popover-bottom > .popover-arrow::before, .popover-warning-light.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-warning-light.bs-popover-bottom .popover-header::before {
  border-bottom-color: rgba(234, 179, 0, 0.1);
}

.popover-info-light.popover {
  border: 1px solid rgba(15, 101, 205, 0.1);
}
.popover-info-light.popover .popover-header {
  background-color: rgba(15, 101, 205, 0.1);
  border-block-end: 1px solid rgba(15, 101, 205, 0.1);
  color: #0F65CD;
  border-radius: 0;
}
.popover-info-light.popover .popover-body {
  background-color: rgba(15, 101, 205, 0.1);
  color: #0F65CD;
}
.popover-info-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-info-light.bs-popover-top > .popover-arrow::after, .popover-info-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-info-light.bs-popover-top > .popover-arrow::before {
  border-top-color: rgba(15, 101, 205, 0.1);
}
.popover-info-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-info-light.bs-popover-end > .popover-arrow::after, .popover-info-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-info-light.bs-popover-end > .popover-arrow::before {
  border-right-color: rgba(15, 101, 205, 0.1);
}
.popover-info-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-info-light.bs-popover-start > .popover-arrow::after, .popover-info-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-info-light.bs-popover-start > .popover-arrow::before {
  border-left-color: rgba(15, 101, 205, 0.1);
}
.popover-info-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-info-light.bs-popover-bottom > .popover-arrow::after, .popover-info-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-info-light.bs-popover-bottom > .popover-arrow::before, .popover-info-light.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-info-light.bs-popover-bottom .popover-header::before {
  border-bottom-color: rgba(15, 101, 205, 0.1);
}

.popover-success-light.popover {
  border: 1px solid rgba(26, 190, 23, 0.1);
}
.popover-success-light.popover .popover-header {
  background-color: rgba(26, 190, 23, 0.1);
  border-block-end: 1px solid rgba(26, 190, 23, 0.1);
  color: #1ABE17;
  border-radius: 0;
}
.popover-success-light.popover .popover-body {
  background-color: rgba(26, 190, 23, 0.1);
  color: #1ABE17;
}
.popover-success-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-success-light.bs-popover-top > .popover-arrow::after, .popover-success-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-success-light.bs-popover-top > .popover-arrow::before {
  border-top-color: rgba(26, 190, 23, 0.1);
}
.popover-success-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-success-light.bs-popover-end > .popover-arrow::after, .popover-success-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-success-light.bs-popover-end > .popover-arrow::before {
  border-right-color: rgba(26, 190, 23, 0.1);
}
.popover-success-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-success-light.bs-popover-start > .popover-arrow::after, .popover-success-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-success-light.bs-popover-start > .popover-arrow::before {
  border-left-color: rgba(26, 190, 23, 0.1);
}
.popover-success-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-success-light.bs-popover-bottom > .popover-arrow::after, .popover-success-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-success-light.bs-popover-bottom > .popover-arrow::before, .popover-success-light.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-success-light.bs-popover-bottom .popover-header::before {
  border-bottom-color: rgba(26, 190, 23, 0.1);
}

.popover-danger-light.popover {
  border: 1px solid rgba(232, 38, 70, 0.1);
}
.popover-danger-light.popover .popover-header {
  background-color: rgba(232, 38, 70, 0.1);
  border-block-end: 1px solid rgba(232, 38, 70, 0.1);
  color: #E82646;
  border-radius: 0;
}
.popover-danger-light.popover .popover-body {
  background-color: rgba(232, 38, 70, 0.1);
  color: #E82646;
}
.popover-danger-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-danger-light.bs-popover-top > .popover-arrow::after, .popover-danger-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-danger-light.bs-popover-top > .popover-arrow::before {
  border-top-color: rgba(232, 38, 70, 0.1);
}
.popover-danger-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-danger-light.bs-popover-end > .popover-arrow::after, .popover-danger-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-danger-light.bs-popover-end > .popover-arrow::before {
  border-right-color: rgba(232, 38, 70, 0.1);
}
.popover-danger-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-danger-light.bs-popover-start > .popover-arrow::after, .popover-danger-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-danger-light.bs-popover-start > .popover-arrow::before {
  border-left-color: rgba(232, 38, 70, 0.1);
}
.popover-danger-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-danger-light.bs-popover-bottom > .popover-arrow::after, .popover-danger-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-danger-light.bs-popover-bottom > .popover-arrow::before, .popover-danger-light.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-danger-light.bs-popover-bottom .popover-header::before {
  border-bottom-color: rgba(232, 38, 70, 0.1);
}

.popover-purple-light.popover {
  border: 1px solid rgba(var(--purple-rgb), 0.1);
}
.popover-purple-light.popover .popover-header {
  background-color: rgba(var(--purple-rgb), 0.1);
  border-block-end: 1px solid rgba(var(--purple-rgb), 0.1);
  color: #4A00E5;
  border-radius: 0;
}
.popover-purple-light.popover .popover-body {
  background-color: rgba(var(--purple-rgb), 0.1);
  color: #4A00E5;
}
.popover-purple-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-purple-light.bs-popover-top > .popover-arrow::after, .popover-purple-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-purple-light.bs-popover-top > .popover-arrow::before {
  border-top-color: rgba(var(--purple-rgb), 0.1);
}
.popover-purple-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-purple-light.bs-popover-end > .popover-arrow::after, .popover-purple-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-purple-light.bs-popover-end > .popover-arrow::before {
  border-right-color: rgba(var(--purple-rgb), 0.1);
}
.popover-purple-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-purple-light.bs-popover-start > .popover-arrow::after, .popover-purple-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-purple-light.bs-popover-start > .popover-arrow::before {
  border-left-color: rgba(var(--purple-rgb), 0.1);
}
.popover-purple-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-purple-light.bs-popover-bottom > .popover-arrow::after, .popover-purple-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-purple-light.bs-popover-bottom > .popover-arrow::before, .popover-purple-light.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-purple-light.bs-popover-bottom .popover-header::before {
  border-bottom-color: rgba(var(--purple-rgb), 0.1);
}

.popover-teal-light.popover {
  border: 1px solid rgba(var(--teal-rgb), 0.1);
}
.popover-teal-light.popover .popover-header {
  background-color: rgba(var(--teal-rgb), 0.1);
  border-block-end: 1px solid rgba(var(--teal-rgb), 0.1);
  color: #02a8b5;
  border-radius: 0;
}
.popover-teal-light.popover .popover-body {
  background-color: rgba(var(--teal-rgb), 0.1);
  color: #02a8b5;
}
.popover-teal-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-teal-light.bs-popover-top > .popover-arrow::after, .popover-teal-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-teal-light.bs-popover-top > .popover-arrow::before {
  border-top-color: rgba(var(--teal-rgb), 0.1);
}
.popover-teal-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .popover-teal-light.bs-popover-end > .popover-arrow::after, .popover-teal-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-teal-light.bs-popover-end > .popover-arrow::before {
  border-right-color: rgba(var(--teal-rgb), 0.1);
}
.popover-teal-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-teal-light.bs-popover-start > .popover-arrow::after, .popover-teal-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-teal-light.bs-popover-start > .popover-arrow::before {
  border-left-color: rgba(var(--teal-rgb), 0.1);
}
.popover-teal-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-teal-light.bs-popover-bottom > .popover-arrow::after, .popover-teal-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-teal-light.bs-popover-bottom > .popover-arrow::before, .popover-teal-light.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .popover-teal-light.bs-popover-bottom .popover-header::before {
  border-bottom-color: rgba(var(--teal-rgb), 0.1);
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.form-control {
  border-color: #E9EDF4;
  color: #202C4B;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  border-radius: 5px;
  padding: 0.5rem 0.625rem;
  height: 38px;
  transition: all 0.5s;
}
.form-control:focus {
  box-shadow: none;
  border-color: #E9EDF4;
}

textarea {
  resize: none;
}
textarea.form-control {
  min-height: 38px;
  height: auto;
}

.form-control[type=file] {
  padding: 0.3rem 0.5rem;
}
.form-control[type=file].form-control-sm {
  padding: 0.25rem 0.5rem !important;
}
.form-control[type=file].form-control-lg {
  padding: 0.5rem 1rem !important;
}

.form-text {
  color: #677788;
}

.form-control-light {
  background-color: #E9EDF4;
  border: 0;
}
.form-control-light:focus {
  background-color: #E9EDF4;
}

.form-control-primary {
  background-color: rgba(61, 94, 225, 0.1);
  border: 0;
  color: #3D5EE1;
}
.form-control-primary:focus {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}

.form-input-color {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
}

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: #677788;
}

.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
  background-color: transparent;
}

.form-select {
  background-color: #ffffff;
  border: 1px solid #E9EDF4;
  color: #6A7287;
  font-size: 14px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-size: 1.25rem;
  line-height: 2;
}
.form-select option {
  background-color: #FFF;
  padding: 0.35rem 0.75rem;
  border-radius: 0.25rem;
  margin-block-end: 0.25rem;
}
.form-select option:last-child {
  margin-block-end: 0;
}
.form-select option:checked {
  background-color: rgba(var(#3D5EE1), 0.2);
  color: #3D5EE1;
}
.form-select option:select {
  background-color: rgba(var(#3D5EE1), 0.2);
  color: #3D5EE1;
}
.form-select option:hover {
  background-color: rgba(var(#3D5EE1), 0.2);
  color: #3D5EE1;
}
.form-select option:focus {
  background-color: rgba(var(#3D5EE1), 0.2);
  color: #3D5EE1;
}

.form-check-input {
  width: 0.9rem;
  height: 0.9rem;
  background-color: #FFF;
  border: 1px solid #E9EDF4;
}
.form-check-input:checked {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
}
.form-check-input.form-checked-outline:checked {
  background-color: transparent;
  border-color: #3D5EE1;
}
.form-check-input.form-checked-secondary:checked {
  background-color: #6FCCD8;
  border-color: #6FCCD8;
}
.form-check-input.form-checked-warning:checked {
  background-color: #EAB300;
  border-color: #EAB300;
}
.form-check-input.form-checked-info:checked {
  background-color: #0F65CD;
  border-color: #0F65CD;
}
.form-check-input.form-checked-success:checked {
  background-color: #1ABE17;
  border-color: #1ABE17;
}
.form-check-input.form-checked-danger:checked {
  background-color: #E82646;
  border-color: #E82646;
}
.form-check-input.form-checked-light:checked {
  background-color: #E9EDF4;
  border-color: #E9EDF4;
}
.form-check-input.form-checked-dark:checked {
  background-color: #202C4B;
  border-color: #202C4B;
}
.form-check-input:focus {
  box-shadow: none;
}

.form-checked-outline:checked[type=checkbox] {
  background-image: none;
  position: relative;
  background-color: transparent;
}
.form-checked-outline:checked[type=checkbox]:before {
  content: "\f633";
  font-family: bootstrap-icons !important;
  position: absolute;
  color: #3D5EE1;
  width: 0.625rem;
  height: 0.625rem;
  inset-block-start: -1px;
  inset-inline-start: 0px;
  font-size: 0.688rem;
}
.form-checked-outline:checked[type=checkbox].form-checked-secondary:before {
  color: #6FCCD8;
}
.form-checked-outline:checked[type=checkbox].form-checked-warning:before {
  color: #EAB300;
}
.form-checked-outline:checked[type=checkbox].form-checked-info:before {
  color: #0F65CD;
}
.form-checked-outline:checked[type=checkbox].form-checked-success:before {
  color: #1ABE17;
}
.form-checked-outline:checked[type=checkbox].form-checked-danger:before {
  color: #E82646;
}
.form-checked-outline:checked[type=checkbox].form-checked-light:before {
  color: #E9EDF4;
}
.form-checked-outline:checked[type=checkbox].form-checked-dark:before {
  color: #202C4B;
}

.form-checked-outline:checked[type=radio] {
  background-image: none;
  position: relative;
  background-color: transparent;
}
.form-checked-outline:checked[type=radio]:before {
  content: "\f309";
  font-family: bootstrap-icons !important;
  position: absolute;
  color: #3D5EE1;
  width: 0.625rem;
  height: 0.625rem;
  inset-block-start: -1.13rem;
  inset-inline-start: -0.6rem;
  font-size: 2rem;
}
.form-checked-outline:checked[type=radio].form-checked-secondary:before {
  color: #6FCCD8;
}
.form-checked-outline:checked[type=radio].form-checked-warning:before {
  color: #EAB300;
}
.form-checked-outline:checked[type=radio].form-checked-info:before {
  color: #0F65CD;
}
.form-checked-outline:checked[type=radio].form-checked-success:before {
  color: #1ABE17;
}
.form-checked-outline:checked[type=radio].form-checked-danger:before {
  color: #E82646;
}
.form-checked-outline:checked[type=radio].form-checked-light:before {
  color: #E9EDF4;
}
.form-checked-outline:checked[type=radio].form-checked-dark:before {
  color: #202C4B;
}

fieldset:disabled .btn {
  color: #FFF;
  background-color: #3D5EE1;
  border-color: #3D5EE1;
}

.form-select:focus {
  border-color: rgba(var(#3D5EE1), 0.5);
  outline: 0;
  box-shadow: none;
}

.btn-check:focus + .btn,
.btn:focus {
  background-color: none;
  border-color: none;
  outline: 0;
}

.btn-check:active + .btn:focus,
.btn-check:checked + .btn:focus,
.btn.active:focus,
.btn.show:focus,
.btn:active:focus {
  box-shadow: none;
}

.form-control:disabled,
.form-select:disabled {
  background-color: #E9EDF4;
  color: #6A7287;
}

.form-control-plaintext {
  color: #6A7287;
}

.form-control::-webkit-file-upload-button {
  color: #6A7287;
  background-color: #f7f8f9;
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: #f7f8f9;
}

.form-control:focus {
  color: #202C4B;
}
.form-control:focus::-webkit-input-placeholder, .form-control:focus::placeholder {
  color: #9CA1AF;
  padding-inline-start: 0.3rem;
  transition: padding-inline-start 0.1s ease-in;
}
.form-control::-webkit-input-placeholder {
  color: #9CA1AF;
  padding-inline-start: 0px;
  transition: padding-inline-start 0.1s ease-in;
}
.form-control:-moz-placeholder {
  color: #9CA1AF;
}
.form-control::-moz-placeholder {
  color: #9CA1AF;
}
.form-control:-ms-input-placeholder {
  color: #9CA1AF;
}

.form-control-sm {
  font-size: 0.8rem;
  padding: 0.25rem 0.8rem;
  height: auto;
}

.form-control-lg {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.form-check-md .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
}
.form-check-md.form-switch .form-check-input {
  width: 2.25rem;
}
.form-check-md label {
  margin-inline-start: 0.5rem;
  font-size: 0.95rem;
  margin-block-start: 3px;
}

.form-check-lg .form-check-input {
  width: 1.35rem;
  height: 1.35rem;
}
.form-check-lg.form-switch .form-check-input {
  width: 2.5rem;
}
.form-check-lg label {
  margin-inline-start: 0.5rem;
  font-size: 1rem;
  margin-block-start: 3px;
}

.label-primary {
  background: #3D5EE1;
  color: #FFF;
}

.label-secondary {
  background: #6FCCD8;
  color: #FFF;
}

.label-warning {
  background: #EAB300;
  color: #FFF;
}

.label-info {
  background: #0F65CD;
  color: #FFF;
}

.label-success {
  background: #1ABE17;
  color: #FFF;
}

.label-danger {
  background: #E82646;
  color: #FFF;
}

.label-light {
  background: #E9EDF4;
  color: #FFF;
}

.label-dark {
  background: #202C4B;
  color: #FFF;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: transparent !important;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
  height: calc(3.5rem - 4px);
}

.form-floating.floating-primary label {
  color: #3D5EE1;
  opacity: 1;
}
.form-floating.floating-primary input {
  border: 1px solid #3D5EE1;
}
.form-floating.floating-primary > .form-control:focus ~ label {
  color: #3D5EE1 !important;
}
.form-floating.floating-secondary label {
  color: #6FCCD8;
  opacity: 1;
}
.form-floating.floating-secondary input {
  border: 1px solid #6FCCD8;
}
.form-floating.floating-secondary > .form-control:focus ~ label {
  color: #6FCCD8 !important;
}
.form-floating.floating-warning label {
  color: #EAB300;
  opacity: 1;
}
.form-floating.floating-warning input {
  border: 1px solid #EAB300;
}
.form-floating.floating-warning > .form-control:focus ~ label {
  color: #EAB300 !important;
}
.form-floating.floating-info label {
  color: #0F65CD;
  opacity: 1;
}
.form-floating.floating-info input {
  border: 1px solid #0F65CD;
}
.form-floating.floating-info > .form-control:focus ~ label {
  color: #0F65CD !important;
}
.form-floating.floating-success label {
  color: #1ABE17;
  opacity: 1;
}
.form-floating.floating-success input {
  border: 1px solid #1ABE17;
}
.form-floating.floating-success > .form-control:focus ~ label {
  color: #1ABE17 !important;
}
.form-floating.floating-danger label {
  color: #E82646;
  opacity: 1;
}
.form-floating.floating-danger input {
  border: 1px solid #E82646;
}
.form-floating.floating-danger > .form-control:focus ~ label {
  color: #E82646 !important;
}

.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: #FFF;
  border-radius: 4px;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: #1ABE17;
  box-shadow: none;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #1ABE17;
}

.form-control-color {
  width: 1.75rem;
  height: 1.75rem;
  overflow: hidden;
  padding: 0;
}

.bootstrap-tagsinput {
  border-color: #E9EDF4;
  color: #6A7287;
  background-color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  border-radius: 5px;
  padding: 0.45rem 0.625rem;
  height: 38px;
  box-shadow: none;
  overflow-y: auto;
  width: 100%;
}
.bootstrap-tagsinput .tag {
  background: #E9EDF4;
  border-radius: 5px;
  padding: 0 5px;
  font-size: 14px;
  color: #515B73;
  display: inline-flex;
  align-items: center;
}
.bootstrap-tagsinput .tag span::after {
  color: #202C4B;
}
.bootstrap-tagsinput .tag [data-role=remove]:hover {
  box-shadow: none;
}
.bootstrap-tagsinput .tag [data-role=remove]:hover:active {
  box-shadow: none;
}

[dir=rtl] [type=email],
[dir=rtl] [type=number],
[dir=rtl] [type=tel],
[dir=rtl] [type=url] {
  direction: rtl;
}

.form-select.is-invalid:not([multiple]):not([size]) {
  padding-right: 1.125rem;
  background-size: 16px 28px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

input[type=range]::-webkit-slider-runnable-track {
  background-color: #E9EDF4;
}

[dir=rtl] .form-checked-outline:checked[type=checkbox]:before {
  inset-inline-start: 1px;
}

.form-check {
  min-height: inherit !important;
}

.col-form-label-lg,
.col-form-label-sm,
.col-form-label {
  font-weight: 600;
}

.col-form-label {
  font-size: 15px;
  font-weight: 500;
  color: #202C4B;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #202C4B;
}

[data-theme-mode=dark] input[type=week]::-webkit-calendar-picker-indicator, [data-theme-mode=dark] input[type=month]::-webkit-calendar-picker-indicator, [data-theme-mode=dark] input[type=date]::-webkit-calendar-picker-indicator, [data-theme-mode=dark] input[type=datetime-local]::-webkit-calendar-picker-indicator, [data-theme-mode=dark] input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

[dir=rtl] input[type=week], [dir=rtl] input[type=month], [dir=rtl] input[type=date], [dir=rtl] input[type=datetime-local], [dir=rtl] input[type=time] {
  text-align: end;
}

.input-group-text {
  border-color: #E9EDF4;
}

/**
Form help
 */
.form-help {
  display: inline-flex;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.75rem;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  background: #6FCCD8;
  border-radius: 4px;
}
.form-help:hover, .form-help[aria-describedby] {
  color: #FFF;
  background: #3D5EE1;
}

.input-icon {
  position: relative;
}
.input-icon .form-control:not(:last-child),
.input-icon .form-select:not(:last-child) {
  padding-right: 2.5rem;
}

/* Input Group */
.input-group-link {
  font-size: 12px;
}

.input-group-flat:focus-within {
  border-radius: 4px;
}
.input-group-flat:focus-within .form-control,
.input-group-flat:focus-within .input-group-text {
  border-color: #E9EDF4 !important;
}
.input-group-flat .form-control:focus {
  box-shadow: none;
}
.input-group-flat .form-control:not(:last-child) {
  border-right: 0;
}
.input-group-flat .form-control:not(:first-child) {
  border-left: 0;
}
.input-group-flat .input-group-text:first-child {
  padding-right: 0;
}
.input-group-flat .input-group-text:last-child {
  padding-left: 0;
}

.custom-radio {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-size: 15px;
  color: #515B73;
  text-transform: capitalize;
}
.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.custom-radio input:checked ~ .checkmark {
  border-color: #3D5EE1;
  background: #3D5EE1;
}
.custom-radio input:checked ~ .checkmark::after {
  opacity: 1;
  visibility: visible;
}
.custom-radio .checkmark {
  width: 20px;
  height: 20px;
  border: 1px solid #E9EDF4;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.custom-radio .checkmark::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #FFF;
  opacity: 0;
  visibility: hidden;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.check-radio-group {
  flex-wrap: wrap;
  row-gap: 10px;
}
.check-radio-group .custom-radio {
  margin-right: 15px;
}

.check {
  display: block;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.checktoggle {
  background-color: rgba(115, 103, 240, 0.2);
  border-radius: 12px;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 24px;
  margin-bottom: 0;
  position: relative;
  width: 46px;
}

.status-toggle.modal-status label {
  height: 16px;
  width: 30px;
  background-color: #FFF;
  border: 1px solid #E9EDF4;
  margin-bottom: 0;
}

.check:checked + .checktoggle {
  background-color: #FFF;
}

.checktoggle:after {
  content: " ";
  display: block;
  transform: translate(2px, -50%);
  width: 10px;
  height: 10px;
  background-color: #B5B9C3;
  transition: left 300ms ease, transform 300ms ease;
  border-radius: 50%;
  transform: translate(2px, -50%);
  -webkit-transform: translate(4px, -50%);
  -ms-transform: translate(2px, -50%);
  position: absolute;
  top: 50%;
  left: 0;
}

.check:checked + .checktoggle:after {
  background-color: #3D5EE1;
  left: 100%;
  transform: translate(calc(-90% - 4px), -50%);
}

.input-icon-addon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  color: #515B73;
  pointer-events: none;
  font-size: 1.2em;
}
.input-icon-addon:last-child {
  right: 0;
  left: auto;
}
.input-icon-addon .spinner-border-sm {
  border-width: 1px;
}

.input-icon-start .form-control {
  padding-left: 28px;
}

.icon-addon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  color: #515B73;
  pointer-events: none;
  font-size: 1.2em;
}

.form-wrap .form-wrap-icon {
  position: relative;
}
.form-wrap .form-wrap-icon i {
  font-size: 18px;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}

.toggle-password {
  cursor: pointer;
  width: 30px;
  height: 30px;
  color: #202C4B;
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  border-radius: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 10px;
}
.toggle-password:hover {
  color: #3D5EE1;
}

.pass-group {
  position: relative;
}

.toggle-passwords, .toggle-passworda {
  cursor: pointer;
  width: 30px;
  height: 30px;
  color: #202C4B;
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  border-radius: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 10px;
}
.toggle-passwords:hover, .toggle-passworda:hover {
  color: #3D5EE1;
}

.form-wrap-checkbox {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}
.form-wrap-checkbox .check {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  color: #202C4B;
  margin-bottom: 0;
}
.form-wrap-checkbox .check input {
  display: none;
}
.form-wrap-checkbox .check input:checked + .box {
  background: #6FCCD8;
}
.form-wrap-checkbox .check input:checked + .box:after {
  top: 0;
}
.form-wrap-checkbox .check .box {
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 8px;
  transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
  background: #FBFBFD;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #E9EDF4;
  border-radius: 5px;
}
.form-wrap-checkbox .check .box:after {
  width: 12px;
  height: 6px;
  content: "";
  position: absolute;
  border-left: 2px solid;
  border-bottom: 2px solid;
  border-color: #FFF;
  transform: rotate(-45deg) translate3d(0, 0, 0);
  transform-origin: center center;
  transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
  left: 0;
  right: 0;
  top: 200%;
  bottom: 3px;
  margin: auto;
}

.form-sort .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 35px;
}
.form-sort span.select2-container.select2-container--default.select2-container--open {
  z-index: 99;
}

.form-sort {
  position: relative;
  width: 149px;
  height: 40px;
}
.form-sort .info-img {
  position: absolute;
  top: 52%;
  z-index: 100;
  width: 16px;
  height: 16px;
  left: 0;
  margin-left: 10px;
  color: #6A7287;
  transform: translateY(-50%);
  line-height: normal;
}
@media (max-width: 575.98px) {
  .form-sort {
    margin-top: 24px;
  }
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.notes-tog i {
  transform: rotate(180deg);
}
.notes-tog.active i {
  transform: rotate(0deg);
}

.section-bulk-wrap .form-sort {
  position: relative;
}

.section-bulk-widget {
  transition: 0.6s all;
}

.section-notes-dashboard {
  display: none;
  transition: 0.6s all;
}

.notes-tog i {
  transition: 0.5s all;
}

.notes-tag-left .notes-tog i {
  transform: rotate(360deg);
  transition: 0.5s all;
}

.budgeted-role-notes {
  width: 100%;
}

.notes-summernote .card {
  margin-bottom: 0 !important;
}

.dropdown-item:active {
  background: transparent;
}

.notes-summernote p {
  color: #6A7287;
  font-size: 15px;
  font-weight: 400;
}

.budget-role-notes .owl-carousel .owl-nav {
  margin: 0;
  position: absolute;
}

.custom-pagination .paginations {
  align-items: center;
}
.custom-pagination .paginations span {
  display: flex;
  align-items: center;
  color: #6A7287;
  width: 16px;
  height: 16px;
}
.custom-pagination .paginations span .fa-chevron-left {
  margin-right: 8px;
}
.custom-pagination .paginations .page-wrap li a {
  margin-right: 8px;
  border-radius: 85px;
  color: #6A7287;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  width: 30px;
  height: 30px;
  padding: 5px;
  justify-content: center;
  align-items: center;
}
.custom-pagination .paginations .page-wrap li a.active {
  background: #3D5EE1;
  color: #FFF;
}
.custom-pagination .paginations .page-wrap li :hover {
  background: #3D5EE1;
  color: #FFF;
  transition: 0.3s all;
}

.accordion-button:after, .accordion-button:not(.collapsed)::after {
  display: none;
}

.todo-accordion .accordion-item {
  background: transparent;
  margin-bottom: 15px;
  border: 0;
  padding: 0;
}

.line-clamb-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notes-tog {
  bottom: -15px;
}

.input-blocks input[type=text].datetimepicker {
  padding-left: 35px;
}

.iti__country-list {
  z-index: 101;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.todo-inbox-check {
  margin-right: 15px;
}
.todo-inbox-check .checkboxs {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.todo-inbox-check .checkboxs input ~ .checkmarks {
  border-color: rgba(145, 158, 171, 0.3);
  border-radius: 5px;
  margin-top: 0;
  width: 20px;
  height: 20px;
}
.todo-inbox-check .checkboxs input:checked ~ .checkmarks {
  border-color: #3D5EE1;
  background-color: #3D5EE1;
}

.todo-accordion .accordion-button:after {
  display: none;
}

.todo-calendar .input-groupicon.calender-input input {
  padding-left: 10px;
}

.todo-calendar {
  position: relative;
}
.todo-calendar .calender-input {
  position: relative;
}
.todo-calendar .calender-input .info-img {
  position: absolute;
  top: 11px;
  z-index: 100;
  width: 16px;
  height: 16px;
  right: 5px !important;
  color: #6A7287;
}

.todo-accordion .accordion-item {
  background: transparent;
  margin-bottom: 30px;
}
.todo-accordion .accordion-item .accordion-header {
  cursor: pointer;
}
.todo-accordion .accordion-item .accordion-header .accordion-button {
  background: transparent;
  padding: 0;
}
.todo-accordion .accordion-item .accordion-header .accordion-button.collapsed .todo-today-content {
  margin-bottom: 0;
}
.todo-accordion .accordion-item .accordion-header .todo-drop-down a span i {
  color: #6A7287;
}
.todo-accordion .accordion-item .accordion-body {
  padding: 0;
}

.section-bulk-wrap .form-sort .ti-filter {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.input-block.todo-inbox-check {
  margin-bottom: 0;
  position: relative;
}

.section-bulk-widget .nav-pills .nav-link:hover {
  background: #202C4B;
  color: #FFF !important;
}
.section-bulk-widget .nav-pills .nav-link.active {
  background: #202C4B;
  color: #FFF !important;
}

.square-rotate {
  transform: rotate(45deg);
}

.todo-strike-content .strike-info h4 {
  text-decoration: line-through;
}
.todo-strike-content .strike-info p {
  text-decoration: line-through;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
caption {
  color: #677788;
}

.table-active {
  --bs-table-color-state: var(--default-text-color);
}

.table {
  color: #6A7287;
  border-color: #9CA1AF;
  margin-block-end: 0;
}
.table tbody tr {
  border-color: #E9EDF4;
}
.table tbody tr th {
  font-weight: 500;
}
.table th,
.table td {
  padding: 12px 20px;
  vertical-align: middle;
  font-size: 14px;
  white-space: nowrap;
}
.table thead tr {
  border-color: #E9EDF4;
}
.table thead tr th {
  font-weight: 500;
  border-color: #E9EDF4;
  font-size: 14px;
}
.table.table-sm > :not(caption) > * > * {
  padding: 0.3rem;
}
.table.table-dark {
  color: #F0F2F7;
  border-color: rgba(255, 255, 255, 0.1);
}
.table .thead-primary th {
  background-color: #3D5EE1;
  color: #FFF;
}
.table .thead-secondary th {
  background-color: #6FCCD8;
  color: #FFF;
}
.table .thead-info th {
  background-color: #0F65CD;
  color: #FFF;
}
.table .thead-warning th {
  background-color: #EAB300;
  color: #FFF;
}
.table .thead-danger th {
  background-color: #E82646;
  color: #FFF;
}
.table .thead-success th {
  background-color: #1ABE17;
  color: #FFF;
}
.table .thead-dark th {
  background-color: #202C4B;
  color: #FFF;
}
.table .thead-light th {
  background-color: #F2F4F8;
  color: #202C4B;
}
.table.table-primary {
  background-color: #FFF;
  color: #000;
  --bs-table-color-state: $black;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(var(--primary-rgb), 0.1);
  --bs-table-border-color: rgba(var(--primary-rgb), 0.05);
  --bs-table-striped-bg: rgba(var(--primary-rgb), 0.2);
  --bs-table-active-bg: rgba(var(--primary-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--primary-rgb), 0.2);
}
.table.table-primary.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--primary-rgb), 0.2);
  color: #000;
}
.table.table-primary.table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--primary-rgb), 0.4);
  color: #FFF;
}
.table.table-primary .table-active {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgb(var(--primary-rgb));
  color: #FFF;
}
.table.table-secondary {
  background-color: #FFF;
  color: #000;
  --bs-table-color-state: $black;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(var(--secondary-rgb), 0.1);
  --bs-table-border-color: rgba(var(--secondary-rgb), 0.05);
  --bs-table-striped-bg: rgba(var(--secondary-rgb), 0.2);
  --bs-table-active-bg: rgba(var(--secondary-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--secondary-rgb), 0.2);
}
.table.table-secondary.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--secondary-rgb), 0.2);
  color: #000;
}
.table.table-secondary.table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--secondary-rgb), 0.4);
  color: #FFF;
}
.table.table-secondary .table-active {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgb(var(--secondary-rgb));
  color: #FFF;
}
.table.table-warning {
  background-color: #FFF;
  color: #000;
  --bs-table-color-state: $black;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(var(--warning-rgb), 0.1);
  --bs-table-border-color: rgba(var(--warning-rgb), 0.05);
  --bs-table-striped-bg: rgba(var(--warning-rgb), 0.2);
  --bs-table-active-bg: rgba(var(--warning-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--warning-rgb), 0.2);
}
.table.table-warning.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--warning-rgb), 0.2);
  color: #000;
}
.table.table-warning.table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--warning-rgb), 0.4);
  color: #FFF;
}
.table.table-warning .table-active {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgb(var(--warning-rgb));
  color: #FFF;
}
.table.table-success {
  background-color: #FFF;
  color: #000;
  --bs-table-color-state: $black;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(var(--success-rgb), 0.1);
  --bs-table-border-color: rgba(var(--success-rgb), 0.05);
  --bs-table-striped-bg: rgba(var(--success-rgb), 0.2);
  --bs-table-active-bg: rgba(var(--success-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--success-rgb), 0.2);
}
.table.table-success.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--success-rgb), 0.2);
  color: #000;
}
.table.table-success.table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--success-rgb), 0.4);
  color: #FFF;
}
.table.table-success .table-active {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgb(var(--success-rgb));
  color: #FFF;
}
.table.table-danger {
  background-color: #FFF;
  color: #000;
  --bs-table-color-state: $black;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(var(--danger-rgb), 0.1);
  --bs-table-border-color: rgba(var(--danger-rgb), 0.05);
  --bs-table-striped-bg: rgba(var(--danger-rgb), 0.2);
  --bs-table-active-bg: rgba(var(--danger-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--danger-rgb), 0.2);
}
.table.table-danger.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--danger-rgb), 0.2);
  color: #000;
}
.table.table-danger.table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--danger-rgb), 0.4);
  color: #FFF;
}
.table.table-danger .table-active {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgb(var(--danger-rgb));
  color: #FFF;
}
.table.table-info {
  background-color: #FFF;
  color: #000;
  --bs-table-color-state: $black;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(var(--info-rgb), 0.1);
  --bs-table-border-color: rgba(var(--info-rgb), 0.05);
  --bs-table-striped-bg: rgba(var(--info-rgb), 0.2);
  --bs-table-active-bg: rgba(var(--info-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--info-rgb), 0.2);
}
.table.table-info.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--info-rgb), 0.2);
  color: #000;
}
.table.table-info.table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--info-rgb), 0.4);
  color: #FFF;
}
.table.table-info .table-active {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgb(var(--info-rgb));
  color: #FFF;
}
.table.table-light {
  background-color: #FFF;
  color: #000;
  --bs-table-color-state: $black;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(var(--light-rgb), 0.1);
  --bs-table-border-color: rgba(var(--light-rgb), 0.05);
  --bs-table-striped-bg: rgba(var(--light-rgb), 0.2);
  --bs-table-active-bg: rgba(var(--light-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--light-rgb), 0.2);
}
.table.table-light.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--light-rgb), 0.2);
  color: #000;
}
.table.table-light.table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--light-rgb), 0.4);
  color: #FFF;
}
.table.table-light .table-active {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgb(var(--light-rgb));
  color: #FFF;
}
.table.table-dark {
  background-color: #FFF;
  color: #000;
  --bs-table-color-state: $black;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(var(--dark-rgb), 0.1);
  --bs-table-border-color: rgba(var(--dark-rgb), 0.05);
  --bs-table-striped-bg: rgba(var(--dark-rgb), 0.2);
  --bs-table-active-bg: rgba(var(--dark-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--dark-rgb), 0.2);
}
.table.table-dark.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--dark-rgb), 0.2);
  color: #000;
}
.table.table-dark.table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--dark-rgb), 0.4);
  color: #FFF;
}
.table.table-dark .table-active {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgb(var(--dark-rgb));
  color: #FFF;
}
.table.table-bordered.border-primary tbody,
.table.table-bordered.border-primary td,
.table.table-bordered.border-primary tfoot,
.table.table-bordered.border-primary th,
.table.table-bordered.border-primary thead,
.table.table-bordered.border-primary tr {
  border-color: rgba(61, 94, 225, 0.1);
}
.table.table-bordered.border-info tbody,
.table.table-bordered.border-info td,
.table.table-bordered.border-info tfoot,
.table.table-bordered.border-info th,
.table.table-bordered.border-info thead,
.table.table-bordered.border-info tr {
  border-color: rgba(15, 101, 205, 0.1);
}
.table.table-bordered.border-secondary tbody,
.table.table-bordered.border-secondary td,
.table.table-bordered.border-secondary tfoot,
.table.table-bordered.border-secondary th,
.table.table-bordered.border-secondary thead,
.table.table-bordered.border-secondary tr {
  border-color: rgba(111, 204, 216, 0.1);
}
.table.table-bordered.border-warning tbody,
.table.table-bordered.border-warning td,
.table.table-bordered.border-warning tfoot,
.table.table-bordered.border-warning th,
.table.table-bordered.border-warning thead,
.table.table-bordered.border-warning tr {
  border-color: rgba(234, 179, 0, 0.1);
}
.table.table-bordered.border-success tbody,
.table.table-bordered.border-success td,
.table.table-bordered.border-success tfoot,
.table.table-bordered.border-success th,
.table.table-bordered.border-success thead,
.table.table-bordered.border-success tr {
  border-color: rgba(26, 190, 23, 0.1);
}
.table.table-bordered.border-danger tbody,
.table.table-bordered.border-danger td,
.table.table-bordered.border-danger tfoot,
.table.table-bordered.border-danger th,
.table.table-bordered.border-danger thead,
.table.table-bordered.border-danger tr {
  border-color: rgba(232, 38, 70, 0.1);
}
.table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(var(--dark-rgb),0.0125);
  color: #6A7287;
}
.table.table-striped-columns > :not(caption) > tr > :nth-child(2n) {
  --bs-table-accent-bg: rgba(var(--dark-rgb),0.025);
  color: #6A7287;
}
.table tbody.table-group-divider {
  border-top: 1px solid #9CA1AF;
}
.table.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: #f7f8f9;
  color: #6A7287;
}
.table .table-active {
  --bs-table-accent-bg: #E9EDF4;
  color: #6A7287;
}
.table thead.table-primary {
  background-color: #FFF;
  color: var(--bs-table-color);
  --bs-table-color-state: #000;
  --bs-table-color: #000;
  --bs-table-bg: rgba(var(--primary-rgb), 0.1);
  --bs-table-border-color: rgba(var(--primary-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--primary-rgb), 0.5);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--primary-rgb), 0.5);
  --bs-table-hover-bg: rgba(var(--primary-rgb), 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table thead.table-secondary {
  background-color: #FFF;
  color: var(--bs-table-color);
  --bs-table-color-state: #000;
  --bs-table-color: #000;
  --bs-table-bg: rgba(var(--secondary-rgb), 0.1);
  --bs-table-border-color: rgba(var(--secondary-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--secondary-rgb), 0.5);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--secondary-rgb), 0.5);
  --bs-table-hover-bg: rgba(var(--secondary-rgb), 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table thead.table-warning {
  background-color: #FFF;
  color: var(--bs-table-color);
  --bs-table-color-state: #000;
  --bs-table-color: #000;
  --bs-table-bg: rgba(var(--warning-rgb), 0.1);
  --bs-table-border-color: rgba(var(--warning-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--warning-rgb), 0.5);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--warning-rgb), 0.5);
  --bs-table-hover-bg: rgba(var(--warning-rgb), 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table thead.table-success {
  background-color: #FFF;
  color: var(--bs-table-color);
  --bs-table-color-state: #000;
  --bs-table-color: #000;
  --bs-table-bg: rgba(var(--success-rgb), 0.1);
  --bs-table-border-color: rgba(var(--success-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--success-rgb), 0.5);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--success-rgb), 0.5);
  --bs-table-hover-bg: rgba(var(--success-rgb), 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table thead.table-danger {
  background-color: #FFF;
  color: var(--bs-table-color);
  --bs-table-color-state: #000;
  --bs-table-color: #000;
  --bs-table-bg: rgba(var(--danger-rgb), 0.1);
  --bs-table-border-color: rgba(var(--danger-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--danger-rgb), 0.5);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--danger-rgb), 0.5);
  --bs-table-hover-bg: rgba(var(--danger-rgb), 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table thead.table-info {
  background-color: #FFF;
  color: var(--bs-table-color);
  --bs-table-color-state: #000;
  --bs-table-color: #000;
  --bs-table-bg: rgba(var(--info-rgb), 0.1);
  --bs-table-border-color: rgba(var(--info-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--info-rgb), 0.5);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--info-rgb), 0.5);
  --bs-table-hover-bg: rgba(var(--info-rgb), 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table thead.table-light {
  background-color: #FFF;
  color: var(--bs-table-color);
  --bs-table-color-state: #000;
  --bs-table-color: #000;
  --bs-table-bg: rgba(var(--light-rgb), 0.1);
  --bs-table-border-color: rgba(var(--light-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--light-rgb), 0.5);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--light-rgb), 0.5);
  --bs-table-hover-bg: rgba(var(--light-rgb), 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table thead.table-dark {
  background-color: #FFF;
  color: var(--bs-table-color);
  --bs-table-color-state: #000;
  --bs-table-color: #000;
  --bs-table-bg: rgba(var(--dark-rgb), 0.1);
  --bs-table-border-color: rgba(var(--dark-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--dark-rgb), 0.5);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--dark-rgb), 0.5);
  --bs-table-hover-bg: rgba(var(--dark-rgb), 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.datanew tbody {
  border-top: 1px solid #E9EDF4;
}

.table-primary {
  --bs-table-color: #000;
  --bs-table-color-state: $black;
  --bs-table-bg: rgba(var(--primary-rgb), 0.1);
  --bs-table-border-color: rgba(var(--primary-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--primary-rgb), 0.3);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--primary-rgb), 0.3);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgba(var(--primary-rgb), 0.3);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgba(var(--primary-rgb), 0.1);
  background-color: #FFF;
}

.table-secondary {
  --bs-table-color: #000;
  --bs-table-color-state: $black;
  --bs-table-bg: rgba(var(--secondary-rgb), 0.1);
  --bs-table-border-color: rgba(var(--secondary-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--secondary-rgb), 0.3);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--secondary-rgb), 0.3);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgba(var(--secondary-rgb), 0.3);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgba(var(--secondary-rgb), 0.1);
  background-color: #FFF;
}

.table-warning {
  --bs-table-color: #000;
  --bs-table-color-state: $black;
  --bs-table-bg: rgba(var(--warning-rgb), 0.1);
  --bs-table-border-color: rgba(var(--warning-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--warning-rgb), 0.3);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--warning-rgb), 0.3);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgba(var(--warning-rgb), 0.3);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgba(var(--warning-rgb), 0.1);
  background-color: #FFF;
}

.table-success {
  --bs-table-color: #000;
  --bs-table-color-state: $black;
  --bs-table-bg: rgba(var(--success-rgb), 0.1);
  --bs-table-border-color: rgba(var(--success-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--success-rgb), 0.3);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--success-rgb), 0.3);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgba(var(--success-rgb), 0.3);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgba(var(--success-rgb), 0.1);
  background-color: #FFF;
}

.table-info {
  --bs-table-color: #000;
  --bs-table-color-state: $black;
  --bs-table-bg: rgba(var(--info-rgb), 0.1);
  --bs-table-border-color: rgba(var(--info-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--info-rgb), 0.3);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--info-rgb), 0.3);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgba(var(--info-rgb), 0.3);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgba(var(--info-rgb), 0.1);
  background-color: #FFF;
}

.table-danger {
  --bs-table-color: #000;
  --bs-table-color-state: $black;
  --bs-table-bg: rgba(var(--danger-rgb), 0.1);
  --bs-table-border-color: rgba(var(--danger-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--danger-rgb), 0.3);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--danger-rgb), 0.3);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgba(var(--danger-rgb), 0.3);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgba(var(--danger-rgb), 0.1);
  background-color: #FFF;
}

.table-dark {
  --bs-table-color: #000;
  --bs-table-color-state: $black;
  --bs-table-bg: rgba(var(--dark-rgb), 0.1);
  --bs-table-border-color: rgba(var(--dark-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--dark-rgb), 0.3);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--dark-rgb), 0.3);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgba(var(--dark-rgb), 0.3);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgba(var(--dark-rgb), 0.1);
  background-color: #FFF;
}

.table-light {
  --bs-table-color: #000;
  --bs-table-color-state: $black;
  --bs-table-bg: rgba(var(--light-rgb), 0.1);
  --bs-table-border-color: rgba(var(--light-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--light-rgb), 0.3);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgba(var(--light-rgb), 0.3);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgba(var(--light-rgb), 0.3);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgba(var(--light-rgb), 0.1);
  background-color: #FFF;
}

[data-theme-mode=dark] .table-dark {
  border-color: rgba(0, 0, 0, 0.025);
}

[dir=rtl] .table {
  margin-inline-end: 1px;
}

.invoice-table {
  border: 1px solid #E9EDF4;
  border-radius: 5px;
  margin: 20px 0;
}
.invoice-table thead th {
  border-bottom: 1px solid #E9EDF4;
}
.invoice-table thead th:first-child {
  width: 80%;
}
.invoice-table tbody tr:last-child td {
  border-bottom: 0;
}
.invoice-table .delete-invoive-list {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FDE9ED;
  color: #E82646;
  border-radius: 5px;
  font-size: 16px;
}

.invoice-product-table {
  border-top: 1px solid #E9EDF4;
}

.table {
  margin: 0;
}
.table tbody tr td {
  color: #515B73;
  font-size: 14px;
}
.table tbody tr td .product-img img {
  border: 0;
}
.table tbody tr.active {
  border-bottom: 0;
}
.table tbody tr.active td {
  font-size: 18px;
  color: #515B73;
  font-weight: 600;
  border-bottom: 0;
}
.table tbody tr .checkboxs .checkmarks {
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.new tbody tr td {
  border-bottom: none;
}

.dataTables_filter + .dataTables_filter {
  display: none;
}

.productimgname {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.productimgname a {
  color: #6FCCD8;
  font-weight: 500;
}

.table .input-blocks input[type=text] {
  height: 40px;
}

.table {
  margin: 0;
}
.table tbody tr td {
  color: #515B73;
}
.table tbody tr td .product-img img {
  border: 0;
}
.table tbody tr td a {
  color: #202C4B;
}
.table tbody tr td a.product-img {
  margin-right: 5px;
  flex-shrink: 0;
}
.table tbody tr td a .info-img {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}
.table tbody tr td a:hover {
  color: #3D5EE1;
}
.table tbody tr.active {
  border-bottom: 0;
}
.table tbody tr.active td {
  font-size: 18px;
  color: #515B73;
  font-weight: 600;
  border-bottom: 0;
}

table tbody .productimgname {
  min-width: 200px;
}
table tbody .productimgname a.stock-img.product-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  margin-right: 8px;
}
table tbody .productimgname a.stock-img.product-img img {
  width: 50px;
  height: 50px;
  max-width: 100%;
  margin-right: 0;
}

table.table-bordered thead tr th p {
  margin-bottom: 0;
}

.custom-table {
  border-radius: 5px;
}
.custom-table table thead tr th {
  background: #E6E8EB;
  color: #202C4B;
  font-size: 14px;
  border: 0;
  padding: 12px 20px;
}
.custom-table table tbody tr td {
  border: 0;
  padding: 12px 20px;
}
.custom-table table tbody tr td .detail-link {
  font-weight: 600;
  color: #202C4B;
  text-decoration: underline;
}
.custom-table table tbody tr td .detail-link:hover {
  color: #3D5EE1;
}

.table tbody tr td a.delete-icon {
  font-size: 16px;
  color: #E82646;
}
.table tbody tr td a.delete-icon:hover {
  color: rgb(198.0125, 20.9875, 50.1875);
}

.custom-table {
  overflow: hidden;
}
.custom-table .table-responsive tr th {
  border: 0;
  border-bottom: 1px solid #E9EDF4;
}
.custom-table .table-responsive tr.report-first-head th {
  border-bottom: 0;
}
.custom-table .table-responsive tr td {
  border: 0;
  border-bottom: 1px solid #E9EDF4;
}
.custom-table .table-responsive tr td input.form-control {
  min-width: 200px;
}
.custom-table .table-responsive tr:last-child td {
  border-bottom: 0;
}

.table tr td .attendance-range {
  width: 8px;
  height: 15px;
  border-radius: 5px;
  display: block;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.accordion-button {
  background-color: #FFF;
  color: #6A7287;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.accordion-button:not(.collapsed) {
  color: #6A7287;
  background-color: #f7f8f9;
  box-shadow: none;
}
.accordion-button:focus {
  border-color: rgba(61, 94, 225, 0.3);
  box-shadow: none;
}
.accordion-button:after, .accordion-button:not(.collapsed)::after {
  background-image: none;
}
.accordion-button:after {
  content: "\f078";
  font-family: "Fontawesome";
  font-size: 12px;
  line-height: 1;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3.125rem;
  color: #6A7287;
}

.accordion-body {
  padding: 1rem;
  font-size: 0.8125rem;
  color: #677788;
}

.accordion-item {
  color: #6A7287;
  background-color: #FFF;
  border: 1px solid #E9EDF4;
}

.accordions-items-seperate .accordion-item:not(:first-of-type) {
  margin-block-start: 1rem;
}
.accordions-items-seperate .accordion-item {
  border-block-start: 1px solid #E9EDF4;
  border-radius: 4px;
  overflow: hidden;
}

.accordion-item:last-of-type {
  border-bottom-right-radius: 0.35rem;
  border-bottom-left-radius: 0.35rem;
}

.accordion-item:first-of-type {
  border-top-left-radius: 0.35rem;
  border-top-right-radius: 0.35rem;
}

.accordion.accordion-primary .accordion-button {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}
.accordion.accordion-primary .accordion-button:after {
  background-color: #3D5EE1;
  color: #FFF;
}
.accordion.accordion-primary .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-primary .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-secondary .accordion-button {
  background-color: rgba(111, 204, 216, 0.1);
  color: #6FCCD8;
}
.accordion.accordion-secondary .accordion-button:after {
  background-color: #6FCCD8;
  color: #FFF;
}
.accordion.accordion-secondary .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-secondary .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-success .accordion-button {
  background-color: rgba(26, 190, 23, 0.1);
  color: #1ABE17;
}
.accordion.accordion-success .accordion-button:after {
  background-color: #1ABE17;
  color: #FFF;
}
.accordion.accordion-success .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-success .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-danger .accordion-button {
  background-color: rgba(232, 38, 70, 0.1);
  color: #E82646;
}
.accordion.accordion-danger .accordion-button:after {
  background-color: #E82646;
  color: #FFF;
}
.accordion.accordion-danger .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-danger .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-warning .accordion-button {
  background-color: rgba(234, 179, 0, 0.1);
  color: #EAB300;
}
.accordion.accordion-warning .accordion-button:after {
  background-color: #EAB300;
  color: #FFF;
}
.accordion.accordion-warning .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-warning .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-info .accordion-button {
  background-color: rgba(15, 101, 205, 0.1);
  color: #0F65CD;
}
.accordion.accordion-info .accordion-button:after {
  background-color: #0F65CD;
  color: #FFF;
}
.accordion.accordion-info .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-info .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}

.accordion.accordion-solid-primary .accordion-button {
  background-color: #3D5EE1;
  color: #FFF;
}
.accordion.accordion-solid-primary .accordion-button:after {
  background-color: #FFF;
  color: #3D5EE1;
}
.accordion.accordion-solid-primary .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-solid-primary .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-solid-secondary .accordion-button {
  background-color: #6FCCD8;
  color: #FFF;
}
.accordion.accordion-solid-secondary .accordion-button:after {
  background-color: #FFF;
  color: #6FCCD8;
}
.accordion.accordion-solid-secondary .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-solid-secondary .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-solid-success .accordion-button {
  background-color: #1ABE17;
  color: #FFF;
}
.accordion.accordion-solid-success .accordion-button:after {
  background-color: #FFF;
  color: #1ABE17;
}
.accordion.accordion-solid-success .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-solid-success .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-solid-danger .accordion-button {
  background-color: #E82646;
  color: #FFF;
}
.accordion.accordion-solid-danger .accordion-button:after {
  background-color: #FFF;
  color: #E82646;
}
.accordion.accordion-solid-danger .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-solid-danger .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-solid-warning .accordion-button {
  background-color: #EAB300;
  color: #FFF;
}
.accordion.accordion-solid-warning .accordion-button:after {
  background-color: #FFF;
  color: #EAB300;
}
.accordion.accordion-solid-warning .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-solid-warning .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}
.accordion.accordion-solid-info .accordion-button {
  background-color: #0F65CD;
  color: #FFF;
}
.accordion.accordion-solid-info .accordion-button:after {
  background-color: #FFF;
  color: #0F65CD;
}
.accordion.accordion-solid-info .accordion-button.collapsed {
  background-color: #FFF;
  color: #6A7287;
}
.accordion.accordion-solid-info .accordion-button.collapsed:after {
  background-color: #f7f8f9;
  color: #6A7287;
}

.accordion.accordion-border-primary .accordion-item {
  border: 1px solid #3D5EE1;
}
.accordion.accordion-border-primary .accordion-button {
  background-color: #FFF;
  color: #3D5EE1;
  border-block-end: 0px;
}
.accordion.accordion-border-primary .accordion-button:after {
  background-color: #FFF;
  color: #3D5EE1;
  border: 1px solid #3D5EE1;
}
.accordion.accordion-border-primary .accordion-button:not(.collapsed) {
  border-block-end: 1px solid #3D5EE1;
}
.accordion.accordion-border-secondary .accordion-item {
  border: 1px solid #6FCCD8;
}
.accordion.accordion-border-secondary .accordion-button {
  background-color: #FFF;
  color: #6FCCD8;
  border-block-end: 0px;
}
.accordion.accordion-border-secondary .accordion-button:after {
  background-color: #FFF;
  color: #6FCCD8;
  border: 1px solid #6FCCD8;
}
.accordion.accordion-border-secondary .accordion-button:not(.collapsed) {
  border-block-end: 1px solid #6FCCD8;
}
.accordion.accordion-border-success .accordion-item {
  border: 1px solid #1ABE17;
}
.accordion.accordion-border-success .accordion-button {
  background-color: #FFF;
  color: #1ABE17;
  border-block-end: 0px;
}
.accordion.accordion-border-success .accordion-button:after {
  background-color: #FFF;
  color: #1ABE17;
  border: 1px solid #1ABE17;
}
.accordion.accordion-border-success .accordion-button:not(.collapsed) {
  border-block-end: 1px solid #1ABE17;
}
.accordion.accordion-border-danger .accordion-item {
  border: 1px solid #E82646;
}
.accordion.accordion-border-danger .accordion-button {
  background-color: #FFF;
  color: #E82646;
  border-block-end: 0px;
}
.accordion.accordion-border-danger .accordion-button:after {
  background-color: #FFF;
  color: #E82646;
  border: 1px solid #E82646;
}
.accordion.accordion-border-danger .accordion-button:not(.collapsed) {
  border-block-end: 1px solid #E82646;
}
.accordion.accordion-border-warning .accordion-item {
  border: 1px solid #EAB300;
}
.accordion.accordion-border-warning .accordion-button {
  background-color: #FFF;
  color: #EAB300;
  border-block-end: 0px;
}
.accordion.accordion-border-warning .accordion-button:after {
  background-color: #FFF;
  color: #EAB300;
  border: 1px solid #EAB300;
}
.accordion.accordion-border-warning .accordion-button:not(.collapsed) {
  border-block-end: 1px solid #EAB300;
}
.accordion.accordion-border-info .accordion-item {
  border: 1px solid #0F65CD;
}
.accordion.accordion-border-info .accordion-button {
  background-color: #FFF;
  color: #0F65CD;
  border-block-end: 0px;
}
.accordion.accordion-border-info .accordion-button:after {
  background-color: #FFF;
  color: #0F65CD;
  border: 1px solid #0F65CD;
}
.accordion.accordion-border-info .accordion-button:not(.collapsed) {
  border-block-end: 1px solid #0F65CD;
}

.accordion.accordionicon-none .accordion-button:after {
  display: none;
}

.accordion.accordionicon-left .accordion-button {
  padding-inline-start: 2.5rem;
}
.accordion.accordionicon-left .accordion-button:after {
  position: absolute;
  inset-inline-start: 0.625rem;
}

.accordion.accordion-customicon1 .accordion-button:after {
  content: "+";
  font-family: "Fontawesome";
  background-color: #f7f8f9;
}
.accordion.accordion-customicon1 .accordion-button:not(.collapsed)::after {
  content: "\f068";
  font-family: "Fontawesome";
  background-color: #FFF;
}

.customized-accordion .accordion-item.custom-accordion-primary .accordion-button {
  background-color: rgba(61, 94, 225, 0.1);
  border-inline-start: 0.25rem solid rgba(61, 94, 225, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-primary .accordion-button:after {
  background-color: rgba(61, 94, 225, 0.6);
  color: #FFF;
}
.customized-accordion .accordion-item.custom-accordion-primary .accordion-body {
  background-color: rgba(61, 94, 225, 0.1);
  padding-block-start: 0;
  border-inline-start: 0.25rem solid rgba(61, 94, 225, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-secondary .accordion-button {
  background-color: rgba(111, 204, 216, 0.1);
  border-inline-start: 0.25rem solid rgba(111, 204, 216, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-secondary .accordion-button:after {
  background-color: rgba(111, 204, 216, 0.6);
  color: #FFF;
}
.customized-accordion .accordion-item.custom-accordion-secondary .accordion-body {
  background-color: rgba(111, 204, 216, 0.1);
  padding-block-start: 0;
  border-inline-start: 0.25rem solid rgba(111, 204, 216, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-warning .accordion-button {
  background-color: rgba(234, 179, 0, 0.1);
  border-inline-start: 0.25rem solid rgba(234, 179, 0, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-warning .accordion-button:after {
  background-color: rgba(234, 179, 0, 0.6);
  color: #FFF;
}
.customized-accordion .accordion-item.custom-accordion-warning .accordion-body {
  background-color: rgba(234, 179, 0, 0.1);
  padding-block-start: 0;
  border-inline-start: 0.25rem solid rgba(234, 179, 0, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-info .accordion-button {
  background-color: rgba(15, 101, 205, 0.1);
  border-inline-start: 0.25rem solid rgba(15, 101, 205, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-info .accordion-button:after {
  background-color: rgba(15, 101, 205, 0.6);
  color: #FFF;
}
.customized-accordion .accordion-item.custom-accordion-info .accordion-body {
  background-color: rgba(15, 101, 205, 0.1);
  padding-block-start: 0;
  border-inline-start: 0.25rem solid rgba(15, 101, 205, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-success .accordion-button {
  background-color: rgba(26, 190, 23, 0.1);
  border-inline-start: 0.25rem solid rgba(26, 190, 23, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-success .accordion-button:after {
  background-color: rgba(26, 190, 23, 0.6);
  color: #FFF;
}
.customized-accordion .accordion-item.custom-accordion-success .accordion-body {
  background-color: rgba(26, 190, 23, 0.1);
  padding-block-start: 0;
  border-inline-start: 0.25rem solid rgba(26, 190, 23, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-danger .accordion-button {
  background-color: rgba(232, 38, 70, 0.1);
  border-inline-start: 0.25rem solid rgba(232, 38, 70, 0.6);
}
.customized-accordion .accordion-item.custom-accordion-danger .accordion-button:after {
  background-color: rgba(232, 38, 70, 0.6);
  color: #FFF;
}
.customized-accordion .accordion-item.custom-accordion-danger .accordion-body {
  background-color: rgba(232, 38, 70, 0.1);
  padding-block-start: 0;
  border-inline-start: 0.25rem solid rgba(232, 38, 70, 0.6);
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\ea65");
  font-family: "tabler-icons" !important;
}

[dir=rtl] .page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\ea64");
  font-family: "tabler-icons" !important;
}

.breadcrumb .breadcrumb-item a {
  color: #6A7287;
}
.breadcrumb .breadcrumb-item a:hover {
  color: #3D5EE1;
}
.breadcrumb .breadcrumb-item.active {
  color: #202C4B;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #6A7287;
  opacity: 0.4;
}

.breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before {
  color: #6A7287;
  content: "\f101";
  font-family: "Fontawesome" !important;
}

.breadcrumb-pipe .breadcrumb-item + .breadcrumb-item::before {
  color: #6A7287;
  content: "\f061";
  font-family: "Fontawesome" !important;
}

.breadcrumb-line .breadcrumb-item + .breadcrumb-item::before {
  color: #6A7287;
  content: "-";
}

.breadcrumb-dot .breadcrumb-item + .breadcrumb-item::before {
  color: #6A7287;
  content: "•";
}

.breadcrumb-divide .breadcrumb-item + .breadcrumb-item::before {
  color: #6A7287;
  content: "\f054";
  font-family: "Fontawesome" !important;
}

.breadcrumb-separatorless .breadcrumb-item + .breadcrumb-item::before {
  content: "";
  display: none;
}

.breadcrumb-colored {
  padding: 12px 15px;
  border-radius: 4px;
}
.breadcrumb-colored li a {
  color: #FFF;
}
.breadcrumb-colored .breadcrumb-item a {
  color: #FFF;
}
.breadcrumb-colored .breadcrumb-item.active {
  color: #FFF;
  opacity: 0.8;
}
.breadcrumb-colored .breadcrumb-item + .breadcrumb-item a {
  color: #FFF;
}
.breadcrumb-colored .breadcrumb-item + .breadcrumb-item::before {
  color: #FFF;
}

.embedded-breadcrumb:before {
  opacity: 0.7;
}

[data-theme-mode=dark] .embedded-breadcrumb:before {
  filter: invert(1);
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.card {
  margin-bottom: 1.5rem;
  background-color: #FFF;
  transition: all 0.5s ease-in-out;
  position: relative;
  border-radius: 5px;
  border: 1px solid #E9EDF4;
  box-shadow: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.3607843137);
  color: inherit;
}
.card .card-body {
  padding: 1.25rem;
}
@media (max-width: 767.98px) {
  .card .card-body {
    padding: 16px;
  }
}
.card .card-title {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  color: #202C4B;
}
@media (max-width: 767.98px) {
  .card .card-title {
    font-size: 16px;
  }
}
.card .card-header {
  border-color: #E9EDF4;
  position: relative;
  background: transparent;
  padding: 1rem 1.25rem 1rem;
}
@media (max-width: 767.98px) {
  .card .card-header {
    padding: 15px;
  }
}
.card .card-header .card-title {
  margin-bottom: 0rem;
}
.card .card-header .subtitle {
  padding-top: 0.3125rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.card .card-footer {
  border-color: #E9EDF4;
  background: transparent;
  padding: 1rem 1.25rem 1rem;
}

.card-group .card {
  margin-bottom: 1.5rem;
}

.card.custom-card {
  border-radius: 4px;
  border: 0;
  background-color: #FFF;
  position: relative;
  margin-block-end: 1.5rem;
  width: 100%;
}
.card.custom-card .card-header {
  padding: 1rem 1.25rem;
  background-color: transparent !important;
  border-block-end: 1px solid #9CA1AF;
  display: flex;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.card.custom-card .card-header:first-child {
  border-radius: 0.625rem 0.625rem 0 0;
}
.card.custom-card .card-header .card-title {
  position: relative;
  margin-block-end: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: capitalize;
}
.card.custom-card .card-header .card-title .subtitle {
  margin-block-end: 0;
  text-transform: initial;
}
.card.custom-card .card-footer {
  background-color: transparent !important;
  border-block-start: 1px solid #9CA1AF;
  padding: 1rem 1.5rem;
  font-size: 14px;
}
.card.custom-card .card-body {
  padding: 1.5rem;
  color: #6A7287;
}
.card.custom-card .card-link {
  font-size: 0.75rem;
}
.card .card-text {
  font-size: 0.813rem;
}
.card .footer-card-icon {
  width: 60px;
  height: 60px;
}
.card.overlay-card {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
}
.card.overlay-card .card-header {
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}
.card.overlay-card .card-footer {
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}
.card.overlay-card .over-content-bottom {
  top: auto;
}
.card.overlay-card:before {
  content: "";
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}
.card.card-bg-primary {
  background-color: #3D5EE1;
  color: #FFF;
}
.card.card-bg-primary .card-header {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-primary .card-header:before {
  background-color: #FFF;
}
.card.card-bg-primary .card-body {
  color: #FFF;
}
.card.card-bg-primary .card-footer {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-secondary {
  background-color: #6FCCD8;
  color: #FFF;
}
.card.card-bg-secondary .card-header {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-secondary .card-header:before {
  background-color: #FFF;
}
.card.card-bg-secondary .card-body {
  color: #FFF;
}
.card.card-bg-secondary .card-footer {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-warning {
  background-color: #EAB300;
  color: #FFF;
}
.card.card-bg-warning .card-header {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-warning .card-header:before {
  background-color: #FFF;
}
.card.card-bg-warning .card-body {
  color: #FFF;
}
.card.card-bg-warning .card-footer {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-info {
  background-color: #0F65CD;
  color: #FFF;
}
.card.card-bg-info .card-header {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-info .card-header:before {
  background-color: #FFF;
}
.card.card-bg-info .card-body {
  color: #FFF;
}
.card.card-bg-info .card-footer {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-success {
  background-color: #1ABE17;
  color: #FFF;
}
.card.card-bg-success .card-header {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-success .card-header:before {
  background-color: #FFF;
}
.card.card-bg-success .card-body {
  color: #FFF;
}
.card.card-bg-success .card-footer {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-danger {
  background-color: #E82646;
  color: #FFF;
}
.card.card-bg-danger .card-header {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-danger .card-header:before {
  background-color: #FFF;
}
.card.card-bg-danger .card-body {
  color: #FFF;
}
.card.card-bg-danger .card-footer {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-light {
  background-color: #E9EDF4;
  color: #6A7287;
}
.card.card-bg-light .card-header {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #6A7287;
  border-block-end: #9CA1AF;
}
.card.card-bg-light .card-body {
  color: #6A7287;
}
.card.card-bg-light .card-footer {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #6A7287;
  border-block-start: #9CA1AF;
}
.card.card-bg-dark {
  background-color: #202C4B;
  color: #FFF;
}
.card.card-bg-dark .card-header {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}
.card.card-bg-dark .card-header:before {
  background-color: #FFF;
}
.card.card-bg-dark .card-body {
  color: #FFF;
}
.card.card-bg-dark .card-footer {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFF;
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}
.card .card-anchor {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
}
.card .collapse-close {
  display: none;
}
.card.card .collapsed .collapse-close {
  display: block;
}
.card.card .collapsed .collapse-open {
  display: none;
}
.card.card-fullscreen {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-start: 0;
  bottom: 0;
  z-index: 9999;
  margin: 0;
}

.cals-icon {
  font-size: 50px;
  color: #838A9B;
}

.callout {
  padding: 1.25rem;
  margin-block-start: 1.25rem;
  margin-block-end: 1.25rem;
  background-color: #E9EDF4;
  border-inline-start: 0.25rem solid #9CA1AF;
}

.callout-info {
  background-color: rgba(15, 101, 205, 0.075);
  border-color: rgba(15, 101, 205, 0.5);
}

.callout-warning {
  background-color: rgba(234, 179, 0, 0.075);
  border-color: rgba(234, 179, 0, 0.5);
}

.callout-danger {
  background-color: rgba(232, 38, 70, 0.075);
  border-color: rgba(232, 38, 70, 0.5);
}

.btn-facebook {
  background-color: #3B5998;
  color: #FFF;
  border: 1px solid #3B5998;
}
.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active {
  background-color: #3B5998 !important;
  color: #FFF !important;
  border: 1px solid #3B5998 !important;
}

.btn-instagram {
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f09433", endColorstr="#bc1888",GradientType=1 );
  color: #FFF;
  border: 1px solid transparent;
}
.btn-instagram:hover, .btn-instagram:focus, .btn-instagram:active {
  color: #FFF;
  border: 1px solid transparent;
}

.btn-twitter {
  background-color: #00ACEE;
  color: #FFF;
  border: 1px solid #00ACEE;
}
.btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active {
  background-color: #00ACEE !important;
  color: #FFF !important;
  border: 1px solid #00ACEE !important;
}

.btn-icon {
  width: 2.313rem;
  height: 2.313rem;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.btn-wave {
  display: inline-block !important;
}

@media (max-width: 575px) {
  .overlay-card .card-text {
    font-size: 0.613rem !important;
  }
}
@media (max-width: 400px) {
  .overlay-card .card-text {
    font-size: 0.413rem !important;
  }
}
.card .form-control-plaintext {
  min-height: 38px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.tooltip.tooltip-primary .tooltip-inner {
  background-color: #3D5EE1;
}
.tooltip.tooltip-primary.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip.tooltip-primary.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #3D5EE1;
}
.tooltip.tooltip-primary.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip.tooltip-primary.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #3D5EE1;
}
.tooltip.tooltip-primary.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip.tooltip-primary.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #3D5EE1;
}
.tooltip.tooltip-primary.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip.tooltip-primary.bs-tooltip-end .tooltip-arrow::before {
  border-bottom-color: #3D5EE1;
}
.tooltip.tooltip-secondary .tooltip-inner {
  background-color: #6FCCD8;
}
.tooltip.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip.tooltip-secondary.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #6FCCD8;
}
.tooltip.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip.tooltip-secondary.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #6FCCD8;
}
.tooltip.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip.tooltip-secondary.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #6FCCD8;
}
.tooltip.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip.tooltip-secondary.bs-tooltip-end .tooltip-arrow::before {
  border-bottom-color: #6FCCD8;
}
.tooltip.tooltip-warning .tooltip-inner {
  background-color: #EAB300;
}
.tooltip.tooltip-warning.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip.tooltip-warning.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #EAB300;
}
.tooltip.tooltip-warning.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip.tooltip-warning.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #EAB300;
}
.tooltip.tooltip-warning.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip.tooltip-warning.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #EAB300;
}
.tooltip.tooltip-warning.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip.tooltip-warning.bs-tooltip-end .tooltip-arrow::before {
  border-bottom-color: #EAB300;
}
.tooltip.tooltip-info .tooltip-inner {
  background-color: #0F65CD;
}
.tooltip.tooltip-info.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip.tooltip-info.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #0F65CD;
}
.tooltip.tooltip-info.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip.tooltip-info.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #0F65CD;
}
.tooltip.tooltip-info.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip.tooltip-info.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #0F65CD;
}
.tooltip.tooltip-info.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip.tooltip-info.bs-tooltip-end .tooltip-arrow::before {
  border-bottom-color: #0F65CD;
}
.tooltip.tooltip-success .tooltip-inner {
  background-color: #1ABE17;
}
.tooltip.tooltip-success.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip.tooltip-success.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #1ABE17;
}
.tooltip.tooltip-success.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip.tooltip-success.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #1ABE17;
}
.tooltip.tooltip-success.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip.tooltip-success.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #1ABE17;
}
.tooltip.tooltip-success.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip.tooltip-success.bs-tooltip-end .tooltip-arrow::before {
  border-bottom-color: #1ABE17;
}
.tooltip.tooltip-danger .tooltip-inner {
  background-color: #E82646;
}
.tooltip.tooltip-danger.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip.tooltip-danger.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #E82646;
}
.tooltip.tooltip-danger.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip.tooltip-danger.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #E82646;
}
.tooltip.tooltip-danger.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip.tooltip-danger.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #E82646;
}
.tooltip.tooltip-danger.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip.tooltip-danger.bs-tooltip-end .tooltip-arrow::before {
  border-bottom-color: #E82646;
}
.tooltip.tooltip-dark .tooltip-inner {
  background-color: #202C4B;
}
.tooltip.tooltip-dark.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip.tooltip-dark.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #202C4B;
}
.tooltip.tooltip-dark.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip.tooltip-dark.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #202C4B;
}
.tooltip.tooltip-dark.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip.tooltip-dark.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #202C4B;
}
.tooltip.tooltip-dark.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip.tooltip-dark.bs-tooltip-end .tooltip-arrow::before {
  border-bottom-color: #202C4B;
}
.tooltip.tooltip-dark .tooltip-inner {
  color: #FFF;
}
.tooltip.tooltip-light .tooltip-inner {
  background-color: #E9EDF4;
}
.tooltip.tooltip-light.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip.tooltip-light.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #E9EDF4;
}
.tooltip.tooltip-light.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip.tooltip-light.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #E9EDF4;
}
.tooltip.tooltip-light.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip.tooltip-light.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #E9EDF4;
}
.tooltip.tooltip-light.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip.tooltip-light.bs-tooltip-end .tooltip-arrow::before {
  border-bottom-color: #E9EDF4;
}
.tooltip.tooltip-light .tooltip-inner {
  color: #6A7287;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.nav-item {
  margin-inline-end: 0.5rem;
}
.nav-item:last-child {
  margin-inline-end: 0;
}

.nav-link {
  color: #6A7287;
  border-radius: 4px;
}
.nav-link.active {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}

.navbar-brand {
  color: #6A7287;
}
.navbar-brand:focus, .navbar-brand:hover {
  color: #6A7287;
  opacity: 0.9;
}

.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: #3D5EE1;
}

.nav-link.disabled {
  color: #6A7287;
  opacity: 0.3;
}

.nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled {
  color: rgba(32, 44, 75, 0.5);
}

.navbar-text {
  color: #6A7287;
}

.navbar-dark.bg-dark .nav-link,
.navbar-dark.bg-dark .navbar-brand {
  color: #FFF;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
  color: #FFF;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #FFF;
  background-color: #3D5EE1;
}

.nav.nav-style-1 {
  border: 0;
}
.nav.nav-style-1 .nav-item {
  margin-inline-end: 0.25rem;
}
.nav.nav-style-1 .nav-item:last-child {
  margin-inline-end: 0;
}
.nav.nav-style-1 .nav-link.active {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}
.nav.nav-style-1 .nav-link.active:hover {
  background: rgba(61, 94, 225, 0.1);
}
.nav.nav-style-1 .nav-link:hover {
  background: transparent;
  color: #3D5EE1;
}

.nav.nav-style-2 .nav-item .nav-link {
  border-block-start: 3px solid transparent;
}
.nav.nav-style-2 .nav-item .nav-link.active {
  background-color: rgba(61, 94, 225, 0.1);
  border-block-start: 3px solid #3D5EE1;
  color: #3D5EE1;
}

.nav.nav-style-3 .nav-link {
  border-radius: 0;
}
.nav.nav-style-3 .nav-link {
  border-block-end: 3px solid transparent;
}
.nav.nav-style-3 .nav-link.active {
  background-color: transparent;
  border-block-end: 3px solid #3D5EE1;
  color: #3D5EE1;
}

.nav.nav-style-4 {
  border: 0;
}
.nav.nav-style-4 .nav-link {
  color: #677788;
  border: 0;
}
.nav.nav-style-4 .nav-link {
  margin-bottom: 3px;
}
.nav.nav-style-4 .nav-link.active {
  background-color: #E9EDF4;
  color: #6A7287;
  border: 0;
}
.nav.nav-style-4 .nav-link:hover, .nav.nav-style-4 .nav-link:focus {
  border: 0;
}
.nav.nav-style-4 .nav-link:hover {
  background-color: #E9EDF4;
  color: #6A7287;
}

.nav-tabs.nav-style-5 {
  border: 0;
}
.nav-tabs.nav-style-5 .nav-link {
  color: #677788;
  border: 0;
  margin-bottom: 3px;
}
.nav-tabs.nav-style-5 .nav-link.active {
  background-color: #3D5EE1;
  color: #FFF;
  border: 0;
}
.nav-tabs.nav-style-5 .nav-link:hover, .nav-tabs.nav-style-5 .nav-link:focus {
  border: 0;
  background-color: #3D5EE1;
  color: #FFF;
}

.nav-style-6 {
  border: 0;
}
.nav-style-6.nav-pills .nav-link.active {
  border: 1px solid #3D5EE1;
  border-block-end: 2px solid #3D5EE1;
  background-color: transparent;
  color: #3D5EE1;
}

.nav-tabs-header {
  border: 0 !important;
}
.nav-tabs-header .nav-item {
  margin-inline-end: 0.5rem;
}
.nav-tabs-header .nav-item:last-child {
  margin-inline-end: 0;
}
.nav-tabs-header .nav-item .nav-link {
  border: 1px solid transparent;
  font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
  font-weight: 500;
}
.nav-tabs-header .nav-item .nav-link.active {
  background: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
  border: 1px solid transparent;
}
.nav-tabs-header .nav-item .nav-link:hover, .nav-tabs-header .nav-item .nav-link:focus {
  border: 1px solid transparent;
  background-color: transparent;
  color: #3D5EE1;
}

.nav-tabs-footer {
  border: 0;
}
.nav-tabs-footer .nav-item {
  margin-inline-end: 0.5rem;
}
.nav-tabs-footer .nav-item:last-child {
  margin-inline-end: 0;
}
.nav-tabs-footer .nav-item .nav-link {
  background-color: transparent;
  color: #3D5EE1;
  border: 1px solid #3D5EE1;
  font-size: 0.8rem;
}
.nav-tabs-footer .nav-item .nav-link.active {
  background: #3D5EE1;
  color: #FFF;
  border: 1px solid #3D5EE1;
}
.nav-tabs-footer .nav-item .nav-link:hover, .nav-tabs-footer .nav-item .nav-link:focus {
  border: 1px solid #3D5EE1;
  background-color: transparent;
  color: #3D5EE1;
}

.vertical-tabs-2 {
  border: 0;
}
.vertical-tabs-2 .nav-item {
  margin-inline-end: 0.5rem;
}
.vertical-tabs-2 .nav-item:last-child {
  margin-inline-end: 0;
}
.vertical-tabs-2 .nav-item .nav-link {
  min-width: 7.5rem;
  max-width: 7.5rem;
  text-align: center;
  border: 1px solid #9CA1AF;
  margin-bottom: 0.5rem;
  color: #677788;
  background-color: #E9EDF4;
}
.vertical-tabs-2 .nav-item .nav-link i {
  font-size: 1rem;
}
.vertical-tabs-2 .nav-item .nav-link.active {
  background-color: #3D5EE1;
  color: #FFF;
  position: relative;
}
.vertical-tabs-2 .nav-item .nav-link.active:before {
  content: "";
  position: absolute;
  inset-inline-end: -0.5rem;
  inset-block-start: 38%;
  transform: rotate(45deg);
  width: 1rem;
  height: 1rem;
  background-color: #3D5EE1;
}
.vertical-tabs-2 .nav-item .nav-link.active:hover {
  color: #FFF;
}
.vertical-tabs-2 .nav-item .nav-link:hover {
  color: #3D5EE1;
}

.vertical-tabs-3 {
  border: 0;
}
.vertical-tabs-3 .nav-item {
  border: 0;
  margin-inline-end: 0.5rem;
}
.vertical-tabs-3 .nav-item:last-child {
  margin-inline-end: 0;
}
.vertical-tabs-3 .nav-item .nav-link {
  min-width: 160px;
  max-width: 160px;
  border: 1px solid #3D5EE1;
  padding: 1.3rem;
  margin-block-end: 0.5rem;
}
.vertical-tabs-3 .nav-item .nav-link i {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 1rem;
  background: #3D5EE1;
  color: #FFF;
  border-radius: 3.125rem;
  font-weight: 500;
}
.vertical-tabs-3 .nav-item .nav-link.active {
  background: #3D5EE1;
  border: 1px solid #3D5EE1;
  color: #FFF;
}
.vertical-tabs-3 .nav-item .nav-link.active:hover {
  background: #3D5EE1;
  border: 1px solid #3D5EE1;
  color: #FFF;
}
.vertical-tabs-3 .nav-item .nav-link.active i {
  background: #FFF;
  color: #3D5EE1;
}
.vertical-tabs-3 .nav-item .nav-link:hover, .vertical-tabs-3 .nav-item .nav-link:focus {
  border: 1px solid #3D5EE1;
  color: #3D5EE1;
  background: transparent;
}

.nav.tab-style-1 {
  border-block-end: 0;
  padding: 0.65rem;
  background-color: #E9EDF4;
  border-radius: 7px;
  margin-block-end: 1rem;
}
.nav.tab-style-1 .nav-item {
  margin-inline-end: 0.5rem;
}
.nav.tab-style-1 .nav-item:last-child {
  margin-inline-end: 0;
}
.nav.tab-style-1 .nav-link {
  border-radius: 7px;
  padding: 0.35rem 1rem;
}
.nav.tab-style-1 .nav-link.active {
  background-color: #3D5EE1 !important;
  color: #FFF !important;
  box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  transition: color 0.15s ease-in;
}

.nav-tabs.tab-style-1 .nav-link:hover {
  background: transparent;
  color: #3D5EE1;
}

.tab-style-2 {
  border-block-end: 0;
}
.tab-style-2 .nav-item {
  margin-inline-end: 0.5rem;
}
.tab-style-2 .nav-item:last-child {
  margin-inline-end: 0;
}
.tab-style-2 .nav-item .nav-link {
  border: 0;
}
.tab-style-2 .nav-item .nav-link i {
  width: 1.875rem;
  height: 1.875rem;
  padding: 0.4rem;
  border-radius: 50px;
  background-color: #E9EDF4;
  color: #6A7287;
  display: inline-block;
}
.tab-style-2 .nav-item .nav-link:hover {
  border: 0;
  background: transparent;
  color: #3D5EE1;
}
.tab-style-2 .nav-item .nav-link:hover i {
  color: #3D5EE1;
}
.tab-style-2 .nav-item .nav-link.active {
  background-color: transparent;
  position: relative;
  border: 0;
  color: #3D5EE1;
}
.tab-style-2 .nav-item .nav-link.active i {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}
.tab-style-2 .nav-item .nav-link.active:before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  width: 100%;
  height: 0.175rem;
  background-color: #3D5EE1;
  border-radius: 50px;
}

.tab-style-3 {
  border-block-end: 0;
}
.tab-style-3 .nav-item {
  position: relative;
  margin-inline-end: 0.5rem;
}
.tab-style-3 .nav-item:last-child {
  margin-inline-end: 0;
}
.tab-style-3 .nav-item .nav-link {
  position: relative;
  border: 0;
  font-size: 0.75rem;
}
.tab-style-3 .nav-item .nav-link:before {
  position: absolute;
  content: "";
  inset-block-end: -1.063rem;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 0.1rem;
  background-color: #E9EDF4;
  border-radius: 50%;
}
.tab-style-3 .nav-item .nav-link:after {
  position: absolute;
  content: "";
  inset-block-end: -2rem;
  inset-inline-start: 1.75rem;
  inset-inline-end: 0;
  inset-inline-start: 30%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFF;
  border-radius: 50%;
  border: 2px solid #9CA1AF;
}
.tab-style-3 .nav-item .nav-link.home:after {
  content: "1";
}
.tab-style-3 .nav-item .nav-link.about:after {
  content: "2";
}
.tab-style-3 .nav-item .nav-link.services:after {
  content: "3";
}
.tab-style-3 .nav-item .nav-link:hover {
  border: 0;
  background: transparent;
  color: #3D5EE1;
}
.tab-style-3 .nav-item .nav-link.active {
  background-color: transparent;
  border: 0;
  color: #3D5EE1;
}
.tab-style-3 .nav-item .nav-link.active:before {
  background-color: #3D5EE1;
}
.tab-style-3 .nav-item .nav-link.active:after {
  border-color: #3D5EE1;
  color: #3D5EE1;
}

.tab-style-4.nav-tabs {
  border: 0;
}
.tab-style-4.nav-tabs .nav-item {
  margin-inline-end: 0.5rem;
}
.tab-style-4.nav-tabs .nav-item:last-child {
  margin-inline-end: 0;
}
.tab-style-4.nav-tabs .nav-link {
  border: 0;
}
.tab-style-4.nav-tabs .nav-link:hover {
  border: 0;
  background: transparent;
  color: #3D5EE1;
}
.tab-style-4.nav-tabs .nav-link.active {
  background-color: transparent;
  border: 0;
  color: #3D5EE1;
  position: relative;
  overflow: hidden;
}
.tab-style-4.nav-tabs .nav-link.active::before {
  position: absolute;
  content: "";
  width: 0.75rem;
  inset-block-start: 31px;
  transform: rotate(45deg);
  inset-inline-start: 47%;
  overflow: hidden;
  z-index: 1;
  height: 0.75rem;
  background-color: #3D5EE1;
  border: 1px solid #3D5EE1;
}
.tab-style-4.nav-tabs .nav-link.active:after {
  position: absolute;
  content: "";
  width: 40%;
  height: 1px;
  inset-inline-start: 30%;
  inset-block-end: 0;
  background-color: #3D5EE1;
}

#tab-style-4 .tab-pane.active {
  border: 1px solid #3D5EE1;
  background-color: #3D5EE1;
  color: #FFF;
  padding: 16px;
  border-radius: 7px;
}

.tab-style-5 .nav-item {
  margin-inline-end: 0.5rem;
}
.tab-style-5 .nav-item:last-child {
  margin-inline-end: 0;
}
.tab-style-5 .nav-item .nav-link.active {
  background: #3D5EE1;
}

.tab-style-6 {
  border: 0;
  background-color: #FFF;
  border-radius: 7px;
  color: #3D5EE1;
  padding: 0.5rem;
}
.tab-style-6 .nav-item {
  border: 0;
  margin-inline-end: 0.5rem;
}
.tab-style-6 .nav-item:last-child {
  margin-inline-end: 0;
}
.tab-style-6 .nav-item .nav-link {
  color: #3D5EE1;
  padding: 0.5rem 1rem;
  font-size: 0.813rem;
  border: 0;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.tab-style-6 .nav-item .nav-link.active {
  border: 0;
  background-color: #3D5EE1;
  color: #FFF;
  border: 0;
  box-shadow: 0px 3px 10px 0px rgba(var(--dark-rgb), 0.05);
}
.tab-style-6 .nav-item .nav-link:hover, .tab-style-6 .nav-item .nav-link:focus {
  border: 0;
}

.tab-style-7 .nav-link {
  margin-block-end: 0.5rem;
  font-size: 0.813rem;
  color: #677788;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.tab-style-7 .nav-link:active, .tab-style-7 .nav-link.active {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}

.nav-style-1 .nav-item .nav-link.active {
  background-color: rgba(61, 94, 225, 0.1);
  color: #3D5EE1;
}

@media screen and (max-width: 400px) {
  .tab-style-4 .nav-link {
    padding-inline: 0.5rem;
  }
}
.nav-tabs {
  border-bottom: 0;
}
.nav-tabs.nav-tabs-bottom li {
  margin-bottom: -1px;
}
.nav-tabs .nav-link {
  margin-bottom: -1px;
  background: 0 0;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link.active {
  border-color: #B5B9C3;
}
.nav-tabs li a {
  color: #202C4B;
  border-bottom-width: 2px;
}
.nav-tabs li a.active {
  border-color: transparent;
  border-bottom-color: #3D5EE1;
  background-color: transparent;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  color: #3D5EE1;
}

.nav-tabs .nav-tabs-solid {
  background-color: #FFF;
  border: 0;
}
.nav-tabs .nav-tabs-solid .active {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
}

.nav-tabs .nav-link:hover {
  border-color: transparent;
  color: #3D5EE1;
}
.nav-tabs.nav-tabs-top li a {
  border-width: 2px 0 0 0;
}
.nav-tabs.nav-tabs-top li a.active {
  border-top-color: #3D5EE1;
  border-radius: 0;
}
.nav-tabs.nav-tabs-top li a:hover {
  border-top-color: #3D5EE1;
  background-color: transparent;
  border-radius: 0;
}
.nav-tabs.nav-tabs-bottom li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-tabs-bottom li a.active, .nav-tabs.nav-tabs-bottom li a:hover {
  border-bottom-color: #3D5EE1;
  background: transparent;
  border-radius: 0;
  color: #3D5EE1;
}
.nav-tabs.nav-tabs-solid {
  background-color: #FFF;
  border: 0;
}
.nav-tabs.nav-tabs-solid.nav-tabs-rounded li a.active {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
  border-radius: 50px;
}
.nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a {
  border-color: #E9EDF4;
}
.nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
  border-radius: 50px;
}
.nav-tabs.nav-tabs-solid li a.active {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
  border-radius: 0;
}

.nav-link:hover {
  color: #3D5EE1;
}

.page-menu .nav-tabs li a {
  font-size: 16px;
}

.tabs-set .nav-tabs {
  border-bottom: 0;
  margin-bottom: 20px;
}
.tabs-set .nav-tabs .nav-link {
  color: #6FCCD8;
  padding: 8px 15px;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  min-width: 120px;
  margin-right: 10px;
  border-radius: 8px;
  background: var(--Stroke, rgba(145, 158, 171, 0.3));
}
.tabs-set .nav-tabs .nav-link:focus {
  border-color: transparent;
}
.tabs-set .nav-tabs .nav-link:hover {
  border-color: transparent;
}
.tabs-set .nav-tabs .nav-link.active {
  border: 0;
  border-bottom: 2px solid #3D5EE1;
  background: #3D5EE1;
  color: #FFF;
}

.tabs-sets .nav-tabs {
  border-bottom: 0;
  margin: 0 0 40px;
}
.tabs-sets .nav-tabs .nav-link {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  border: 0;
  background: #B5B9C3;
  margin-right: 10px;
  padding: 8px 15px;
  border-radius: 8px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.tabs-sets .nav-tabs .nav-link:focus, .tabs-sets .nav-tabs .nav-link:hover, .tabs-sets .nav-tabs .nav-link.active {
  background: #3D5EE1;
  color: #FFF;
}

@media (max-width: 767.98px) {
  .nav-tabs {
    border-bottom: 0;
    position: relative;
    background-color: #FFF;
    border: 1px solid #F8FAFC;
    padding: 5px 0;
    border-radius: 3px;
  }
}
/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.ribbon1 {
  position: absolute;
  inset-block-start: -6.1px;
  inset-inline-end: 10px;
  color: #FFF;
  z-index: 1;
}
.ribbon1:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-inline-start: 20px solid transparent;
  border-inline-end: 24px solid transparent;
  border-block-start: 13px solid #E82646;
}
.ribbon1 span {
  position: relative;
  display: block;
  text-align: center;
  background: #E82646;
  font-size: 14px;
  line-height: 1;
  padding: 12px 8px 10px;
  border-start-end-radius: 8px;
}
.ribbon1 span:before, .ribbon1 span:after {
  position: absolute;
  content: "";
}
.ribbon1 span:before {
  height: 6px;
  width: 6px;
  inset-inline-start: -6px;
  inset-block-start: 0;
  background: #E82646;
}
.ribbon1 span:after {
  height: 6px;
  width: 8px;
  inset-inline-start: -8px;
  inset-block-start: 0;
  border-radius: 8px 8px 0 0;
  background: #E82646;
}

.ribbone {
  width: 100%;
  position: relative;
  background-size: cover;
  text-transform: uppercase;
  color: #FFF;
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  z-index: 6;
}
.ribbone::after {
  position: absolute;
  z-index: -1;
  content: "";
  display: block;
  border: 5px solid;
}
.ribbone::before {
  position: absolute;
  z-index: -1;
  content: "";
  display: block;
  border: 5px solid;
}
.ribbone span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 3px 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #FFF;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: capitalize;
  text-align: center;
  font-size: 11px;
}

.ribbone1 {
  position: absolute;
  inset-block-start: -6.1px;
  inset-inline-start: 10px;
  z-index: 1;
}
.ribbone1:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-inline-start: 20px solid transparent;
  border-inline-end: 24px solid transparent;
  border-block-start: 13px solid #E82646;
}
.ribbone1 span {
  position: relative;
  display: block;
  text-align: center;
  background: #E82646;
  font-size: 14px;
  line-height: 1;
  padding: 12px 8px 10px;
  border-start-end-radius: 8px;
}
.ribbone1 span:after {
  position: absolute;
  content: "";
  height: 6px;
  width: 8px;
  inset-inline-start: -8px;
  inset-block-start: 0;
  border-radius: 8px 8px 0 0;
  background: #E82646;
}
.ribbone1 span:before {
  position: absolute;
  content: "";
  height: 6px;
  width: 6px;
  inset-inline-start: -6px;
  inset-block-start: 0;
  background: #E82646;
}

.arrow-ribbone-left {
  color: #FFF;
  padding: 2px 8px;
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 0;
  z-index: 6;
  font-size: 13px;
}

.arrow-ribbone-left.bg-purple:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -12px;
  border-block-start: 12px solid transparent;
  border-inline-start: 12px solid #4A00E5;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-left.bg-danger:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -12px;
  border-block-start: 112px solid transparent;
  border-inline-start: 12px solid #E82646;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-left.bg-primary:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -12px;
  border-block-start: 12px solid transparent;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-left.bg-secondary:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -12px;
  border-block-start: 12px solid transparent;
  border-inline-start: 12px solid #6FCCD8;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-left.bg-success:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -12px;
  border-block-start: 12px solid transparent;
  border-inline-start: 12px solid #3D5EE1;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-left.bg-info:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -12px;
  border-block-start: 12px solid transparent;
  border-inline-start: 12px solid #0F65CD;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-left.bg-warning:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -12px;
  border-block-start: 12px solid transparent;
  border-inline-start: 12px solid #EAB300;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-left.bg-pink:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -12px;
  border-block-start: 12px solid transparent;
  border-inline-start: 12px solid #E83E8C;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-left.bg-teal:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-inline-end: 12px solid #02a8b5;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-right {
  color: #FFF;
  padding: 2px 8px;
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 0;
  z-index: 6;
  font-size: 13px;
}

.arrow-ribbone-right.bg-purple:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-inline-end: 12px solid #4A00E5;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-right.bg-danger:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-inline-end: 12px solid #E82646;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-right.bg-primary:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-right.bg-secondary:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-inline-end: 12px solid #6FCCD8;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-right.bg-success:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-inline-end: 12px solid #3D5EE1;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-right.bg-info:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-inline-end: 12px solid #0F65CD;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-right.bg-warning:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-inline-end: 12px solid #EAB300;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-right.bg-pink:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-inline-end: 12px solid #E83E8C;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone-right.bg-teal:before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-start: -12px;
  border-block-start: 12px solid transparent;
  border-inline-end: 12px solid #02a8b5;
  border-block-end: 11px solid transparent;
  width: 0;
}

.arrow-ribbone2 {
  color: #FFF;
  padding: 3px 8px;
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: -1px;
  z-index: 6;
  font-size: 30px;
}
.arrow-ribbone2:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -24px;
  border-block-start: 24px solid transparent;
  border-block-end: 24px solid transparent;
  width: 0;
}

.power-ribbone {
  width: 56px;
  height: 56px;
  overflow: hidden;
  position: absolute;
  z-index: 6;
}
.power-ribbone span {
  position: absolute;
  display: block;
  width: 82px;
  padding: 8px 0;
  color: #FFF;
  font: 500 16px/1 Lato, sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: capitalize;
  text-align: center;
}

.power-ribbone-top-left {
  inset-block-start: -6px;
  inset-inline-start: -9px;
}
.power-ribbone-top-left span {
  inset-inline-end: -5px;
  inset-block-start: 1px;
  transform: rotate(-45deg);
}
.power-ribbone-top-left span i {
  transform: rotate(45deg);
  padding-block-start: 2px;
  padding-inline-start: 7px;
}

.power-ribbone-bottom-left {
  inset-block-end: -6px;
  inset-inline-start: -9px;
}
.power-ribbone-bottom-left span {
  inset-inline-end: -5px;
  inset-block-end: 1px;
  transform: rotate(45deg);
}
.power-ribbone-bottom-left span i {
  transform: rotate(-45deg);
  padding-block-end: 2px;
  padding-inline-start: 7px;
}

.power-ribbone-top-right {
  inset-block-start: -6px;
  inset-inline-end: -9px;
}
.power-ribbone-top-right span {
  inset-inline-start: -5px;
  inset-block-start: 1px;
  transform: rotate(45deg);
}
.power-ribbone-top-right span i {
  transform: rotate(-45deg);
  padding-block-start: 2px;
  padding-inline-end: 7px;
}

.power-ribbone-bottom-right {
  inset-block-end: -6px;
  inset-inline-end: -9px;
}
.power-ribbone-bottom-right span {
  inset-inline-start: -5px;
  inset-block-end: 1px;
  transform: rotate(-45deg);
}
.power-ribbone-bottom-right span i {
  transform: rotate(45deg);
  padding-block-end: 2px;
  padding-inline-end: 7px;
}

.ribbone-top-left {
  inset-block-start: -10px;
  inset-inline-start: -10px;
}
.ribbone-top-left::after {
  border-block-start-color: transparent;
  border-inline-start-color: transparent;
  inset-block-end: 50px;
  inset-inline-start: 0;
}
.ribbone-top-left::before {
  border-block-start-color: transparent;
  border-inline-start-color: transparent;
  inset-block-start: 0;
  inset-inline-end: 50px;
}
.ribbone-top-left span {
  inset-inline-end: 0px;
  inset-block-start: 24px;
  transform: rotate(-45deg);
}

.ribbone-top-right {
  inset-block-start: -10px;
  inset-inline-end: -10px;
}
.ribbone-top-right::after {
  border-block-start-color: transparent;
  border-inline-end-color: transparent;
  inset-block-end: 50px;
  inset-inline-end: 0;
}
.ribbone-top-right::before {
  border-block-start-color: transparent;
  border-inline-end-color: transparent;
  inset-block-start: 0;
  inset-inline-start: 50px;
}
.ribbone-top-right span {
  inset-inline-start: 0px;
  inset-block-start: 24px;
  transform: rotate(45deg);
}

.ribbone-warning-right {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: 10px;
  color: #FFF;
}
.ribbone-warning-right:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-inline-start: 17px solid transparent;
  border-inline-end: 17px solid transparent;
  border-block-start: 10px solid #EAB300;
  z-index: 6;
}
.ribbone-warning-right span {
  position: relative;
  display: block;
  text-align: center;
  background: #EAB300;
  font-size: 13px;
  line-height: 1;
  padding: 10px 2px 5px;
  border-start-end-radius: 10px;
  z-index: 6;
}
.ribbone-warning-right span:after {
  position: absolute;
  content: "";
  inset-inline-end: -6px;
  background: #EAB300;
  height: 6px;
  width: 10px;
  inset-inline-start: -9px;
  inset-block-start: 0;
  border-start-start-radius: 50px;
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.ribbone-warning-right span:before {
  position: absolute;
  content: "";
  height: 5px;
  width: 10px;
  inset-inline-start: -9px;
  inset-block-start: 3px;
  background: #EAB300;
}
.ribbone-warning-right i {
  color: #FFF;
  font-size: 16px;
  padding-inline-start: 7px;
  padding-inline-end: 7px;
}

.ribbone-danger-right {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: 10px;
  color: #FFF;
}
.ribbone-danger-right:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-inline-start: 17px solid transparent;
  border-inline-end: 17px solid transparent;
  border-block-start: 10px solid #E82646;
  z-index: 6;
}
.ribbone-danger-right span {
  position: relative;
  display: block;
  text-align: center;
  background: #E82646;
  font-size: 13px;
  line-height: 1;
  padding: 10px 2px 5px;
  border-start-end-radius: 10px;
  z-index: 6;
}
.ribbone-danger-right span:after {
  position: absolute;
  content: "";
  inset-inline-end: -6px;
  background: #E82646;
  height: 6px;
  width: 10px;
  inset-inline-start: -9px;
  inset-block-start: 0;
  border-start-start-radius: 50px;
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.ribbone-danger-right span:before {
  position: absolute;
  content: "";
  height: 5px;
  width: 10px;
  inset-inline-start: -9px;
  inset-block-start: 3px;
  background: #E82646;
}
.ribbone-danger-right i {
  color: #FFF;
  font-size: 16px;
  padding-inline-start: 7px;
  padding-inline-end: 7px;
}

.ribbone-success-left {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: 10px;
  color: #FFF;
}
.ribbone-success-left:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-inline-start: 17px solid transparent;
  border-inline-end: 17px solid transparent;
  border-block-start: 10px solid #1ABE17;
  z-index: 6;
}
.ribbone-success-left span {
  position: relative;
  display: block;
  text-align: center;
  background: #1ABE17;
  font-size: 13px;
  line-height: 1;
  padding: 10px 2px 5px;
  border-start-start-radius: 10px;
  z-index: 6;
}
.ribbone-success-left span:after {
  position: absolute;
  content: "";
  inset-inline-end: -6px;
  background: #1ABE17;
  height: 6px;
  width: 10px;
  inset-inline-end: -9px;
  inset-block-start: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 50px;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.ribbone-success-left span:before {
  position: absolute;
  content: "";
  height: 5px;
  width: 10px;
  inset-inline-end: -9px;
  inset-block-start: 3px;
  background: #1ABE17;
}
.ribbone-success-left i {
  color: #FFF;
  font-size: 16px;
  padding-inline-start: 7px;
  padding-inline-end: 7px;
}

.ribbone-info-left {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: 10px;
  color: #FFF;
}
.ribbone-info-left:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-inline-start: 17px solid transparent;
  border-inline-end: 17px solid transparent;
  border-block-start: 10px solid #0F65CD;
  z-index: 6;
}
.ribbone-info-left span {
  position: relative;
  display: block;
  text-align: center;
  background: #0F65CD;
  font-size: 13px;
  line-height: 1;
  padding: 10px 2px 5px;
  border-start-start-radius: 10px;
  z-index: 6;
}
.ribbone-info-left span:after {
  position: absolute;
  content: "";
  inset-inline-end: -6px;
  background: #0F65CD;
  height: 6px;
  width: 10px;
  inset-inline-end: -9px;
  inset-block-start: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 50px;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.ribbone-info-left span:before {
  position: absolute;
  content: "";
  height: 5px;
  width: 10px;
  inset-inline-end: -9px;
  inset-block-start: 3px;
  background: #0F65CD;
}
.ribbone-info-left i {
  color: #FFF;
  font-size: 16px;
  padding-inline-start: 7px;
  padding-inline-end: 7px;
}

.bookmark-ribbone-success-left {
  position: absolute;
  inset-inline-start: 10px;
  color: #FFF;
}
.bookmark-ribbone-success-left:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  z-index: 6;
  inset-inline-start: 0;
  border-inline-start: 18px solid #1ABE17;
  border-inline-end: 18px solid #1ABE17;
  border-block-end: 10px solid transparent;
}
.bookmark-ribbone-success-left span {
  position: relative;
  display: block;
  text-align: center;
  background: #1ABE17;
  font-size: 13px;
  line-height: 1;
  padding: 12px 3px 20px;
  z-index: 6;
}
.bookmark-ribbone-success-left i {
  color: #FFF;
  font-size: 16px;
  padding-inline-start: 7px;
  padding-inline-end: 7px;
}

.bookmark-ribbone-danger-left {
  position: absolute;
  inset-inline-start: 10px;
  color: #FFF;
  width: 30px;
}
.bookmark-ribbone-danger-left:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  z-index: 6;
  inset-inline-start: 0;
  border-inline-start: 15px solid #E82646;
  border-inline-end: 15px solid #E82646;
  border-block-end: 8px solid transparent;
}
.bookmark-ribbone-danger-left span {
  position: relative;
  display: block;
  text-align: center;
  background: #E82646;
  font-size: 12px;
  line-height: 1;
  padding: 12px 0px;
  z-index: 6;
}
.bookmark-ribbone-danger-left i {
  color: #FFF;
  font-size: 16px;
  padding-inline-start: 7px;
  padding-inline-end: 7px;
}

.bookmark-ribbone-secondary-right {
  position: absolute;
  inset-inline-end: 10px;
  color: #FFF;
  width: 30px;
}
.bookmark-ribbone-secondary-right:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  z-index: 6;
  inset-inline-end: 0;
  border-inline-start: 15px solid #6FCCD8;
  border-inline-end: 15px solid #6FCCD8;
  border-block-end: 8px solid transparent;
}
.bookmark-ribbone-secondary-right span {
  position: relative;
  display: block;
  text-align: center;
  background: #6FCCD8;
  font-size: 11px;
  line-height: 1;
  padding: 12px 0px;
  z-index: 6;
}
.bookmark-ribbone-secondary-right i {
  color: #FFF;
  font-size: 16px;
  padding-inline-start: 7px;
  padding-inline-end: 7px;
}

.bookmark-sideleft-ribbone-success-left {
  position: absolute;
  inset-block-start: 10px;
  color: #FFF;
}
.bookmark-sideleft-ribbone-success-left:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  z-index: 6;
  inset-block-start: 0;
  inset-inline-end: -8px;
  border-block-start: 13px solid #1ABE17;
  border-block-end: 13px solid #1ABE17;
  border-inline-end: 8px solid transparent;
}
.bookmark-sideleft-ribbone-success-left span {
  position: relative;
  display: block;
  text-align: center;
  background: #1ABE17;
  font-size: 11px;
  padding: 5px 13px;
  z-index: 6;
  height: 26px;
}
.bookmark-sideleft-ribbone-success-left i {
  color: #FFF;
  font-size: 16px;
  padding-inline-start: 7px;
  padding-inline-end: 7px;
}

.bookmark-sideright-ribbone-primary-right {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 0;
  color: #FFF;
}
.bookmark-sideright-ribbone-primary-right:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  z-index: 6;
  inset-block-start: 0;
  inset-inline-start: -8px;
  border-block-start: 13px solid #3D5EE1;
  border-block-end: 13px solid #3D5EE1;
  border-inline-start: 8px solid transparent;
}
.bookmark-sideright-ribbone-primary-right span {
  position: relative;
  display: block;
  text-align: center;
  background: #3D5EE1;
  font-size: 11px;
  padding: 5px 13px;
  z-index: 6;
  height: 26px;
}
.bookmark-sideright-ribbone-primary-right i {
  color: #FFF;
  font-size: 16px;
  padding-inline-start: 7px;
  padding-inline-end: 7px;
}

.ribbone-1 span:after {
  position: absolute;
  content: "";
}

.arrow-ribbone-2 {
  color: #FFF;
  padding: 3px 8px;
  position: absolute;
  z-index: 6;
  font-size: 20px;
}
.arrow-ribbone-2:before {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  content: "";
  inset-inline-end: -24px;
  border-block-start: 16px solid transparent;
  border-inline-start: 24px solid #4A00E5;
  border-block-end: 16px solid transparent;
  width: 0;
}

.ribbone-card {
  overflow: hidden;
}

.fullwidth-primary-ribbons .bar {
  color: #FFF;
  background-color: #3D5EE1;
  padding: 5px;
  text-align: center;
  position: relative;
  border: 2px transparent solid;
  box-shadow: 0 10px 30px -10px #E9EDF4;
}
.fullwidth-primary-ribbons .bar span {
  position: absolute;
}
.fullwidth-primary-ribbons .bar span:nth-child(1) {
  border-style: solid;
  border-width: 11px;
  z-index: -1;
  border-color: transparent;
  inset-block-start: 31px;
  inset-inline-start: -2px;
}
.fullwidth-primary-ribbons .bar span:nth-child(3) {
  border-style: solid;
  border-width: 11px;
  z-index: -1;
  border-color: transparent;
  inset-block-start: 31px;
  inset-inline-end: -2px;
}
.fullwidth-primary-ribbons .bar span:nth-child(2) {
  inset-block-start: 18px;
  border-style: solid;
  border-width: 18px;
  z-index: -2;
  border-color: #3D5EE1 #3D5EE1 #3D5EE1 transparent;
  border-block-start-color: #3D5EE1;
  border-inline-end-color: #3D5EE1;
  border-block-end-color: #3D5EE1;
  border-inline-start-color: transparent;
  inset-inline-start: -30px;
}
.fullwidth-primary-ribbons .bar span:nth-child(4) {
  inset-block-start: 18px;
  border-style: solid;
  border-width: 18px;
  z-index: -2;
  border-block-start-color: #3D5EE1;
  border-inline-end-color: transparent;
  border-block-end-color: #3D5EE1;
  border-inline-start-color: #3D5EE1;
  inset-inline-end: -30px;
}

.fullwidth-secondary-ribbons .bar {
  color: #FFF;
  background-color: #6FCCD8;
  padding: 5px;
  text-align: center;
  position: relative;
  border: 2px transparent solid;
  box-shadow: 0 10px 30px -10px #E9EDF4;
}
.fullwidth-secondary-ribbons .bar span {
  position: absolute;
}
.fullwidth-secondary-ribbons .bar span:nth-child(1) {
  border-style: solid;
  border-width: 11px;
  z-index: -1;
  border-color: transparent;
  inset-block-start: 31px;
  inset-inline-start: -2px;
}
.fullwidth-secondary-ribbons .bar span:nth-child(3) {
  border-style: solid;
  border-width: 11px;
  z-index: -1;
  border-color: transparent;
  inset-block-start: 31px;
  inset-inline-end: -2px;
}
.fullwidth-secondary-ribbons .bar span:nth-child(2) {
  inset-block-start: 18px;
  border-style: solid;
  border-width: 18px;
  z-index: -2;
  border-block-start-color: #6FCCD8;
  border-inline-end-color: #6FCCD8;
  border-block-end-color: #6FCCD8;
  border-inline-start-color: transparent;
  inset-inline-start: -30px;
}
.fullwidth-secondary-ribbons .bar span:nth-child(4) {
  inset-block-start: 18px;
  border-style: solid;
  border-width: 18px;
  z-index: -2;
  border-block-start-color: #6FCCD8;
  border-inline-end-color: transparent;
  border-block-end-color: #6FCCD8;
  border-inline-start-color: #6FCCD8;
  inset-inline-end: -30px;
}

.fullwidth-arrow-warning-ribbons .bar {
  color: #FFF;
  background-color: #EAB300;
  padding: 5px;
  text-align: center;
  position: relative;
  border: 2px transparent solid;
  box-shadow: 0 10px 30px -10px #E9EDF4;
}
.fullwidth-arrow-warning-ribbons .bar span {
  position: absolute;
}
.fullwidth-arrow-warning-ribbons .bar span:nth-child(1) {
  border-style: solid;
  border-width: 11px;
  z-index: -1;
  border-color: transparent;
  inset-block-start: 31px;
  inset-inline-start: -2px;
}
.fullwidth-arrow-warning-ribbons .bar span:nth-child(3) {
  border-style: solid;
  border-width: 11px;
  z-index: -1;
  border-color: transparent;
  inset-block-start: 31px;
  inset-inline-end: -2px;
}
.fullwidth-arrow-warning-ribbons .bar span:nth-child(2) {
  inset-block-start: 18px;
  border-style: solid;
  border-width: 18px;
  z-index: -2;
  border-block-start-color: #EAB300;
  border-inline-end-color: #EAB300;
  border-block-end-color: #EAB300;
  border-inline-start-color: transparent;
  inset-inline-start: -30px;
}
.fullwidth-arrow-warning-ribbons .bar span:nth-child(4) {
  inset-block-start: 18px;
  border-style: solid;
  border-width: 18px;
  z-index: -2;
  border-block-start: 18px solid transparent;
  border-inline-start: 18px solid #EAB300;
  border-block-end: 18px solid transparent;
  border-inline-end: transparent;
  inset-inline-end: -20px;
  inset-block-start: -2px;
}

.fullwidth-arrow-danger-ribbons-right .bar {
  color: #FFF;
  background-color: #E82646;
  padding: 5px;
  text-align: center;
  position: relative;
  border: 2px transparent solid;
  box-shadow: 0 10px 30px -10px #E9EDF4;
}
.fullwidth-arrow-danger-ribbons-right .bar span {
  position: absolute;
}
.fullwidth-arrow-danger-ribbons-right .bar span:nth-child(1) {
  border-style: solid;
  border-width: 11px;
  z-index: -1;
  border-color: transparent;
  inset-block-start: 31px;
  inset-inline-end: -2px;
}
.fullwidth-arrow-danger-ribbons-right .bar span:nth-child(3) {
  border-style: solid;
  border-width: 11px;
  z-index: -1;
  border-color: transparent;
  inset-block-start: 31px;
  inset-inline-start: -2px;
}
.fullwidth-arrow-danger-ribbons-right .bar span:nth-child(2) {
  inset-block-start: 18px;
  border-style: solid;
  border-width: 18px;
  z-index: -2;
  border-block-start-color: #E82646;
  border-inline-end-color: transparent;
  border-block-end-color: #E82646;
  border-inline-start-color: #E82646;
  inset-inline-end: -30px;
}
.fullwidth-arrow-danger-ribbons-right .bar span:nth-child(4) {
  inset-block-start: 18px;
  border-style: solid;
  border-width: 18px;
  z-index: -2;
  border-block-start: 18px solid transparent;
  border-inline-end: 18px solid #E82646;
  border-block-end: 18px solid transparent;
  border-inline-start: transparent;
  inset-inline-start: -20px;
  inset-block-start: -2px;
}

.power-ribbone span svg {
  width: 15px;
  height: 15px;
}

.ribbone-card .card-body {
  padding: 25px;
}

.ribbone-row .feather-zap {
  width: 15px;
  height: 15px;
}

[data-bs-toggle=card-fullscreen] svg {
  width: 15px;
  height: 15px;
}

[data-bs-toggle=card-remove] svg {
  width: 15px;
  height: 15px;
}

svg.collapse-open, svg.collapse-close {
  width: 15px;
  height: 15px;
}

.btn-icon.btn-danger-light {
  color: #E82646;
  background: #FDE9ED;
}

.live-rating.badge {
  background: #D1F2D1;
  color: #1ABE17;
}

@media (min-width: 576px) {
  .mx-sm-7 {
    margin-inline: 3rem !important;
  }
}
[dir=rtl] .power-ribbone-top-left span {
  transform: rotate(45deg);
}
[dir=rtl] .power-ribbone-top-left span i {
  transform: rotate(-45deg);
}
[dir=rtl] .power-ribbone-bottom-left span {
  transform: rotate(-45deg);
}
[dir=rtl] .power-ribbone-bottom-left span i {
  transform: rotate(45deg);
}
[dir=rtl] .power-ribbone-top-right span {
  transform: rotate(-45deg);
}
[dir=rtl] .power-ribbone-top-right span i {
  transform: rotate(45deg);
}
[dir=rtl] .power-ribbone-bottom-right span {
  transform: rotate(45deg);
}
[dir=rtl] .power-ribbone-bottom-right span i {
  transform: rotate(-45deg);
}
[dir=rtl] .ribbone-top-left span {
  transform: rotate(45deg);
}
[dir=rtl] .ribbone-top-right span {
  transform: rotate(-45deg);
}
[dir=rtl] .ribbon-price .badge {
  transform: rotate(-45deg);
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.modal .card {
  border: 0;
}

.modal .modal-content {
  border: 1px solid #E9EDF4;
  box-shadow: 0px 4px 74px 0px rgba(208, 208, 208, 0.2509803922);
  border-radius: 5px;
}
.modal .modal-title {
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 991.98px) {
  .modal .modal-title {
    font-size: 16px;
  }
}
.modal .logo-lg img {
  width: 150px;
}
.modal .modal-header {
  border-color: #E9EDF4;
  border-bottom: 1px solid #E9EDF4;
}
.modal .modal-header .close,
.modal .modal-header .btn-close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  color: #EF677E;
  opacity: 1;
  font-size: 12px;
  width: 22px;
  height: 22px;
  border: 0;
  font-weight: 700;
  background-color: transparent;
  border-radius: 50px;
}
.modal .modal-header .close:hover,
.modal .modal-header .btn-close:hover {
  background-color: transparent;
  color: #FFF;
}
.modal .modal-footer {
  border-top: 1px solid #E9EDF4;
}
.modal .modal-footer .btn {
  margin: 0;
}
.modal .modal-footer .btn-secondary {
  background: #6FCCD8;
}
.modal .modal-footer .btn-secondary:hover {
  -webkit-box-shadow: inset 0 0px 0px 100px #FFF;
  -moz-box-shadow: inset 0 0px 0px 100px #FFF;
  box-shadow: inset 0 0px 0px 100px #FFF;
  color: #6FCCD8 !important;
}
.modal .note-editor.note-frame.card {
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.modal-content .modal-header {
  justify-content: space-between;
}
.modal-content .modal-header .custom-btn-close {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #838A9B;
  color: #FFF;
  margin: 0;
  padding: 0;
  background-image: none;
}
.modal-content .modal-header .custom-btn-close:hover {
  background-color: #E82646;
}

.modal-btn .btn {
  padding: 5px 20px;
}

.modal.animated .modal-dialog {
  transform: translate(0, 0);
}
.modal.effect-scale .modal-dialog {
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-scale.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
}
.modal.effect-slide-in-right .modal-dialog {
  transform: translateX(20%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.modal.effect-slide-in-right.show .modal-dialog {
  transform: translateX(0);
  opacity: 1;
}
.modal.effect-slide-in-bottom .modal-dialog {
  transform: translateY(20%);
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-slide-in-bottom.show .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}
.modal.effect-newspaper .modal-dialog {
  transform: scale(0) rotate(720deg);
  opacity: 0;
}
.modal.effect-newspaper.show ~ .modal-backdrop, .modal.effect-newspaper .modal-dialog {
  transition: all 0.5s;
}
.modal.effect-newspaper.show .modal-dialog {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
.modal.effect-fall {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}
.modal.effect-fall .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(600px) rotateX(20deg);
  opacity: 0;
}
.modal.effect-fall.show .modal-dialog {
  transition: all 0.3s ease-in;
  transform: translateZ(0px) rotateX(0deg);
  opacity: 1;
}
.modal.effect-flip-horizontal {
  perspective: 1300px;
}
.modal.effect-flip-horizontal .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateY(-70deg);
  transition: all 0.3s;
  opacity: 0;
}
.modal.effect-flip-horizontal.show .modal-dialog {
  transform: rotateY(0deg);
  opacity: 1;
}
.modal.effect-flip-vertical {
  perspective: 1300px;
}
.modal.effect-flip-vertical .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateX(-70deg);
  transition: all 0.3s;
  opacity: 0;
}
.modal.effect-flip-vertical.show .modal-dialog {
  transform: rotateX(0deg);
  opacity: 1;
}
.modal.effect-super-scaled .modal-dialog {
  transform: scale(2);
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-super-scaled.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
}
.modal.effect-sign {
  perspective: 1300px;
}
.modal.effect-sign .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateX(-60deg);
  transform-origin: 50% 0;
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-sign.show .modal-dialog {
  transform: rotateX(0deg);
  opacity: 1;
}
.modal.effect-rotate-bottom {
  perspective: 1300px;
}
.modal.effect-rotate-bottom .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateY(100%) rotateX(90deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition: all 0.3s ease-out;
}
.modal.effect-rotate-bottom.show .modal-dialog {
  transform: translateY(0%) rotateX(0deg);
  opacity: 1;
}
.modal.effect-rotate-left {
  perspective: 1300px;
}
.modal.effect-rotate-left .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-rotate-left.show .modal-dialog {
  transform: translateZ(0px) translateX(0%) rotateY(0deg);
  opacity: 1;
}

.offcanvas.offcanvas-end {
  width: auto !important;
}

.offcanvas.offcanvas-end.em-payrol-add {
  max-width: 1192px !important;
}

#delete-modal .modal-dialog {
  max-width: 400px;
}
#delete-modal .modal-dialog .delete-icon {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  margin: 0 auto 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  background: #FDE9ED;
  color: #E82646;
  font-size: 40px;
}
#delete-modal .modal-dialog h4 {
  font-size: 20px;
  margin-bottom: 5px;
}
#delete-modal .modal-dialog p {
  margin-bottom: 24px;
}

.custom-modal .modal-header {
  justify-content: space-between;
  align-items: center;
}

.modal-header .badge {
  box-shadow: none;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.grid-showcase {
  margin-bottom: -10px;
}
.grid-showcase span, .grid-showcase .grid-wrapper {
  display: block;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
  background-color: rgba(242, 243, 247, 0.7);
}

.grid-align {
  margin-bottom: -16px;
}

.grid-align .row {
  padding: 15px 0;
  min-height: 7rem;
  margin-bottom: 16px;
}

.grid-vertical {
  min-height: 150px;
  padding: 10px;
  color: #000;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.timeline {
  position: relative;
  list-style: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0 20px;
  margin: 0 auto;
  padding: 20px 0 20px;
}
.timeline:before {
  content: " ";
  position: absolute;
  width: 3px;
  margin-left: -1.5px;
  background-color: #E9EDF4;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
}
.timeline > li {
  position: relative;
  margin-bottom: 20px;
}
.timeline > li::before, .timeline > li::after {
  content: " ";
  display: table;
}
.timeline > li > .timeline-panel {
  float: left;
  position: relative;
  width: 46%;
  padding: 20px;
  border: 1px solid #E9EDF4;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
.timeline > li > .timeline-panel::before {
  content: " ";
  display: inline-block;
  position: absolute;
  border-top: 8px solid transparent;
  border-right: 0 solid #E9EDF4;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #E9EDF4;
  position: absolute;
  top: 26px;
  right: -8px;
}
.timeline > li > .timeline-panel::after {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 27px;
  right: -7px;
  border-top: 7px solid transparent;
  border-right: 0 solid #FFF;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #FFF;
}

.timeline > li:after {
  clear: both;
}

.timeline > li > .timeline-badge {
  z-index: 1;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  text-align: center;
  font-size: 1.4em;
  line-height: 50px;
  color: #FFF;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 16px;
  left: 50%;
}

.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}
.timeline > li.timeline-inverted > .timeline-panel::before {
  right: auto;
  left: -8px;
  border-right-width: 8px;
  border-left-width: 0;
}
.timeline > li.timeline-inverted > .timeline-panel::after {
  right: auto;
  left: -7px;
  border-right-width: 7px;
  border-left-width: 0;
}

.timeline-badge.primary {
  background-color: #3D5EE1;
}

.timeline-badge.success {
  background-color: #1ABE17;
}

.timeline-badge.warning {
  background-color: #EAB300;
}

.timeline-badge.danger {
  background-color: #E82646;
}

.timeline-badge.info {
  background-color: #0F65CD;
}

.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
}

.timeline-body > p + p {
  margin-top: 5px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.swal2-actions .swal2-confirm.btn:active {
  background-color: #3D5EE1;
  border-color: #3D5EE1;
}

.swal2-confirm {
  margin-right: 5px;
}

/******* Pages ******/
/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.filter-wrapper {
  border-top: 1px solid #E9EDF4;
  padding-top: 20px;
}

.table-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.table-filter-head .filter-head-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 575.98px) {
  .table-filter-head .filter-head-left {
    width: 100%;
  }
}
.table-filter-head .filter-head-left h5 {
  font-size: 15px;
  font-weight: 500;
  margin: 0 24px 10px 0;
}

.list-tab {
  margin-bottom: 10px;
}
.list-tab ul {
  border-bottom: 1px solid #E9EDF4;
}
.list-tab ul li {
  display: inline-block;
  margin-right: 24px;
  margin: 0 24px 0 0;
}
.list-tab ul li a {
  color: #515B73;
  display: inline-block;
  padding: 5px 0;
  position: relative;
}
.list-tab ul li a span {
  background: #FFF;
  border-radius: 5px;
  margin: 0 0 0 8px;
  padding: 5px;
  display: inline-block;
  font-size: 12px;
  color: #202C4B;
}
.list-tab ul li a::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  background: transparent;
  width: 100%;
  height: 3px;
}
.list-tab ul li a:hover {
  color: #3D5EE1;
}
.list-tab ul li a.active {
  color: #3D5EE1;
}
.list-tab ul li a.active::before {
  background: #3D5EE1;
}

.load-more .btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.load-more .btn i {
  margin-right: 5px;
}

.profile-uploader .btn {
  font-size: 12px;
  margin: 0 0 10px 0;
  padding: 6px 20px;
}

.profile-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
@media (max-width: 575.98px) {
  .profile-wrap {
    display: block;
  }
}
.profile-wrap .frames {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  margin-right: 15px;
  color: #838A9B;
  font-size: 24px;
  border: 1px dashed #E9EDF4;
}
.profile-wrap .frames img {
  border-radius: 5px;
  width: 80px;
  height: 80px;
}
@media (max-width: 575.98px) {
  .profile-wrap .frames {
    margin: 0 0 10px 0;
  }
}
.profile-wrap .profile-upload p {
  font-size: 12px;
}

.profile-uploader .btn {
  font-size: 12px;
  margin: 0 0 10px 0;
  padding: 6px 20px;
}

.drag-upload-btn {
  font-size: 12px;
  font-weight: 600;
  background: #FFF;
  border: 1px dashed #E9EDF4;
  border-radius: 5px;
  margin: 0 12px 10px 0;
  padding: 6px 16px;
  position: relative;
  transition: all 0.5s;
}
.drag-upload-btn input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.drag-upload-btn:hover {
  background: #3D5EE1;
  border-color: #3D5EE1;
  color: #FFF;
  transition: all 0.5s;
}

.trash-icon {
  font-size: 15px;
  color: #E82646;
}
.trash-icon:hover {
  color: rgb(198.0125, 20.9875, 50.1875);
}

.drop-width {
  min-width: 350px;
  max-width: 100%;
}
@media (max-width: 575.98px) {
  .drop-width {
    min-width: 260px;
  }
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.attendance-types .attendance-type-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.attendance-types .attendance-type-list li {
  border: 1px solid #E9EDF4;
  border-radius: 5px;
  background: #FFF;
  padding: 8px 10px;
  color: #202C4B;
  display: flex;
  align-items: center;
  margin-right: 5px;
  margin-bottom: 5px;
}
.attendance-types .attendance-type-list li:last-child {
  margin-right: 0;
}
.attendance-types .attendance-type-list li .attendance-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 5px;
}

.student-pomote-note {
  background: #F2F5FF;
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  padding: 6px 10px;
  border: 1px solid #3D5EE1;
  margin-bottom: 20px;
}
@media (max-width: 575.98px) {
  .student-pomote-note {
    display: block;
  }
}
.student-pomote-note .info-icon {
  color: #3D5EE1;
  margin-right: 5px;
}
.student-pomote-note p {
  color: #3D5EE1;
  display: flex;
  align-items: center;
}
@media (max-width: 575.98px) {
  .student-pomote-note p {
    display: block;
  }
}
.student-pomote-note p span {
  font-weight: 600;
  margin-right: 3px;
}
@media (max-width: 575.98px) {
  .student-pomote-note p span {
    display: block;
  }
}

.promote-card-main {
  display: none;
}
.promote-card-main.promote-card-main-show {
  display: block;
  margin-bottom: 24px;
}

.promoted-year p {
  margin-bottom: 10px;
  color: #000;
}

#student_promote .modal-dialog {
  max-width: 400px;
}
#student_promote .modal-dialog h4 {
  font-size: 20px;
  margin-bottom: 5px;
}
#student_promote .modal-dialog p {
  margin-bottom: 24px;
}

.success-msg-toast {
  top: 70px;
  right: 30px;
}
.success-msg-toast .toast {
  border: 0;
}
.success-msg-toast .toast .toast-header {
  padding: 10px;
  border-radius: 5px;
  border-left: 2px solid #1ABE17;
}
.success-msg-toast .toast .toast-header p {
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  color: #202C4B;
  font-size: 15px;
}
.success-msg-toast .toast .toast-header p span {
  font-size: 16px;
  margin-right: 5px;
  line-height: normal;
}
.success-msg-toast .toast .toast-header .toast-close span i {
  color: #CDD0D7;
  transition: 0.5s all;
}
.success-msg-toast .toast .toast-header .toast-close span i:hover {
  color: #E82646;
  transition: 0.5s all;
}

.date-pic {
  position: relative;
}
.date-pic .cal-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.student-detail-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.student-detail-info .student-img {
  width: 45px;
  height: 45px;
  border-radius: 5px;
  display: flex;
  flex-shrink: 0;
  margin-right: 10px;
}
.student-detail-info .student-img img {
  width: 100%;
  border-radius: 5px;
}
.student-detail-info .name-info h6 {
  font-size: 16px;
}
.student-detail-info .name-info h6 span {
  display: block;
  font-weight: 400;
}

.year-picker {
  width: 125px;
  position: relative;
  margin-bottom: 10px;
  margin-right: 5px;
}
.year-picker input {
  height: 39px;
  padding-left: 30px;
}
.year-picker .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  line-height: normal;
  transform: translateY(-50%);
}
.year-picker .cal-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  line-height: normal;
  transform: translateY(-50%);
}

.table-filter-head.attendance-report-head .filter-head-left .form-filter {
  margin-right: 5px;
}
.table-filter-head.attendance-report-head .search-filter-btn {
  margin-bottom: 10px;
}
.table-filter-head.attendance-report-head .search-filter-btn .btn {
  padding: 7px 20px;
}

.add-more-timetable {
  background: #E9EDF4;
  padding: 24px;
  border-radius: 5px;
}
.add-more-timetable .tab-links {
  margin-bottom: 24px;
}
.add-more-timetable .tab-links li {
  padding: 0;
  margin-right: 24px;
}
.add-more-timetable .tab-links li:last-child {
  margin-right: 0;
}
.add-more-timetable .tab-links li a {
  background: transparent;
  font-weight: 400;
  color: #515B73;
  padding: 0 20px 10px;
  position: relative;
}
.add-more-timetable .tab-links li a::after {
  content: "";
  width: 100%;
  height: 3px;
  border-radius: 5px;
  background: #3D5EE1;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: 0.5s all;
}
.add-more-timetable .tab-links li.active {
  background: transparent;
}
.add-more-timetable .tab-links li.active a {
  background: transparent;
}
.add-more-timetable .tab-links li.active a::after {
  opacity: 1;
  transition: 0.5s all;
}
.add-more-timetable .delete-time-table {
  width: 30px;
  height: 30px;
  background: #FDE9ED;
  color: #E82646;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.add-more-timetable .delete-time-table:hover {
  background: #E82646;
  color: #FFF;
}

.exam-schedule-add {
  border-top: 1px solid #E9EDF4;
  padding-top: 15px;
}
.exam-schedule-add .delete-schedule-table {
  width: 30px;
  height: 30px;
  background: #FDE9ED;
  color: #E82646;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.exam-schedule-add .delete-schedule-table:hover {
  background: #E82646;
  color: #FFF;
}

.percentage-field {
  display: none;
}
.percentage-field.percentage-field-show {
  display: block;
}

.fixed-field {
  display: none;
}
.fixed-field.fixed-field-show {
  display: block;
}

.modal-card-table {
  border: 1px solid #E9EDF4;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 24px;
}
.modal-card-table .modal-table-head {
  border-bottom: 1px solid #E9EDF4;
  margin-bottom: 24px;
  padding-bottom: 24px;
}

.class-detail-info {
  margin-bottom: 20px;
}
.class-detail-info p {
  margin-bottom: 5px;
}
.class-detail-info span {
  color: #202C4B;
}

.content.blank-page {
  min-height: 100vh;
}
.content.blank-page .page-header {
  border-bottom: 1px solid #E9EDF4;
}
.content.blank-page .page-title h4 {
  margin-bottom: 0;
}

.book-issue-details {
  border: 1px solid #E9EDF4;
  border-radius: 5px;
  padding: 24px 24px 10px;
  margin-top: 15px;
}
.book-issue-details .book-details-head {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E9EDF4;
  margin-bottom: 15px;
  padding-bottom: 15px;
  justify-content: space-between;
}
.book-issue-details .book-details-head h6 {
  font-weight: 400;
}
.book-issue-details .book-details-head h6 span {
  color: #515B73;
}

.book-taker-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.book-taker-info li {
  margin-right: 24px;
  margin-bottom: 14px;
}
.book-taker-info li .student-img {
  width: 45px;
  height: 45px;
  border-radius: 5px;
  display: flex;
  flex-shrink: 0;
  margin-right: 8px;
}
.book-taker-info li .student-img img {
  border-radius: 5px;
  width: 100%;
}
.book-taker-info li h6 {
  font-weight: 400;
}
.book-taker-info li h6 span {
  margin-bottom: 0;
  color: #202C4B;
}
.book-taker-info li span {
  margin-bottom: 3px;
  color: #515B73;
  display: block;
}

.live-track-info {
  background: #FFF;
  padding: 24px 24px 10px;
  border-radius: 5px;
  margin-bottom: 24px;
}

.live-track-map iframe {
  width: 100%;
  height: 300px;
}

.assigned-driver .assigned-driver-info {
  display: flex;
  align-items: center;
  background: #E9EDF4;
  border-radius: 5px;
  padding: 15px;
  margin-top: 15px;
}
.assigned-driver .assigned-driver-info .driver-img {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  display: flex;
  margin-right: 8px;
  flex-shrink: 0;
}
.assigned-driver .assigned-driver-info .driver-img img {
  width: 100%;
  border-radius: 5px;
}
.assigned-driver .assigned-driver-info h5 {
  font-weight: 400;
}

.student-leave-info ul {
  display: flex;
  align-items: center;
  background: #F4F6FA;
  border-radius: 5px;
  padding: 15px 15px 5px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.student-leave-info ul li {
  min-width: 120px;
  margin-bottom: 10px;
}
.student-leave-info ul li h6 {
  font-weight: 400;
  margin-top: 3px;
}

.exchange-link {
  width: 54px;
  height: 54px;
  border-radius: 15px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.board-hover {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.board-hover .board-action {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  display: none !important;
}
.board-hover:hover {
  border-color: #3D5EE1;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.board-hover:hover .board-action {
  display: flex !important;
}

.all-content {
  display: none;
}
.all-content.active {
  display: block;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.profile-uploader.profile-uploader-two {
  position: relative;
  width: 100%;
  border: 1px dashed #B5B9C3;
  background-color: transparent;
  border-radius: 5px;
  padding: 15px 15px 12px;
  margin-bottom: 15px;
}
.profile-uploader.profile-uploader-two .upload-icon {
  display: block;
  text-align: center;
  font-size: 24px;
  line-height: 0;
  margin-bottom: 15px;
}
.profile-uploader.profile-uploader-two input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.profile-uploader.profile-uploader-two input[type=file].form-control {
  padding: 0;
}
.profile-uploader.profile-uploader-two .drag-upload-btn {
  font-size: 12px;
  text-align: center;
}
.profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn {
  font-size: 12px;
  margin-bottom: 5px;
}
.profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
  color: #3D5EE1;
}
.profile-uploader.profile-uploader-two .drag-upload-btn h6 {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 5px;
}

.settings-profile-upload {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.settings-profile-upload .profile-pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  display: block;
  flex-shrink: 0;
}
.settings-profile-upload .profile-pic img {
  width: 100%;
  border-radius: 50%;
}
.settings-profile-upload .title-upload h5 {
  margin-bottom: 5px;
}

.language-setup-table {
  border: 1px solid #E9EDF4;
  border-radius: 5px;
  overflow: auto;
}
.language-setup-table .table thead {
  background: #F2F4F8;
}
.language-setup-table .table thead th {
  background: #F2F4F8;
}
.language-setup-table .table tbody tr td {
  border-bottom: 1px solid #E9EDF4;
  width: 50%;
}
.language-setup-table .table tbody tr:last-child td {
  border-bottom: 0;
}

.tax-group-input {
  position: relative;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.rating i.filled {
  color: #EAB300;
}
.rating .rating-rate {
  color: #000;
  margin-left: 5px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.overlay-img .shape-01 {
  position: absolute;
  left: 40%;
}
.overlay-img .shape-02 {
  position: absolute;
  left: 60%;
  bottom: 0;
}
.overlay-img .shape-03 {
  position: absolute;
  left: 80%;
}
.overlay-img .shape-04 {
  position: absolute;
  right: 15%;
  bottom: 0;
}

.event-scroll {
  max-height: 495px;
  overflow-y: auto;
}

.class-hover {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.class-hover:hover {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.class-hover:hover .avatar {
  animation: rotate 1s ease-in-out;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
.btn-hover {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.btn-hover:hover {
  background-color: #202C4B !important;
  color: #FFF !important;
}

.todo-list .todo-strike-content h6 {
  text-decoration-line: line-through;
}

.dark-hover:hover {
  background: #3D5EE1 !important;
  border-color: #3D5EE1 !important;
  color: #FFF;
}

.line-ellipsis {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-slider.owl-carousel .owl-stage-outer, .teacher-slider.owl-carousel .owl-stage-outer {
  height: 100% !important;
}
.student-slider.owl-carousel .owl-stage-outer .owl-stage, .teacher-slider.owl-carousel .owl-stage-outer .owl-stage {
  height: 100%;
}
.student-slider.owl-carousel .owl-stage-outer .owl-stage .owl-item, .teacher-slider.owl-carousel .owl-stage-outer .owl-stage .owl-item {
  height: 100%;
}

.activity-scroll {
  max-height: 240px;
  overflow-y: auto;
}

.notice-widget {
  position: relative;
}
.notice-widget:before {
  position: absolute;
  content: "";
  width: 1px;
  height: calc(100% - 25px);
  background-color: #E9EDF4;
  top: 20px;
  inset-inline-start: 16px;
}

.student-slider.owl-carousel .owl-nav {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.student-slider.owl-carousel .owl-nav button {
  width: 24px;
  height: 24px;
  background: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.student-slider.owl-carousel .owl-nav button.owl-prev {
  margin-right: 5px;
}
.student-slider.owl-carousel .owl-nav button:hover {
  background: #3D5EE1;
  color: #FFF;
}

.teacher-slider.owl-carousel .owl-nav {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.teacher-slider.owl-carousel .owl-nav button {
  width: 24px;
  height: 24px;
  background: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #202C4B;
}
.teacher-slider.owl-carousel .owl-nav button.owl-prev {
  margin-right: 5px;
}
.teacher-slider.owl-carousel .owl-nav button:hover {
  background: #3D5EE1;
  color: #FFF;
}

.animate-card {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.animate-card:hover {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transform: translateY(-3px);
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.account-page {
  background: #FFF;
}

.login-wrapper {
  width: 100%;
  overflow: hidden;
  height: 100vh;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.login-wrapper.basic-type {
  overflow: auto;
  height: 100%;
  justify-content: center;
}
.login-wrapper.basic-type::before {
  display: none;
}
.login-wrapper.basic-type .login-content {
  overflow: unset;
  height: 100%;
}
@media (max-width: 991.98px) {
  .login-wrapper.account-bg {
    background-image: none;
  }
}
.login-wrapper.account-bg .login-content {
  background: rgba(255, 255, 255, 0.9490196078);
  backdrop-filter: blur(10px);
  margin-left: auto;
}
.login-wrapper .btn-outline-light:hover {
  background-color: #FFF !important;
}

.login-background {
  position: relative;
}
.login-background::before {
  content: "";
  background: rgba(75, 111, 255, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  backdrop-filter: blur(6px);
}
@media (max-width: 991.98px) {
  .login-background::before {
    display: none;
  }
}

.hover-a {
  position: relative;
  color: #3D5EE1;
}
.hover-a:after {
  content: "";
  height: 2px;
  width: 100%;
  background: #3D5EE1;
  transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  bottom: -3px;
  left: 0;
}
.hover-a:hover:after {
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
}
.hover-a:hover {
  color: #3D5EE1;
}

.login-wrapper.login-new {
  overflow: auto;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  position: relative;
}
.login-wrapper.login-new .login-shapes {
  position: relative;
}
@media (max-width: 991.98px) {
  .login-wrapper.login-new .login-shapes {
    display: none;
  }
}
.login-wrapper.login-new .login-shapes .login-right-shape {
  position: fixed;
  top: 0;
  left: 0;
}
.login-wrapper.login-new .login-shapes .login-left-shape {
  position: fixed;
  bottom: 0;
  right: 0;
}
.login-wrapper.login-new .login-content.user-login {
  position: relative;
}
.login-wrapper.login-new .login-content.user-login .login-userset form .otp-box {
  margin-bottom: 34px;
}
.login-wrapper.login-new .login-content.user-login .login-userset form .otp-box input {
  width: 74px;
  height: 74px;
  background: #FFF;
  border: 1px solid #E9EDF4;
  border-radius: 8px;
  text-align: center;
  margin-right: 15px;
  font-weight: 700;
  font-size: 26px;
  color: #000;
  outline: none;
}
@media (max-width: 575.98px) {
  .login-wrapper.login-new .login-content.user-login .login-userset form .otp-box input {
    width: 40px;
    height: 40px;
  }
}
.login-wrapper.login-new .copyright-text {
  margin: 40px 0;
  text-align: center;
}
@media (max-width: 767.98px) {
  .login-wrapper.login-new .copyright-text {
    margin: 0 0 30px;
  }
}
.login-wrapper.login-new .copyright-text p {
  font-weight: 500;
  color: #202C4B;
  margin-bottom: 0;
}
.login-wrapper.login-new .lock-screen-list {
  text-align: center;
}
.login-wrapper.login-new .lock-screen-list .nav {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.login-wrapper.login-new .lock-screen-list .nav li {
  margin-right: 20px;
}
.login-wrapper.login-new .lock-screen-list .nav li:last-child {
  margin-right: 0;
}
.login-wrapper.login-new .lock-screen-list .nav li a {
  font-weight: 500;
}
.login-wrapper.login-new .lock-screen-list .copyright-text {
  margin: 20px 0 40px;
}
@media (max-width: 767.98px) {
  .login-wrapper.login-new .lock-screen-list .copyright-text {
    margin: 20px 0 30px;
  }
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-toggle {
  border: 0;
  padding: 0;
  border-radius: 5px;
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-toggle:after {
  border-top: 0;
  border-left: 0;
  border-bottom: 2px solid #9CA1AF;
  border-right: 2px solid #9CA1AF;
  content: "";
  display: inline-block;
  pointer-events: none;
  width: 8px;
  height: 8px;
  vertical-align: 2px;
  transform-origin: 66% 66%;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-toggle[aria-expanded=true]:after {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-menu {
  padding: 15px;
  background: #FFF;
  box-shadow: 0px 4px 13px -2px rgba(19, 16, 34, 0.06);
  border: 1px solid #F1FAFB;
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-menu .dropdown-item {
  padding: 5px 10px;
  background: #FFF;
  border-radius: 5px;
  display: block;
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-menu .dropdown-item:hover {
  background: #F8FAFC;
}

.login-or {
  text-align: center;
  font-size: 15px;
  color: #515B73;
  font-weight: 500;
  margin: 5px 0;
  padding: 10px 0;
  position: relative;
}
.login-or::after {
  width: 100%;
  content: "";
  border-top: 1px solid #CDD0D7;
  position: absolute;
  top: 50%;
  right: 0;
}
.login-or::before {
  width: 100%;
  content: "";
  border-top: 1px solid #CDD0D7;
  position: absolute;
  top: 50%;
  left: 0;
}
.login-or .span-or {
  background-color: #FFF;
  padding: 0 10px;
  z-index: 9;
  position: relative;
}

.authen-overlay-item {
  background: rgba(255, 255, 255, 0.1019607843);
  border-radius: 25px;
  padding: 24px;
  position: relative;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 570px;
}

.comming-soon-pg {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  position: relative;
  z-index: 1;
  margin: 50px 0;
}
.comming-soon-pg .bg-img .top-bg {
  position: absolute;
  top: 0;
  left: 30px;
  z-index: -1;
}
.comming-soon-pg .bg-img .bottom-bg {
  position: absolute;
  right: 30px;
  bottom: 0;
  z-index: -1;
}
@media (max-width: 767.98px) {
  .comming-soon-pg .bg-img {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .comming-soon-pg {
    height: 100%;
  }
}

.error-img {
  max-width: 450px;
}
@media (max-width: 1399.98px) {
  .error-img {
    max-width: 260px;
  }
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.invoice-info .note-editable {
  background: #FFF;
  min-height: 80px;
}

.invoice-amount-details {
  background: #FFF;
  padding: 24px;
  border-radius: 5px;
  margin-bottom: 24px;
}
.invoice-amount-details ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.invoice-amount-details ul li h6 {
  font-size: 15px;
}
.invoice-amount-details ul li:last-child {
  padding: 15px 0;
  border-top: 1px solid #E9EDF4;
  border-bottom: 1px solid #E9EDF4;
}

.service-upload {
  border: 2px dashed #E9EDF4;
  text-align: center;
  background-color: #FFF;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
}
.service-upload span {
  font-size: 15px;
  color: #515B73;
  display: block;
}
.service-upload input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.invoice-modal .modal-content {
  background: #FFF;
  padding: 20px;
}

.invoice-popup-head {
  background: #F4F6FA;
  padding: 24px 24px 14px;
  flex-wrap: wrap;
}
.invoice-popup-head img {
  margin-bottom: 10px;
}
.invoice-popup-head .popup-title {
  margin-bottom: 10px;
}
.invoice-popup-head .popup-title h2 {
  background: linear-gradient(270.14deg, #7638FF -0.04%, #3698FF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

.tax-info {
  margin-top: 30px;
}

.tax-invoice-info {
  background: #F4F6FA;
  padding: 10px;
  margin-bottom: 15px;
}
.tax-invoice-info h4 {
  font-weight: 500;
}

.total-amount-tax {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-wrap: wrap;
}
.total-amount-tax ul {
  min-width: 200px;
  text-align: right;
  margin-bottom: 0;
}
.total-amount-tax ul li {
  font-size: 16px;
  margin-bottom: 8px;
}
.total-amount-tax ul.total-amount li {
  font-size: 18px;
  font-weight: 600;
}

.payment-info {
  border-top: 1px solid #E9EDF4;
  border-bottom: 1px solid #E9EDF4;
}
.payment-info h6 {
  margin-bottom: 10px;
}

.term-condition-invoice {
  border-bottom: 1px solid #E9EDF4;
}
.term-condition-invoice p {
  font-weight: 500;
  color: #202C4B;
}

.note-toolbar {
  background: #FFF;
  border-color: #E9EDF4;
}

.note-editor.note-airframe, .note-editor.note-frame {
  border-color: #E9EDF4;
}

.note-editor.note-airframe .note-statusbar, .note-editor.note-frame .note-statusbar {
  border-top: 0;
  background-color: #FFF;
}

.invoice-logo-dark {
  display: block;
}

.invoice-logo-white {
  display: none;
}
.invoice-logo-white img {
  height: 42px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.class-info span {
  color: #CDD0D7;
  position: relative;
}
.class-info span + span {
  margin-left: 10px;
  padding-left: 10px;
}
.class-info span + span:before {
  content: "";
  border: 1px solid #838A9B;
  width: 1px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translatey(-50%);
}

.profile-footer {
  border-top: 1px dashed #FDFDFE;
}

.class-datepick {
  width: 120px;
  position: relative;
}
.class-datepick .icon {
  position: absolute;
}
.class-datepick .icon:first-child {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.class-datepick .icon:last-child {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.class-datepick input {
  width: 120px;
  text-align: center;
}

.nav-control {
  display: flex;
  align-items: center;
}
.nav-control button {
  border: 1px solid #E9EDF4;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #FFF;
  color: #515B73;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-control button:hover {
  background: #202C4B;
  color: #FFF;
}
.nav-control button.owl-prev {
  margin-right: 8px;
}

.link-card-hover:hover {
  border-color: #3D5EE1;
}
.link-card-hover:hover .avatar {
  background: #3D5EE1 !important;
  border-color: #3D5EE1 !important;
}
.link-card-hover:hover .avatar i {
  color: #FFF !important;
}
.link-card-hover:hover h6 {
  color: #3D5EE1;
}

.attendance-chart .total-days span {
  color: #202C4B;
  font-weight: 500;
}
.attendance-chart .total-attendance-days {
  border: 1px solid #E9EDF4;
  border-radius: 5px;
}
.attendance-chart .total-attendance-days .attendance-box span {
  font-size: 12px;
  display: block;
  margin-bottom: 5px;
}
.attendance-chart .total-attendance-days .attendance-box + .attendance-box {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #E9EDF4;
}

.event-wrapper {
  max-height: 480px;
  overflow-y: auto;
}

.teachers-profile-slider .btn:hover {
  background: #E9EDF4 !important;
}
.teachers-profile-slider a h6:hover {
  color: #3D5EE1;
}

.bg-dark.position-relative {
  z-index: 1;
}

.student-card-bg img {
  position: absolute;
}
.student-card-bg img:first-child {
  left: 0;
  top: 0;
  z-index: -1;
}
.student-card-bg img:nth-child(2) {
  right: 0;
  top: 0;
  z-index: -1;
}
.student-card-bg img:nth-child(3) {
  right: 20%;
  top: 20%;
  z-index: -1;
}
.student-card-bg img:last-child {
  left: 5px;
  bottom: 30%;
  z-index: -1;
}

.circle-progress {
  width: 38px;
  height: 38px !important;
  float: left;
  line-height: 38px;
  background: none;
  box-shadow: none;
  position: relative;
}
.circle-progress::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #E9EDF4;
  position: absolute;
  top: 0;
  left: 0;
}
.circle-progress .progress-value {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  font-size: 12px;
  color: #515B73;
  line-height: 38px;
  text-align: center;
}
.circle-progress .progress-left {
  left: 0;
}
.circle-progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.circle-progress .progress-right {
  right: 0;
}
.circle-progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 1.8s linear forwards;
}
.circle-progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 4px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.circle-progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}
/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.dash-select-student {
  margin-bottom: 10px;
}
.dash-select-student .avatar {
  border: 1px solid transparent;
}
.dash-select-student .avatar:hover {
  border-color: #3D5EE1;
}
.dash-select-student .avatar.active {
  border-color: #3D5EE1;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.class-progress .progress {
  height: 26px;
  border-radius: 70px;
}
.class-progress .progress .progress-bar {
  border-radius: 20px;
}
.class-progress .progress .progress-bar .avatar-list-stacked {
  margin-left: 5px;
}
.class-progress .progress .badge {
  padding: 5px;
  background-color: #FDFDFE;
  color: #202C4B;
  border-radius: 45px;
  margin: 5px 5px 5px 15px;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.layout-box-mode {
  background: #FBFBFD;
}
.layout-box-mode .main-wrapper {
  max-width: 1350px;
  margin: auto;
}
@media (max-width: 1399.98px) {
  .layout-box-mode .main-wrapper {
    max-width: 1170px;
  }
}
@media (max-width: 1199.98px) {
  .layout-box-mode .main-wrapper {
    max-width: 950px;
  }
}
@media (max-width: 991.98px) {
  .layout-box-mode .main-wrapper {
    max-width: 100%;
  }
}
.layout-box-mode .header {
  max-width: 1350px;
  margin: auto;
}
@media (max-width: 1399.98px) {
  .layout-box-mode .header {
    max-width: 1170px;
  }
}
@media (max-width: 1199.98px) {
  .layout-box-mode .header {
    max-width: 950px;
  }
}
@media (max-width: 991.98px) {
  .layout-box-mode .header {
    max-width: 100%;
  }
}
.layout-box-mode .sidebar {
  left: unset;
}
@media (max-width: 991.98px) {
  .layout-box-mode .page-wrapper .content {
    padding-right: 15px;
  }
}

body.layout-mode-rtl {
  direction: rtl;
}
body.layout-mode-rtl .sidebar {
  right: 0;
  left: unset;
  border-right: 0;
  border-left: 1px solid #E9EDF4;
}
body.layout-mode-rtl .sidebar .sidebar-menu > ul > li ul li a span {
  margin-right: 10px;
  margin-left: 0;
}
body.layout-mode-rtl .sidebar .sidebar-menu .menu-arrow {
  left: 10px;
  right: unset;
}
body.layout-mode-rtl .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
  margin-right: 8px;
  margin-left: 0;
}
body.layout-mode-rtl .header-left {
  float: right;
  border-right: 0;
  border-left: 1px solid #E9EDF4;
}
body.layout-mode-rtl .page-wrapper {
  margin-right: 252px;
  margin-left: 0;
}
body.layout-mode-rtl.mini-sidebar .page-wrapper {
  margin-right: 80px;
}
body.layout-mode-rtl .header .date-range {
  padding-right: 30px !important;
  padding-left: 10px !important;
}
body.layout-mode-rtl .header .cal-icon {
  right: 10px;
  left: unset;
}
body.layout-mode-rtl .header .searchinputs input {
  padding-left: 45px;
  padding-right: 10px;
}
body.layout-mode-rtl .header .search-addon button {
  left: 16px;
  right: unset;
}

[data-topbar=primary] .header {
  background: #3D5EE1;
  border-bottom-color: #778EEA;
}
[data-topbar=primary] .header .dark-logo {
  display: block;
}
[data-topbar=primary] .header .logo-normal {
  display: none;
}
[data-topbar=primary] .header #toggle_btn {
  color: #FFF;
}
[data-topbar=primary] .header .bg-white {
  background: transparent !important;
}
[data-topbar=primary] .header .btn-outline-light {
  color: #FFF !important;
  border-color: #778EEA !important;
}
[data-topbar=primary] .header .header-left {
  background: #3D5EE1;
  border-color: #778EEA;
}
[data-topbar=primary] .header .searchinputs input {
  background: #3D5EE1;
  color: #FFF;
  border-color: #778EEA;
}
[data-topbar=primary] .header .searchinputs input::placeholder {
  color: #FFF;
}
[data-topbar=primary] .header .searchinputs .search-addon button {
  background: #3D5EE1;
  color: #FFF;
}
@media (min-width: 992px) {
  [data-topbar=primary] .mini-sidebar .header-left .dark-logo {
    display: none;
  }
  [data-topbar=primary] .mini-sidebar.expand-menu .dark-logo {
    display: block;
  }
}

[data-sidebar=dark] .sidebar {
  background: #0F0C1C;
  border-color: #1B1632;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
  background: #1B1632;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
  background: #1B1632;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li.active a span {
  color: #3D5EE1;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a span, [data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a i {
  color: #3D5EE1;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a {
  color: #B9B7C0;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a:hover, [data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a.active {
  color: #3D5EE1;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a i {
  background: #1B1632;
  color: #B9B7C0;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a span {
  color: #B9B7C0;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a {
  background: #1B1632;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
  color: #B9B7C0;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
  color: #3D5EE1;
}

[data-sidebar=primary] .sidebar {
  background: #3D5EE1;
  border-color: #1B1632;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu-hdr {
  color: #FFF;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
  background: #ECEFFC;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
  background: #778EEA;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop span {
  color: #FFF;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu a.active .menu-arrow::before {
  border-color: #ECEFFC;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li.active a span {
  color: #FFF;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li.active a span, [data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li.active a i {
  color: #3D5EE1;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a {
  color: #C5CFF6;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a:hover, [data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a.active {
  color: #FFF;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a i {
  background: #ECEFFC;
  color: #3D5EE1;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a span {
  color: #C5CFF6;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li.active a {
  background: #778EEA;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
  color: #C5CFF6;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
  color: #3D5EE1;
}

[data-sidebar=darkblack] .sidebar {
  background: #39435F;
  border-color: #1B1632;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu-hdr {
  color: #FFF;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
  background: #ECEFFC;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
  background: #778EEA;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop span {
  color: #FFF;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu a.active .menu-arrow::before {
  border-color: #ECEFFC;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li.active a span {
  color: #FFF;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li.active a span, [data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li.active a i {
  color: #3D5EE1;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a {
  color: #C5CFF6;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a:hover, [data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a.active {
  color: #FFF;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a i {
  background: #ECEFFC;
  color: #3D5EE1;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a span {
  color: #C5CFF6;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li.active a {
  background: #778EEA;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
  color: #C5CFF6;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
  color: #3D5EE1;
}

[data-sidebar=darkblue] .sidebar {
  background: #07396D;
  border-color: #1B1632;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu-hdr {
  color: #FFF;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
  background: #ECEFFC;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
  background: #778EEA;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop span {
  color: #FFF;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu a.active .menu-arrow::before {
  border-color: #ECEFFC;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li.active a span {
  color: #FFF;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li.active a span, [data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li.active a i {
  color: #3D5EE1;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a {
  color: #C5CFF6;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a:hover, [data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a.active {
  color: #FFF;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a i {
  background: #ECEFFC;
  color: #3D5EE1;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a span {
  color: #C5CFF6;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li.active a {
  background: #778EEA;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
  color: #C5CFF6;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
  color: #3D5EE1;
}

[data-topbar=dark] .header {
  background: #0F0C1C;
  border-bottom-color: #1B1632;
}
[data-topbar=dark] .header .dark-logo {
  display: block;
}
[data-topbar=dark] .header .logo-normal {
  display: none;
}
[data-topbar=dark] .header .header-left {
  background: #0F0C1C;
  border-color: #1B1632;
}
[data-topbar=dark] .header .searchinputs input {
  background: #131022;
  border-color: #1B1632;
  color: #B9B7C0;
}
[data-topbar=dark] .header .searchinputs .search-addon button {
  background: #1B1632;
  color: rgba(185, 183, 192, 0.5019607843);
}
[data-topbar=dark] .header .bg-white {
  background: #131022 !important;
}
[data-topbar=dark] .header .btn-outline-light {
  border-color: #1B1632 !important;
  color: #B9B7C0 !important;
}
[data-topbar=dark] .header #toggle_btn {
  color: #B9B7C0;
}
@media (min-width: 992px) {
  [data-topbar=dark] .mini-sidebar .header-left .dark-logo {
    display: none;
  }
  [data-topbar=dark] .mini-sidebar.expand-menu .dark-logo {
    display: block;
  }
}

[data-topbar=grey] .header {
  background: #EFEFF2;
  border-bottom-color: #EFEFF2;
}
[data-topbar=grey] .header .dark-logo {
  display: none;
}
[data-topbar=grey] .header .logo-normal {
  display: block;
}
[data-topbar=grey] .header .header-left {
  background: #EFEFF2;
  border-color: #B9B7C0;
}
[data-topbar=grey] .header .searchinputs input {
  background: #EFEFF2;
  border-color: rgba(185, 183, 192, 0.5019607843);
  color: #B9B7C0;
}
[data-topbar=grey] .header .searchinputs .search-addon button {
  background: rgba(185, 183, 192, 0.5019607843);
  color: #1B1632;
}
[data-topbar=grey] .header .bg-white {
  background: rgba(185, 183, 192, 0.5019607843) !important;
}
[data-topbar=grey] .header .btn-outline-light {
  border-color: rgba(185, 183, 192, 0.5019607843) !important;
  color: #1B1632 !important;
}
[data-topbar=grey] .header #toggle_btn {
  color: #B9B7C0;
}

[data-sidebar=light] [data-sidebarbg=sidebarbg1] .sidebar {
  background-image: url(../img/theme/bg-01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
  background: rgba(255, 255, 255, 0.85);
}

[data-sidebar=dark] [data-sidebarbg=sidebarbg1] .sidebar {
  background-image: url(../img/theme/bg-01.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
  background: rgba(0, 0, 0, 0.85);
}

[data-sidebar=primary] [data-sidebarbg=sidebarbg1] .sidebar {
  background-image: url(../img/theme/bg-01.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
  background: rgba(80, 110, 228, 0.85);
}

[data-sidebar=darkblack] [data-sidebarbg=sidebarbg1] .sidebar {
  background-image: url(../img/theme/bg-01.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
  background: rgba(7, 57, 109, 0.85);
}

[data-sidebar=darkblue] [data-sidebarbg=sidebarbg1] .sidebar {
  background-image: url(../img/theme/bg-01.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
  background: rgba(57, 67, 95, 0.85);
}

[data-sidebar=light] [data-sidebarbg=sidebarbg2] .sidebar {
  background-image: url(../img/theme/bg-02.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
  background: rgba(255, 255, 255, 0.85);
}

[data-sidebar=dark] [data-sidebarbg=sidebarbg2] .sidebar {
  background-image: url(../img/theme/bg-02.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
  background: rgba(0, 0, 0, 0.85);
}

[data-sidebar=primary] [data-sidebarbg=sidebarbg2] .sidebar {
  background-image: url(../img/theme/bg-02.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
  background: rgba(80, 110, 228, 0.85);
}

[data-sidebar=darkblack] [data-sidebarbg=sidebarbg2] .sidebar {
  background-image: url(../img/theme/bg-02.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
  background: rgba(7, 57, 109, 0.85);
}

[data-sidebar=darkblue] [data-sidebarbg=sidebarbg2] .sidebar {
  background-image: url(../img/theme/bg-02.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
  background: rgba(57, 67, 95, 0.85);
}

[data-sidebar=light] [data-sidebarbg=sidebarbg3] .sidebar {
  background-image: url(../img/theme/bg-03.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
  background: rgba(255, 255, 255, 0.85);
}

[data-sidebar=dark] [data-sidebarbg=sidebarbg3] .sidebar {
  background-image: url(../img/theme/bg-03.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
  background: rgba(0, 0, 0, 0.85);
}

[data-sidebar=primary] [data-sidebarbg=sidebarbg3] .sidebar {
  background-image: url(../img/theme/bg-03.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
  background: rgba(80, 110, 228, 0.85);
}

[data-sidebar=darkblack] [data-sidebarbg=sidebarbg3] .sidebar {
  background-image: url(../img/theme/bg-03.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
  background: rgba(7, 57, 109, 0.85);
}

[data-sidebar=darkblue] [data-sidebarbg=sidebarbg3] .sidebar {
  background-image: url(../img/theme/bg-03.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
  background: rgba(57, 67, 95, 0.85);
}

[data-sidebar=light] [data-sidebarbg=sidebarbg4] .sidebar {
  background-image: url(../img/theme/bg-04.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
  background: rgba(255, 255, 255, 0.85);
}

[data-sidebar=dark] [data-sidebarbg=sidebarbg4] .sidebar {
  background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
  background: rgba(0, 0, 0, 0.85);
}

[data-sidebar=primary] [data-sidebarbg=sidebarbg4] .sidebar {
  background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
  background: rgba(80, 110, 228, 0.85);
}

[data-sidebar=darkblack] [data-sidebarbg=sidebarbg4] .sidebar {
  background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
  background: rgba(7, 57, 109, 0.85);
}

[data-sidebar=darkblue] [data-sidebarbg=sidebarbg4] .sidebar {
  background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
  background: rgba(57, 67, 95, 0.85);
}

[data-sidebar=light] [data-sidebarbg=sidebarbg5] .sidebar {
  background-image: url(../img/theme/bg-05.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
  background: rgba(255, 255, 255, 0.85);
}

[data-sidebar=dark] [data-sidebarbg=sidebarbg5] .sidebar {
  background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
  background: rgba(0, 0, 0, 0.85);
}

[data-sidebar=primary] [data-sidebarbg=sidebarbg5] .sidebar {
  background-image: url(../img/theme/bg-05.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
  background: rgba(80, 110, 228, 0.85);
}

[data-sidebar=darkblack] [data-sidebarbg=sidebarbg5] .sidebar {
  background-image: url(../img/theme/bg-05.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
  background: rgba(7, 57, 109, 0.85);
}

[data-sidebar=darkblue] [data-sidebarbg=sidebarbg5] .sidebar {
  background-image: url(../img/theme/bg-05.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
  background: rgba(57, 67, 95, 0.85);
}

[data-sidebar=light] [data-sidebarbg=sidebarbg6] .sidebar {
  background-image: url(../img/theme/bg-06.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
  background: rgba(255, 255, 255, 0.85);
}

[data-sidebar=dark] [data-sidebarbg=sidebarbg6] .sidebar {
  background-image: url(../img/theme/bg-06.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
  background: rgba(0, 0, 0, 0.85);
}

[data-sidebar=primary] [data-sidebarbg=sidebarbg6] .sidebar {
  background-image: url(../img/theme/bg-06.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
  background: rgba(80, 110, 228, 0.85);
}

[data-sidebar=darkblack] [data-sidebarbg=sidebarbg6] .sidebar {
  background-image: url(../img/theme/bg-06.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
  background: rgba(7, 57, 109, 0.85);
}

[data-sidebar=darkblue] [data-sidebarbg=sidebarbg6] .sidebar {
  background-image: url(../img/theme/bg-06.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
  background: rgba(57, 67, 95, 0.85);
}

[data-color=violet] .sidebar .sidebar-menu > ul > li ul li a:hover {
  color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul > li ul li a:hover span {
  color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul > li ul li a.active {
  color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul > li ul li.active a span, [data-color=violet] .sidebar .sidebar-menu > ul > li ul li.active a i {
  color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul li .submenu > a.active {
  color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul li .submenu > a.active i, [data-color=violet] .sidebar .sidebar-menu > ul li .submenu > a.active span {
  color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
  border-color: #673AB7;
}
[data-color=violet] .btn-primary {
  background-color: #673AB7;
  border: 1px solid #673AB7;
}
[data-color=violet] .btn-primary:hover, [data-color=violet] .btn-primary:focus, [data-color=violet] .btn-primary.focus, [data-color=violet] .btn-primary:active, [data-color=violet] .btn-primary.active {
  background-color: rgb(87.7423236515, 49.4082987552, 155.8917012448);
  border: 1px solid rgb(87.7423236515, 49.4082987552, 155.8917012448);
}
[data-color=violet] .btn-check:checked + .btn, [data-color=violet] .btn.active, [data-color=violet] .btn.show, [data-color=violet] .btn.show:hover, [data-color=violet] .btn:first-child:active, [data-color=violet] :not(.btn-check) + .btn:active {
  background-color: #673AB7;
  border-color: #673AB7;
}
[data-color=violet] .link-primary {
  color: #673AB7 !important;
}
[data-color=violet] .link-primary:hover, [data-color=violet] .link-primary:focus, [data-color=violet] .link-primary:active {
  color: rgb(87.7423236515, 49.4082987552, 155.8917012448);
}
[data-color=violet] .text-primary {
  color: #673AB7 !important;
}
[data-color=violet] .badge.badge-primary {
  background: #673AB7;
}
[data-color=violet] .dataTables_paginate .pagination li.active a.page-link {
  background: #673AB7;
  border-color: #673AB7;
}
[data-color=violet] .bg-primary {
  background-color: #673AB7 !important;
  border: 1px solid #673AB7 !important;
}
[data-color=violet] .border-bottom.border-primary {
  border-color: #673AB7 !important;
}
[data-color=violet] .border-primary {
  border-color: #673AB7 !important;
}
[data-color=violet] .nav-tabs.nav-tabs-bottom li a.active, [data-color=violet] .nav-tabs.nav-tabs-bottom li a:hover {
  border-bottom-color: #673AB7;
  color: #673AB7;
}
[data-color=violet] .badge.badge-soft-primary {
  background: rgba(103, 58, 183, 0.1);
  color: #673AB7;
}
[data-color=violet] a:hover {
  color: #673AB7;
}
[data-color=violet] .btn-outline-primary {
  border: 1px solid #673AB7 !important;
  color: #673AB7 !important;
}
[data-color=violet] .btn-outline-primary:hover, [data-color=violet] .btn-outline-primary:focus, [data-color=violet] .btn-outline-primary.focus, [data-color=violet] .btn-outline-primary:active, [data-color=violet] .btn-outline-primary.active {
  background-color: #673AB7 !important;
  border: 1px solid #673AB7 !important;
}
[data-color=violet] .list-group a.active {
  background: #ECEFFC;
  color: #673AB7;
}
[data-color=violet] .list-group a:hover {
  background: #ECEFFC;
  color: #673AB7;
}
[data-color=violet] .badge-primary-hover:hover {
  background: #673AB7 !important;
  border-color: #673AB7 !important;
  color: #FFF !important;
}
[data-color=violet] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
  background: #673AB7;
}
[data-color=violet] .right-user-side .slime-grp .chat-footer form .send-chat a {
  background: #673AB7;
}
[data-color=violet] .custom-pagination .paginations .page-wrap li a.active, [data-color=violet] .custom-pagination .paginations .page-wrap li a:hover {
  background: #673AB7;
}
[data-color=violet] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-color: #673AB7;
}
[data-color=violet] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #673AB7;
}
[data-color=violet] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
  background-color: #673AB7;
  border-color: #673AB7;
}
[data-color=violet] .nav-tabs .nav-link:hover {
  color: #673AB7;
}
[data-color=violet] .form-check-input:checked {
  background-color: #673AB7;
  border-color: #673AB7;
}
[data-color=violet] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
  color: #673AB7;
}
[data-color=violet] .sidebar-contact .toggle-theme {
  background-color: #673AB7;
}
[data-color=violet] .primary-hover:hover {
  background: #673AB7 !important;
  color: #FFF;
}

[data-color=pink] .sidebar .sidebar-menu > ul > li ul li a:hover {
  color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul > li ul li a:hover span {
  color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul > li ul li a.active {
  color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul > li ul li.active a span, [data-color=pink] .sidebar .sidebar-menu > ul > li ul li.active a i {
  color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul li .submenu > a.active {
  color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul li .submenu > a.active i, [data-color=pink] .sidebar .sidebar-menu > ul li .submenu > a.active span {
  color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
  border-color: #E83E8C;
}
[data-color=pink] .btn-primary {
  background-color: #E83E8C;
  border: 1px solid #E83E8C;
}
[data-color=pink] .btn-primary:hover, [data-color=pink] .btn-primary:focus, [data-color=pink] .btn-primary.focus, [data-color=pink] .btn-primary:active, [data-color=pink] .btn-primary.active {
  background-color: rgb(228.1986111111, 30.1013888889, 120.9930555556);
  border: 1px solid rgb(228.1986111111, 30.1013888889, 120.9930555556);
}
[data-color=pink] .btn-check:checked + .btn, [data-color=pink] .btn.active, [data-color=pink] .btn.show, [data-color=pink] .btn.show:hover, [data-color=pink] .btn:first-child:active, [data-color=pink] :not(.btn-check) + .btn:active {
  background-color: #E83E8C;
  border-color: #E83E8C;
}
[data-color=pink] .link-primary {
  color: #E83E8C !important;
}
[data-color=pink] .link-primary:hover, [data-color=pink] .link-primary:focus, [data-color=pink] .link-primary:active {
  color: rgb(228.1986111111, 30.1013888889, 120.9930555556);
}
[data-color=pink] .text-primary {
  color: #E83E8C !important;
}
[data-color=pink] .badge.badge-primary {
  background: #E83E8C;
}
[data-color=pink] .dataTables_paginate .pagination li.active a.page-link {
  background: #E83E8C;
  border-color: #E83E8C;
}
[data-color=pink] .bg-primary {
  background-color: #E83E8C !important;
  border: 1px solid #E83E8C !important;
}
[data-color=pink] .border-bottom.border-primary {
  border-color: #E83E8C !important;
}
[data-color=pink] .border-primary {
  border-color: #E83E8C !important;
}
[data-color=pink] .nav-tabs.nav-tabs-bottom li a.active, [data-color=pink] .nav-tabs.nav-tabs-bottom li a:hover {
  border-bottom-color: #E83E8C;
  color: #E83E8C;
}
[data-color=pink] .badge.badge-soft-primary {
  background: rgba(232, 62, 140, 0.1);
  color: #E83E8C;
}
[data-color=pink] a:hover {
  color: #E83E8C;
}
[data-color=pink] .btn-outline-primary {
  border: 1px solid #E83E8C !important;
  color: #E83E8C !important;
}
[data-color=pink] .btn-outline-primary:hover, [data-color=pink] .btn-outline-primary:focus, [data-color=pink] .btn-outline-primary.focus, [data-color=pink] .btn-outline-primary:active, [data-color=pink] .btn-outline-primary.active {
  background-color: #E83E8C !important;
  border: 1px solid #E83E8C !important;
}
[data-color=pink] .list-group a.active {
  background: #ECEFFC;
  color: #E83E8C;
}
[data-color=pink] .list-group a:hover {
  background: #ECEFFC;
  color: #E83E8C;
}
[data-color=pink] .badge-primary-hover:hover {
  background: #E83E8C !important;
  border-color: #E83E8C !important;
  color: #FFF !important;
}
[data-color=pink] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
  background: #E83E8C;
}
[data-color=pink] .right-user-side .slime-grp .chat-footer form .send-chat a {
  background: #E83E8C;
}
[data-color=pink] .custom-pagination .paginations .page-wrap li a.active, [data-color=pink] .custom-pagination .paginations .page-wrap li a:hover {
  background: #E83E8C;
}
[data-color=pink] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-color: #E83E8C;
}
[data-color=pink] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #E83E8C;
}
[data-color=pink] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
  background-color: #E83E8C;
  border-color: #E83E8C;
}
[data-color=pink] .nav-tabs .nav-link:hover {
  color: #E83E8C;
}
[data-color=pink] .form-check-input:checked {
  background-color: #E83E8C;
  border-color: #E83E8C;
}
[data-color=pink] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
  color: #E83E8C;
}
[data-color=pink] .sidebar-contact .toggle-theme {
  background-color: #E83E8C;
}
[data-color=pink] .primary-hover:hover {
  background: #E83E8C !important;
  color: #FFF;
}

[data-color=orange] .sidebar .sidebar-menu > ul > li ul li a:hover {
  color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul > li ul li a:hover span {
  color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul > li ul li a.active {
  color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul > li ul li.active a span, [data-color=orange] .sidebar .sidebar-menu > ul > li ul li.active a i {
  color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul li .submenu > a.active {
  color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul li .submenu > a.active i, [data-color=orange] .sidebar .sidebar-menu > ul li .submenu > a.active span {
  color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
  border-color: #FD7E14;
}
[data-color=orange] .btn-primary {
  background-color: #FD7E14;
  border: 1px solid #FD7E14;
}
[data-color=orange] .btn-primary:hover, [data-color=orange] .btn-primary:focus, [data-color=orange] .btn-primary.focus, [data-color=orange] .btn-primary:active, [data-color=orange] .btn-primary.active {
  background-color: rgb(235.2974683544, 108.1367088608, 2.0025316456);
  border: 1px solid rgb(235.2974683544, 108.1367088608, 2.0025316456);
}
[data-color=orange] .btn-check:checked + .btn, [data-color=orange] .btn.active, [data-color=orange] .btn.show, [data-color=orange] .btn.show:hover, [data-color=orange] .btn:first-child:active, [data-color=orange] :not(.btn-check) + .btn:active {
  background-color: #FD7E14;
  border-color: #FD7E14;
}
[data-color=orange] .link-primary {
  color: #FD7E14 !important;
}
[data-color=orange] .link-primary:hover, [data-color=orange] .link-primary:focus, [data-color=orange] .link-primary:active {
  color: rgb(235.2974683544, 108.1367088608, 2.0025316456);
}
[data-color=orange] .text-primary {
  color: #FD7E14 !important;
}
[data-color=orange] .badge.badge-primary {
  background: #FD7E14;
}
[data-color=orange] .dataTables_paginate .pagination li.active a.page-link {
  background: #FD7E14;
  border-color: #FD7E14;
}
[data-color=orange] .bg-primary {
  background-color: #FD7E14 !important;
  border: 1px solid #FD7E14 !important;
}
[data-color=orange] .border-bottom.border-primary {
  border-color: #FD7E14 !important;
}
[data-color=orange] .border-primary {
  border-color: #FD7E14 !important;
}
[data-color=orange] .nav-tabs.nav-tabs-bottom li a.active, [data-color=orange] .nav-tabs.nav-tabs-bottom li a:hover {
  border-bottom-color: #FD7E14;
  color: #FD7E14;
}
[data-color=orange] .badge.badge-soft-primary {
  background: rgba(253, 126, 20, 0.1);
  color: #FD7E14;
}
[data-color=orange] a:hover {
  color: #FD7E14;
}
[data-color=orange] .btn-outline-primary {
  border: 1px solid #FD7E14 !important;
  color: #FD7E14 !important;
}
[data-color=orange] .btn-outline-primary:hover, [data-color=orange] .btn-outline-primary:focus, [data-color=orange] .btn-outline-primary.focus, [data-color=orange] .btn-outline-primary:active, [data-color=orange] .btn-outline-primary.active {
  background-color: #FD7E14 !important;
  border: 1px solid #FD7E14 !important;
}
[data-color=orange] .list-group a.active {
  background: #ECEFFC;
  color: #FD7E14;
}
[data-color=orange] .list-group a:hover {
  background: #ECEFFC;
  color: #FD7E14;
}
[data-color=orange] .badge-primary-hover:hover {
  background: #FD7E14 !important;
  border-color: #FD7E14 !important;
  color: #FFF !important;
}
[data-color=orange] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
  background: #FD7E14;
}
[data-color=orange] .right-user-side .slime-grp .chat-footer form .send-chat a {
  background: #FD7E14;
}
[data-color=orange] .custom-pagination .paginations .page-wrap li a.active, [data-color=orange] .custom-pagination .paginations .page-wrap li a:hover {
  background: #FD7E14;
}
[data-color=orange] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-color: #FD7E14;
}
[data-color=orange] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #FD7E14;
}
[data-color=orange] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
  background-color: #FD7E14;
  border-color: #FD7E14;
}
[data-color=orange] .nav-tabs .nav-link:hover {
  color: #FD7E14;
}
[data-color=orange] .form-check-input:checked {
  background-color: #FD7E14;
  border-color: #FD7E14;
}
[data-color=orange] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
  color: #FD7E14;
}
[data-color=orange] .sidebar-contact .toggle-theme {
  background-color: #FD7E14;
}
[data-color=orange] .primary-hover:hover {
  background: #FD7E14 !important;
  color: #FFF;
}

[data-color=green] .sidebar .sidebar-menu > ul > li ul li a:hover {
  color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul > li ul li a:hover span {
  color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul > li ul li a.active {
  color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul > li ul li.active a span, [data-color=green] .sidebar .sidebar-menu > ul > li ul li.active a i {
  color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul li .submenu > a.active {
  color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul li .submenu > a.active i, [data-color=green] .sidebar .sidebar-menu > ul li .submenu > a.active span {
  color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
  border-color: #2CA87F;
}
[data-color=green] .btn-primary {
  background-color: #2CA87F;
  border: 1px solid #2CA87F;
}
[data-color=green] .btn-primary:hover, [data-color=green] .btn-primary:focus, [data-color=green] .btn-primary.focus, [data-color=green] .btn-primary:active, [data-color=green] .btn-primary.active {
  background-color: rgb(36.5905660377, 139.7094339623, 105.6136792453);
  border: 1px solid rgb(36.5905660377, 139.7094339623, 105.6136792453);
}
[data-color=green] .btn-check:checked + .btn, [data-color=green] .btn.active, [data-color=green] .btn.show, [data-color=green] .btn.show:hover, [data-color=green] .btn:first-child:active, [data-color=green] :not(.btn-check) + .btn:active {
  background-color: #2CA87F;
  border-color: #2CA87F;
}
[data-color=green] .link-primary {
  color: #2CA87F !important;
}
[data-color=green] .link-primary:hover, [data-color=green] .link-primary:focus, [data-color=green] .link-primary:active {
  color: rgb(36.5905660377, 139.7094339623, 105.6136792453);
}
[data-color=green] .text-primary {
  color: #2CA87F !important;
}
[data-color=green] .badge.badge-primary {
  background: #2CA87F;
}
[data-color=green] .dataTables_paginate .pagination li.active a.page-link {
  background: #2CA87F;
  border-color: #2CA87F;
}
[data-color=green] .bg-primary {
  background-color: #2CA87F !important;
  border: 1px solid #2CA87F !important;
}
[data-color=green] .border-bottom.border-primary {
  border-color: #2CA87F !important;
}
[data-color=green] .border-primary {
  border-color: #2CA87F !important;
}
[data-color=green] .nav-tabs.nav-tabs-bottom li a.active, [data-color=green] .nav-tabs.nav-tabs-bottom li a:hover {
  border-bottom-color: #2CA87F;
  color: #2CA87F;
}
[data-color=green] .badge.badge-soft-primary {
  background: rgba(44, 168, 127, 0.1);
  color: #2CA87F;
}
[data-color=green] a:hover {
  color: #2CA87F;
}
[data-color=green] .btn-outline-primary {
  border: 1px solid #2CA87F !important;
  color: #2CA87F !important;
}
[data-color=green] .btn-outline-primary:hover, [data-color=green] .btn-outline-primary:focus, [data-color=green] .btn-outline-primary.focus, [data-color=green] .btn-outline-primary:active, [data-color=green] .btn-outline-primary.active {
  background-color: #2CA87F !important;
  border: 1px solid #2CA87F !important;
}
[data-color=green] .list-group a.active {
  background: #ECEFFC;
  color: #2CA87F;
}
[data-color=green] .list-group a:hover {
  background: #ECEFFC;
  color: #2CA87F;
}
[data-color=green] .badge-primary-hover:hover {
  background: #2CA87F !important;
  border-color: #2CA87F !important;
  color: #FFF !important;
}
[data-color=green] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
  background: #2CA87F;
}
[data-color=green] .right-user-side .slime-grp .chat-footer form .send-chat a {
  background: #2CA87F;
}
[data-color=green] .custom-pagination .paginations .page-wrap li a.active, [data-color=green] .custom-pagination .paginations .page-wrap li a:hover {
  background: #2CA87F;
}
[data-color=green] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-color: #2CA87F;
}
[data-color=green] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #2CA87F;
}
[data-color=green] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
  background-color: #2CA87F;
  border-color: #2CA87F;
}
[data-color=green] .nav-tabs .nav-link:hover {
  color: #2CA87F;
}
[data-color=green] .form-check-input:checked {
  background-color: #2CA87F;
  border-color: #2CA87F;
}
[data-color=green] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
  color: #2CA87F;
}
[data-color=green] .sidebar-contact .toggle-theme {
  background-color: #2CA87F;
}
[data-color=green] .primary-hover:hover {
  background: #2CA87F !important;
  color: #FFF;
}

[data-color=red] .sidebar .sidebar-menu > ul > li ul li a:hover {
  color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul > li ul li a:hover span {
  color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul > li ul li a.active {
  color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul > li ul li.active a span, [data-color=red] .sidebar .sidebar-menu > ul > li ul li.active a i {
  color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul li .submenu > a.active {
  color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul li .submenu > a.active i, [data-color=red] .sidebar .sidebar-menu > ul li .submenu > a.active span {
  color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
  border-color: #DC2626;
}
[data-color=red] .btn-primary {
  background-color: #DC2626;
  border: 1px solid #DC2626;
}
[data-color=red] .btn-primary:hover, [data-color=red] .btn-primary:focus, [data-color=red] .btn-primary.focus, [data-color=red] .btn-primary:active, [data-color=red] .btn-primary.active {
  background-color: rgb(191.425, 30.875, 30.875);
  border: 1px solid rgb(191.425, 30.875, 30.875);
}
[data-color=red] .btn-check:checked + .btn, [data-color=red] .btn.active, [data-color=red] .btn.show, [data-color=red] .btn.show:hover, [data-color=red] .btn:first-child:active, [data-color=red] :not(.btn-check) + .btn:active {
  background-color: #DC2626;
  border-color: #DC2626;
}
[data-color=red] .link-primary {
  color: #DC2626 !important;
}
[data-color=red] .link-primary:hover, [data-color=red] .link-primary:focus, [data-color=red] .link-primary:active {
  color: rgb(191.425, 30.875, 30.875);
}
[data-color=red] .text-primary {
  color: #DC2626 !important;
}
[data-color=red] .badge.badge-primary {
  background: #DC2626;
}
[data-color=red] .dataTables_paginate .pagination li.active a.page-link {
  background: #DC2626;
  border-color: #DC2626;
}
[data-color=red] .bg-primary {
  background-color: #DC2626 !important;
  border: 1px solid #DC2626 !important;
}
[data-color=red] .border-bottom.border-primary {
  border-color: #DC2626 !important;
}
[data-color=red] .border-primary {
  border-color: #DC2626 !important;
}
[data-color=red] .nav-tabs.nav-tabs-bottom li a.active, [data-color=red] .nav-tabs.nav-tabs-bottom li a:hover {
  border-bottom-color: #DC2626;
  color: #DC2626;
}
[data-color=red] .badge.badge-soft-primary {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}
[data-color=red] a:hover {
  color: #DC2626;
}
[data-color=red] .btn-outline-primary {
  border: 1px solid #DC2626 !important;
  color: #DC2626 !important;
}
[data-color=red] .btn-outline-primary:hover, [data-color=red] .btn-outline-primary:focus, [data-color=red] .btn-outline-primary.focus, [data-color=red] .btn-outline-primary:active, [data-color=red] .btn-outline-primary.active {
  background-color: #DC2626 !important;
  border: 1px solid #DC2626 !important;
}
[data-color=red] .list-group a.active {
  background: #ECEFFC;
  color: #DC2626;
}
[data-color=red] .list-group a:hover {
  background: #ECEFFC;
  color: #DC2626;
}
[data-color=red] .badge-primary-hover:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFF !important;
}
[data-color=red] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
  background: #DC2626;
}
[data-color=red] .right-user-side .slime-grp .chat-footer form .send-chat a {
  background: #DC2626;
}
[data-color=red] .custom-pagination .paginations .page-wrap li a.active, [data-color=red] .custom-pagination .paginations .page-wrap li a:hover {
  background: #DC2626;
}
[data-color=red] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-color: #DC2626;
}
[data-color=red] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #DC2626;
}
[data-color=red] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
  background-color: #DC2626;
  border-color: #DC2626;
}
[data-color=red] .nav-tabs .nav-link:hover {
  color: #DC2626;
}
[data-color=red] .form-check-input:checked {
  background-color: #DC2626;
  border-color: #DC2626;
}
[data-color=red] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
  color: #DC2626;
}
[data-color=red] .sidebar-contact .toggle-theme {
  background-color: #DC2626;
}
[data-color=red] .primary-hover:hover {
  background: #DC2626 !important;
  color: #FFF;
}

.student-slider-rtl.owl-carousel .owl-stage-outer, .teacher-slider-rtl.owl-carousel .owl-stage-outer {
  height: 100% !important;
}
.student-slider-rtl.owl-carousel .owl-stage-outer .owl-stage, .teacher-slider-rtl.owl-carousel .owl-stage-outer .owl-stage {
  height: 100%;
}
.student-slider-rtl.owl-carousel .owl-stage-outer .owl-stage .owl-item, .teacher-slider-rtl.owl-carousel .owl-stage-outer .owl-stage .owl-item {
  height: 100%;
}

.student-slider-rtl.owl-carousel .owl-nav {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.student-slider-rtl.owl-carousel .owl-nav button {
  width: 24px;
  height: 24px;
  background: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.student-slider-rtl.owl-carousel .owl-nav button.owl-prev {
  margin-left: 5px;
}
.student-slider-rtl.owl-carousel .owl-nav button:hover {
  background: #3D5EE1;
  color: #FFF;
}

.teacher-slider-rtl.owl-carousel .owl-nav {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.teacher-slider-rtl.owl-carousel .owl-nav button {
  width: 24px;
  height: 24px;
  background: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #202C4B;
}
.teacher-slider-rtl.owl-carousel .owl-nav button.owl-prev {
  margin-left: 5px;
}
.teacher-slider-rtl.owl-carousel .owl-nav button:hover {
  background: #3D5EE1;
  color: #FFF;
}

html .darkmode, html[data-theme=dark] {
  background: #0F0C1C;
  color: #B9B7C0;
}
html .darkmode body, html[data-theme=dark] body {
  background-color: #0F0C1C;
}
html .darkmode body.mini-sidebar .dark-logo, html[data-theme=dark] body.mini-sidebar .dark-logo {
  display: none !important;
}
html .darkmode body.mini-sidebar.expand-menu .dark-logo, html[data-theme=dark] body.mini-sidebar.expand-menu .dark-logo {
  display: block !important;
}
html .darkmode h1, html .darkmode h2, html .darkmode h3, html .darkmode h4, html .darkmode h5, html .darkmode h6, html[data-theme=dark] h1, html[data-theme=dark] h2, html[data-theme=dark] h3, html[data-theme=dark] h4, html[data-theme=dark] h5, html[data-theme=dark] h6 {
  color: #EFEFF2 !important;
}
html .darkmode span, html .darkmode p, html .darkmode a, html[data-theme=dark] span, html[data-theme=dark] p, html[data-theme=dark] a {
  color: #B9B7C0;
}
html .darkmode a:hover, html[data-theme=dark] a:hover {
  color: #3D5EE1;
}
html .darkmode .bg-outline-info, html[data-theme=dark] .bg-outline-info {
  background-color: transparent;
  color: #0F65CD;
}
html .darkmode .bg-outline-success, html[data-theme=dark] .bg-outline-success {
  background-color: transparent;
  color: #1ABE17;
}
html .darkmode .bg-outline-warning, html[data-theme=dark] .bg-outline-warning {
  background-color: transparent;
  color: #EAB300;
}
html .darkmode .bg-outline-danger, html[data-theme=dark] .bg-outline-danger {
  background-color: transparent;
  color: #E82646;
}
html .darkmode .nav-tabs li a, html[data-theme=dark] .nav-tabs li a {
  color: #B9B7C0;
}
html .darkmode span.bg-success, html .darkmode span.bg-danger, html .darkmode span.bg-info, html .darkmode span.bg-primary, html .darkmode span.bg-warning, html .darkmode span.bg-secondary, html .darkmode span.bg-skyblue, html[data-theme=dark] span.bg-success, html[data-theme=dark] span.bg-danger, html[data-theme=dark] span.bg-info, html[data-theme=dark] span.bg-primary, html[data-theme=dark] span.bg-warning, html[data-theme=dark] span.bg-secondary, html[data-theme=dark] span.bg-skyblue {
  color: #FFF;
}
html .darkmode .accordion-item, html[data-theme=dark] .accordion-item {
  border-color: #1B1632;
}
html .darkmode .accordion-header, html .darkmode .accordion-body, html .darkmode .accordion-button, html[data-theme=dark] .accordion-header, html[data-theme=dark] .accordion-body, html[data-theme=dark] .accordion-button {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .btn.btn-white, html[data-theme=dark] .btn.btn-white {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .btn-icon i, html[data-theme=dark] .btn-icon i {
  color: #B9B7C0;
}
html .darkmode header .btn-outline-light, html[data-theme=dark] header .btn-outline-light {
  border-color: #1B1632 !important;
  color: #B9B7C0 !important;
}
html .darkmode .btn-outline-light, html[data-theme=dark] .btn-outline-light {
  border-color: #1B1632 !important;
}
html .darkmode .dropdown-menu, html[data-theme=dark] .dropdown-menu {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .dropdown-menu .dropdown-item, html[data-theme=dark] .dropdown-menu .dropdown-item {
  color: #B9B7C0 !important;
}
html .darkmode .tax-invoice-info, html .darkmode .invoice-popup-head, html[data-theme=dark] .tax-invoice-info, html[data-theme=dark] .invoice-popup-head {
  background: #1B1632;
}
html .darkmode .bg-dark, html[data-theme=dark] .bg-dark {
  background: #131022 !important;
}
html .darkmode .text-dark, html[data-theme=dark] .text-dark {
  color: #B9B7C0 !important;
}
html .darkmode .invoice-product-table, html .darkmode .payment-info, html .darkmode .invoice-table, html[data-theme=dark] .invoice-product-table, html[data-theme=dark] .payment-info, html[data-theme=dark] .invoice-table {
  border-color: #1B1632 !important;
}
html .darkmode .border, html .darkmode .border-end, html .darkmode .border-white, html .darkmode .border-bottom, html[data-theme=dark] .border, html[data-theme=dark] .border-end, html[data-theme=dark] .border-white, html[data-theme=dark] .border-bottom {
  border-color: #1B1632 !important;
}
html .darkmode .border-start, html[data-theme=dark] .border-start {
  border-color: #1B1632 !important;
}
html .darkmode .border-start.border-skyblue, html[data-theme=dark] .border-start.border-skyblue {
  border-color: #05C3FB !important;
}
html .darkmode .border-start.border-info, html[data-theme=dark] .border-start.border-info {
  border-color: #0F65CD !important;
}
html .darkmode .border-start.border-danger, html[data-theme=dark] .border-start.border-danger {
  border-color: #E82646 !important;
}
html .darkmode .custom-table .table-responsive, html[data-theme=dark] .custom-table .table-responsive {
  border-color: #1B1632;
}
html .darkmode .shadow-sm, html[data-theme=dark] .shadow-sm {
  box-shadow: 0px 4.4px 12px -1px rgba(44, 44, 44, 0.361) !important;
}
html .darkmode .form-control, html[data-theme=dark] .form-control {
  background: #131022;
  border-color: #1B1632;
  color: #B9B7C0;
}
html .darkmode .form-label, html[data-theme=dark] .form-label {
  color: #B9B7C0;
}
html .darkmode .nav-tabs.nav-tabs-solid, html[data-theme=dark] .nav-tabs.nav-tabs-solid {
  background: #131022;
}
html .darkmode .bg-light-500, html .darkmode .bg-light, html .darkmode .bg-light-400, html .darkmode .bg-light-gray, html .darkmode .bg-light-200, html[data-theme=dark] .bg-light-500, html[data-theme=dark] .bg-light, html[data-theme=dark] .bg-light-400, html[data-theme=dark] .bg-light-gray, html[data-theme=dark] .bg-light-200 {
  background: #1B1632 !important;
  border-color: #1B1632 !important;
}
html .darkmode .primary-hover:hover, html[data-theme=dark] .primary-hover:hover {
  background: #3D5EE1 !important;
}
html .darkmode .bg-light-300, html .darkmode .bg-light-100, html[data-theme=dark] .bg-light-300, html[data-theme=dark] .bg-light-100 {
  background: #1B1632 !important;
}
html .darkmode .card-dropdown > a, html[data-theme=dark] .card-dropdown > a {
  background: #1B1632 !important;
}
html .darkmode .table, html[data-theme=dark] .table {
  --bs-body-bg: $dark-800;
}
html .darkmode .table thead th, html[data-theme=dark] .table thead th {
  background: #131022 !important;
  color: #EFEFF2 !important;
  border-color: #1B1632 !important;
}
html .darkmode .table tbody td, html[data-theme=dark] .table tbody td {
  color: #B9B7C0 !important;
  border-color: #1B1632 !important;
}
html .darkmode .table tbody th, html[data-theme=dark] .table tbody th {
  border-color: #1B1632 !important;
}
html .darkmode .table tbody td .text-dark a, html[data-theme=dark] .table tbody td .text-dark a {
  color: #B9B7C0;
}
html .darkmode .tab-style-6, html[data-theme=dark] .tab-style-6 {
  background: #131022;
}
html .darkmode .main-chat-blk .chat-page-wrapper .left-chat-title, html[data-theme=dark] .main-chat-blk .chat-page-wrapper .left-chat-title {
  border-color: #1B1632;
}
html .darkmode .main-chat-blk .main-wrapper .content .sidebar-group .sidebar, html[data-theme=dark] .main-chat-blk .main-wrapper .content .sidebar-group .sidebar {
  background: #0F0C1C;
  border-right: #B9B7C0;
}
html .darkmode .main-chat-blk .chat_form, html[data-theme=dark] .main-chat-blk .chat_form {
  box-shadow: none;
}
html .darkmode .main-chat-blk .review-files p, html[data-theme=dark] .main-chat-blk .review-files p {
  color: #B9B7C0;
}
html .darkmode .main-chat-blk .chat, html[data-theme=dark] .main-chat-blk .chat {
  background: #0F0C1C;
}
html .darkmode .main-chat-blk .chat .chat-header, html[data-theme=dark] .main-chat-blk .chat .chat-header {
  background: #0F0C1C;
  border-color: #1B1632;
}
html .darkmode .main-chat-blk .chat .chat-body .messages .chats .message-content, html[data-theme=dark] .main-chat-blk .chat .chat-body .messages .chats .message-content {
  background: #1B1632;
  color: #B9B7C0;
}
html .darkmode .main-chat-blk .chat .chat-body .messages .chats .message-content.chat-award-link a, html[data-theme=dark] .main-chat-blk .chat .chat-body .messages .chats .message-content.chat-award-link a {
  color: #B9B7C0;
}
html .darkmode .main-chat-blk .chat .chat-footer form .smile-foot .action-circle, html[data-theme=dark] .main-chat-blk .chat .chat-footer form .smile-foot .action-circle {
  background: #1B1632;
  color: #B9B7C0;
}
html .darkmode .twitter-bs-wizard .twitter-bs-wizard-nav .nav-link::after, html[data-theme=dark] .twitter-bs-wizard .twitter-bs-wizard-nav .nav-link::after {
  background-color: #1B1632;
}
html .darkmode .btn.btn-white, html[data-theme=dark] .btn.btn-white {
  color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .btn.btn-white:hover, html[data-theme=dark] .btn.btn-white:hover {
  color: #FFF;
}
html .darkmode .badge.bg-pending, html[data-theme=dark] .badge.bg-pending {
  color: #FFF !important;
}
html .darkmode .note-frame, html[data-theme=dark] .note-frame {
  color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .offcanvas-header, html .darkmode .offcanvas-body, html[data-theme=dark] .offcanvas-header, html[data-theme=dark] .offcanvas-body {
  background: #131022;
}
html .darkmode .dropdown-menu .class-hover p, html[data-theme=dark] .dropdown-menu .class-hover p {
  color: #202C4B !important;
}
html .darkmode .bg-success-transparent h6, html .darkmode .bg-primary-transparent h6, html[data-theme=dark] .bg-success-transparent h6, html[data-theme=dark] .bg-primary-transparent h6 {
  color: #202C4B !important;
}
html .darkmode .link-slider .item p, html[data-theme=dark] .link-slider .item p {
  color: #202C4B !important;
}
html .darkmode .form-check-input, html[data-theme=dark] .form-check-input {
  background-color: #5B576B;
  border-color: #1B1632;
}
html .darkmode .form-select, html[data-theme=dark] .form-select {
  background-color: #131022;
  border-color: #1B1632 !important;
}
html .darkmode .select2-container--default .select2-selection--single, html[data-theme=dark] .select2-container--default .select2-selection--single {
  background: #131022 !important;
  border-color: #1B1632;
}
html .darkmode .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered {
  border-color: #1B1632;
  background: #131022;
  color: #B9B7C0 !important;
}
html .darkmode .select2-container--default .select2-results > .select2-results__options, html[data-theme=dark] .select2-container--default .select2-results > .select2-results__options {
  border-color: #1B1632;
  background: #131022;
}
html .darkmode .select2-dropdown, html[data-theme=dark] .select2-dropdown {
  border-color: #1B1632;
}
html .darkmode .bootstrap-tagsinput, html[data-theme=dark] .bootstrap-tagsinput {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .modal .modal-content, html[data-theme=dark] .modal .modal-content {
  background: #131022;
  border-color: #1B1632 !important;
}
html .darkmode .modal .modal-content .modal-header, html[data-theme=dark] .modal .modal-content .modal-header {
  border-color: #1B1632 !important;
}
html .darkmode .modal .modal-content .modal-footer, html[data-theme=dark] .modal .modal-content .modal-footer {
  border-color: #1B1632 !important;
}
html .darkmode .animate-card .text-default, html[data-theme=dark] .animate-card .text-default {
  color: #5D6369 !important;
}
html .darkmode .notice-widget:before, html[data-theme=dark] .notice-widget:before {
  background-color: #1B1632;
}
html .darkmode .custom-alert1, html[data-theme=dark] .custom-alert1 {
  background: #131022;
}
html .darkmode .card, html[data-theme=dark] .card {
  background-color: #131022;
  border-color: #1B1632;
  box-shadow: 0px 4.4px 12px -1px rgba(44, 44, 44, 0.361);
}
html .darkmode .card .card-header, html[data-theme=dark] .card .card-header {
  border-color: #1B1632;
}
html .darkmode .card .card-footer, html[data-theme=dark] .card .card-footer {
  border-color: #1B1632;
}
html .darkmode .owl-carousel .owl-nav button, html[data-theme=dark] .owl-carousel .owl-nav button {
  background: #131022 !important;
  color: rgba(185, 183, 192, 0.5019607843) !important;
}
html .darkmode .login-or .span-or, html[data-theme=dark] .login-or .span-or {
  background: #131022;
}
html .darkmode .header, html[data-theme=dark] .header {
  background: #0F0C1C;
  border-bottom-color: #1B1632;
}
html .darkmode .header .dark-logo, html[data-theme=dark] .header .dark-logo {
  display: block;
}
html .darkmode .header .logo-normal, html[data-theme=dark] .header .logo-normal {
  display: none;
}
html .darkmode .header .header-left, html[data-theme=dark] .header .header-left {
  background: #0F0C1C;
  border-color: #1B1632;
}
html .darkmode .header .searchinputs input, html[data-theme=dark] .header .searchinputs input {
  background: #131022;
  border-color: #1B1632;
  color: #B9B7C0;
}
html .darkmode .header .searchinputs .search-addon button, html[data-theme=dark] .header .searchinputs .search-addon button {
  background: #1B1632;
  color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .sidebar, html[data-theme=dark] .sidebar {
  background: #0F0C1C !important;
  border-color: #1B1632;
}
html .darkmode .sidebar .sidebar-menu, html[data-theme=dark] .sidebar .sidebar-menu {
  background: #0F0C1C !important;
}
html .darkmode .sidebar .sidebar-menu > ul > li .submenu-hdr::after, html[data-theme=dark] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
  background: #1B1632;
}
html .darkmode .sidebar .sidebar-menu > ul > li .submenu > a.subdrop, html[data-theme=dark] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
  background: #1B1632;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a {
  color: #B9B7C0;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a.active, html .darkmode .sidebar .sidebar-menu > ul > li ul li a:hover, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a.active, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a:hover {
  color: #3D5EE1;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a i, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a i {
  background: #1B1632;
  color: #B9B7C0;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a span, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a span {
  color: #B9B7C0;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a:hover span, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a:hover span {
  color: #3D5EE1;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li.active a, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li.active a {
  background: #1B1632;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li.active a span, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li.active a span {
  color: #3D5EE1;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
  color: #B9B7C0;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active, html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
  color: #3D5EE1;
}
html .darkmode .page-wrapper .content, html[data-theme=dark] .page-wrapper .content {
  background: #0F0C1C;
}
html .darkmode .page-wrapper .list-group-item, html[data-theme=dark] .page-wrapper .list-group-item {
  background: #131022;
  border-color: #1B1632 !important;
}
html .darkmode .page-wrapper .border, html[data-theme=dark] .page-wrapper .border {
  border-color: #1B1632 !important;
}
html .darkmode .page-wrapper .border-bottom, html[data-theme=dark] .page-wrapper .border-bottom {
  border-color: #1B1632 !important;
}
html .darkmode .page-wrapper .border-top, html[data-theme=dark] .page-wrapper .border-top {
  border-color: #1B1632 !important;
}
html .darkmode .page-wrapper .bg-white, html[data-theme=dark] .page-wrapper .bg-white {
  background: #131022 !important;
}
html .darkmode .page-wrapper .dropdown-menu, html[data-theme=dark] .page-wrapper .dropdown-menu {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .page-wrapper .dropdown-menu .dropdown-item, html[data-theme=dark] .page-wrapper .dropdown-menu .dropdown-item {
  color: #B9B7C0 !important;
}
html .darkmode .page-wrapper .text-dark, html[data-theme=dark] .page-wrapper .text-dark {
  color: #B9B7C0 !important;
}
html .darkmode.main-chat-blk .main-wrapper .content .sidebar-group .sidebar, html[data-theme=dark].main-chat-blk .main-wrapper .content .sidebar-group .sidebar {
  background: #131022;
  border-right-color: #1B1632;
}
html .darkmode.main-chat-blk .main-wrapper .content .sidebar-group .sidebar .user-list li a:hover, html[data-theme=dark].main-chat-blk .main-wrapper .content .sidebar-group .sidebar .user-list li a:hover {
  background: #1B1632;
}
html .darkmode.main-chat-blk .main-wrapper .content .action-circle, html[data-theme=dark].main-chat-blk .main-wrapper .content .action-circle {
  background: #131022 !important;
}
html .darkmode.main-chat-blk .main-wrapper .chat-page-wrapper .left-chat-title, html[data-theme=dark].main-chat-blk .main-wrapper .chat-page-wrapper .left-chat-title {
  border-bottom-color: #1B1632;
}
html .darkmode.main-chat-blk .right-sidebar .right-sidebar-wrap, html[data-theme=dark].main-chat-blk .right-sidebar .right-sidebar-wrap {
  background: #131022;
  border-left-color: #1B1632;
}
html .darkmode.main-chat-blk .chat, html[data-theme=dark].main-chat-blk .chat {
  background: #131022;
}
html .darkmode.main-chat-blk .chat .chat-header, html[data-theme=dark].main-chat-blk .chat .chat-header {
  background: #131022;
  border-bottom-color: #1B1632;
}
html .darkmode .part-name.sub-part-name, html .darkmode .more-icon a, html .darkmode .meet-call-menu-blk .video-call-action ul li a, html[data-theme=dark] .part-name.sub-part-name, html[data-theme=dark] .more-icon a, html[data-theme=dark] .meet-call-menu-blk .video-call-action ul li a {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .card .card-title, html[data-theme=dark] .card .card-title {
  color: #EFEFF2;
}
html .darkmode .popover .popover-body, html[data-theme=dark] .popover .popover-body {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .popover .popover-header, html[data-theme=dark] .popover .popover-header {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .popover, html[data-theme=dark] .popover {
  border-color: #1B1632;
}
html .darkmode .swal2-popup, html .darkmode .toast-header, html .darkmode .toast-body, html[data-theme=dark] .swal2-popup, html[data-theme=dark] .toast-header, html[data-theme=dark] .toast-body {
  background: #131022;
}
html .darkmode .toast-header .btn-close, html[data-theme=dark] .toast-header .btn-close {
  color: #EFEFF2;
}
html .darkmode .scroll-demo, html .darkmode .icons-list li, html[data-theme=dark] .scroll-demo, html[data-theme=dark] .icons-list li {
  border-color: #1B1632;
}
html .darkmode .select2-container--default .select2-selection--multiple, html[data-theme=dark] .select2-container--default .select2-selection--multiple {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .table > :not(caption) > * > *, html[data-theme=dark] .table > :not(caption) > * > * {
  background: #131022;
}
html .darkmode .breadcrumb .breadcrumb-item.active, html[data-theme=dark] .breadcrumb .breadcrumb-item.active {
  color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .filter-wrapper, html[data-theme=dark] .filter-wrapper {
  border-color: #1B1632;
}
html .darkmode .list-tab ul, html[data-theme=dark] .list-tab ul {
  border-color: #1B1632;
}
html .darkmode .meet-call-menu-blk .video-call-action ul li a, html[data-theme=dark] .meet-call-menu-blk .video-call-action ul li a {
  color: #EFEFF2;
}
html .darkmode .main-chat-blk .user-list li a:hover, html[data-theme=dark] .main-chat-blk .user-list li a:hover {
  background: #131022;
}
html .darkmode .chat-msg-blk .chats.chats-right .message-content::before, html[data-theme=dark] .chat-msg-blk .chats.chats-right .message-content::before {
  border-left-color: #131022;
}
html .darkmode .chat-msg-blk .chats .message-content, html[data-theme=dark] .chat-msg-blk .chats .message-content {
  background: #131022 !important;
}
html .darkmode .chat-msg-blk .chats .message-content::before, html[data-theme=dark] .chat-msg-blk .chats .message-content::before {
  border-right-color: #131022;
}
html .darkmode .right-user-side .slime-grp .chat-footer, html[data-theme=dark] .right-user-side .slime-grp .chat-footer {
  background: #131022;
}
html .darkmode .right-user-side .slime-grp .chat-footer form .chat_form, html[data-theme=dark] .right-user-side .slime-grp .chat-footer form .chat_form {
  background: #131022;
  border-color: #1B1632;
  color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .chat_form::placeholder, html[data-theme=dark] .chat_form::placeholder {
  color: #5B576B !important;
}
html .darkmode .dropdown-item:not(.active):hover, html .darkmode .dropdown-item:not(.active):focus, html .darkmode .dropdown-item:not(.active):active,
html .darkmode .dropdown-item.active, html[data-theme=dark] .dropdown-item:not(.active):hover, html[data-theme=dark] .dropdown-item:not(.active):focus, html[data-theme=dark] .dropdown-item:not(.active):active,
html[data-theme=dark] .dropdown-item.active {
  background: rgba(91, 87, 107, 0.6980392157);
}
html .darkmode .card-dropdown .dropdown-menu li a:hover, html[data-theme=dark] .card-dropdown .dropdown-menu li a:hover {
  background: rgba(91, 87, 107, 0.6980392157);
  color: #EFEFF2;
}
html .darkmode .btn-outline-light, html[data-theme=dark] .btn-outline-light {
  color: #B9B7C0 !important;
  background: #131022 !important;
}
html .darkmode .bg-white, html[data-theme=dark] .bg-white {
  background: #131022 !important;
}
html .darkmode .user-list-item, html[data-theme=dark] .user-list-item {
  background: #1B1632 !important;
}
html .darkmode .record-time span:before, html[data-theme=dark] .record-time span:before {
  background-color: #131022;
}
html .darkmode .nav-control button, html .darkmode .plyr--video .plyr__control, html[data-theme=dark] .nav-control button, html[data-theme=dark] .plyr--video .plyr__control {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .dataTables_paginate .pagination li a, html[data-theme=dark] .dataTables_paginate .pagination li a {
  color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .bootstrap-datetimepicker-widget table th, html[data-theme=dark] .bootstrap-datetimepicker-widget table th {
  color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .list-tab ul li a, html[data-theme=dark] .list-tab ul li a {
  color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .accordion .accordion-button.collapsed, html[data-theme=dark] .accordion .accordion-button.collapsed {
  background: #131022 !important;
}
html .darkmode .accordion .accordion-button.collapsed:after, html[data-theme=dark] .accordion .accordion-button.collapsed:after {
  background: #131022;
}
html .darkmode .accordion .accordion-button, html[data-theme=dark] .accordion .accordion-button {
  background: #131022 !important;
}
html .darkmode span.icon-addon, html .darkmode .bookingrange, html[data-theme=dark] span.icon-addon, html[data-theme=dark] .bookingrange {
  color: #B9B7C0;
}
html .darkmode .daterangepicker, html[data-theme=dark] .daterangepicker {
  background: #131022;
  border-color: #1B1632;
}
html .darkmode .daterangepicker:after, html[data-theme=dark] .daterangepicker:after {
  border-bottom-color: #5B576B;
}
html .darkmode .accordion-button:after, html[data-theme=dark] .accordion-button:after {
  background: #131022;
}
html .darkmode .language-setup-table, html[data-theme=dark] .language-setup-table {
  border-color: #1B1632;
}
html .darkmode #calendar .fc-day, html .darkmode #events .fc-day, html[data-theme=dark] #calendar .fc-day, html[data-theme=dark] #events .fc-day {
  background: #1B1632;
  border-color: #322D46;
}
html .darkmode #calendar .fc-daygrid-day-number, html .darkmode #events .fc-daygrid-day-number, html[data-theme=dark] #calendar .fc-daygrid-day-number, html[data-theme=dark] #events .fc-daygrid-day-number {
  color: #B9B7C0;
}
html .darkmode #calendar .fc-scrollgrid, html .darkmode #events .fc-scrollgrid, html[data-theme=dark] #calendar .fc-scrollgrid, html[data-theme=dark] #events .fc-scrollgrid {
  border-color: #322D46;
}
html .darkmode #calendar .fc-col-header-cell-cushion, html .darkmode #events .fc-col-header-cell-cushion, html[data-theme=dark] #calendar .fc-col-header-cell-cushion, html[data-theme=dark] #events .fc-col-header-cell-cushion {
  color: #EFEFF2;
}
html .darkmode #calendar .fc-daygrid-day.fc-day-today, html .darkmode #events .fc-daygrid-day.fc-day-today, html[data-theme=dark] #calendar .fc-daygrid-day.fc-day-today, html[data-theme=dark] #events .fc-daygrid-day.fc-day-today {
  background-color: #131022;
}
html .darkmode #calendar td, html .darkmode #calendar th, html .darkmode #events td, html .darkmode #events th, html[data-theme=dark] #calendar td, html[data-theme=dark] #calendar th, html[data-theme=dark] #events td, html[data-theme=dark] #events th {
  border-color: #322D46;
}
html .darkmode #global-loader, html[data-theme=dark] #global-loader {
  background: #0F0C1C;
}
html .darkmode .invoice-logo-dark, html[data-theme=dark] .invoice-logo-dark {
  display: none;
}
html .darkmode .invoice-logo-white, html[data-theme=dark] .invoice-logo-white {
  display: block;
}

/******* Vendors ******/
/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.select2-container {
  min-width: 100% !important;
  z-index: 99;
}
.select2-container .select2-selection--single {
  height: 38px;
}

.select2-container--default .select2-selection--single {
  border: 1px solid var(--Stroke, rgba(145, 158, 171, 0.3));
  border-radius: 5px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #202C4B !important;
  line-height: 38px;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 14px;
  font-weight: 400;
  padding-right: 30px;
}
.select2-container--default .select2-selection--single .select {
  width: 219px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  right: 7px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: #515B73;
  border-style: solid;
  border-width: 0 1px 1px 0;
  padding: 3px;
  height: 0;
  margin-left: -6px;
  margin-top: -3px;
  width: 0;
  transform: rotate(45deg) translateY(-50%);
  -webkit-transform: rotate(45deg) translateY(-50%);
  -ms-transform: rotate(45deg) translateY(-50%);
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: #000;
  border-width: 1px 0 0 1px;
  margin-top: 3px;
  padding: 3px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #3D5EE1;
  color: #FFF;
}

.select2-container--focus .select2-selection--single {
  background: #FFF !important;
  border-color: #E9EDF4;
}

span.select2-container.select2-container--default.select2-container--open {
  z-index: 9999;
  box-shadow: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.36);
}

.select2-container--classic .select2-selection--single,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--multiple,
.select2-container--classic .select2-selection--single .select2-selection__arrow,
.select2-container--classic .select2-selection--single .select2-selection__rendered {
  border-color: #E9EDF4;
  color: #6A7287;
}

.select2-dropdown {
  border-color: #E9EDF4;
}

.select2-container--default .select2-selection--multiple {
  line-height: 27px;
  height: auto;
  min-height: 40px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  background-color: #0F65CD;
  border-color: #0F65CD;
  color: #FFF;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-color: #3D5EE1;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #3D5EE1;
}

.select2-container--open .ti-filter {
  z-index: 9999 !important;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
table.dataTable {
  margin: 0 !important;
}

table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
  right: 10px !important;
  content: "\f0d7" !important;
  font-family: "Font Awesome 5 Free";
  bottom: 8px !important;
  color: #CDD0D7 !important;
  font-size: 10px !important;
  opacity: 1 !important;
  position: absolute;
  font-weight: 600;
  line-height: 1px !important;
}

table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
  right: 10px !important;
  content: "\f0d8" !important;
  font-family: "Font Awesome 5 Free";
  top: 18px !important;
  color: #CDD0D7 !important;
  font-size: 10px !important;
  opacity: 1 !important;
  position: absolute;
  font-weight: 600;
  line-height: 1px !important;
}

.dataTables_paginate .paging_numbers {
  float: right;
}

.dataTables_info {
  font-size: 15px;
  color: #515B73;
  font-weight: 500;
}
@media (max-width: 767.98px) {
  .dataTables_info {
    font-size: 12px;
  }
}

.custom-select {
  min-width: 80px;
  background: url(../img/icons/dropdown.svg) no-repeat 95% 50%;
}

.dataTables_paginate .pagination {
  justify-content: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
}
.dataTables_paginate .pagination li {
  margin: 0 2px;
}
.dataTables_paginate .pagination li a {
  background: transparent;
  border-color: transparent;
  border-radius: 5px !important;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #515B73;
  font-size: 14px;
}
.dataTables_paginate .pagination li a:hover {
  background: #3D5EE1;
  color: #FFF;
}
.dataTables_paginate .pagination li.active a.page-link {
  background: #3D5EE1;
  border-color: #3D5EE1;
  border-radius: 5px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dataTables_paginate .pagination li.previous.disabled, .dataTables_paginate .pagination li.prev {
  width: auto;
  margin: 0 13px 0 0;
}
.dataTables_paginate .pagination li.previous.disabled a, .dataTables_paginate .pagination li.prev a {
  background-color: transparent;
  border: 0;
  width: auto;
  padding: 0;
}
.dataTables_paginate .pagination li.previous.disabled a i, .dataTables_paginate .pagination li.prev a i {
  margin-right: 8px;
}
.dataTables_paginate .pagination li.previous.disabled a:hover, .dataTables_paginate .pagination li.prev a:hover {
  color: #2CA87F;
}
.dataTables_paginate .pagination li.next.disabled, .dataTables_paginate .pagination li.next {
  width: auto;
  margin: 0 0 0 13px;
}
.dataTables_paginate .pagination li.next.disabled a, .dataTables_paginate .pagination li.next a {
  background-color: transparent;
  border: 0;
  width: auto;
  padding: 0;
}
.dataTables_paginate .pagination li.next.disabled a i, .dataTables_paginate .pagination li.next a i {
  margin-left: 8px;
}
.dataTables_paginate .pagination li.next.disabled a:hover, .dataTables_paginate .pagination li.next a:hover {
  color: #2CA87F;
}
@media (max-width: 767.98px) {
  .dataTables_paginate .pagination {
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
  }
}

.dataTables_length {
  margin-bottom: 15px;
}

.dataTables_paginate {
  margin-top: 15px !important;
}

.dataTables_length label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #515B73;
  font-size: 14px;
}
.dataTables_length label .form-select {
  width: 61px;
  border: 1px solid #E9EDF4;
  border-radius: 6px;
  color: #515B73;
  margin: 0 8px;
  background-position: right 5px center;
  padding-right: 15px;
}

@media (max-width: 767.98px) {
  .datatable-length {
    text-align: center;
  }
}

div.dataTables_wrapper div.dataTables_info {
  padding-top: 15px;
}

table.dataTable thead > tr > th.no-sort.sorting_asc:before {
  display: none;
}

table.dataTable thead > tr > th.no-sort.sorting_asc::after {
  display: none;
}

table.dataTable thead > tr > th.no-sort.sorting:before {
  display: none;
}

table.dataTable thead > tr > th.no-sort.sorting::after {
  display: none;
}

.custom-table .table-responsive {
  border: 1px solid #E9EDF4;
  border-radius: 6px;
}

table.table.dataTable > tbody > tr {
  border-color: #E9EDF4;
}
table.table.dataTable > tbody > tr td {
  color: #515B73;
  border-bottom: 1px solid #E9EDF4;
  padding: 12px 20px;
}
table.table.dataTable > thead > tr {
  border-color: #E9EDF4;
}
table.table.dataTable > thead > tr th {
  color: #202C4B;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
}

.dataTables_filter {
  margin-bottom: 15px;
}

#select-all ~ .checkmarks {
  top: -7px;
}

#select-all2 ~ .checkmarks {
  top: -7px;
}

#select-all3 ~ .checkmarks {
  top: -7px;
}

.custom-datatable-filter [class*=col-md] {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.no-datatable_length .dataTables_length {
  display: none;
}
.no-datatable_length .dataTables_filter {
  display: none;
}
.no-datatable_length .dataTables_info {
  display: none;
}
.no-datatable_length .dataTables_paginate {
  display: none;
}

.datatable-info .dataTables_info {
  display: none !important;
}
.datatable-info .dataTables_info:first-child {
  display: block !important;
}

.datatable-length .dataTables_length {
  display: none !important;
}
.datatable-length .dataTables_length:first-child {
  display: block !important;
}

.datatable-paginate .dataTables_paginate {
  display: none !important;
}
.datatable-paginate .dataTables_paginate:first-child {
  display: block !important;
}

/*---------------------------------------------------------------------------------

    Template Name: PreSkool - School Management Admin Dashboard Template
    Version      : 1.8.3
    Template URI: https://preclinic.dreamstechnologies.com/
    Author: Dreams Technologies
    Author URI: https://themeforest.net/user/dreamstechnologies

-----------------------------------------------------------------------------------

/*============================
[Table of CSS]

variables
switcher
accordion
alerts
badge
breadcrumb
buttons
cards
dropdown
forms
input_group
list_group
modals
navbar
navs_tabs
pagination
popovers
progress
tables
toast
tooltips
authentication

1. General
    variables
    switcher
    base
    Typography
2. Components
3. Layout
4. Plugins
5. Pages






1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Login
9. Dashboard
10. Activity
11. Select2
12. Nav tabs
13. Holidays
14. Edit Profile
15. Chat
16. Focus Label
17. Leave
18. Employee
19. Events
20. Profile
21. Notifications
22. Roles & Permissions
23. Chat Right Sidebar
24. Invoice
25. Doctors
26. Add Doctor
27. Payslip
28. Attendance
29. Inbox
30. Mail View
31. Blog
32. Blog View
33. UI Kit
34. Error
35. Lock Screen
36. Voice call
37. Video Call
38. Incoming call
39. Notification settings
40. Chat Sidebar
41. Gallery
42. Settings
43. Responsive
72. Box layout
73. RTL
74. Responsive

========================================*/
/****** Utils ******/
.daterangepicker .ranges li.active {
  background-color: #3D5EE1;
}
.daterangepicker td.active {
  background-color: #3D5EE1;
}
.daterangepicker td.active:hover {
  background-color: #3D5EE1;
}

.daterange-wraper .date-range {
  padding-left: 30px;
  font-size: 14px;
  color: #515B73;
  border: 0;
  min-height: auto;
  height: 36px;
  border: 0;
  box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.0509803922);
}
.daterange-wraper .date-range:focus {
  border-left: 0;
}
.daterange-wraper .cal-icon-date {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/*# sourceMappingURL=style.css.map */