/*** accent ***/

.dark-mode .sentence .sent-icons {
  background: #345;
  color: #f5f5f5;
}

.dark-mode a,
.dark-mode a:visited {
  color: #9ab; /*#bbcfdb;*/
}
.dark-mode a:hover {
  color: #36b7e2;
  text-decoration: underline;
}
.dark-mode .getGrammaly-btn:hover {
  color: white;
  text-decoration: none;
  box-shadow: #ffffff 0 0 0 2px inset;
}

.dark-mode .correction-txt {
  background-color: #d1d1d1;
  border-radius: 5px;
}

.src-and-icons {
  border-radius: 0px 6px 6px 0px;
}
.dark-mode .src-and-icons {
  border-left: 0px;
}

/***** darkest background *****/
.dark-mode .search-results .sentence,
.dark-mode .header,
body.dark-mode,
.dark-mode .title-section {
  background: #111;
  color: #ddd;
  border: 0px;
}

/**** 20% light ******/

.dark-mode .query-container .qtitle,
.dark-mode .query-container,
.dark-mode .generic-container,
.dark-mode .grammar-container,
.dark-mode .grammar-container .grammar-title,
.dark-mode .idioms-container,
.dark-mode .idioms-container .idioms-title,
.dark-mode .dict-container,
.dark-mode .about-container {
  background: #333;
  color: #e5e5e5;
  border: 0px;
}

/**** 30% light ******/

.dark-mode .outerdiv,
.dark-mode .diagonal2,
.dark-mode .sentence .text-part,
.dark-mode .def-text span {
  background: #444;
  color: #f5f5f5;
  border: 0px;
}

/***** 40% light ****/
.dark-mode .donate-text,
.dark-mode .idioms-container .idiom,
.dark-mode .search-results .sentence,
.dark-mode .advanced-form,
.dark-mode .reset-btn,
.dark-mode .close-btn,
.dark-mode .sent-search-links,
.dark-mode .meaning,
.dark-mode .hover-box,
.dark-mode .meaning .pos,
.dark-mode .diagonal,
.dark-mode .footer,
.dark-mode hr,
.dark-mode .text-area,
.dark-mode .content-section,
.dark-mode .grammar-help .dark-mode input[type="text"] {
  background: #555;
  color: #fff;
  border-color: #777;
}

.dark-mode .getGrammaly-btn,
.dark-mode .err-hint,
.dark-mode .wrapper .red-underline {
  color: white;
}

/***** 50% light ****/
.dark-mode .generic-message-box .gmb-content, /* essays page */
.dark-mode .price .grey, /* pricing page */
.dark-mode .src-and-icons,
.dark-mode .grammarChecker-box {
  background: #666;
  color: #fff;
  border-color: #777;
}

/***** 60% light ****/

.dark-mode .modal-content-content,
.dark-mode .div3,
.dark-mode .read-time,
.dark-mode .grammar-container .corrections,
.dark-mode .sent-search-links ul,
.dark-mode .src-and-icons .sent-src {
  background: #999;
  color: #000;
  border-color: #777;
}


.dark-mode .modal-content-content a,
.dark-mode .div3 a,
.dark-mode .read-time a,
.dark-mode .grammar-container .corrections a,
.dark-mode .sent-search-links ul a,
.dark-mode .src-and-icons .sent-src a {
  background: #555;
  padding: 5px;
  border-radius: 5px;
  color: #ddd;
}


/**** other ***/

.dark-mode .label-large,
.dark-mode h4,
.dark-mode h3,
.dark-mode h2,
.dark-mode h1 {
  color: #ddd;
}

.dark-mode .string,
.dark-mode strong {
  color: #fff;
}

.dark-mode div.footer h4,
.dark-mode div.footer a,
.dark-mode div.footer {
  color: #f1f1f1;
}

.dark-mode .idiom-text {
  border-bottom: solid 1px #333;
}

.dark-mode .meaning .synonym,
.dark-mode .collocation {
  background: #bbb;
  border: none;
  color: #222;
}

	/* pricing */
.dark-mode .sell-block, 
.dark-mode .sell-block h3,
.dark-mode .price .grey a.button, 
.dark-mode .price .grey a.button:visited  {
  color: #444;
}


/**** links **********/

.dark-mode .example-search a,
.dark-mode .sent-search-links ul li a {
  color: #000;
}

.dark-mode .meaning .synonym a,
.dark-mode .collocation a {
  color: #222;
}

/**** images ****/
.dark-mode .sentence .sent-icons img,
.dark-mode .about-hint img {
  filter: brightness(1.3);
}
.dark-mode .footer img {
  filter: grayscale(0.9) brightness(0.7);
}
.dark-mode .mobhide img {
  filter: grayscale(0.7) brightness(0.8);
}

.dark-mode main img {
  filter: grayscale(0.5);
}

.dark-mode .diagonal2 img,
.dark-mode .features img,
.dark-mode main img {
  filter: brightness(0.8) grayscale(50%) contrast(120%);
}

.dark-mode .example-search {
  filter: brightness(0.5);
}

.dark-mode .corrected-text {
  background-color: rgb(100, 96, 65);
}

/***** dark mode toggle buttons ****/
.sun,
.moon {
  width: 24px;
  height: 24px;
}
.dark-mode-toggle {
  padding: 10px 16px;
  background: #fff;
  border-radius: 6px;
  max-width: 145px;
  text-align: center;
}

.dark-mode-toggle:hover {
  cursor: pointer;
}

.dark-mode-toggle .switch-mode {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.dark-mode .dark-mode-toggle {
  background: #111;
}

.dm-light-txt,
.dm-dark-txt {
  display: inline-block;
  color: #111;
  padding-left: 6px;
}

.dm-light-txt,
.sun {
  display: none; /* off by default */
}
.moon {
  fill: #ddd;
}

.dark-mode #search-text[type="text"] {
  background: #111;
  color: #fff;
}

.dark-mode .advanced-form {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #111;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #555;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #fff;
}