.SettingsTab {
  margin-bottom: 180px;
}

.SettingsTab h5 {
  font-size: 0.9em;
  margin-bottom: 8px;
}

.darkmode .SettingsTab h5 {
  color: #fff;
}

.prefItem.theme {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.themeScreen {
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  margin: 3px;
}

.themeScreen img {
  height: 18px;
}

.themeScreenElement {
  width: 50px;
  height: 10px;
  margin-top: 10px;
  border-radius: 3px;
}

.darkTheme, .lightTheme {
  border: 2px solid transparent;
  cursor: pointer;
  flex: 1;
}

.darkTheme .themeScreen {
  background: #333;
}

.darkTheme .themeScreenElement {
  background: #222;
}

.lightTheme .themeScreen {
  background: #fff;
}

.lightTheme .themeScreenElement {
  background: #eee;
}

.themeActive {
  border: 2px solid #76c3e8;
  border-radius: 15px;
}

.label {
  background: rgba(255,255,255, 0);
  color: #444;
  text-align: center;
  padding: 7px 10px;
  border-radius: 10px;
  border: 2px solid #76c3e8;
  overflow: hidden;
  cursor: pointer;
}

.darkmode .label {
  background: rgba(255,255,255, 0.05);
  color: #fff;
}

.darkmode .label option {
  color: #444;
}

.version {
  opacity: 0.5;
  margin-top: 40px;
  font-size: 0.8em;
  text-align: center;
}

.darkmode .version {
  color: #ddd;
}

.myaccount {
  position: fixed;
  background: #fff;
  width: 100%;
  bottom: 0px;
  width: 310px;
  border-top: 1px solid #f1f1f1;
}

.darkmode .myaccount {
  background: #222222;
  border-top-color: #1a1a1a;
}

.toggleIcon {
  position: absolute;
  right: 15px;
  display: flex;
  border-radius: 15px;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 150ms transform;
  transform: rotate(0deg);
}

.toggleIconActive {
  background: #f1f1f1;
  transform: rotate(180deg);
}

.darkmode .toggleIconActive {
  background: #1b1b1b;
}

.toggleIcon svg {
  fill: #242938;
}

.darkmode .toggleIcon svg {
  fill: #ccc;
}

.subUser {
  padding: 2px;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.userName {
  font-size: 0.9em;
  font-weight: 500;
}

.darkmode .userName {
  color: #fff;
}

.userHandle {
 font-size: 0.85em;
 opacity: 0.7;
 margin-top: 2px;
}

.darkmode .userHandle {
  color: #ddd;
}

.subUser img {
  border-radius: 20px;
  margin-right: 10px;
  opacity: 0.9;
}

.userOptions {
  overflow: hidden;
  transition: 150ms all;
}

.userOptions ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  margin-bottom: 10px;
  margin-left: 46px;
}

.userOptions a, .userOptions span {
  font-size: 0.9em;
  color: #555;
  padding: 5px;
  line-height: 1.6em;
}

.darkmode .userOptions a, .darkmode .userOptions span {
  color: #ddd;
}

.userOptions a:hover, .userOptions span:hover {
  color: #222;
}

.darkmode .userOptions a:hover, .darkmode .userOptions span:hover {
  color: #aaa;
}
