.ss-color-0 {
  background: #FFF;
  color: #484848;
}

.ss-color-0-hover:hover {
  background: #FFF;
  color: #484848;
}

.ss-color-0.ss-dim {
  background: rgba(124, 165, 239, 0.15);
}

.ss-color-0.ss-read {
  background-color: #ffffff;
  color: #d7d7d7;
}

.ss-color-0.ss-unread {
  background-color: #ffe6f0;
  color: #000000;
}

.ss-color-0.ss-noti.ss-read {
  background-color: #ffffff;
  color: #d7d7d7;
}

.ss-color-0.ss-noti.ss-unread {
  background-color: #ffe6f0;
  color: #000000;
}

.ss-color-0.ss-read:hover {
  color: #1d68a7;
}

.ss-color-0.ss-unread:hover {
  color: #1d68a7;
}

.ss-color-0.ss-noti.ss-read:hover {
  color: #1d68a7;
}

.ss-color-0.ss-noti.ss-unread:hover {
  color: #1d68a7;
}

.ss-color-gray {
  color: #000;
  background-color: #888;
}

.ss-color-gray.ss-light {
  color: #484848;
  background-color: #DDD;
}

.ss-color-accent {
  color: black;
  background-color: #ffc72e;
}

.ss-color-accent-hover:hover {
  color: black;
  background-color: #ffc72e;
}

.ss-color-success {
  color: white;
  background-color: rgb(33, 199, 0);
}

.ss-color-text-success {
  color: rgb(33, 199, 0);
}

.ss-svgfill-color-success [data-name=ss-overriden-fill-color] {
  fill: rgb(33, 199, 0) !important;
}

.ss-color-danger {
  color: white;
  background-color: #AA0000;
}

.ss-color-text-danger {
  color: #AA0000;
}

.ss-svgfill-color-danger [data-name=ss-overriden-fill-color] {
  fill: #AA0000 !important;
}

.ss-color-1 {
  color: white;
  background: #f783ac;
}

.ss-color-1-hover:hover {
  color: white;
  background: #f783ac;
}

.ss-text-color-1 {
  color: #f783ac;
}

.ss-text-color-1-hover:hover {
  color: #f783ac;
}

.ss-svgfill-color-1 [data-name=ss-overriden-fill-color] {
  fill: #f783ac !important;
}

.ss-color-1.ss-light {
  color: #484848;
  background: #ffe7ef;
}

.ss-color-1.btn.ss-component {
  border-color: transparent;
}

.ss-color-1.btn.ss-component:hover {
  color: #f783ac;
  border-color: #f783ac;
  background: white;
}

.nav.nav-tabs.ss-component .ss-color-1.nav-link {
  background-color: transparent;
  color: #484848;
}

.nav.nav-tabs.ss-component .ss-color-1.nav-link.active {
  border-color: #f783ac;
  color: #f783ac;
}

.ss-component.ss-pagination-wrapper .pagination.ss-color-1 {
  background: transparent;
}

.ss-component.ss-pagination-wrapper .pagination.ss-color-1 .page-link {
  color: #f783ac;
}

.ss-component.ss-pagination-wrapper .pagination.ss-color-1 .active .page-link {
  color: white;
  background: #f783ac;
}

.ss-component.ss-pagination-wrapper .pagination.ss-color-1 .disabled .page-link {
  color: #484848;
  opacity: 0.3;
}

.ss-component.ss-spinner.ss-color-1 {
  background: transparent;
}

.ss-component.ss-spinner.ss-color-1:after {
  border-color: #f783ac transparent #f783ac transparent;
  background: rgba(255, 255, 255, 0.05);
}

.ss-component.ss-calendar-monthly.ss-color-1 .ss-calendar-monthly-row-dow {
  background: white;
  border-right: 1px solid #f783ac;
  border-left: 1px solid #f783ac;
  color: #f783ac;
}

.ss-component.ss-calendar-monthly.ss-color-1 .ss-not-in {
  color: rgba(255, 255, 255, 0.4);
}

