:root {
  --font-family-primary:   "Sora", "Segoe WP", "Segoe UI", system-ui, sans-serif;
  --font-family-secondary: "Inter", "Segoe WP", "Segoe UI", system-ui, sans-serif;
}

body {
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #202124;
  font-family: "Inter", "Segoe WP", "Segoe UI", system-ui, sans-serif;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* prevent iOS blue tap flash */
  scrollbar-base-color: white;
  scrollbar-arrow-color: #ababab;
  scrollbar-highlight-color: #ababab;
  scrollbar-darkshadow-color: white;
  scrollbar-track-color: white;
  scrollbar-face-color: white;
}

/* Layout styles */
#contentMain {
  padding: 10px 17px 0 10px;
}
.section {
  margin-bottom: 15px;
  border-bottom: 1px solid #aab9bc;
  padding-bottom: 15px;
}
.whole-pane {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 70px;
}
.whole-pane.tall{
  padding-bottom: 60px;
}
body.light .whole-pane {
  background: #FFFFFF;
  background: linear-gradient(115deg,  #deebec 0%,#ffffff 63%,#ffffff 63%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* Text elements */
p {
  font-size: 14px;
  margin: 0;
  padding: 0;
  font-weight: 400;
}
label span,
button span {
  font-size: 14px;
  margin: 0;
  padding: 0;
  font-weight: 400;
}
label span,
button span {
  display: table;
}

/* Button styles */
#buttonReport {
  width: 100%;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 9999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: "Sora", "Segoe WP", "Segoe UI", system-ui, sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255,255,255,1);
  /* 300% wide gradient — animated via background-position */
  background-image: -webkit-linear-gradient(left,
    rgba(153,32,8,1) 0%,
    rgba(153,32,8,1) 33.333%,
    rgba(215,51,18,1) 66.666%,
    rgba(215,51,18,1) 100%);
  background-image: linear-gradient(90deg,
    rgba(153,32,8,1) 0%,
    rgba(153,32,8,1) 33.333%,
    rgba(215,51,18,1) 66.666%,
    rgba(215,51,18,1) 100%);
  background-size: 300% 100%;
  background-position: 100% 50%;
  box-shadow: 0 2px 6px 0 rgba(16,23,30,0.10);
  -webkit-transition: background-position 600ms ease, box-shadow 200ms;
  transition: background-position 600ms ease, box-shadow 200ms;
  -webkit-tap-highlight-color: transparent;
  /* iOS minimum 44px touch target */
  min-height: 44px;
}
#buttonReport:active:enabled {
  background-position: 0% 50%;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}
#buttonReport.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#buttonReport:focus,
#buttonReport:hover:enabled {
  background-position: 50% 50%;
  box-shadow: 0 6px 16px 0 rgba(16,23,30,0.10);
}

/* Button:focus style when tabbing between elements */
#buttonReport:focus, input:focus, textarea:focus {
  outline-color: #000;
  outline-width: thin;
}

/* PAB mode icon badge */
.label-content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-bottom: 1em;
}
.label-content h3 {
  -ms-flex: 1 1 auto;
  flex: 1;
  margin-bottom: 0;
  line-height: initial;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
}
.mode-indicator {
  font-family: "Sora", "Segoe WP", "Segoe UI", system-ui, sans-serif;
  font-family: var(--font-family-primary);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  border-radius: 9999px;
  padding: 2px 8px;
  height: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.mode-indicator.show {
  visibility: visible;
  opacity: 1;
}
.mode-indicator.m365 {
  background-color: #0655BB;
}
.mode-indicator.graph {
  background-color: #750E90;
}
.mode-indicator.ews {
  background-color: #f26721;
}

/* Phish Alert button section */
.content-button {
  position: fixed;
  box-sizing: border-box;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  background: #faffff;
  border-top: 1px solid var(--neutral-border-soft);
  padding: 14px 16px;
  box-shadow: 0 -4px 10px 0 rgba(16,23,30,0.10);
}
.content-footer {
  background-color: #cecece;
  width: 100%;
  min-height: 50px;
}

/* User Disposition and Comments Section */
.content-disposition-comments {
  display: none;
  visibility: hidden;
  padding: 0px 17px 0 10px;
}

/* User Disposition radio buttons */
#userDisposition {
  margin-bottom: 0;
}
#userDisposition .section {
  padding-bottom: 0;
}
h3#dispositionLabel {
  color: #4f5f63;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .5px;
  margin: 0 0 10px 0;
}
#userDisposition .radio {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #96a6a9;
  border-radius: 6px;
  padding: 10px 12px;
}

