/* Dark mode styles for lingua.com */

body {
  background-color: #121212;
  color: #e0e0e0;
  padding-top:11rem;
}

.header {
  background-color: #2b2b2b;
  -webkit-box-shadow: 0px 1px 26px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 1px 26px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 1px 26px 0px rgba(0,0,0,0.5);
  z-index:6;
  width:100%;
  position:fixed;
  margin-top:-11rem;
  height:11rem;
}

.header .container {
  background-color: #2b2b2b;
}

.container {
  background-color: #121212;
}

.main {
  background-color: #2b2b2b;
}

.leader {
  background-color: #121212;
  border-bottom: 1px solid #333;
  background: linear-gradient(90deg, #121212 50%, #121212 50%);
}

.sub-header {
  background-color: #2b2b2b;
  border-bottom: 1px solid #333;
}

.sub-header .content {
  background-color: #2b2b2b;
}

.footer {
  background-color: #2b2b2b;
}

/* Navigation and buttons */
.navi {
  border-color: #333;
  color: #e0e0e0;
  background-color: #2b2b2b;
}

.navi:hover {
  background-color: #2c2c2c;
  color: #ffffff;
}

.button, .answer, .corrected-result {
  background-color: #2c2c2c;
  border-color: #444;
  color: #e0e0e0;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover, .active-answer:hover {
    border-color: #555;
  }
}

.header .button {
  background-color: #2b2b2b;
  border-color: #444;
  color: #e0e0e0;
}

.button.button--premium-status {
  background-color: #333;
}

/* Circles and icons */
.circle {
  background-color: #2b2b2b;
  border-color: #444;
  color: #e0e0e0;
}

.circle:hover {
  color: #FB544E;
}

.globe {
  background-color: #333;
  border-color: #444;
}

.globe:hover {
  background-color: #444;
  border-color: #555;
}

/* Panels and content boxes */
.panel, .small_panel, .word_panel {
  background-color: #2b2b2b;
  border-color: #333;
}

.panel-header {
  background-color: #333;
}

.word_panel {
  -webkit-box-shadow: 0px 1px 7px 1px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 1px 7px 1px rgba(0,0,0,0.3);
  box-shadow: 0px 1px 7px 1px rgba(0,0,0,0.3);
}

/* Buttons and flags */
.button_flag, .button_icon, .button_flag_small {
  background-color: #2b2b2b;
  color: #e0e0e0;
  -webkit-box-shadow: 0px 8px 9px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 8px 9px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 8px 9px 0px rgba(0,0,0,0.3);
}

.button_flag:hover, .button_icon:hover, .button_flag_small:hover {
  background-color: #2c2c2c;
  color: #ffffff;
}

/* Forms and inputs */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  background-color: #2c2c2c;
  border-color: #444;
  color: #e0e0e0;
}

.form input.input-text {
  background-color: #2c2c2c;
  border-color: #444;
  color: #e0e0e0;
}

.form select.input-select {
  background-color: #2c2c2c;
  border-color: #444;
  color: #e0e0e0;
}

/* Links */
a, .a-style {
  color: #FB544E;
}

/* Tables */
td, th {
  border-bottom-color: #333;
}

/* Modal */
.modal {
  background-color: rgba(0, 0, 0, 0.75);
}

.modal-box, .modal-content {
  background-color: #2b2b2b;
  box-shadow: 0px 2px 17px 0px rgba(0,0,0,0.5);
}

.modal-header {
  background-color: #2c2c2c;
}

/* Dark mode toggle button */
.dark-mode-toggle {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  padding: 5px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.dark-mode-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dark-mode-toggle:hover {
  background-color: #333;
}

.dark-mode-toggle.dark-mode-active {
  background-color: #FB544E;
}

.dark-mode-toggle.dark-mode-active svg {
  stroke: #fff;
}

/* Additional styles for dark mode */
body.dark-mode .dark-mode-toggle {
  background-color: #FB544E;
}

body.dark-mode .dark-mode-toggle svg {
  stroke: #fff;
}

body.dark-mode .dark-mode-toggle:hover {
  background-color: #d93c36;
}

/* Specific overrides for boxgrid */
ul.boxgrid li {
  background-color: #2b2b2b;
  box-shadow: 5px 7px 6px 0px rgba(0,0,0,0.3);
}

/* Specific overrides for mobile navigation */
@media (max-width: 650px) {
  .navigation {
    background-color: #2b2b2b;
  }
  
  .button-circle {
    background-color: #2b2b2b;
    border-color: #444;
  }
  
  .navi.navi-button {
    background-color: #2b2b2b;
    border-color: #444;
  }
}


.leader p.main-text {
  color: #e0e0e0;
}