.ss-component.ss-toggle-button-wrapper.ss-color-1 {
  background: transparent;
}

.ss-component.ss-toggle-button-wrapper.ss-color-1 .btn.toggle-on {
  color: white;
  background: #f783ac;
  border-color: transparent;
}

.ss-component.ss-toggle-button-wrapper.ss-color-1 .btn.toggle {
  border-color: rgba(0, 0, 0, 0.15);
}

.ss-component.ss-color-1[type=radio]:checked + label:before,
.ss-component.ss-color-1[type=radio]:not(:checked) + label:before {
  border-color: #ced4da;
  background: rgba(255, 255, 255, 0.2);
}

.ss-component.ss-color-1[type=radio]:checked + label:after,
.ss-component.ss-color-1[type=radio]:not(:checked) + label:after {
  background: #f783ac;
}

.ss-component.ss-color-1[type=checkbox] + label > .form-check-marker {
  color: #f783ac;
  background-color: transparent;
}

.ss-component.custom-control {
  z-index: auto;
}

.ss-component.custom-control.custom-switch.ss-text-color-1 > .custom-control-input:disabled ~ .custom-control-label {
  color: rgba(0, 0, 0, 0.3);
}

.ss-component.custom-control.custom-switch.ss-text-color-1 > .custom-control-input:checked ~ .custom-control-label::before {
  background: #f783ac;
  border-color: #f783ac;
}

.ss-component.custom-control.custom-switch.ss-text-color-1 > .custom-control-input:disabled ~ .custom-control-label::before {
  border-color: #484848;
  background: #484848;
  opacity: 0.2;
}

.ss-color-2 {
  color: white;
  background: #4D6FB8;
}

.ss-color-2-hover:hover {
  color: white;
  background: #4D6FB8;
}

.ss-text-color-2 {
  color: #4D6FB8;
}

.ss-text-color-2-hover:hover {
  color: #4D6FB8;
}

.ss-svgfill-color-1 [data-name=ss-overriden-fill-color] {
  fill: #4D6FB8 !important;
}

.ss-color-2.ss-light {
  color: #484848;
  background: #ecf3ff;
}

.ss-color-2.btn.ss-component {
  border-color: transparent;
}

.ss-color-2.btn.ss-component:hover {
  color: #4D6FB8;
  border-color: #4D6FB8;
  background: white;
}

.nav.nav-tabs.ss-component .ss-color-2.nav-link {
  background-color: transparent;
  color: #484848;
}

.nav.nav-tabs.ss-component .ss-color-2.nav-link.active {
  border-color: #4D6FB8;
}

.ss-component.ss-pagination-wrapper .pagination.ss-color-2 {
  background: transparent;
}

.ss-component.ss-pagination-wrapper .pagination.ss-color-2 .page-link {
  color: #4D6FB8;
}

.ss-component.ss-pagination-wrapper .pagination.ss-color-2 .active .page-link {
  color: white;
  background: #4D6FB8;
}

.ss-component.ss-pagination-wrapper .pagination.ss-color-2 .disabled .page-link {
  color: #484848;
  opacity: 0.3;
}

.ss-component.ss-spinner.ss-color-2 {
  background: transparent;
}

.ss-component.ss-spinner.ss-color-2:after {
  border-color: #4D6FB8 transparent #4D6FB8 transparent;
  background: rgba(255, 255, 255, 0.05);
}

.ss-component.ss-calendar-monthly.ss-color-2 .ss-calendar-monthly-row-dow {
  background: white;
  border-right: 1px solid #4D6FB8;
  border-left: 1px solid #4D6FB8;
  color: #4D6FB8;
}

.ss-component.ss-calendar-monthly.ss-color-2 .ss-not-in {
  color: rgba(255, 255, 255, 0.4);
}

.ss-component.ss-toggle-button-wrapper.ss-color-2 {
  background: transparent;
}