/* User details static display*/
.userDetailsContent {
  padding: 0 10px 10px 10px;
}
.userDetailsContent h2 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}
.userDetailsContent p {
  font-size: 14px;
  margin: 0
}

/* User details drop-down display */
#fromSection.drop-down {
  border: 1px solid #c9d7d9;
  border-radius: 12px;
  overflow: hidden;
}
#fromDropDown {
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  transition: all .5s;
  background: none;
  width: 100%;
  padding: 10px;
  border: none;
}
#fromDropDown:hover,
#fromDropDown:focus {
  background: #E5F2F3;
}
#fromDropDown[aria-expanded="true"] {
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  transition: all 1s;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#fromDropDown #caret {
  width: 0;
  height: 0;
  position: relative;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: solid 6px #202124;
  transition: all .5s;
}
#fromDropDown #caret:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  transition: all .5s;
  top: -8px;
  left: -6px;
}
#fromDropDown:hover #caret:before {
  border-top: 6px solid rgb(231, 241, 255);
}
#fromDropDown[aria-expanded="true"] #caret:before {
  border-top: 6px solid rgb(231, 241, 255);
}
#fromDropDown[aria-expanded="true"] #caret {
  transform: rotate(180deg);
}
.from #fromDisplayName {
  font-size: 14px;
}
.from p {
  margin: 0
}
#fromSection.from {
  border: 1px solid #c9d7d9;
  border-radius: 12px;
  overflow: hidden;
}
.staticSection #fromSection.from {
  border: none;
  border-radius: 0;
}
.staticSection #subjectSection{
  margin-bottom: 15px;
}
#fromDropDownStatic,
#dropDownContentStatic {
  padding: 0;
}

h3#subjectLabel,
#fromDropDownStatic #dropDownLabel {
  color: #4f5f63;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .5px;
  margin: 0 0 5px 0;
}

#fromDropDownStatic p {
  font-weight: 400;
}
#fromSection.from #dropDownContent.userDetailsContent {
  padding: 0 0.7em 0.7em 0.7em;
}
#fromSection #fromDisplayName {
  font-weight: 600;
}
#fromDropDownStatic p {
  margin: 0
}


/* Style the base radio input */
#userDisposition input[type="radio"] {
  /* Remove default browser styling */
  appearance: none;
  -webkit-appearance: none;

  /* Create custom size and shape */
  width: 20px;
  height: 20px;
  border: 1px solid #555;
  border-radius: 50%;
  cursor: pointer;
  background-color: #ebf8f8;
  /* Align it vertically with text */
  vertical-align: middle;
  margin-right: 8px;

  outline: 1px solid #fff;

  /* Smooth transition for the color change */
  transition: border 0.2s linear,
              outline 0.2s linear;
}

/* Change color when checked */
#userDisposition input[type="radio"]:checked {
  border: 6px solid #ef4523; /* Main outer color */
  background-color: #fff;    /* Center dot color */
}

/* Optional: Add a subtle hover effect */
#userDisposition input[type="radio"]:hover {
  outline: 8px solid #DEEBEC;
}
#userDisposition label:has(input[type="radio"]:hover) {
  box-shadow:
    0 6px 16px 0 rgba(16, 23, 30, 0.1),
    0 0 0px 0 rgba(255, 255, 255, 0),
    0 0px 0px 0 rgba(255, 255, 255, 0);
  transition: 0.2s all linear;
}
#userDisposition .radio.disabled label:has(input[type="radio"]:hover),
#userDisposition .radio:has(input:checked).disabled label:has(input[type="radio"]:hover) {
  box-shadow: none;
  transition: none;
  cursor: initial;
}
#userDisposition label:has(input[type="radio"]:checked) {
  border-color: #4f5f63;
}

#userDisposition label {
  cursor: pointer;
}
#userDisposition .radio .label,
#userDisposition .radio .smaller {
  margin: 0 0.4em;
}
#userDisposition .radio .label {
  font-size: 14px;
  font-weight: 600;
}
#userDisposition .radio .smaller {
  font-size: 12px;
  font-weight: 400;
  color: #595959;
  margin-top: .2em;
}
#userDisposition .radio.disabled,
#userDisposition .radio:has(input:checked).disabled div,
#userDisposition .radio.disabled div,
#userDisposition .radio:has(input:checked).disabled .smaller
#userDisposition .radio.disabled .smaller {
  color: #cccccc;
}
#userDisposition .radio:has(input:checked).disabled input,
#userDisposition .radio.disabled input {
  border-color: #cccccc;
}
#userDisposition .radio:last-of-type {
  margin-bottom: 15px;
}

