/* Prevent shifting on pages that don't need scrolling */
html {
  overflow-y: scroll;
}

body {
  margin: 0;
  background-color: var(--overall-background-color);
  color: var(--overall-text-color);
}
body, select, input {
  font-family: "Open Sans", sans-serif, "Segoe UI Emoji";
}
body:lang(zh-CN), select:lang(zh-CN), input:lang(zh-CN) {
  font-family: "Open Sans", "Microsoft YaHei UI", sans-serif, "Segoe UI Emoji";
}
body:lang(zh-TW), select:lang(zh-TW), input:lang(zh-TW) {
  font-family: "Open Sans", "Microsoft JHengHei UI", sans-serif, "Segoe UI Emoji";
}
pre, code {
  direction: ltr !important;
}
textarea {
  resize: vertical;
}

a {
  color: var(--link-color);
}
a:visited {
  color: var(--link-visited-color);
}

input[type="checkbox"], input[type="radio"] {
  vertical-align: middle;
}

.width-constraint {
  margin: auto;
  max-width: 1200px;
}
@media screen and (max-width: 1228px) {
  .width-constraint {
    margin: auto 1.2vw;
  }
}
@media screen and (max-width: 400px) {
  .width-constraint {
    margin: auto 0;
  }
}

.inline-list, .block-list {
  padding-left: 0;
  padding-right: 0;
  list-style: none;
}
.inline-list {
  display: inline;
}
.block-list {
  display: block;
  margin: 0
}
.inline-list li, .block-list li {
  display: inline;
}
.inline-list li:after, .block-list li:after {
  content: ", ";

}
body:lang(he) .inline-list li:after, body:lang(he) .block-list li:after,
body:lang(ar) .inline-list li:after, body:lang(ar) .block-list li:after,
body:lang(ug) .inline-list li:after, body:lang(ug) .block-list li:after,
body:lang(ckb) .inline-list li:after, body:lang(ckb) .block-list li:after {
  content: "،";
}
.inline-list li:last-child:after, .block-list li:last-child:after {
  content: "";
}
dt[title] > span {
  border-bottom: 1px dotted black;
}

.form-section {
  margin-bottom: 2em;
}
.form-control {
  margin-bottom: 1em;
}
.form-control textarea, #ace-editor {
  width: 100%;
  box-sizing: border-box;
  margin-top: 1px;
  margin-bottom: 1px;
}
.form-control textarea:not([rows]), #ace-editor {
  height: 20em;
}
#ace-editor {
  border: 1px solid #BBB;
  border-style: inset;
  resize: both;
}
.form-control input:not([type=radio]):not([type=file]):not([type=checkbox]):not([type=search]):not([type=submit]):not([size]) {
  box-sizing: border-box;
  width: 100%;
}
.radio-group input[type=radio], .radio-group input[type=checkbox] {
  margin-left: 1em;
  vertical-align: top;
}
.form-control label {
  font-weight: bold;
}
.form-control label.radio-label, .form-control label.checkbox-label {
  font-weight: normal;
  max-width: calc(100% - 38px);
  vertical-align: top;
}
label.subselection-radio-title {
  font-weight: normal;
  font-size: small;
  display: block;
  margin-left: 3px;
}
.field_with_errors textarea {
  background-color: var(--field-with-errors);
}
.label-note {
  font-size: smaller;
}
.screenshots-controls > *:not(label) {
  padding-left: 1em;
}
.add-screenshot-control, .screenshot-control {
  clear: left;
}
.screenshot-control > * {
  vertical-align: middle;
}
.screenshot-control a {
  float: left;
  min-width: 150px;
  text-align: center;
}

#script-info, .user-list, .text-content, .discussion-list, .notification-list {
  padding: 0 1em 1em;
}
#script-info > *:last-child, .user-list > *:last-child, .text-content > *:last-child, .discussion-list > *:last-child, .notification-list > *:last-child {
  margin-bottom: 0;
}
.script-list {
  padding: 0;
}

