/*CSS for Dark Mode Toggle

Copy and paste this code into it's own dark.css file. Keep all you dark mode
styles there, and make sure when you link to this sheet in your html head,
make it the bottom css link tag so it overrides all other styles.
At the bottom, that's where you start to add your dark mode styles by
starting starting with "body.dark-mode" and add your class you want to
target at the end. For example,

body.dark-mode .heading-one {}


*/
/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
  #dark-mode-toggle {
    display: block;
    position: absolute;
    top: 20%;
    transform: translateY(-95%);
    /* right: 3.75rem; */
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
    z-index: 998;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5625rem;
    height: 1.5625rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s, fill 0.3s;
    fill: #000;
    width: 20px;
    height: 20px;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    width: 20px;
    height: 20px;
  }
}
/* Desktop */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin-left: 1.875rem;
    margin-bottom: 0rem;
  }
  #dark-mode-toggle .cs-moon {
    /* change to whatever you need it to be */
    /* fill: #fff; */
  }
}

body.dark-mode {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode #timer {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .widget {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
  border-color: rgba(255, 255, 255, 0.38) !important;
}

body.dark-mode .widget .widget-item {
  border-color: rgba(255, 255, 255, 0.38) !important;
}

body.dark-mode .title {
  background-color: #121212;
  color: rgba(255, 255, 255);
}

body.dark-mode .form-control {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.38);
}

body.dark-mode .navbar-light {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode #daily-target {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.38) !important;
}

body.dark-mode .progress {
  background-color: rgba(255, 255, 255, 0.38);
}

body.dark-mode .btn {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87) !important;
  border-color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .section {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .page-footer {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .modal-content {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
  border-color: rgba(255, 255, 255, 0.38);
}

body.dark-mode .datepicker {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
  border-color: rgba(255, 255, 255, 0.38);
}

body.dark-mode #sessionDescription {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .con-tooltip {
  color: rgba(255, 255, 255, 0.38);
}

body.dark-mode input {
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87) !important;
  /* border-color: !important; */
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
}

body.dark-mode .clickable {
  background-color: #121212 !important;
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .counter__number,
body.dark-mode .counter__percent,
body.dark-mode .challenge_row {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .icon {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .visited__country {
  box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode
  .switch-wrapper
  [type="radio"]:checked#monthly
  ~ label[for="monthly"],
body.dark-mode
  .switch-wrapper
  [type="radio"]:checked#yearly
  ~ label[for="yearly"] {
  background-color: #ff7a57;
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .switch-wrapper [type="radio"]#monthly ~ label[for="monthly"],
body.dark-mode .switch-wrapper [type="radio"]#yearly ~ label[for="yearly"] {
  color: #121212 !important;
}

body.dark-mode p {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .web-icons {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%)
    hue-rotate(283deg) brightness(104%) contrast(104%) !important;
}

body.dark-mode #edit_profile_button {
  background-color: rgba(255, 255, 255, 0.38) !important;
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode #give_feedback_button {
  background-color: rgba(255, 255, 255, 0.38) !important;
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .fa-check-to-slot {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .fa-trash {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .ec-day.ec-today {
  background-color: rgba(255, 255, 255, 0.38) !important;
}

body.dark-mode .float-message {
  background-color: #274f36 !important;
}

body.dark-mode .close-link {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .leaderboard-row {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode tr {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .close {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode #bio_input {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode #mbtiDropdown {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .timezoneSettingButton {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .contact {
  background-color: #121212 !important;
}

body.dark-mode #user_feedback_field {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%)
    hue-rotate(283deg) brightness(104%) contrast(104%) !important;
}

body.dark-mode .card-body {
  background-color: #121212 !important;
  color: rgba(255, 255, 255, 0.87) !important;
}