/* User comment textArea */
#userComment {
  padding: 0px 0px 0px 0px;
}
#userComment #userCommentField {
  font-family: "Inter", "Segoe WP", "Segoe UI", system-ui, sans-serif;
  font-family: var(--font-family-secondary);
  resize: none;
  background-color: #ffffff;
  color: #555;
  width: 100%;
  padding: 0.5em;
  box-sizing: border-box;
  border: 1px solid #999;
  border-radius: 5px;
}
#userComment #count {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  font-size: 12px;
}
#userComment #userCommentField.disabled {
  color: #ddd;
}

#emailSubject {
  font-weight: 600;
  margin-bottom: 10px;
}

/* Loading screen */
.container {
  z-index: 100;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
body.light .container {
  background: #FFFFFF;
  background: linear-gradient(115deg,  #deebec 0%,#ffffff 63%,#ffffff 63%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.container.remove {
  animation: fadeOut 1s normal forwards ease-in-out;
}
.loading-icon {
  z-index: 10;
  box-sizing: border-box;
  border: 8px solid #0F6CBD;
  border-radius: 40px;
  border-top: 8px solid white;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  90% { opacity: 0; }
  100% {
    opacity: 0;
    visibility: hidden;
    z-index: -100;
  }
}

/* Notification and error messaging */
#notification {
  display: -ms-flexbox;
  display: flex;
  background: #3a3b3d;
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px thin #000000;
  z-index: 10;
  margin: 0;
  padding: 1em;
  box-shadow: -1px -5px 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: -1px -5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: -1px -5px 10px rgba(0, 0, 0, 0.2);
  -ms-flex-align: center;
  align-items: center;
}
#notification h2 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  padding: 0;
}
#notification p {
  font-size: 14px;
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
}
#notification .info-icon {
  width: 30px;
  padding-right: 10px;
}
.notification-window {
  box-sizing: border-box;
  position: fixed;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px thin #dddddd;
  background: #333;
  margin: 0;
  padding: 1em;
  min-height: 85.5px;
  color: white;
}
.notification-window.show {
  animation-name: show;
  animation-duration: .3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes show {
  0% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
  }
}
.notification-window.hide {
  animation-name: hide;
  animation-duration: .3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes hide {
  0% {
    opacity: 1;
  }
  70% { opacity: 0; }
  100% {
    opacity: 0;
    z-index: -30;
    visibility: hidden;
  }
}
.notification-window .notification-icon {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: .5em;
}
.notification-window .loading-icon {
  border: 3px solid white;
  border-top: 3px solid #333;
  width: 30px;
  height: 30px;
}
.notification-window .info-icon {
  border: 2px solid white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}
.notification-window .info-icon::before {
  content: 'i';
  font-size: 16px;
  font-weight: 500;
}

/* Notification for EWS running in mobile */
.mobileNotification {
  display: -ms-flexbox;
  display: flex;
  background: #3a3b3d;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 1em;
}
.mobileNotification .info-icon {
  border: 2px solid white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: .5em;
}
.mobileNotification .info-icon::before {
  content: 'i';
  font-size: 16px;
  font-family: monospace;
}

/* ─────────────────────────────────────────────────────────────
   DARK MODE
   Activated by body.dark (set by initOfficeTheme in officeTheme.js)
   ───────────────────────────────────────────────────────────── */

/* Set dark background on html too to eliminate any white flash before body renders */
html.dark-pending {
  background: #1f1f1f;
}

body.dark {
  background: #1f1f1f;
  color: #f3f3f3;
  scrollbar-base-color: #1f1f1f;
  scrollbar-arrow-color: #555;
  scrollbar-highlight-color: #555;
  scrollbar-darkshadow-color: #1f1f1f;
  scrollbar-track-color: #1f1f1f;
  scrollbar-face-color: #1f1f1f;
}

/* Loading screen */
body.dark .container {
  background: #1f1f1f;
  background: linear-gradient(115deg, #1a2e30 0%, #1f1f1f 63%, #1f1f1f 63%);
}
body.dark .loading-icon {
  border-color: #4a9abf;
  border-top-color: #1f1f1f;
}

/* Main pane */
body.dark .whole-pane {
  background: #1f1f1f;
  background: linear-gradient(115deg, #1a2e30 0%, #1f1f1f 63%, #1f1f1f 63%);
}

/* Section dividers */
body.dark .section {
  border-bottom-color: #3d3d3d;
}

/* Labels — #a0b4bb on #1f1f1f = 5.8:1, passes WCAG AA */
body.dark h3#dispositionLabel,
body.dark h3#subjectLabel,
body.dark #fromDropDownStatic #dropDownLabel {
  color: #a0b4bb;
}
body.dark #emailSubject {
  color: #f3f3f3;
}
body.dark p {
  color: #b0bec5;
}

/* Mode indicator badges — colours already carry meaning; keep as-is in dark */

/* From / sender drop-down */
body.dark #fromSection.from,
body.dark #fromSection.drop-down {
  border-color: #3d5255;
}
body.dark #fromDropDown {
  color: #f3f3f3;
}
body.dark #fromDropDown:hover,
body.dark #fromDropDown:focus {
  background: #243638;
}
body.dark #fromDropDown[aria-expanded="true"] {
  background: #243638;
}
body.dark #fromDropDown #caret {
  border-top-color: #f3f3f3;
}
body.dark #fromDropDown #caret:before {
  border-top-color: #243638;
}
body.dark #fromDropDown:hover #caret:before,
body.dark #fromDropDown[aria-expanded="true"] #caret:before {
  border-top-color: #243638;
}
body.dark .userDetailsContent h2 {
  color: #f3f3f3;
}
body.dark #fromSection #fromDisplayName {
  color: #f3f3f3;
}
body.dark #dropDownContent.userDetailsContent,
body.dark #dropDownContentStatic {
  color: #b0bec5;
}

