:root {
    --color_primary:#2d2d2d;
    --color_secondary:#4e4e4e;
    --color_dark:#232323;
    --color_light:#363636;
    --color_black:#000000;
    --color_white:#ffffff;
    --theme_primary:#b57979;
    --theme_primary_dark:#703f3f;
    --remove_background_color:transparent;
    --remove_background_image:none;
    --color_error:#dc3545;
    --opacity:1;
  }
  body.contrast-mode .df-settings-body{
    background-color: var(--color_dark) !important;
    border-left-color: var(--color_light) !important;
  }
  body.contrast-mode .df-settings.show .df-settings-link,
  body.contrast-mode .df-settings.show .df-settings-link:hover,
  body.contrast-mode .df-settings.show .df-settings-link:focus{
    background-color: var(--color_dark) !important;
        border-color: var(--color_light) !important;
        box-shadow: none;
  }
  body.contrast-mode .df-settings-link,
  body.contrast-mode .df-settings-link:hover,
  body.contrast-mode .df-settings-link:focus{
background-color: var(--theme_primary) !important;
  }
  body.contrast-mode ::selection {
    color: #ffffff !important;
    background-color: #b57979 !important;
}
body.contrast-mode .loader_main .loader svg line{
    stroke:var(--theme_primary) !important;
}
body.contrast-mode .loader_main{
    background-color:rgba(0,0,0,0.7);
}
body.contrast-mode .loader_main.pos-absolute-f {
    background-color: rgba(0, 0, 0, 0.3);
}
  body.contrast-mode::-webkit-scrollbar-thumb,
  .contrast-mode .modal::-webkit-scrollbar-thumb,
  .contrast-mode select::-webkit-scrollbar-thumb,
  .contrast-mode .step-cont::-webkit-scrollbar-thumb,
  .contrast-mode .rbc-time-content::-webkit-scrollbar-thumb{
      background: var(--theme_primary) !important; 
  }
  .contrast-mode .step-item.active .step-number,
  .contrast-mode .step-item.active .step-icon{
    background-color: var(--theme_primary) !important; 
    border-color: var(--theme_primary) !important;
  }
  .contrast-mode .step-number{
    border-color: var(--theme_primary) !important;
  }
  .contrast-mode table.dataTable thead .sorting_asc,
  .contrast-mode table.dataTable thead .sorting_desc{
    background-color: var(--color_black);
  }
.contrast-mode *{
    color: var(--color_white) !important;
}
.contrast-mode{
    background-color: var(--color_primary) !important;
    background-image: var(--remove_background_image) !important; 
}
.contrast-mode .df-logo img{
    filter: brightness(0) invert(1);
}
.contrast-mode .bg-box{
    background: url('../images/darkmode-line-bg-grey-new.png') no-repeat center center !important;
    background-size: cover !important;
}
.contrast-mode .btn-purple{
    background-color: var(--theme_primary);
    border-color: var(--theme_primary);
    color: var(--color_white);
}
.contrast-mode .btn-purple:hover{
    border-color: var(--theme_primary);
    background-color: var(--remove_background_color);
    color: var(--color_white);
}
.contrast-mode .btn-outline-purple:focus{
    border-color: var(--theme_primary);
    background-color: var(--color_primary);
}
.contrast-mode .btn-outline-purple{
    border-color: var(--theme_primary);
    color: var(--color_white);
}
.contrast-mode .btn-success,
.contrast-mode .btn-primary,
.contrast-mode .btn.bg-purple,
.contrast-mode .btn.bg-purple:hover{
    background-color: var(--theme_primary);
    border-color: var(--theme_primary);
    color: var(--color_white);
}
.contrast-mode .btn-success:hover,
.contrast-mode .btn-primary:hover{
    background-color: var(--remove_background_color);
}