.script-list, .user-list, .text-content, .discussion-list, .notification-list {
  list-style-type: none;
  box-shadow: 0 0 5px var(--content-box-shadow-color);
  background-color: var(--content-background-color);
  border: 1px solid var(--content-border-color);
  border-radius: 5px;
  box-sizing: border-box;
  margin: 14px 0;
}
.text-content:last-child {
  margin-bottom: 0;
}
.user-list {
  padding: 1em;
  margin: 1em 0;
}
.script-link, .script-description, .user-link {
  /* Prevent e.g. RTL user name in LTR layout from showing punctuation on an unexpected side. */
  unicode-bidi: isolate;
}
.list-option-groups ~ ol {
  width: calc(960px - 14em);
}
.text-content .list-option-groups ~ ol {
  width: calc(960px - 16em);
}
@media screen and (max-width: 960px) {
  #script-info, .user-list, .text-content {
    padding: 0 1.2vw 1.2vw;
  }
}
@media screen and (max-width: 400px) {
  .script-list, .user-list, .text-content, .discussion-list, .notification-list {
    border-left: 0;
    border-right: 0;
  }
  .user-list, .text-content, .discussion-list, .notification-list, .script-list-description {
    padding-left: 1em;
    padding-right: 1em;
  }
  .discussion-list-header, .user-list-header, .library-list-header {
    padding-left: 1em;
    padding-right: 1em;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  #script-info {
    padding-left: 1em;
    padding-right: 1em;
  }
  #script-links {
    margin-left: -1em;
    margin-right: -1em;
    padding: 0;
  }
  #additional-info {
    margin-left: -1em;
    margin-right: -1em;
  }
}


.script-list li:not(.ad-entry) {
  border-bottom: 1px solid var(--content-separator-color);
  padding: 1em;
}

.script-list .cf-wrapper {
  margin: 0 !important;
}

@media screen and (max-width: 960px) {
  .script-list li:not(.ad-entry) {
    padding: 1.2vw;
  }
}

.script-list h2 {
  margin: 0;
  font-size: 18px;
}
.script-list p {
  margin: 0;
}
.script-list footer {
  margin-top: 0.25em;
}


.list-current {
  font-weight: bold;
}
.script-list h2 {
  font-weight: bold;
}
.script-list .description {
  font-weight: normal;
  display: block;
  margin: .5em 0;
  font-size: smaller;
}
.script-list .name-description-separator {
  display: none;
}
#script-description,
.script-list h2 > a,
.script-list .description {
  word-wrap: break-word;
}

@media screen and (max-width: 720px) {
  .script-list, #script-content {
    margin-left: unset;
  }
}

.good-rating-count, .ok-rating-count, .bad-rating-count {
  display: inline-block;
  min-width: 1em;
  text-align: center;
  padding: 0 0.25em;
  border: 1px solid #DDDDDD;
  border-radius: 10px;
}
.good-rating-count {
  background-color: rgba(51, 155, 51, 0.1);
  border-color: rgba(51, 155, 51, 0.3);
  color: #1E971E;
  color: rgba(51, 155, 51, 1);
}
.ok-rating-count {
  background-color: rgba(155, 155, 0, 0.1);
  border-color: rgba(155, 155, 0, 0.3);
  color: #a80;
  color: rgba(155, 155, 0, 1);
}
.bad-rating-count {
  background-color: rgba(155, 51, 51, 0.1);
  border-color: rgba(155, 51, 51, 0.3);
  color: rgba(155, 51, 51, 1);
}



/* activated by js */
.select-all, .select-none {
  display: none;
}

#help-allowed-elements, #help-allowed-styles {
  column-width: 20em;
}
#help-allowed-elements li, #help-allowed-styles li {
  padding-right: 1em;
}

#by-site-list {
  list-style-type: none;
  padding: 0;  
}
#by-site-list li {
  display: inline;
  vertical-align: middle;
}

/* Edit */
#user_profile {
  width: 100%;
  height: 10em;
}

.preview-button {
  
}
.preview-result {
  display: none;
  background-color: var(--preview-result-background-color);
  padding: 0.5em;
}

.failed-sync {
  background-color: #FCC;
}

.alert {
  font-style: italic;
  background-color: var(--alert-background-color);
  border: none;
  border-left: 6px solid var(--alert-border-color);
  padding: 0.5em;
  color: var(--alert-text-color);
}
.notice, .validation-errors {
  background-color: var(--notice-background-color);
  border: none;
  border-left: 6px solid var(--notice-border-color);
  padding: 0.5em;
  color: var(--notice-text-color);
}
.validation-errors {
  margin: 0.5em 0;
}
.validation-errors > p:first-child {
  margin-top: 0;
}
.validation-errors > p:last-child {
  margin-bottom: 0;
}

#install-stats-chart {
  width: 100%;
  height: 400px;
}
.stats-table {
  border-collapse: collapse;
}
.stats-table th, .stats-table td {
  border: 1px solid gray;
  padding: 0 0.5em;
}
td.numeric, th.numeric {
  text-align: right;
}

.translation_missing {
  outline: dashed red;
}