/* Disposition radio buttons */
body.dark #userDisposition .radio {
  border-color: #4a6668;
  background: #242e30;
}
body.dark #userDisposition .radio .label {
  color: #f3f3f3;
}
body.dark #userDisposition .radio .smaller {
  color: #7a9099;
}
body.dark #userDisposition .radio.disabled .label,
body.dark #userDisposition .radio.disabled .smaller {
  color: #b0bec5;
}
body.dark #userDisposition input[type="radio"] {
  background-color: #1a2e30;
  border-color: #7a9099;
  outline-color: #1f1f1f;
}
body.dark #userDisposition input[type="radio"]:checked {
  border-color: #ef4523;
  background-color: #1f1f1f;
}
body.dark #userDisposition input[type="radio"]:hover {
  outline-color: #243638;
}
body.dark #userDisposition label:has(input[type="radio"]:hover) {
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.4);
}

/* User comment textarea — matches Outlook dark input style
   bg #2d2d2d on #1f1f1f, border #5a6a6c (4.1:1 vs bg), text #f3f3f3 (10:1 vs bg) */
body.dark #userComment #userCommentField {
  background: #242e30;
  color: #f3f3f3;
  border-color: #5a6a6c;
  border-width: 1px;
}
body.dark #userComment #userCommentField::placeholder {
  color: #7a9099;
}
body.dark #userComment #userCommentField.disabled {
  background: #242e30;
  color: #5a6a6c;
  border-color: #3a3a3a;
}
/* #count label — #a0b4bb on #1f1f1f = 5.8:1, passes WCAG AA */
body.dark #count {
  color: #a0b4bb;
}

/* Submit button area */
body.dark .content-button {
  background: #1f1f1f;
  border-top-color: #3d3d3d;
  box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.4);
}
body.dark #buttonReport:focus,
body.dark input:focus,
body.dark textarea:focus {
  outline-color: #f3f3f3;
}

/* Notifications */
body.dark .notification-window {
  background: #1a1a1a;
  border-top-color: #3d3d3d;
  color: #f3f3f3;
}
body.dark .notification-window .loading-icon {
  border-color: #f3f3f3;
  border-top-color: #1a1a1a;
}
body.dark .notification-window .info-icon {
  border-color: #f3f3f3;
}
body.dark .mobileNotification {
  background: #1a1a1a;
  color: #f3f3f3;
}
body.dark .mobileNotification .info-icon {
  border-color: #f3f3f3;
}

/* ─────────────────────────────────────────────────────────────
   HIGH-CONTRAST MODE
   Activated by Windows High Contrast / forced-colors, or body.contrast
   ───────────────────────────────────────────────────────────── */