.contrast-mode .btn-outline-purple:hover,
.contrast-mode .btn-outline-yellow:hover{
    border-color: var(--theme_primary) !important;
    background-color: var(--theme_primary) !important;
    color: var(--color_white);
}
.contrast-mode .stepcontbox .bg-gray-100{
    background-color: var(--color_dark);
}
.contrast-mode .page-item.active .page-link{
    background-color: var(--theme_primary) !important;
    border-color: var(--theme_primary) !important;
}
.contrast-mode .page-link{
    border-color: var(--theme_primary) !important;
}
.contrast-mode .page-item.disabled .page-link{
    background-color:var(--remove_background_color);
}
.contrast-mode .page-item.first-page span:after, 
.contrast-mode .page-item.first-page a:after,
.contrast-mode .page-item.prev-btn span:after,
.contrast-mode .page-item.prev-btn a:after,
.contrast-mode .page-item.next-btn span:after,
.contrast-mode .page-item.next-btn a:after,
.contrast-mode .page-item.last-page span:after,
.contrast-mode .page-item.last-page a:after{
    filter: brightness(0) invert(1);
    opacity: var(--opacity);
}
.contrast-mode .page-link:hover{
    background-color:var(--theme_primary) !important;
    color: var(--color_white) !important;
}
.contrast-mode .alert-info{
    background-color: var(--remove_background_color);
    color:var(--color_white) !important;
    border-color:var(--color_white) !important;
}
.contrast-mode .page-link{
    background: var(--color_primary);
}
.contrast-mode .page-link:hover{
    color: var(--color_primary);
}
.contrast-mode table{
  background: var(--color_primary);
}
.contrast-mode .form-control{
    border-color: var(--theme_primary);
    color: var(--color_black) !important;
}
.contrast-mode .input-group-text{
    border-color: var(--theme_primary);
    background-color: var(--theme_primary);
}
.contrast-mode .input-group-text img{
    filter: brightness(0) invert(1);
}
.contrast-mode .hg-theme-default .hg-button,
.contrast-mode .hg-theme-default .hg-button span{
    color: var(--color_white) !important;
    background-color: var(--theme_primary);
    border-color: var(--theme_primary);
}
.contrast-mode .hg-theme-default .hg-button:hover,
.contrast-mode .hg-theme-default .hg-button:hover span{
    color: var(--color_white);
    background-color: var(--color_secondary);
    border-color: var(--color_secondary);
}
.contrast-mode .hg-theme-default{
    background-color: var(--color_black);
}
.contrast-mode table th{
    background: var(--color_dark); 
    border-color: var(--color_dark);
}
.contrast-mode .table-bordered th, 
.contrast-mode .table-bordered td{
    border-color: var(--color_dark);
}

.contrast-mode select *{
    color: var(--color_black) !important;
}
/****/
.contrast-mode .btn-light{
    border-color: var(--theme_primary);
    background-color:var(--theme_primary);
    color: var(--color_white);
}
.contrast-mode .btn-light:hover{
    background-color: var(--remove_background_color);
}

.contrast-mode footer {
    background: var(--color_dark);
}
.contrast-mode .navbar-menu-wrapper .df-logo{
    filter: grayscale(1) brightness(3);
}
.contrast-mode .navbar-header{
    background-color: var(--color_dark);
    border-color: var(--color_dark);
}
.contrast-mode .navbar-header .nav_sec {
    background-color: var(--color_primary);
}
.contrast-mode .navbar-menu .nav-link svg{
    fill: rgb(255 255 255 / 20%);
}
.contrast-mode .navbar-menu .nav-link:hover, 
.contrast-mode .navbar-menu .nav-item .nav-link.active{
    color: var(--theme_primary) !important;
}
.contrast-mode .navbar-menu .nav-link:hover svg, 
.contrast-mode .navbar-menu .nav-item .nav-link.active svg{
    fill: rgb(181 121 121 / 20%);
}
.contrast-mode #uncontrolled-tab-example-tabpane-info svg{
    fill: rgb(255 255 255 / 20%);
}