#edit_user > div {
  margin-bottom: 0.5em;
}
#edit_user > div > label:first-child {
  font-weight: bold;
}

.inline-form {
  display: inline;
}

a.self-link, a.self-link:visited {
  text-decoration: none;
  color: black;
  opacity: 0.2;
}

.indented {
  padding-left: 1em;
}

.external-login {
  padding: 2px 2px 3px 25px;
  border: 1px solid black;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 5px 2px;
}
.external-login-container {
  display: inline-block;
  vertical-align: top;
}
.external-login-container * {
  text-align: center;
  display: block;
}
.external-login-container > *:not(button) {
  font-size: smaller;
}
.external-login-container:not(:last-child) {
  margin-right: 5px;
}
.external-login-container .github-login {
  background-image: url('../images/github-32.png');
}
.external-login-container .gitlab-login {
  background-image: url('../images/gitlab-32.png');
}
.external-login-container .google_oauth2-login {
  background-image: url('../images/google-32.png');
}

/* sign_up, sign_in and password/new */
.centered-sections h2, .centered-sections h3 {
  text-align: center;
}
form.external-login-form {
  position: relative;
  display: table;
  margin: 0 auto;
  padding: 1em;
  background-color: var(--content-background-color);
  border: 1px solid var(--content-border-color);
  border-radius: 5px;
  text-align: center;
}
form.external-login-form .remember-me {
  margin-top: 12px;
}
form.new_user {
  position: relative;
  width: 340px;
  margin: 0 auto;
  padding: 1em;
  background-color: var(--content-background-color);
  border: 1px solid content(--content-border-color);
  border-radius: 5px;
  text-align: start;
}

@media screen and (max-width: 440px) {
  /* sign up */
  form.new_user {
    width: unset;
  }
}

form.new_user label, form.new_user em {
  display: block;
  font-size: small;
}
form.new_user br {
  display: none;
}
form.new_user input[type="text"],
form.new_user input[type="email"],
form.new_user input[type="password"] {
  display: block;
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  margin-top: 0.2em;
  margin-bottom: 0.5em;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-radius: 3px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
form input[type="checkbox"],
input[type="checkbox"] + label,
form input[type="radio"],
input[type="radio"] + label {
  display: inline-block;
  font-size: small;
}
.radio-note {
  font-size: small;
  margin-top: 5px;
}

@media screen and (max-width: 440px) {
  /* show input and label on same line */
  form input[type="checkbox"] + label {
    display: unset;
    word-wrap: break-word;
  }
}

form.new_user input[type="submit"] {
  display: block;
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  margin: 0.5em 0 0 0;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  background-color: #670000;
  background-image: linear-gradient(#990000, #670000);
  border: 0px solid #ddd;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 3px;
  white-space: normal;
}
form.new_user ~ br {
  display: none
}
form.new_user ~ a {
  width: 340px;
  display: block;
  margin: 0 auto 2em;
  font-size: small;
}
form.new_user + a {
  width: 340px;
  display: block;
  margin: 0 auto;
}
.qr-code {
  max-width: 400px;
  background-color: white;
}
@media (prefers-color-scheme: dark) {
  .qr-code {
    border: 5px solid white;
  }
}

.sidebar-search, .home-search {
  position: relative;
  vertical-align: middle;
}
.sidebar-search input[type=search], .home-search input[type=search] {
  padding-inline-end: 20px;
}
.sidebar-search input[type=search] {
  width: 100%;
  margin: 0 0 1em 0;
}
.sidebar-search input[type=submit], .home-search input[type=submit] {
  position: absolute;
  -moz-appearance: none;
  -webkit-appearance: none;
  inset-inline-end: 0;
  top: 0;
  border-color: transparent;
  padding-inline-start: 0;
  padding-inline-end: 6px;
  margin-left: 0;
  margin-right: 0;
  background: none;
  opacity: 0.5;
}

@media screen and (max-width: 680px) {
  /* use default font-size for search input */
  .sidebar-search input[type="search"], .home-search input[type="search"] {
    font-size: unset;
  }
}

figure {
  padding: 5px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15),0 6px 10px 0 rgba(0,0,0,0.15);
  border-radius: 5px;
}
figcaption {
  font-size: smaller;
  text-align: center;
}

.multiform-page:not(:first-child) {
  margin-top: 30px;
}
.multiform-page:not(:last-child) {
  padding-bottom: 30px;
  border-bottom: 1px solid lightgray;
}

summary {
  cursor: pointer;
}

@media screen and (max-width: 400px) {
  .user-list {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}