@media (forced-colors: active) {
  body {
    background: Canvas;
    color: CanvasText;
  }
  .container,
  .whole-pane {
    background: Canvas;
  }
  .loading-icon {
    border-color: ButtonText;
    border-top-color: Canvas;
    forced-color-adjust: none;
  }
  .section {
    border-bottom-color: ButtonText;
  }
  h3#dispositionLabel,
  h3#subjectLabel,
  #fromDropDownStatic #dropDownLabel {
    color: GrayText;
  }
  #fromSection.from,
  #fromSection.drop-down {
    border-color: ButtonText;
  }
  #fromDropDown:hover,
  #fromDropDown:focus,
  #fromDropDown[aria-expanded="true"] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  #fromDropDown #caret {
    border-top-color: ButtonText;
    forced-color-adjust: none;
  }
  #userDisposition .radio {
    border-color: ButtonText;
    background: Canvas;
  }
  #userDisposition .radio .label {
    color: CanvasText;
  }
  #userDisposition .radio .smaller,
  #count {
    color: GrayText;
  }
  #userDisposition input[type="radio"] {
    forced-color-adjust: none;
    background-color: Canvas;
    border-color: ButtonText;
    outline-color: Canvas;
  }
  #userDisposition input[type="radio"]:checked {
    border-color: Highlight;
    background-color: Canvas;
  }
  #userCommentField {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
  }
  .content-button {
    background: Canvas;
    border-top-color: ButtonText;
  }
  #buttonReport {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
    forced-color-adjust: none;
  }
  #buttonReport:hover:enabled,
  #buttonReport:focus {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  .notification-window,
  .mobileNotification {
    background: Canvas;
    color: CanvasText;
    border-top-color: ButtonText;
  }
  .notification-window .info-icon,
  .mobileNotification .info-icon {
    border-color: ButtonText;
    forced-color-adjust: none;
  }
  .notification-window .loading-icon {
    border-color: ButtonText;
    border-top-color: Canvas;
    forced-color-adjust: none;
  }
}

body.contrast {
  background: #000000;
  color: #ffffff;
}
body.contrast .container,
body.contrast .whole-pane {
  background: #000000;
}
body.contrast .loading-icon {
  border-color: #ffffff;
  border-top-color: #000000;
}
body.contrast .section {
  border-bottom-color: #ffffff;
}
body.contrast h3#dispositionLabel,
body.contrast h3#subjectLabel,
body.contrast #fromDropDownStatic #dropDownLabel,
body.contrast #count {
  color: #c8c8c8;
}
body.contrast p,
body.contrast #emailSubject {
  color: #ffffff;
}
body.contrast #fromSection.from,
body.contrast #fromSection.drop-down {
  border-color: #ffffff;
}
body.contrast #fromDropDown {
  color: #ffffff;
}
body.contrast #fromDropDown:hover,
body.contrast #fromDropDown:focus,
body.contrast #fromDropDown[aria-expanded="true"] {
  background: #ffff00;
  color: #000000;
}
body.contrast #fromDropDown #caret {
  border-top-color: #ffffff;
}
body.contrast #userDisposition .radio {
  background: #000000;
  border-color: #ffffff;
}
body.contrast #userDisposition .radio .label {
  color: #ffffff;
}
body.contrast #userDisposition .radio .smaller {
  color: #c8c8c8;
}
body.contrast #userDisposition .radio.disabled .label,
body.contrast #userDisposition .radio.disabled .smaller {
  color: #555555;
}
body.contrast #userDisposition input[type="radio"] {
  background-color: #000000;
  border-color: #ffffff;
  outline-color: #000000;
}
body.contrast #userDisposition input[type="radio"]:checked {
  border-color: #ffff00;
  background-color: #000000;
}
body.contrast #userDisposition input[type="radio"]:hover {
  outline-color: #ffff00;
}
body.contrast #userCommentField {
  background: #000000;
  color: #ffffff;
  border-color: #ffffff;
  border-width: 2px;
}
body.contrast #userCommentField::placeholder {
  color: #c8c8c8;
}
body.contrast #userCommentField.disabled {
  color: #555555;
  border-color: #555555;
}
body.contrast .content-button {
  background: #000000;
  border-top-color: #ffffff;
  box-shadow: none;
}
body.contrast #buttonReport {
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
  background-image: none;
}
body.contrast #buttonReport:hover:enabled,
body.contrast #buttonReport:focus {
  background: #ffff00;
  color: #000000;
  border-color: #ffff00;
  box-shadow: none;
}
body.contrast .notification-window,
body.contrast .mobileNotification {
  background: #000000;
  color: #ffffff;
  border-top-color: #ffffff;
}
body.contrast .notification-window .info-icon,
body.contrast .mobileNotification .info-icon {
  border-color: #ffffff;
}
body.contrast .notification-window .loading-icon {
  border-color: #ffffff;
  border-top-color: #000000;
}