.contrast-mode .navbar-menu .nav-link:hover svg path,
.contrast-mode .navbar-menu .nav-link:hover svg polyline,
.contrast-mode .navbar-menu .nav-link:hover svg rect,
.contrast-mode .navbar-menu .nav-link:hover svg line,
.contrast-mode .navbar-menu .nav-link:hover svg polygon, 
.contrast-mode .navbar-menu .nav-link:hover svg circle, 
.contrast-mode .navbar-menu .nav-item .nav-link.active svg path,
.contrast-mode .navbar-menu .nav-item .nav-link.active svg polyline,
.contrast-mode .navbar-menu .nav-item .nav-link.active svg rect,
.contrast-mode .navbar-menu .nav-item .nav-link.active svg line,
.contrast-mode .navbar-menu .nav-item .nav-link.active svg polygon, 
.contrast-mode .navbar-menu .nav-item .nav-link.active svg circle{
    color: var(--theme_primary) !important;
}
.contrast-mode .instruction-title{
    background-color: var(--color_dark);
}
.contrast-mode .card span:nth-last-child(2).instruction-title strong {
    color: var(--theme_primary) !important;
}
.contrast-mode .card{
    background-color: var(--remove_background_color);
    border-color: var(--color_dark);
}
.contrast-mode .card:not(.media){
    border-width: 2px;
}
.contrast-mode .card-header{
    background-color: var(--color_dark);
}
.contrast-mode .bg-green{
    background-color: var(--theme_primary);
}
.contrast-mode .bg-white {
    background-color: var(--color_dark) !important;
}
.contrast-mode .bd{
    border-color: var(--theme_primary);
}
.contrast-mode .media .card.bd,
.contrast-mode .media.bd{
    border-color: var(--color_secondary);
}
.contrast-mode .card-body.bg-gray-100{
    background-color: var(--color_primary);
}
.contrast-mode .list-group.bg-gray-100{
    background-color: var(--color_dark);
}
.contrast-mode .btn-outline-purple, .contrast-mode .btn-outline-green, .contrast-mode .btn-outline-yellow{
    background: var(--remove_background_color);
}
.contrast-mode .table-striped tbody tr:nth-of-type(2n+1) {
    background-color: var(--color_light);
}
.contrast-mode .list-group-item.bg-white{
    background-color: var(--color_primary) !important;
}
.contrast-mode .rbc-row .rbc-row-segment .rbc-event{
    background-color: var(--theme_primary) !important;
}
.contrast-mode .rbc-today{
    background-color: var(--color_black);
}
.contrast-mode .card.media{
    background-color: var(--color_dark);
}
.contrast-mode .tab-content{
    border-color: var(--theme_primary);
    background-color: var(--color_dark);
}
.contrast-mode .nav-tabs .nav-link{
    border-color: var(--theme_primary);
}
.contrast-mode .nav-tabs{
    border-color: var(--theme_primary);
}
.contrast-mode .nav-tabs .nav-link.active{
    background-color: var(--color_dark);
}
.contrast-mode .nav-tabs .nav-link:hover{
    background-color: var(--theme_primary);
    color: var(--color_white);
}
.contrast-mode .tab-content .list-group-item{
    background-color: var(--remove_background_color);
}
.contrast-mode .tab-content .list-group-item span.bg-gray-100{
    background-color: var(--color_primary);
}
.contrast-mode .tab-content .table-bordered th{
    background-color: var(--color_black);
}
.contrast-mode .nav-link:hover, 
.contrast-mode .nav-link:focus{
    color: var(--theme_primary);
}
.contrast-mode table.dataTable thead .sorting::before,
.contrast-mode table.dataTable thead .sorting::after{
    color: var(--theme_primary);
}
.contrast-mode .schoolloginbox.bd,
.contrast-mode .student-login-container > div.bd{
    border-color: var(--theme_primary);
}
.contrast-mode .tx-danger{
    color:var(--color_error) !important;
}
.contrast-mode .scroll-top{
    border-color: var(--theme_primary);
    background-color: var(--color_dark);
    color:var(--color_white);
}
.contrast-mode .scroll-top span{
    color:var(--color_white) !important;
}
.contrast-mode .scroll-top:hover{
    background-color: var(--theme_primary);
}
.contrast-mode .content a { 
    color: var(--theme_primary);
}
.contrast-mode .content a:hover{
    color:var(--theme_secondary);
}
.contrast-mode .rbc-toolbar button{
    border-color: var(--theme_primary);
}
.contrast-mode .rbc-toolbar button:hover{
    background-color: var(--theme_primary);
    border-color: var(--theme_primary);
}
.contrast-mode .graph svg rect{
    fill:var(--color_dark);
}
.contrast-mode .graph svg g rect:nth-child(2){
    fill:var(--theme_primary);
}
.contrast-mode .graph svg g path{
    stroke: var(--theme_primary);
}
.contrast-mode .graph svg g circle{
    fill: var(--theme_primary_dark);
}
.contrast-mode .graph svg text{
    fill:var(--color_white);
}
.contrast-mode .content-auth-100 .bg-gray-100,
.contrast-mode .content-auth-100 .bg-gray-200,
.contrast-mode .content-auth-100 .bg-gray-300,
.contrast-mode .content-auth-100 .bg-gray-400,
.contrast-mode .content-auth-100 .bg-gray-500{
    background-color: var(--color_dark);
}
.contrast-mode .progress-bar.bg-gray-200{
    background-color: var(--color_primary) !important;
}
.contrast-mode .bg-success{
    background-color: var(--theme_primary) !important;
}
.contrast-mode .rbc-off-range-bg{
    background-color: var(--color_secondary) !important;
}
.contrast-mode .nav-link .card{
	border-color: var(--theme_primary) !important;
	background-color:var(--theme_primary) !important;
	color: #fff;
	-webkit-box-shadow: 0px 4px 11px 0px rgb(181,121,121, 0.60);
-moz-box-shadow:    0px 4px 11px 0px rgb(181,121,121, 0.60);
box-shadow:         0px 4px 11px 0px rgb(181,121,121, 0.60);
}

