odds2odds/style.css at main · bubblobill/odds2odds · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
/*
Telegram theme variables
--tg-theme-text-color
--tg-theme-hint-color
--tg-theme-link-color
--tg-theme-button-color
--tg-theme-button-text-color
--tg-theme-secondary-bg-color
--tg-theme-header-bg-color
--tg-theme-accent-text-color
--tg-theme-section-bg-color
--tg-theme-section-header-text-color
--tg-theme-section-separator-color
--tg-theme-subtitle-text-color
--tg-theme-destructive-text-color
*/
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding:0;
}
:root{
    --tg-theme-accent-text-color: #168acd;
    --tg-color-scheme: light;
    --tg-theme-bg-color: #ffffff;
    --tg-theme-button-color: #40a7e3;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-destructive-text-color: #d14e4e;
    --tg-theme-header-bg-color: #ffffff;
    --tg-theme-hint-color: #999999;
    --tg-theme-link-color: #168acd;
    --tg-theme-secondary-bg-color: #f1f1f1;
    --tg-theme-section-bg-color: #ffffff;
    --tg-theme-section-header-text-color: #168acd;
    --tg-theme-subtitle-text-color: #999999;
    --tg-theme-text-color: #000000;
    --tg-viewport-height: 576px;
    --tg-viewport-stable-height: 576px;


    --light-alt-text: black;
    --dark-alt-text-calc:
        color-mix(in srgb, var( --tg-theme-destructive-text-color) 21%,
        color-mix(in srgb, var(--tg-theme-bg-color) 41%, var( --tg-theme-accent-text-color)));
    --dark-alt-text: var(--dark-alt-text-calc, cornsilk);
    --light-grey: gainsboro;
    --dark-dark-grey: darkslategrey;
    --dark-grey: var(--tg-theme-subtitle-text-color, lightslategrey);
    --light-alt-link: royalblue;
        --link-mix-dark: color-mix(in srgb, var(--tg-theme-link-color, #168acd) 80%, #000);
    --link-darker: var(--link-mix-dark, steelblue);
    --light-alt-secondary-bg: color-mix(in srgb, royalblue 10%, white);
    --light-alt-bg: color-mix(in srgb, royalblue 50%, white);
    --light-alt-btn-bg: indigo;

    --button-h: 3rem;
    --button-w: calc(var(--button-h) * 2 / 3);
    font-size: calc(min(7vw, 28px));
    font-family: sans-serif;
    color-scheme: var(--tg-color-scheme);
}
body {
    background-color: var(--tg-theme-bg-color, var(--light-alt-bg));
color: var(--tg-theme-text-color, var(--light-alt-text));
}
input[type=number].grey{
    --color: rgba(0,0,0,0.5);
    box-shadow: inset 0 0 1rem var(--tg-theme-hint-color, var(--color));
    color: var(--tg-theme-hint-color, var(--color));
}
input[type=number].invalid{
    color: var(--tg-theme-destructive-text-color);
}
.flex-container{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}
.grid-container{
    display: grid;
    grid-template-areas:
        "usOdds . reset"
        "decOdds . reset"
        "slider slider slider";
    grid-column-gap: 0.3rem;
    grid-row-gap: 0.6rem;
    align-items:  center;
}
.grid-container div{display: flex;}
label {
    display: inline-block;
    margin-left: 0.3rem;
    margin-right: 0.6rem;
    overflow-y: hidden;
}
.flag {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: var(--button-w);
}

.viewport-container {
    background-color: var(--tg-theme-secondary-bg-color, var(--light-alt-secondary-bg));
    padding: 1rem;
    border-radius: 0 0 1rem 1rem;
    border-color: var(--link-darker);
    border-width: 0 1px 3px 1px;
    border-style: solid;
    border-top: none;
    box-shadow: 0 1rem 2rem var(--tg-theme-subtitle-text-color, #999999);
    top: 0;
    left: 50%;
    transform:translateX(-50%);
    padding-top: 1rem auto 0 auto;
    position: absolute;
    transition: height .2s ease;
    width: 100%;
    max-width: 600px;
}
#usOdds {grid-area: usOdds;}
#decOdds {grid-area: decOdds;}
#slider {grid-area: slider;}

#clear {
    background-color: var(--tg-theme-destructive-text-color, #d14e4e);
color: var(--dark-alt-text);
    -webkit-text-fill-color: var(--tg-theme-bg-color);
    -webkit-text-stroke-width: 1px;
    grid-area: reset;
    border: 1px solid var(--link-darker);
    border-radius: 0.6ch;
    cursor: pointer;
    font-size: 180%;
    line-height: 1.8rem;
    text-align: center;
    height: 100%;
    width: calc(0.8 * var(--button-w));
}

#clear:after{
    content: "";
    box-shadow: inset 0 0 0.31rem var(--light-alt-secondary-bg);
    position: absolute;
    left:12px;
    top: 12px;

}
input[type="number"] {
    width: 7ch;
    padding: 0.5ch 0.8ch;
    border-radius: 0.7ch;
    font-size: 180%;
    text-align: left;
    height: calc(0.8 * var(--button-h));
    border: 1px solid var(--tg-theme-link-color, var(--light-alt-text));
    background-color: var(--tg-theme-bg-color, var(--light-alt-bg));
    color: var(--tg-theme-text-color, var(--light-alt-text));
}
*:focus { box-shadow:0 0 1rem 3px var(--tg-theme-link-color, var(light-alt-link));}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    background: var(--tg-theme-button-color, var(--light-alt-link));
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNTAgNTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyR3JhZGllbnQ0IiB4Mj0iODAiIHkxPSIyNTAiIHkyPSIyMzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBzcHJlYWRNZXRob2Q9InJlcGVhdCI+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNiYmIiIG9mZnNldD0iMCIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjY2JjYmNiIiBvZmZzZXQ9Ii4xMiIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjYjBiMGIwIiBvZmZzZXQ9Ii4zNCIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjYmRiZGJkIiBvZmZzZXQ9Ii41NiIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjY2FjYWNhIiBvZmZzZXQ9Ii43OCIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjYmJiIiBvZmZzZXQ9IjEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhckdyYWRpZW50OCIgeDI9IjIwMCIgeTE9IjI1MCIgeTI9IjI4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHNwcmVhZE1ldGhvZD0icmVwZWF0Ij4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2JiYiIgc3RvcC1vcGFjaXR5PSIuNDUiIG9mZnNldD0iMCIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjY2JjYmNiIiBzdG9wLW9wYWNpdHk9Ii40OSIgb2Zmc2V0PSIuMTIiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2Q0ZDRkNCIgc3RvcC1vcGFjaXR5PSIuNTQiIG9mZnNldD0iLjM0Ii8+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNiZGJkYmQiIHN0b3Atb3BhY2l0eT0iLjU5IiBvZmZzZXQ9Ii41NiIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjY2FjYWNhIiBzdG9wLW9wYWNpdHk9Ii41OSIgb2Zmc2V0PSIuNzgiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2JiYiIgc3RvcC1vcGFjaXR5PSIuNjQiIG9mZnNldD0iMSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcFBhdGgxNiI+CiAgICAgIDxwYXRoIGQ9Im0yMjIgMjA2aC0xOTRsOTctMTY4em0wIDg4aC0xOTRsOTcgMTY4eiIgZGlzcGxheT0ibm9uZSIgc3Ryb2tlPSIjY2NjIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3R5bGU9Ii1pbmtzY2FwZS1zdHJva2U6aGFpcmxpbmUiLz4KICAgICAgPHBhdGggY2xhc3M9InBvd2VyY2xpcCIgZD0ibS01LTVoMjYwdjUxMGgtMjYwem0yMjcgMjExLTk3LTE2OC05NyAxNjh6bTAgODhoLTE5NGw5NyAxNjh6IiBzdHJva2U9IiNjY2MiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHlsZT0iLWlua3NjYXBlLXN0cm9rZTpoYWlybGluZSIvPgogICAgPC9jbGlwUGF0aD4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcFBhdGgxNyI+CiAgICAgIDxwYXRoIGQ9Im0yMjIgMjA2aC0xOTRsOTctMTY4em0wIDg4aC0xOTRsOTcgMTY4eiIgZGlzcGxheT0ibm9uZSIgc3Ryb2tlPSIjY2NjIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3R5bGU9Ii1pbmtzY2FwZS1zdHJva2U6aGFpcmxpbmUiLz4KICAgICAgPHBhdGggY2xhc3M9InBvd2VyY2xpcCIgZD0ibS01LTVoMjYwdjUxMGgtMjYwem0yMjcgMjExLTk3LTE2OC05NyAxNjh6bTAgODhoLTE5NGw5NyAxNjh6IiBzdHJva2U9IiNjY2MiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHlsZT0iLWlua3NjYXBlLXN0cm9rZTpoYWlybGluZSIvPgogICAgPC9jbGlwUGF0aD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsR3JhZGllbnQxOSIgY3g9IjE1MCIgY3k9IjI1MCIgcj0iMTA0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDIuMSAwIC0yNzkpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3ByZWFkTWV0aG9kPSJyZWZsZWN0Ij4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2EyYTJhMiIgb2Zmc2V0PSIwIi8+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZmRmZGYiIG9mZnNldD0iLjMiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzgzODM4MyIgb2Zmc2V0PSIuNjUiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2ZiZmJmYiIgb2Zmc2V0PSIxIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiPgogICAgPHBhdGggZD0ibTAgMGgxNTBjNTUgMCAxMDAgNDUgMTAwIDEwMHYzMDBjMCA1NS00NSAxMDAtMTAwIDEwMGgtMTUweiIgY2xpcC1wYXRoPSJ1cmwoI2NsaXBQYXRoMTcpIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50NCkiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3R5bGU9Ii1pbmtzY2FwZS1zdHJva2U6aGFpcmxpbmUiLz4KICAgIDxwYXRoIGQ9Im0wIDBoMTUwYzU1IDAgMTAwIDQ1IDEwMCAxMDB2MzAwYzAgNTUtNDUgMTAwLTEwMCAxMDBoLTE1MHoiIGNsaXAtcGF0aD0idXJsKCNjbGlwUGF0aDE2KSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudDgpIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0eWxlPSItaW5rc2NhcGUtc3Ryb2tlOmhhaXJsaW5lIi8+CiAgICA8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUpIiBkPSJtMjQ3IDIwNmgtMTk0bDk3LTE2OHptMCA4OGgtMTk0bDk3IDE2OHoiIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NjYyIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHlsZT0iLWlua3NjYXBlLXN0cm9rZTpoYWlybGluZSIvPgogICAgPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1KSIgZD0ibTI0NyAyMDZoLTE5NGw5Ny0xNjh6bTAgODhoLTE5NGw5NyAxNjh6IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjcmFkaWFsR3JhZGllbnQxOSkiIHN0cm9rZS13aWR0aD0iOCIvPgogIDwvZz4KPC9zdmc+Cg==");
    background-size: 100% 100%;
    width: 1.2rem;
    border-left: 1px solid #BBB;
    opacity: 0.7;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:active::-webkit-inner-spin-button{
    opacity: 1;
}
#slider {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise var(--light-grey) in Chrome */
    margin: 1.3rem 0 0.4rem 0;
}
#slider::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px var(--light-alt-text), 0px 0px 1px var(--dark-grey);
    box-sizing: content-box;
    border: 1px solid var(--light-alt-text);
    background: var(--light-alt-secondary-bg);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNTAgNTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyR3JhZGllbnQ0IiB4Mj0iODAiIHkxPSIyNTAiIHkyPSIyMzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBzcHJlYWRNZXRob2Q9InJlcGVhdCI+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNiYmIiIG9mZnNldD0iMCIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjY2JjYmNiIiBvZmZzZXQ9Ii4xMiIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjYjBiMGIwIiBvZmZzZXQ9Ii4zNCIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjYmRiZGJkIiBvZmZzZXQ9Ii41NiIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjY2FjYWNhIiBvZmZzZXQ9Ii43OCIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjYmJiIiBvZmZzZXQ9IjEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhckdyYWRpZW50OCIgeDI9IjIwMCIgeTE9IjI1MCIgeTI9IjI4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHNwcmVhZE1ldGhvZD0icmVwZWF0Ij4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2JiYiIgc3RvcC1vcGFjaXR5PSIuNDUiIG9mZnNldD0iMCIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjY2JjYmNiIiBzdG9wLW9wYWNpdHk9Ii40OSIgb2Zmc2V0PSIuMTIiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2Q0ZDRkNCIgc3RvcC1vcGFjaXR5PSIuNTQiIG9mZnNldD0iLjM0Ii8+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNiZGJkYmQiIHN0b3Atb3BhY2l0eT0iLjU5IiBvZmZzZXQ9Ii41NiIvPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjY2FjYWNhIiBzdG9wLW9wYWNpdHk9Ii41OSIgb2Zmc2V0PSIuNzgiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2JiYiIgc3RvcC1vcGFjaXR5PSIuNjQiIG9mZnNldD0iMSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcFBhdGgxNiI+CiAgICAgIDxwYXRoIGQ9Im0yMjIgMjA2aC0xOTRsOTctMTY4em0wIDg4aC0xOTRsOTcgMTY4eiIgZGlzcGxheT0ibm9uZSIgc3Ryb2tlPSIjY2NjIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3R5bGU9Ii1pbmtzY2FwZS1zdHJva2U6aGFpcmxpbmUiLz4KICAgICAgPHBhdGggY2xhc3M9InBvd2VyY2xpcCIgZD0ibS01LTVoMjYwdjUxMGgtMjYwem0yMjcgMjExLTk3LTE2OC05NyAxNjh6bTAgODhoLTE5NGw5NyAxNjh6IiBzdHJva2U9IiNjY2MiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHlsZT0iLWlua3NjYXBlLXN0cm9rZTpoYWlybGluZSIvPgogICAgPC9jbGlwUGF0aD4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcFBhdGgxNyI+CiAgICAgIDxwYXRoIGQ9Im0yMjIgMjA2aC0xOTRsOTctMTY4em0wIDg4aC0xOTRsOTcgMTY4eiIgZGlzcGxheT0ibm9uZSIgc3Ryb2tlPSIjY2NjIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3R5bGU9Ii1pbmtzY2FwZS1zdHJva2U6aGFpcmxpbmUiLz4KICAgICAgPHBhdGggY2xhc3M9InBvd2VyY2xpcCIgZD0ibS01LTVoMjYwdjUxMGgtMjYwem0yMjcgMjExLTk3LTE2OC05NyAxNjh6bTAgODhoLTE5NGw5NyAxNjh6IiBzdHJva2U9IiNjY2MiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHlsZT0iLWlua3NjYXBlLXN0cm9rZTpoYWlybGluZSIvPgogICAgPC9jbGlwUGF0aD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsR3JhZGllbnQxOSIgY3g9IjE1MCIgY3k9IjI1MCIgcj0iMTA0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDIuMSAwIC0yNzkpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3ByZWFkTWV0aG9kPSJyZWZsZWN0Ij4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2EyYTJhMiIgb2Zmc2V0PSIwIi8+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNkZmRmZGYiIG9mZnNldD0iLjMiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzgzODM4MyIgb2Zmc2V0PSIuNjUiLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2ZiZmJmYiIgb2Zmc2V0PSIxIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiPgogICAgPHBhdGggZD0ibTAgMGgxNTBjNTUgMCAxMDAgNDUgMTAwIDEwMHYzMDBjMCA1NS00NSAxMDAtMTAwIDEwMGgtMTUweiIgY2xpcC1wYXRoPSJ1cmwoI2NsaXBQYXRoMTcpIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50NCkiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3R5bGU9Ii1pbmtzY2FwZS1zdHJva2U6aGFpcmxpbmUiLz4KICAgIDxwYXRoIGQ9Im0wIDBoMTUwYzU1IDAgMTAwIDQ1IDEwMCAxMDB2MzAwYzAgNTUtNDUgMTAwLTEwMCAxMDBoLTE1MHoiIGNsaXAtcGF0aD0idXJsKCNjbGlwUGF0aDE2KSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudDgpIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0eWxlPSItaW5rc2NhcGUtc3Ryb2tlOmhhaXJsaW5lIi8+CiAgICA8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUpIiBkPSJtMjQ3IDIwNmgtMTk0bDk3LTE2OHptMCA4OGgtMTk0bDk3IDE2OHoiIGRpc3BsYXk9Im5vbmUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NjYyIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHlsZT0iLWlua3NjYXBlLXN0cm9rZTpoYWlybGluZSIvPgogICAgPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1KSIgZD0ibTI0NyAyMDZoLTE5NGw5Ny0xNjh6bTAgODhoLTE5NGw5NyAxNjh6IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjcmFkaWFsR3JhZGllbnQxOSkiIHN0cm9rZS13aWR0aD0iOCIvPgogIDwvZz4KPC9zdmc+Cg==");
    transform: rotate(90deg);
    height: 2rem;
    width: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -0.8rem;
}
#slider:focus::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px 0.05rem var(--light-alt-text), 0px 0px 0px 0.212rem var(--light-alt-bg),0px 0px 0px 0.27rem var(--light-alt-text);
    border: none;
    outline: none;
    -webkit-appearance: none;
}
#slider:focus::-webkit-slider-runnable-track{
    outline: 1px solid var(--tg-theme-link-color, var(--light-alt-text));
border-radius: 0.2rem;
    box-shadow: 1px 1px 1px var(--light-alt-text), inset 0px 0px 0px 3px var(--tg-theme-bg-color), 0px 0px 0px 1px var(--dark-grey), 0 0 0.3rem 2px var(--tg-theme-link-color, var(--light-alt-bg)), inset 0 0 0 6px var(--tg-theme-link-color, var(--light-alt-bg));
}
#slider::-webkit-slider-runnable-track {
    background: var(--link-darker);
    border-radius: 0.2rem;
    box-shadow: 1px 1px 1px var(--light-alt-text), inset 0px 0px 0px 3px var(--tg-theme-bg-color), 0px 0px 0px 1px var(--dark-grey);
    cursor: pointer;
    height: 0.4rem;
    width: 100%;
}
@media (prefers-color-scheme: light) {