.ss-component.ss-toggle-button-wrapper.ss-color-2 .btn.toggle-on {
  color: white;
  background: #4D6FB8;
  border-color: transparent;
}

.ss-component.ss-toggle-button-wrapper.ss-color-2 .btn.toggle {
  border-color: rgba(0, 0, 0, 0.15);
}

.ss-component.ss-color-1[type=radio]:checked + label:before,
.ss-component.ss-color-1[type=radio]:not(:checked) + label:before {
  border-color: #ced4da;
  background: rgba(255, 255, 255, 0.2);
}

.ss-component.ss-color-2[type=radio]:checked + label:after,
.ss-component.ss-color-2[type=radio]:not(:checked) + label:after {
  background: #4D6FB8;
}

.ss-component.ss-color-2[type=checkbox] + label > .form-check-marker {
  color: #4D6FB8;
  background-color: transparent;
}

.ss-component.custom-control.custom-switch.ss-text-color-2 > .custom-control-input:disabled ~ .custom-control-label {
  color: rgba(0, 0, 0, 0.3);
}

.ss-component.custom-control.custom-switch.ss-text-color-2 > .custom-control-input:checked ~ .custom-control-label::before {
  background: #4D6FB8;
  border-color: #4D6FB8;
}

.ss-color-3 {
  background: rgba(244, 222, 146, 0.25);
  color: #484848;
}

.btn.ss-component.btn-default {
  color: #484848;
  background: white;
  border-color: #484848;
}

.btn.ss-component.btn-default:hover {
  background: #ffe7ef;
}

.btn.ss-component.btn-danger {
  color: white;
  background: #AA0000;
  border-color: transparent;
}

.btn.ss-component.btn-danger:hover {
  background: white;
  color: #AA0000;
  border-color: #AA0000;
}

.ss-text-color-link {
  color: #007bff;
  background: transparent;
}

.ss-text-color-link:hover {
  color: #0056b3;
}

.ss-text-color-white {
  color: white;
}

.ss-text-color-white-hover:hover {
  color: white;
}

.ss-color-star-awarded {
  color: #ffc72e;
}

.ss-color-star-blank {
  color: rgba(0, 0, 0, 0.2);
}

#ss-app-wrapper {
  background: white;
}

#ss-app-header[data-transparent=true] {
  background: rgba(0, 0, 0, 0.2);
}

#ss-app-masking-spinner-pane {
  background-color: rgba(0, 0, 0, 0.8);
}

.ss-zebra.ss-zebra-color-1 > *:nth-child(2n+1) {
  background-color: white;
}

.ss-zebra.ss-zebra-color-1 > *:nth-child(2n) {
  background-color: white;
}

#ss-app-navigation::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

#ss-app-navigation::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}

.ss-app-navigation-item.ss-item-of-student {
  border-left-color: #f783ac;
}

.ss-component-action-bar-item.ss-component-button-ack.active {
  color: #f783ac;
}

.ss-component.ss-spinner-small.ss-color-1 {
  background: transparent;
}

.ss-component.ss-spinner-small.ss-color-1:after {
  border-color: #f783ac transparent #f783ac transparent;
  background: rgba(255, 255, 255, 0.05);
}

.ss-status-safe {
  background: #E8FFF1;
  border: 2px solid #27AE60;
}

.ss-status-precaution {
  background: #FFFBC7;
  border: 2px solid #F4E409;
}

.ss-status-warning {
  background: #ffe2c7;
  border: 2px solid #ff8800;
}

.ss-status-danger {
  background: #FFDEDE;
  border: 2px solid #EB5757;
}

.ss-status-safe-color {
  color: #27AE60;
}

.ss-status-precaution-color {
  color: #F4E409;
}

.ss-status-warning-color {
  color: #ff8800;
}

.ss-status-danger-color {
  color: #EB5757;
}

.list-group-item.dimmed {
  opacity: 50%;
  background: rgba(0, 0, 0, 0.15);
}