/* ui/app/index.less */
* {
  box-sizing: border-box;
  border: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  font-size: 14px;
}
#root {
  width: 100%;
  height: 100%;
  font-size: 0;
}
.top-level .panes .pane {
  width: 80%;
  height: 40vh;
  padding: 14px;
}
.top-level .panes .pane textarea {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  resize: none;
  padding: 12px;
  border: 2px solid #ddd;
}
.top-level .panes .pane.input.error textarea {
  border: 2px solid orangered;
  outline: none;
}
.top-level .panes .pane.output {
  margin-left: 20%;
}
.top-level .panes .pane.output textarea {
  background-color: #eee;
}
.top-level .panes .control {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.top-level .panes .control .switch {
  width: 160px;
  height: 40px;
  padding: 0;
}
.top-level .panes .control .switch .MuiSwitch-switchBase {
  padding: 2px;
  height: 100%;
  transition-duration: 300ms;
}
.top-level .panes .control .switch .MuiSwitch-switchBase .MuiSwitch-thumb {
  box-sizing: border-box;
  width: fit-content;
  height: 100%;
  border-radius: 6px;
  padding: 10px;
}
.top-level .panes .control .switch .MuiSwitch-switchBase .MuiSwitch-thumb:after {
  color: #333;
  content: "UrlEncode";
  font-size: 14px;
  font-weight: 600;
  color: #37328f;
}
.top-level .panes .control .switch .MuiSwitch-switchBase + .MuiSwitch-track {
  border-radius: 5px;
  background-color: #0f00ff;
  opacity: 0.38;
}
.top-level .panes .control .switch .MuiSwitch-switchBase.Mui-checked {
  transform: translateX(70px);
  color: #fff;
}
.top-level .panes .control .switch .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: #2eca45;
  opacity: 0.5;
  border: 0;
}
.top-level .panes .control .switch .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb:after {
  content: "UrlDecode";
  font-size: 14px;
  color: #388543;
}
.top-level .panes .control .switch .MuiSwitch-switchBase.Mui-focusVisible .MuiSwitch-thumb {
  color: #33cf4d;
  border: 6px solid #fff;
}
.top-level .panes .control .switch .MuiSwitch-switchBase.Mui-disabled .MuiSwitch-thumb {
  color: #444;
}
.top-level .panes .control .switch .MuiSwitch-switchBase.Mui-disabled + .MuiSwitch-track {
  opacity: 0.7;
}