.contrast-mode .nav-link:hover .card{
	border-color: #b56c6c !important;
	background-color: var(--theme_primary) !important;
	color: var(--color_white);
	-webkit-box-shadow: 0px 4px 11px 0px rgb(181,121,121, 0.80);
-moz-box-shadow:    0px 4px 11px 0px rgb(181,121,121, 0.80);
box-shadow:         0px 4px 11px 0px rgb(181,121,121, 0.80);
}

.contrast-mode .modal-header{
    background-color: var(--color_dark) !important;
}
.contrast-mode .modal-body,
.contrast-mode .modal-content{
    background-color: var(--color_primary) !important;
}
.contrast-mode .modal-content .btn-close{
    border-color: var(--theme_primary) !important;
    background-color: var(--color_dark) !important;
}
.contrast-mode .modal-content .btn-close:hover{
    background-color: var(--theme_primary) !important;
}
.contrast-mode .modal-backdrop {
    background-color: rgba(255,255,255,0.7) !important;
}
.contrast-mode .react-loading-skeleton{
    background-color:var(--color_primary) !important;
}
.contrast-mode .react-loading-skeleton::after{
    background-image: linear-gradient( 90deg, var(--color_primary), var(--color_light), var(--color_primary) );
}
.contrast-mode .toast-header *{
    color: var(--color_dark) !important;
}
.contrast-mode .step-cont{
    background-color: var(--color_primary);
}

.contrast-mode .rbc-toolbar button:active:hover, 
.contrast-mode .rbc-toolbar button:active:focus, 
.contrast-mode .rbc-toolbar button.rbc-active:hover, 
.contrast-mode .rbc-toolbar button.rbc-active:focus{
    background-color: var(--theme_primary) !important;
    border-color: var(--theme_primary) !important;
    color: var(--color_white) !important;
}
.contrast-mode .rbc-toolbar button:active, 
.contrast-mode .rbc-toolbar button.rbc-active,
.contrast-mode .rbc-toolbar button:focus{
    background-color: var(--theme_primary) !important;
    border-color: var(--theme_primary) !important;
    color: var(--color_white) !important;
}
.contrast-mode .calendar-content-body .fc-toolbar button{
    background-color: transparent !important;
    border-color: var(--theme_primary) !important;
}
.contrast-mode .calendar-content-body .fc-toolbar button:hover,
.contrast-mode .fc .fc-button-primary:not(:disabled):active,
.contrast-mode .fc .fc-button-primary:not(:disabled).fc-button-active,
.contrast-mode .fc .fc-day-today .fc-daygrid-day-number{
    background-color:var(--theme_primary) !important;
}
.contrast-mode .fc-day-other{
    background-color:var(--color_light) !important;
}
.contrast-mode .fc .fc-daygrid-day.fc-day-today{
    background-color:var(--color_dark) !important;
}
.contrast-mode .fc .fc-daygrid-event,
.contrast-mode .fc-timegrid-event-harness>.fc-timegrid-event{
    background-color:rgb(171 128 128) !important;
    border-left-color: #814848 !important;
}
.contrast-mode .fc-theme-standard td,
.contrast-mode .fc-theme-standard th,
.contrast-mode .fc-theme-standard .fc-scrollgrid,
.contrast-mode .fc-theme-standard .fc-list{
    border-color: #232323 !important;
}
.contrast-mode .fc .fc-timegrid-slot{
    background-color: var(--color_primary) !important;
}
.contrast-mode .fc .fc-list-sticky .fc-list-day>*{
    background-color: transparent !important;
}
.contrast-mode .fc-list-day-text,
.contrast-mode .fc-list-day-side-text{
    color: var(--color_white) !important;
}
.contrast-mode .fc-list-table>tbody .fc-list-event{
    border-color:var(--theme_primary) !important;
    border-left-color: var(--theme_primary) !important;
    background-color: var(--color_dark) !important;
}
.contrast-mode .calendar-content-body .fc-toolbar.fc-header-toolbar{
    border-bottom-color:var(--color_dark) !important;
}
.contrast-mode .fc-timegrid-event-harness-inset .fc-timegrid-event,
.contrast-mode .fc-timegrid-event.fc-event-mirror,
.contrast-mode .fc-timegrid-more-link{
    box-shadow: none !important;
}
.contrast-mode .fc .fc-daygrid-body-natural .fc-daygrid-day-events{
    border-top-color: var(--color_light) !important;
}
.contrast-mode .search-form .search-icon,
.contrast-mode .search-form .search-icon * {
    background-color: #fff !important;
    color:black !important;
}

@media (max-width:991px){
    .contrast-mode .navbar-menu-wrapper{
        background-color: var(--color_dark);
    }
    .contrast-mode .menuClose{
        filter: brightness(0) invert(1);
        opacity: 1;
    }
}