body {
    padding: 15px;
    font-family: sans-serif;
    user-select: none;
    font-size: 14px;
    min-width: 450px;
}

#version {
    user-select: text;
}

/* total width */
::-webkit-scrollbar {
    background-color: transparent;
    width: 4px;
}

/* background of the scrollbar except button or resizer */
::-webkit-scrollbar-track {
    background-color: transparent;
}

/* scrollbar itself */
::-webkit-scrollbar-thumb {
    background-color: rgb(100, 100, 100);
    border-radius: 2px;
    border: none;
}

/* set button(top and bottom of the scrollbar) */
::-webkit-scrollbar-button {
    display: none;
}

h1 {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 20px;
}

p {
    margin-bottom: 15px;
}

#submitter {
    background-color: #222;
    float: right;
    width: 100px;
    margin: 15px 0 15px 0;
    border-radius: 6px;
    color: white;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s;
}

#submitter:hover {
    background-color: #aaa;
}

h2 {
    clear: both;
    font-size: 1em;
    font-weight: bold;
}

#format {
    margin-right: 10px;
    margin-bottom: 8px;
    width: 500px;
}

p.hint {
    opacity: .7;
    font-style: italic;
}

#keybindslist {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.keybind-container {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    font-size: 14px;
}

.keybind-name {
    display: inline-block;
    grid-column: 1;
}

.keybind-input {
    cursor: pointer;
    border: 1px solid black;
    border-radius: 3px;
    text-align: center;
    grid-column: 2;
    padding: 2px 5px;
}

.keybind-input:focus {
    border: 1px solid blue;
    color: rgb(0, 0, 255);
}

#autoEnableURLs,
#customSourcePatterns {
    color: black;
    background-color: transparent;
    font-size: 12px;
    border-radius: 3px;
    padding: 2px 5px;
    height: 20px;
    outline: none;
    border: 1px solid black;
    width: 100%;
    height: 150px;
    resize: none;
}

#autoEnableURLs:focus,
#customSourcePatterns:focus {
    border: 1px solid blue;
}

button {
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    cursor: pointer;
    padding: 2px 5px;
}

button:hover {
    color: rgb(0, 0, 255);
    border: 1px solid rgb(0, 0, 255);
}

.option {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.option input {
    position: relative;
}

.option .label {
    position: relative;
    display: inline-block;
    margin-left: 5px;
}

.video-option {
    display: flex;
    padding: 4px 0px;
    width: 100%;
    max-width: 500px;
    align-items: center;
}

.video-option input {
    position: relative;
    margin: 0 5px;
}

.video-option .label {
    position: relative;
    width: 130px;
}

.video-option .range {
    width: 100%;
}

.video-option .number {
    text-align: center;
    width: 50px;
}

#ratebox {
    display: none;
    border-radius: 5px;
    border: 1px solid blue;
    padding: 10px;
    margin-bottom: 20px;
}

#feedbackbox {
    display: none;
    border-radius: 5px;
    border: 1px solid rgb(214, 144, 15);
    padding: 10px;
    margin-bottom: 20px;
}

#updatebox {
    display: none;
    border-radius: 5px;
    border: 1px solid rgb(72, 186, 102);
    padding: 10px;
    margin-bottom: 20px;
}

.option.grid1 {
    display: grid;
    gap: 5px;
    grid-template-columns: 20px 1fr;
    align-items: center;
}

.option.grid1 .label {
    grid-column: 2;
}

.option.grid1 input {
    grid-column: 1;
    text-align: center;
}

.option.grid2 {
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 150px;
    align-items: center;
}

.option.grid2 .label {
    grid-column: 1;
}

.option.grid2 .number {
    grid-column: 2;
    text-align: center;
}

input {
    border: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    padding: 3px 5px;
    outline: none;
    background-color: white;
    font-size: 12px;
}

input[type="range"] {
    padding: 3px 0px;
}

input:focus {
    border: 1px solid blue;
}

.option.grid2 .select {
    grid-column: 2;
}

.select > select {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    padding: 2px 5px;
    outline: none;
    background-color: white;
    font-size: 12px;
}

.select > select:focus {
    border: 1px solid blue;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

input[type="checkbox"]:focus {
    outline: 1px solid blue;
}