From fa2c36b6ed6432ad1147dd0378760f5a23033ab5 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 29 Jun 2022 14:11:21 -0700 Subject: [PATCH] added lessc, reimplemented mica caching --- package.json | 4 +- src/renderer/main/mica.js | 30 +- src/renderer/style.css | 18144 +++++++++++++++++ src/renderer/style.less | 12 + src/renderer/views/components/fullscreen.ejs | 10 +- src/renderer/views/main.ejs | 4 +- 6 files changed, 18184 insertions(+), 20 deletions(-) create mode 100644 src/renderer/style.css diff --git a/package.json b/package.json index 5ca5c12b..af970515 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "homepage": "https://cider.sh/", "buildResources": "resources", "scripts": { - "build": "tsc", + "build": "tsc && yarn compile-less", + "compile-less": "lessc ./src/renderer/style.less ./src/renderer/style.css", "watch": "tsc --watch", "start": "run-script-os", "start:win32": "yarn build && set ELECTRON_ENABLE_LOGGING=true && electron ./build/index.js --enable-accelerated-mjpeg-decode --enable-accelerated-video --disable-gpu-driver-bug-workarounds --ignore-gpu-blacklist --enable-native-gpu-memory-buffers", @@ -83,6 +84,7 @@ "electron-builder": "^23.0.3", "electron-builder-notarize-pkg": "^1.2.0", "electron-webpack": "^2.8.2", + "less": "^4.1.3", "musickit-typescript": "^1.2.4", "typescript": "^4.6.4", "vue-devtools": "^5.1.4", diff --git a/src/renderer/main/mica.js b/src/renderer/main/mica.js index cbd346bc..052a1c24 100644 --- a/src/renderer/main/mica.js +++ b/src/renderer/main/mica.js @@ -21,22 +21,22 @@ async function spawnMica() { let lastScreenWidth; let lastScreenHeight; - let regen = true; - let imgSrc = await ipcRenderer.sendSync("get-wallpaper", { + let imgSrc = ""; + let micaCache = await CiderCache.getCache("mica-cache"); + if (!micaCache) { + micaCache = { + path: "", + data: "", + }; + } + if (micaCache.path == imgSrc.path) { + imgSrc = micaCache; + }else{ + imgSrc = await ipcRenderer.sendSync("get-wallpaper", { blurAmount: 256 - }); - -// let micaCache = await CiderCache.getCache("mica-cache"); -// if (!micaCache) { -// micaCache = { -// path: "", -// data: "", -// }; -// } -// if (micaCache.path == imgSrc.path) { -// regen = false; -// imgSrc = micaCache; -// } + }); + CiderCache.putCache("mica-cache", imgSrc); + } let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); let img = new Image(); diff --git a/src/renderer/style.css b/src/renderer/style.css new file mode 100644 index 00000000..6b649983 --- /dev/null +++ b/src/renderer/style.css @@ -0,0 +1,18144 @@ +@charset "UTF-8"; +@import url("assets/fonts/Pretendard/pretendardvariable.css"); +@import url("less/codicon.css"); +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6ofjtqLzI2JPCgQBnw7HFQoggM.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQaioq1A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F62fjtqLzI2JPCgQBnw7HFowA.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQMisq1A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQei0q1A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans JP'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQQi8q1A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v27/Pby6FmXiEBPT4ITbgNA5CgmOsn7u.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v27/Pby7FmXiEBPT4ITbgNA5CgmOelzI7g.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v27/PbykFmXiEBPT4ITbgNA5Cgm20A.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v27/Pby7FmXiEBPT4ITbgNA5CgmOIl3I7g.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v27/Pby7FmXiEBPT4ITbgNA5CgmOalvI7g.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanskr/v27/Pby7FmXiEBPT4ITbgNA5CgmOUlnI7g.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFlOG829Oofr2wohFbTp9i9WyEJ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFkOG829Oofr2wohFbTp9i9kwMvDQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nF7OG829Oofr2wohFbTp9iFOQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFkOG829Oofr2wohFbTp9i9ywIvDQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFkOG829Oofr2wohFbTp9i9gwQvDQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanstc/v26/-nFkOG829Oofr2wohFbTp9i9uwYvDQ.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v26/k3kJo84MPvpLmixcA63oeALZTYKL.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v26/k3kIo84MPvpLmixcA63oeALZhaCt9w.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v26/k3kXo84MPvpLmixcA63oeALhLw.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v26/k3kIo84MPvpLmixcA63oeALZ3aGt9w.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v26/k3kIo84MPvpLmixcA63oeALZlaet9w.otf) format('opentype'); +} +@font-face { + font-family: 'Noto Sans SC'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url(https://fonts.gstatic.com/s/notosanssc/v26/k3kIo84MPvpLmixcA63oeALZraWt9w.otf) format('opentype'); +} +:root { + --baseColor: #1e1e1e; + --baseColorMix: rgba(30, 30, 30, 0.5); + --sidebarColor: #2e2e2e; + --sidebarColorMix: rgba(46, 46, 46, 0.5); + --ciderColor: #ff2654; + --appOpacity: 0.15; + --transparencyRate: 50%; + --macOSChromeColor: rgba(14, 14, 14, 0.32); +} +/*! + * BootstrapVue Custom CSS (https://bootstrap-vue.org) + */ +.bv-no-focus-ring:focus { + outline: none; +} +@media (max-width: 575.98px) { + .bv-d-xs-down-none { + display: none !important; + } +} +@media (max-width: 767.98px) { + .bv-d-sm-down-none { + display: none !important; + } +} +@media (max-width: 991.98px) { + .bv-d-md-down-none { + display: none !important; + } +} +@media (max-width: 1199.98px) { + .bv-d-lg-down-none { + display: none !important; + } +} +.bv-d-xl-down-none { + display: none !important; +} +.form-control.focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} +.form-control.focus.is-valid { + border-color: #28a745; + box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); +} +.form-control.focus.is-invalid { + border-color: #dc3545; + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); +} +.b-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + flex-shrink: 0; + width: 2.5rem; + height: 2.5rem; + font-size: inherit; + font-weight: 400; + line-height: 1; + max-width: 100%; + max-height: auto; + text-align: center; + overflow: visible; + position: relative; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +.b-avatar:focus { + outline: 0; +} +.b-avatar.btn, +.b-avatar[href] { + padding: 0; + border: 0; +} +.b-avatar.btn .b-avatar-img img, +.b-avatar[href] .b-avatar-img img { + transition: -webkit-transform 0.15s ease-in-out; + transition: transform 0.15s ease-in-out; + transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; +} +.b-avatar.btn:not(:disabled):not(.disabled), +.b-avatar[href]:not(:disabled):not(.disabled) { + cursor: pointer; +} +.b-avatar.btn:not(:disabled):not(.disabled):hover .b-avatar-img img, +.b-avatar[href]:not(:disabled):not(.disabled):hover .b-avatar-img img { + -webkit-transform: scale(1.15); + transform: scale(1.15); +} +.b-avatar.disabled, +.b-avatar:disabled, +.b-avatar[disabled] { + opacity: 0.65; + pointer-events: none; +} +.b-avatar .b-avatar-custom, +.b-avatar .b-avatar-text, +.b-avatar .b-avatar-img { + border-radius: inherit; + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + -webkit-mask-image: radial-gradient(white, black); + mask-image: radial-gradient(white, black); +} +.b-avatar .b-avatar-text { + text-transform: uppercase; + white-space: nowrap; +} +.b-avatar[href] { + text-decoration: none; +} +.b-avatar > .b-icon { + width: 60%; + height: auto; + max-width: 100%; +} +.b-avatar .b-avatar-img img { + width: 100%; + height: 100%; + max-height: auto; + border-radius: inherit; + -o-object-fit: cover; + object-fit: cover; +} +.b-avatar .b-avatar-badge { + position: absolute; + min-height: 1.5em; + min-width: 1.5em; + padding: 0.25em; + line-height: 1; + border-radius: 10em; + font-size: 70%; + font-weight: 700; + z-index: 1; +} +.b-avatar-sm { + width: 1.5rem; + height: 1.5rem; +} +.b-avatar-sm .b-avatar-text { + font-size: calc(0.6rem); +} +.b-avatar-sm .b-avatar-badge { + font-size: calc(0.42rem); +} +.b-avatar-lg { + width: 3.5rem; + height: 3.5rem; +} +.b-avatar-lg .b-avatar-text { + font-size: calc(1.4rem); +} +.b-avatar-lg .b-avatar-badge { + font-size: calc(0.98rem); +} +.b-avatar-group .b-avatar-group-inner { + display: flex; + flex-wrap: wrap; +} +.b-avatar-group .b-avatar { + border: 1px solid #dee2e6; +} +.b-avatar-group a.b-avatar:hover:not(.disabled):not(disabled), +.b-avatar-group .btn.b-avatar:hover:not(.disabled):not(disabled) { + z-index: 1; +} +.b-calendar { + display: inline-flex; +} +.b-calendar .b-calendar-inner { + min-width: 250px; +} +.b-calendar .b-calendar-header, +.b-calendar .b-calendar-nav { + margin-bottom: 0.25rem; +} +.b-calendar .b-calendar-nav .btn { + padding: 0.25rem; +} +.b-calendar output { + padding: 0.25rem; + font-size: 80%; +} +.b-calendar output.readonly { + background-color: #e9ecef; + opacity: 1; +} +.b-calendar .b-calendar-footer { + margin-top: 0.5rem; +} +.b-calendar .b-calendar-grid { + padding: 0; + margin: 0; + overflow: hidden; +} +.b-calendar .b-calendar-grid .row { + flex-wrap: nowrap; +} +.b-calendar .b-calendar-grid-caption { + padding: 0.25rem; +} +.b-calendar .b-calendar-grid-body .col[data-date] .btn { + width: 32px; + height: 32px; + font-size: 14px; + line-height: 1; + margin: 3px auto; + padding: 9px 0; +} +.b-calendar .btn:disabled, +.b-calendar .btn.disabled, +.b-calendar .btn[aria-disabled=true] { + cursor: default; + pointer-events: none; +} +.card-img-left { + border-top-left-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); +} +.card-img-right { + border-top-right-radius: calc(0.25rem - 1px); + border-bottom-right-radius: calc(0.25rem - 1px); +} +.dropdown:not(.dropleft) .dropdown-toggle.dropdown-toggle-no-caret::after { + display: none !important; +} +.dropdown.dropleft .dropdown-toggle.dropdown-toggle-no-caret::before { + display: none !important; +} +.dropdown .dropdown-menu:focus { + outline: none; +} +.b-dropdown-form { + display: inline-block; + padding: 0.25rem 1.5rem; + width: 100%; + clear: both; + font-weight: 400; +} +.b-dropdown-form:focus { + outline: 1px dotted !important; + outline: 5px auto -webkit-focus-ring-color !important; +} +.b-dropdown-form.disabled, +.b-dropdown-form:disabled { + outline: 0 !important; + color: #6c757d; + pointer-events: none; +} +.b-dropdown-text { + display: inline-block; + padding: 0.25rem 1.5rem; + margin-bottom: 0; + width: 100%; + clear: both; + font-weight: lighter; +} +.custom-checkbox.b-custom-control-lg, +.input-group-lg .custom-checkbox { + font-size: 1.25rem; + line-height: 1.5; + padding-left: 1.875rem; +} +.custom-checkbox.b-custom-control-lg .custom-control-label::before, +.input-group-lg .custom-checkbox .custom-control-label::before { + top: 0.3125rem; + left: -1.875rem; + width: 1.25rem; + height: 1.25rem; + border-radius: 0.3rem; +} +.custom-checkbox.b-custom-control-lg .custom-control-label::after, +.input-group-lg .custom-checkbox .custom-control-label::after { + top: 0.3125rem; + left: -1.875rem; + width: 1.25rem; + height: 1.25rem; + background-size: 50% 50%; +} +.custom-checkbox.b-custom-control-sm, +.input-group-sm .custom-checkbox { + font-size: 0.875rem; + line-height: 1.5; + padding-left: 1.3125rem; +} +.custom-checkbox.b-custom-control-sm .custom-control-label::before, +.input-group-sm .custom-checkbox .custom-control-label::before { + top: 0.21875rem; + left: -1.3125rem; + width: 0.875rem; + height: 0.875rem; + border-radius: 0.2rem; +} +.custom-checkbox.b-custom-control-sm .custom-control-label::after, +.input-group-sm .custom-checkbox .custom-control-label::after { + top: 0.21875rem; + left: -1.3125rem; + width: 0.875rem; + height: 0.875rem; + background-size: 50% 50%; +} +.custom-switch.b-custom-control-lg, +.input-group-lg .custom-switch { + padding-left: 2.8125rem; +} +.custom-switch.b-custom-control-lg .custom-control-label, +.input-group-lg .custom-switch .custom-control-label { + font-size: 1.25rem; + line-height: 1.5; +} +.custom-switch.b-custom-control-lg .custom-control-label::before, +.input-group-lg .custom-switch .custom-control-label::before { + top: 0.3125rem; + height: 1.25rem; + left: -2.8125rem; + width: 2.1875rem; + border-radius: 0.625rem; +} +.custom-switch.b-custom-control-lg .custom-control-label::after, +.input-group-lg .custom-switch .custom-control-label::after { + top: calc(0.3125rem + 2px); + left: calc(-2.8125rem + 2px); + width: calc(1.25rem - 4px); + height: calc(1.25rem - 4px); + border-radius: 0.625rem; + background-size: 50% 50%; +} +.custom-switch.b-custom-control-lg .custom-control-input:checked ~ .custom-control-label::after, +.input-group-lg .custom-switch .custom-control-input:checked ~ .custom-control-label::after { + -webkit-transform: translateX(0.9375rem); + transform: translateX(0.9375rem); +} +.custom-switch.b-custom-control-sm, +.input-group-sm .custom-switch { + padding-left: 1.96875rem; +} +.custom-switch.b-custom-control-sm .custom-control-label, +.input-group-sm .custom-switch .custom-control-label { + font-size: 0.875rem; + line-height: 1.5; +} +.custom-switch.b-custom-control-sm .custom-control-label::before, +.input-group-sm .custom-switch .custom-control-label::before { + top: 0.21875rem; + left: -1.96875rem; + width: 1.53125rem; + height: 0.875rem; + border-radius: 0.4375rem; +} +.custom-switch.b-custom-control-sm .custom-control-label::after, +.input-group-sm .custom-switch .custom-control-label::after { + top: calc(0.21875rem + 2px); + left: calc(-1.96875rem + 2px); + width: calc(0.875rem - 4px); + height: calc(0.875rem - 4px); + border-radius: 0.4375rem; + background-size: 50% 50%; +} +.custom-switch.b-custom-control-sm .custom-control-input:checked ~ .custom-control-label::after, +.input-group-sm .custom-switch .custom-control-input:checked ~ .custom-control-label::after { + -webkit-transform: translateX(0.65625rem); + transform: translateX(0.65625rem); +} +.input-group > .input-group-prepend > .btn-group > .btn, +.input-group > .input-group-append:not(:last-child) > .btn-group > .btn, +.input-group > .input-group-append:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group > .input-group-append > .btn-group > .btn, +.input-group > .input-group-prepend:not(:first-child) > .btn-group > .btn, +.input-group > .input-group-prepend:first-child > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.b-form-btn-label-control.form-control { + display: flex; + align-items: stretch; + height: auto; + padding: 0; + background-image: none; +} +.input-group .b-form-btn-label-control.form-control { + padding: 0; +} +[dir=rtl] .b-form-btn-label-control.form-control, +.b-form-btn-label-control.form-control[dir=rtl] { + flex-direction: row-reverse; +} +[dir=rtl] .b-form-btn-label-control.form-control > label, +.b-form-btn-label-control.form-control[dir=rtl] > label { + text-align: right; +} +.b-form-btn-label-control.form-control > .btn { + line-height: 1; + font-size: inherit; + box-shadow: none !important; + border: 0; +} +.b-form-btn-label-control.form-control > .btn:disabled { + pointer-events: none; +} +.b-form-btn-label-control.form-control.is-valid > .btn { + color: #28a745; +} +.b-form-btn-label-control.form-control.is-invalid > .btn { + color: #dc3545; +} +.b-form-btn-label-control.form-control > .dropdown-menu { + padding: 0.5rem; +} +.b-form-btn-label-control.form-control > .form-control { + height: auto; + min-height: calc(calc(1.5em + 0.75rem + 2px) - 2px); + padding-left: 0.25rem; + margin: 0; + border: 0; + outline: 0; + background: transparent; + word-break: break-word; + font-size: inherit; + white-space: normal; + cursor: pointer; +} +.b-form-btn-label-control.form-control > .form-control.form-control-sm { + min-height: calc(calc(1.5em + 0.5rem + 2px) - 2px); +} +.b-form-btn-label-control.form-control > .form-control.form-control-lg { + min-height: calc(calc(1.5em + 1rem + 2px) - 2px); +} +.input-group.input-group-sm .b-form-btn-label-control.form-control > .form-control { + min-height: calc(calc(1.5em + 0.5rem + 2px) - 2px); + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} +.input-group.input-group-lg .b-form-btn-label-control.form-control > .form-control { + min-height: calc(calc(1.5em + 1rem + 2px) - 2px); + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.b-form-btn-label-control.form-control[aria-disabled=true], +.b-form-btn-label-control.form-control[aria-readonly=true] { + background-color: #e9ecef; + opacity: 1; +} +.b-form-btn-label-control.form-control[aria-disabled=true] { + pointer-events: none; +} +.b-form-btn-label-control.form-control[aria-disabled=true] > label { + cursor: default; +} +.b-form-btn-label-control.btn-group > .dropdown-menu { + padding: 0.5rem; +} +.custom-file-label { + white-space: nowrap; + overflow-x: hidden; +} +.b-custom-control-lg.custom-file, +.b-custom-control-lg .custom-file-input, +.b-custom-control-lg .custom-file-label, +.input-group-lg.custom-file, +.input-group-lg .custom-file-input, +.input-group-lg .custom-file-label { + font-size: 1.25rem; + height: calc(1.5em + 1rem + 2px); +} +.b-custom-control-lg .custom-file-label, +.b-custom-control-lg .custom-file-label:after, +.input-group-lg .custom-file-label, +.input-group-lg .custom-file-label:after { + padding: 0.5rem 1rem; + line-height: 1.5; +} +.b-custom-control-lg .custom-file-label, +.input-group-lg .custom-file-label { + border-radius: 0.3rem; +} +.b-custom-control-lg .custom-file-label::after, +.input-group-lg .custom-file-label::after { + font-size: inherit; + height: calc(1.5em + 1rem); + border-radius: 0 0.3rem 0.3rem 0; +} +.b-custom-control-sm.custom-file, +.b-custom-control-sm .custom-file-input, +.b-custom-control-sm .custom-file-label, +.input-group-sm.custom-file, +.input-group-sm .custom-file-input, +.input-group-sm .custom-file-label { + font-size: 0.875rem; + height: calc(1.5em + 0.5rem + 2px); +} +.b-custom-control-sm .custom-file-label, +.b-custom-control-sm .custom-file-label:after, +.input-group-sm .custom-file-label, +.input-group-sm .custom-file-label:after { + padding: 0.25rem 0.5rem; + line-height: 1.5; +} +.b-custom-control-sm .custom-file-label, +.input-group-sm .custom-file-label { + border-radius: 0.2rem; +} +.b-custom-control-sm .custom-file-label::after, +.input-group-sm .custom-file-label::after { + font-size: inherit; + height: calc(1.5em + 0.5rem); + border-radius: 0 0.2rem 0.2rem 0; +} +.was-validated .form-control:invalid, +.was-validated .form-control:valid, +.form-control.is-invalid, +.form-control.is-valid { + background-position: right calc(0.375em + 0.1875rem) center; +} +input[type=color].form-control { + height: calc(1.5em + 0.75rem + 2px); + padding: 0.125rem 0.25rem; +} +input[type=color].form-control.form-control-sm, +.input-group-sm input[type=color].form-control { + height: calc(1.5em + 0.5rem + 2px); + padding: 0.125rem 0.25rem; +} +input[type=color].form-control.form-control-lg, +.input-group-lg input[type=color].form-control { + height: calc(1.5em + 1rem + 2px); + padding: 0.125rem 0.25rem; +} +input[type=color].form-control:disabled { + background-color: #adb5bd; + opacity: 0.65; +} +.input-group > .custom-range { + position: relative; + flex: 1 1 auto; + width: 1%; + margin-bottom: 0; +} +.input-group > .custom-range + .form-control, +.input-group > .custom-range + .form-control-plaintext, +.input-group > .custom-range + .custom-select, +.input-group > .custom-range + .custom-range, +.input-group > .custom-range + .custom-file { + margin-left: -1px; +} +.input-group > .form-control + .custom-range, +.input-group > .form-control-plaintext + .custom-range, +.input-group > .custom-select + .custom-range, +.input-group > .custom-range + .custom-range, +.input-group > .custom-file + .custom-range { + margin-left: -1px; +} +.input-group > .custom-range:focus { + z-index: 3; +} +.input-group > .custom-range:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group > .custom-range:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.input-group > .custom-range { + padding: 0 0.75rem; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + height: calc(1.5em + 0.75rem + 2px); + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .input-group > .custom-range { + transition: none; + } +} +.input-group > .custom-range:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} +.input-group > .custom-range:disabled, +.input-group > .custom-range[readonly] { + background-color: #e9ecef; +} +.input-group-lg > .custom-range { + height: calc(1.5em + 1rem + 2px); + padding: 0 1rem; + border-radius: 0.3rem; +} +.input-group-sm > .custom-range { + height: calc(1.5em + 0.5rem + 2px); + padding: 0 0.5rem; + border-radius: 0.2rem; +} +.was-validated .input-group .custom-range:valid, +.input-group .custom-range.is-valid { + border-color: #28a745; +} +.was-validated .input-group .custom-range:valid:focus, +.input-group .custom-range.is-valid:focus { + border-color: #28a745; + box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); +} +.was-validated .custom-range:valid:focus::-webkit-slider-thumb, +.custom-range.is-valid:focus::-webkit-slider-thumb { + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #9be7ac; +} +.was-validated .custom-range:valid:focus::-moz-range-thumb, +.custom-range.is-valid:focus::-moz-range-thumb { + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #9be7ac; +} +.was-validated .custom-range:valid:focus::-ms-thumb, +.custom-range.is-valid:focus::-ms-thumb { + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #9be7ac; +} +.was-validated .custom-range:valid::-webkit-slider-thumb, +.custom-range.is-valid::-webkit-slider-thumb { + background-color: #28a745; + background-image: none; +} +.was-validated .custom-range:valid::-webkit-slider-thumb:active, +.custom-range.is-valid::-webkit-slider-thumb:active { + background-color: #9be7ac; + background-image: none; +} +.was-validated .custom-range:valid::-webkit-slider-runnable-track, +.custom-range.is-valid::-webkit-slider-runnable-track { + background-color: rgba(40, 167, 69, 0.35); +} +.was-validated .custom-range:valid::-moz-range-thumb, +.custom-range.is-valid::-moz-range-thumb { + background-color: #28a745; + background-image: none; +} +.was-validated .custom-range:valid::-moz-range-thumb:active, +.custom-range.is-valid::-moz-range-thumb:active { + background-color: #9be7ac; + background-image: none; +} +.was-validated .custom-range:valid::-moz-range-track, +.custom-range.is-valid::-moz-range-track { + background: rgba(40, 167, 69, 0.35); +} +.was-validated .custom-range:valid ~ .valid-feedback, +.was-validated .custom-range:valid ~ .valid-tooltip, +.custom-range.is-valid ~ .valid-feedback, +.custom-range.is-valid ~ .valid-tooltip { + display: block; +} +.was-validated .custom-range:valid::-ms-thumb, +.custom-range.is-valid::-ms-thumb { + background-color: #28a745; + background-image: none; +} +.was-validated .custom-range:valid::-ms-thumb:active, +.custom-range.is-valid::-ms-thumb:active { + background-color: #9be7ac; + background-image: none; +} +.was-validated .custom-range:valid::-ms-track-lower, +.custom-range.is-valid::-ms-track-lower { + background: rgba(40, 167, 69, 0.35); +} +.was-validated .custom-range:valid::-ms-track-upper, +.custom-range.is-valid::-ms-track-upper { + background: rgba(40, 167, 69, 0.35); +} +.was-validated .input-group .custom-range:invalid, +.input-group .custom-range.is-invalid { + border-color: #dc3545; +} +.was-validated .input-group .custom-range:invalid:focus, +.input-group .custom-range.is-invalid:focus { + border-color: #dc3545; + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); +} +.was-validated .custom-range:invalid:focus::-webkit-slider-thumb, +.custom-range.is-invalid:focus::-webkit-slider-thumb { + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #f6cdd1; +} +.was-validated .custom-range:invalid:focus::-moz-range-thumb, +.custom-range.is-invalid:focus::-moz-range-thumb { + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #f6cdd1; +} +.was-validated .custom-range:invalid:focus::-ms-thumb, +.custom-range.is-invalid:focus::-ms-thumb { + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #f6cdd1; +} +.was-validated .custom-range:invalid::-webkit-slider-thumb, +.custom-range.is-invalid::-webkit-slider-thumb { + background-color: #dc3545; + background-image: none; +} +.was-validated .custom-range:invalid::-webkit-slider-thumb:active, +.custom-range.is-invalid::-webkit-slider-thumb:active { + background-color: #f6cdd1; + background-image: none; +} +.was-validated .custom-range:invalid::-webkit-slider-runnable-track, +.custom-range.is-invalid::-webkit-slider-runnable-track { + background-color: rgba(220, 53, 69, 0.35); +} +.was-validated .custom-range:invalid::-moz-range-thumb, +.custom-range.is-invalid::-moz-range-thumb { + background-color: #dc3545; + background-image: none; +} +.was-validated .custom-range:invalid::-moz-range-thumb:active, +.custom-range.is-invalid::-moz-range-thumb:active { + background-color: #f6cdd1; + background-image: none; +} +.was-validated .custom-range:invalid::-moz-range-track, +.custom-range.is-invalid::-moz-range-track { + background: rgba(220, 53, 69, 0.35); +} +.was-validated .custom-range:invalid ~ .invalid-feedback, +.was-validated .custom-range:invalid ~ .invalid-tooltip, +.custom-range.is-invalid ~ .invalid-feedback, +.custom-range.is-invalid ~ .invalid-tooltip { + display: block; +} +.was-validated .custom-range:invalid::-ms-thumb, +.custom-range.is-invalid::-ms-thumb { + background-color: #dc3545; + background-image: none; +} +.was-validated .custom-range:invalid::-ms-thumb:active, +.custom-range.is-invalid::-ms-thumb:active { + background-color: #f6cdd1; + background-image: none; +} +.was-validated .custom-range:invalid::-ms-track-lower, +.custom-range.is-invalid::-ms-track-lower { + background: rgba(220, 53, 69, 0.35); +} +.was-validated .custom-range:invalid::-ms-track-upper, +.custom-range.is-invalid::-ms-track-upper { + background: rgba(220, 53, 69, 0.35); +} +.custom-radio.b-custom-control-lg, +.input-group-lg .custom-radio { + font-size: 1.25rem; + line-height: 1.5; + padding-left: 1.875rem; +} +.custom-radio.b-custom-control-lg .custom-control-label::before, +.input-group-lg .custom-radio .custom-control-label::before { + top: 0.3125rem; + left: -1.875rem; + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; +} +.custom-radio.b-custom-control-lg .custom-control-label::after, +.input-group-lg .custom-radio .custom-control-label::after { + top: 0.3125rem; + left: -1.875rem; + width: 1.25rem; + height: 1.25rem; + background: no-repeat 50%/50% 50%; +} +.custom-radio.b-custom-control-sm, +.input-group-sm .custom-radio { + font-size: 0.875rem; + line-height: 1.5; + padding-left: 1.3125rem; +} +.custom-radio.b-custom-control-sm .custom-control-label::before, +.input-group-sm .custom-radio .custom-control-label::before { + top: 0.21875rem; + left: -1.3125rem; + width: 0.875rem; + height: 0.875rem; + border-radius: 50%; +} +.custom-radio.b-custom-control-sm .custom-control-label::after, +.input-group-sm .custom-radio .custom-control-label::after { + top: 0.21875rem; + left: -1.3125rem; + width: 0.875rem; + height: 0.875rem; + background: no-repeat 50%/50% 50%; +} +.b-rating { + text-align: center; +} +.b-rating.d-inline-flex { + width: auto; +} +.b-rating .b-rating-star, +.b-rating .b-rating-value { + padding: 0 0.25em; +} +.b-rating .b-rating-value { + min-width: 2.5em; +} +.b-rating .b-rating-star { + display: inline-flex; + justify-content: center; + outline: 0; +} +.b-rating .b-rating-star .b-rating-icon { + display: inline-flex; + transition: all 0.15s ease-in-out; +} +.b-rating.disabled, +.b-rating:disabled { + background-color: #e9ecef; + color: #6c757d; +} +.b-rating:not(.disabled):not(.readonly) .b-rating-star { + cursor: pointer; +} +.b-rating:not(.disabled):not(.readonly):focus:not(:hover) .b-rating-star.focused .b-rating-icon, +.b-rating:not(.disabled):not(.readonly) .b-rating-star:hover .b-rating-icon { + -webkit-transform: scale(1.5); + transform: scale(1.5); +} +.b-rating[dir=rtl] .b-rating-star-half { + -webkit-transform: scale(-1, 1); + transform: scale(-1, 1); +} +.b-form-spinbutton { + text-align: center; + overflow: hidden; + background-image: none; + padding: 0; +} +[dir=rtl] .b-form-spinbutton:not(.flex-column), +.b-form-spinbutton[dir=rtl]:not(.flex-column) { + flex-direction: row-reverse; +} +.b-form-spinbutton output { + font-size: inherit; + outline: 0; + border: 0; + background-color: transparent; + width: auto; + margin: 0; + padding: 0 0.25rem; +} +.b-form-spinbutton output > div, +.b-form-spinbutton output > bdi { + display: block; + min-width: 2.25em; + height: 1.5em; +} +.b-form-spinbutton.flex-column { + height: auto; + width: auto; +} +.b-form-spinbutton.flex-column output { + margin: 0 0.25rem; + padding: 0.25rem 0; +} +.b-form-spinbutton:not(.d-inline-flex):not(.flex-column) { + output-width: 100%; +} +.b-form-spinbutton.d-inline-flex:not(.flex-column) { + width: auto; +} +.b-form-spinbutton .btn { + line-height: 1; + box-shadow: none !important; +} +.b-form-spinbutton .btn:disabled { + pointer-events: none; +} +.b-form-spinbutton .btn:hover:not(:disabled) > div > .b-icon { + -webkit-transform: scale(1.25); + transform: scale(1.25); +} +.b-form-spinbutton.disabled, +.b-form-spinbutton.readonly { + background-color: #e9ecef; +} +.b-form-spinbutton.disabled { + pointer-events: none; +} +.b-form-tags .b-form-tags-list { + margin-top: -0.25rem; +} +.b-form-tags .b-form-tags-list .b-from-tags-field, +.b-form-tags .b-form-tags-list .b-form-tag { + margin-top: 0.25rem; +} +.b-form-tags.focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} +.b-form-tags.focus.is-valid { + border-color: #28a745; + box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); +} +.b-form-tags.focus.is-invalid { + border-color: #dc3545; + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); +} +.b-form-tags.disabled { + background-color: #e9ecef; +} +.b-form-tag { + font-size: 75%; + font-weight: normal; + line-height: 1.5; + margin-right: 0.25rem; +} +.b-form-tag.disabled { + opacity: 0.75; +} +.b-form-tag > button.b-form-tag-remove { + color: inherit; + font-size: 125%; + line-height: 1; + float: none; + margin-left: 0.25rem; +} +.form-control-sm .b-form-tag { + line-height: 1.5; +} +.form-control-lg .b-form-tag { + line-height: 1.5; +} +.media-aside { + display: flex; + margin-right: 1rem; +} +.media-aside-right { + margin-right: 0; + margin-left: 1rem; +} +.modal-backdrop { + opacity: 0.5; +} +.b-pagination-pills .page-item .page-link { + border-radius: 50rem !important; + margin-left: 0.25rem; + line-height: 1; +} +.b-pagination-pills .page-item:first-child .page-link { + margin-left: 0; +} +.popover.b-popover { + display: block; + opacity: 1; + outline: 0; +} +.popover.b-popover.fade:not(.show) { + opacity: 0; +} +.popover.b-popover.show { + opacity: 1; +} +.b-popover-primary.popover { + background-color: #cce5ff; + border-color: #b8daff; +} +.b-popover-primary.bs-popover-top > .arrow::before, +.b-popover-primary.bs-popover-auto[x-placement^=top] > .arrow::before { + border-top-color: #b8daff; +} +.b-popover-primary.bs-popover-top > .arrow::after, +.b-popover-primary.bs-popover-auto[x-placement^=top] > .arrow::after { + border-top-color: #cce5ff; +} +.b-popover-primary.bs-popover-right > .arrow::before, +.b-popover-primary.bs-popover-auto[x-placement^=right] > .arrow::before { + border-right-color: #b8daff; +} +.b-popover-primary.bs-popover-right > .arrow::after, +.b-popover-primary.bs-popover-auto[x-placement^=right] > .arrow::after { + border-right-color: #cce5ff; +} +.b-popover-primary.bs-popover-bottom > .arrow::before, +.b-popover-primary.bs-popover-auto[x-placement^=bottom] > .arrow::before { + border-bottom-color: #b8daff; +} +.b-popover-primary.bs-popover-bottom > .arrow::after, +.b-popover-primary.bs-popover-auto[x-placement^=bottom] > .arrow::after { + border-bottom-color: #bdddff; +} +.b-popover-primary.bs-popover-bottom .popover-header::before, +.b-popover-primary.bs-popover-auto[x-placement^=bottom] .popover-header::before { + border-bottom-color: #bdddff; +} +.b-popover-primary.bs-popover-left > .arrow::before, +.b-popover-primary.bs-popover-auto[x-placement^=left] > .arrow::before { + border-left-color: #b8daff; +} +.b-popover-primary.bs-popover-left > .arrow::after, +.b-popover-primary.bs-popover-auto[x-placement^=left] > .arrow::after { + border-left-color: #cce5ff; +} +.b-popover-primary .popover-header { + color: #212529; + background-color: #bdddff; + border-bottom-color: #a3d0ff; +} +.b-popover-primary .popover-body { + color: #004085; +} +.b-popover-secondary.popover { + background-color: #e2e3e5; + border-color: #d6d8db; +} +.b-popover-secondary.bs-popover-top > .arrow::before, +.b-popover-secondary.bs-popover-auto[x-placement^=top] > .arrow::before { + border-top-color: #d6d8db; +} +.b-popover-secondary.bs-popover-top > .arrow::after, +.b-popover-secondary.bs-popover-auto[x-placement^=top] > .arrow::after { + border-top-color: #e2e3e5; +} +.b-popover-secondary.bs-popover-right > .arrow::before, +.b-popover-secondary.bs-popover-auto[x-placement^=right] > .arrow::before { + border-right-color: #d6d8db; +} +.b-popover-secondary.bs-popover-right > .arrow::after, +.b-popover-secondary.bs-popover-auto[x-placement^=right] > .arrow::after { + border-right-color: #e2e3e5; +} +.b-popover-secondary.bs-popover-bottom > .arrow::before, +.b-popover-secondary.bs-popover-auto[x-placement^=bottom] > .arrow::before { + border-bottom-color: #d6d8db; +} +.b-popover-secondary.bs-popover-bottom > .arrow::after, +.b-popover-secondary.bs-popover-auto[x-placement^=bottom] > .arrow::after { + border-bottom-color: #dadbde; +} +.b-popover-secondary.bs-popover-bottom .popover-header::before, +.b-popover-secondary.bs-popover-auto[x-placement^=bottom] .popover-header::before { + border-bottom-color: #dadbde; +} +.b-popover-secondary.bs-popover-left > .arrow::before, +.b-popover-secondary.bs-popover-auto[x-placement^=left] > .arrow::before { + border-left-color: #d6d8db; +} +.b-popover-secondary.bs-popover-left > .arrow::after, +.b-popover-secondary.bs-popover-auto[x-placement^=left] > .arrow::after { + border-left-color: #e2e3e5; +} +.b-popover-secondary .popover-header { + color: #212529; + background-color: #dadbde; + border-bottom-color: #ccced2; +} +.b-popover-secondary .popover-body { + color: #383d41; +} +.b-popover-success.popover { + background-color: #d4edda; + border-color: #c3e6cb; +} +.b-popover-success.bs-popover-top > .arrow::before, +.b-popover-success.bs-popover-auto[x-placement^=top] > .arrow::before { + border-top-color: #c3e6cb; +} +.b-popover-success.bs-popover-top > .arrow::after, +.b-popover-success.bs-popover-auto[x-placement^=top] > .arrow::after { + border-top-color: #d4edda; +} +.b-popover-success.bs-popover-right > .arrow::before, +.b-popover-success.bs-popover-auto[x-placement^=right] > .arrow::before { + border-right-color: #c3e6cb; +} +.b-popover-success.bs-popover-right > .arrow::after, +.b-popover-success.bs-popover-auto[x-placement^=right] > .arrow::after { + border-right-color: #d4edda; +} +.b-popover-success.bs-popover-bottom > .arrow::before, +.b-popover-success.bs-popover-auto[x-placement^=bottom] > .arrow::before { + border-bottom-color: #c3e6cb; +} +.b-popover-success.bs-popover-bottom > .arrow::after, +.b-popover-success.bs-popover-auto[x-placement^=bottom] > .arrow::after { + border-bottom-color: #c9e8d1; +} +.b-popover-success.bs-popover-bottom .popover-header::before, +.b-popover-success.bs-popover-auto[x-placement^=bottom] .popover-header::before { + border-bottom-color: #c9e8d1; +} +.b-popover-success.bs-popover-left > .arrow::before, +.b-popover-success.bs-popover-auto[x-placement^=left] > .arrow::before { + border-left-color: #c3e6cb; +} +.b-popover-success.bs-popover-left > .arrow::after, +.b-popover-success.bs-popover-auto[x-placement^=left] > .arrow::after { + border-left-color: #d4edda; +} +.b-popover-success .popover-header { + color: #212529; + background-color: #c9e8d1; + border-bottom-color: #b7e1c1; +} +.b-popover-success .popover-body { + color: #155724; +} +.b-popover-info.popover { + background-color: #d1ecf1; + border-color: #bee5eb; +} +.b-popover-info.bs-popover-top > .arrow::before, +.b-popover-info.bs-popover-auto[x-placement^=top] > .arrow::before { + border-top-color: #bee5eb; +} +.b-popover-info.bs-popover-top > .arrow::after, +.b-popover-info.bs-popover-auto[x-placement^=top] > .arrow::after { + border-top-color: #d1ecf1; +} +.b-popover-info.bs-popover-right > .arrow::before, +.b-popover-info.bs-popover-auto[x-placement^=right] > .arrow::before { + border-right-color: #bee5eb; +} +.b-popover-info.bs-popover-right > .arrow::after, +.b-popover-info.bs-popover-auto[x-placement^=right] > .arrow::after { + border-right-color: #d1ecf1; +} +.b-popover-info.bs-popover-bottom > .arrow::before, +.b-popover-info.bs-popover-auto[x-placement^=bottom] > .arrow::before { + border-bottom-color: #bee5eb; +} +.b-popover-info.bs-popover-bottom > .arrow::after, +.b-popover-info.bs-popover-auto[x-placement^=bottom] > .arrow::after { + border-bottom-color: #c5e7ed; +} +.b-popover-info.bs-popover-bottom .popover-header::before, +.b-popover-info.bs-popover-auto[x-placement^=bottom] .popover-header::before { + border-bottom-color: #c5e7ed; +} +.b-popover-info.bs-popover-left > .arrow::before, +.b-popover-info.bs-popover-auto[x-placement^=left] > .arrow::before { + border-left-color: #bee5eb; +} +.b-popover-info.bs-popover-left > .arrow::after, +.b-popover-info.bs-popover-auto[x-placement^=left] > .arrow::after { + border-left-color: #d1ecf1; +} +.b-popover-info .popover-header { + color: #212529; + background-color: #c5e7ed; + border-bottom-color: #b2dfe7; +} +.b-popover-info .popover-body { + color: #0c5460; +} +.b-popover-warning.popover { + background-color: #fff3cd; + border-color: #ffeeba; +} +.b-popover-warning.bs-popover-top > .arrow::before, +.b-popover-warning.bs-popover-auto[x-placement^=top] > .arrow::before { + border-top-color: #ffeeba; +} +.b-popover-warning.bs-popover-top > .arrow::after, +.b-popover-warning.bs-popover-auto[x-placement^=top] > .arrow::after { + border-top-color: #fff3cd; +} +.b-popover-warning.bs-popover-right > .arrow::before, +.b-popover-warning.bs-popover-auto[x-placement^=right] > .arrow::before { + border-right-color: #ffeeba; +} +.b-popover-warning.bs-popover-right > .arrow::after, +.b-popover-warning.bs-popover-auto[x-placement^=right] > .arrow::after { + border-right-color: #fff3cd; +} +.b-popover-warning.bs-popover-bottom > .arrow::before, +.b-popover-warning.bs-popover-auto[x-placement^=bottom] > .arrow::before { + border-bottom-color: #ffeeba; +} +.b-popover-warning.bs-popover-bottom > .arrow::after, +.b-popover-warning.bs-popover-auto[x-placement^=bottom] > .arrow::after { + border-bottom-color: #ffefbe; +} +.b-popover-warning.bs-popover-bottom .popover-header::before, +.b-popover-warning.bs-popover-auto[x-placement^=bottom] .popover-header::before { + border-bottom-color: #ffefbe; +} +.b-popover-warning.bs-popover-left > .arrow::before, +.b-popover-warning.bs-popover-auto[x-placement^=left] > .arrow::before { + border-left-color: #ffeeba; +} +.b-popover-warning.bs-popover-left > .arrow::after, +.b-popover-warning.bs-popover-auto[x-placement^=left] > .arrow::after { + border-left-color: #fff3cd; +} +.b-popover-warning .popover-header { + color: #212529; + background-color: #ffefbe; + border-bottom-color: #ffe9a4; +} +.b-popover-warning .popover-body { + color: #856404; +} +.b-popover-danger.popover { + background-color: #f8d7da; + border-color: #f5c6cb; +} +.b-popover-danger.bs-popover-top > .arrow::before, +.b-popover-danger.bs-popover-auto[x-placement^=top] > .arrow::before { + border-top-color: #f5c6cb; +} +.b-popover-danger.bs-popover-top > .arrow::after, +.b-popover-danger.bs-popover-auto[x-placement^=top] > .arrow::after { + border-top-color: #f8d7da; +} +.b-popover-danger.bs-popover-right > .arrow::before, +.b-popover-danger.bs-popover-auto[x-placement^=right] > .arrow::before { + border-right-color: #f5c6cb; +} +.b-popover-danger.bs-popover-right > .arrow::after, +.b-popover-danger.bs-popover-auto[x-placement^=right] > .arrow::after { + border-right-color: #f8d7da; +} +.b-popover-danger.bs-popover-bottom > .arrow::before, +.b-popover-danger.bs-popover-auto[x-placement^=bottom] > .arrow::before { + border-bottom-color: #f5c6cb; +} +.b-popover-danger.bs-popover-bottom > .arrow::after, +.b-popover-danger.bs-popover-auto[x-placement^=bottom] > .arrow::after { + border-bottom-color: #f6cace; +} +.b-popover-danger.bs-popover-bottom .popover-header::before, +.b-popover-danger.bs-popover-auto[x-placement^=bottom] .popover-header::before { + border-bottom-color: #f6cace; +} +.b-popover-danger.bs-popover-left > .arrow::before, +.b-popover-danger.bs-popover-auto[x-placement^=left] > .arrow::before { + border-left-color: #f5c6cb; +} +.b-popover-danger.bs-popover-left > .arrow::after, +.b-popover-danger.bs-popover-auto[x-placement^=left] > .arrow::after { + border-left-color: #f8d7da; +} +.b-popover-danger .popover-header { + color: #212529; + background-color: #f6cace; + border-bottom-color: #f2b4ba; +} +.b-popover-danger .popover-body { + color: #721c24; +} +.b-popover-light.popover { + background-color: #fefefe; + border-color: #fdfdfe; +} +.b-popover-light.bs-popover-top > .arrow::before, +.b-popover-light.bs-popover-auto[x-placement^=top] > .arrow::before { + border-top-color: #fdfdfe; +} +.b-popover-light.bs-popover-top > .arrow::after, +.b-popover-light.bs-popover-auto[x-placement^=top] > .arrow::after { + border-top-color: #fefefe; +} +.b-popover-light.bs-popover-right > .arrow::before, +.b-popover-light.bs-popover-auto[x-placement^=right] > .arrow::before { + border-right-color: #fdfdfe; +} +.b-popover-light.bs-popover-right > .arrow::after, +.b-popover-light.bs-popover-auto[x-placement^=right] > .arrow::after { + border-right-color: #fefefe; +} +.b-popover-light.bs-popover-bottom > .arrow::before, +.b-popover-light.bs-popover-auto[x-placement^=bottom] > .arrow::before { + border-bottom-color: #fdfdfe; +} +.b-popover-light.bs-popover-bottom > .arrow::after, +.b-popover-light.bs-popover-auto[x-placement^=bottom] > .arrow::after { + border-bottom-color: #f6f6f6; +} +.b-popover-light.bs-popover-bottom .popover-header::before, +.b-popover-light.bs-popover-auto[x-placement^=bottom] .popover-header::before { + border-bottom-color: #f6f6f6; +} +.b-popover-light.bs-popover-left > .arrow::before, +.b-popover-light.bs-popover-auto[x-placement^=left] > .arrow::before { + border-left-color: #fdfdfe; +} +.b-popover-light.bs-popover-left > .arrow::after, +.b-popover-light.bs-popover-auto[x-placement^=left] > .arrow::after { + border-left-color: #fefefe; +} +.b-popover-light .popover-header { + color: #212529; + background-color: #f6f6f6; + border-bottom-color: #eaeaea; +} +.b-popover-light .popover-body { + color: #818182; +} +.b-popover-dark.popover { + background-color: #d6d8d9; + border-color: #c6c8ca; +} +.b-popover-dark.bs-popover-top > .arrow::before, +.b-popover-dark.bs-popover-auto[x-placement^=top] > .arrow::before { + border-top-color: #c6c8ca; +} +.b-popover-dark.bs-popover-top > .arrow::after, +.b-popover-dark.bs-popover-auto[x-placement^=top] > .arrow::after { + border-top-color: #d6d8d9; +} +.b-popover-dark.bs-popover-right > .arrow::before, +.b-popover-dark.bs-popover-auto[x-placement^=right] > .arrow::before { + border-right-color: #c6c8ca; +} +.b-popover-dark.bs-popover-right > .arrow::after, +.b-popover-dark.bs-popover-auto[x-placement^=right] > .arrow::after { + border-right-color: #d6d8d9; +} +.b-popover-dark.bs-popover-bottom > .arrow::before, +.b-popover-dark.bs-popover-auto[x-placement^=bottom] > .arrow::before { + border-bottom-color: #c6c8ca; +} +.b-popover-dark.bs-popover-bottom > .arrow::after, +.b-popover-dark.bs-popover-auto[x-placement^=bottom] > .arrow::after { + border-bottom-color: #ced0d2; +} +.b-popover-dark.bs-popover-bottom .popover-header::before, +.b-popover-dark.bs-popover-auto[x-placement^=bottom] .popover-header::before { + border-bottom-color: #ced0d2; +} +.b-popover-dark.bs-popover-left > .arrow::before, +.b-popover-dark.bs-popover-auto[x-placement^=left] > .arrow::before { + border-left-color: #c6c8ca; +} +.b-popover-dark.bs-popover-left > .arrow::after, +.b-popover-dark.bs-popover-auto[x-placement^=left] > .arrow::after { + border-left-color: #d6d8d9; +} +.b-popover-dark .popover-header { + color: #212529; + background-color: #ced0d2; + border-bottom-color: #c1c4c5; +} +.b-popover-dark .popover-body { + color: #1b1e21; +} +.b-sidebar-outer { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 0; + overflow: visible; + z-index: calc(1030 + 5); +} +.b-sidebar-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: -1; + width: 100vw; + height: 100vh; + opacity: 0.6; +} +.b-sidebar { + display: flex; + flex-direction: column; + position: fixed; + top: 0; + width: 320px; + max-width: 100%; + height: 100vh; + max-height: 100%; + margin: 0; + outline: 0; + -webkit-transform: translateX(0); + transform: translateX(0); +} +.b-sidebar.slide { + transition: -webkit-transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .b-sidebar.slide { + transition: none; + } +} +.b-sidebar:not(.b-sidebar-right) { + left: 0; + right: auto; +} +.b-sidebar:not(.b-sidebar-right).slide:not(.show) { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); +} +.b-sidebar:not(.b-sidebar-right) > .b-sidebar-header .close { + margin-left: auto; +} +.b-sidebar.b-sidebar-right { + left: auto; + right: 0; +} +.b-sidebar.b-sidebar-right.slide:not(.show) { + -webkit-transform: translateX(100%); + transform: translateX(100%); +} +.b-sidebar.b-sidebar-right > .b-sidebar-header .close { + margin-right: auto; +} +.b-sidebar > .b-sidebar-header { + font-size: 1.5rem; + padding: 0.5rem 1rem; + display: flex; + flex-direction: row; + flex-grow: 0; + align-items: center; +} +[dir=rtl] .b-sidebar > .b-sidebar-header { + flex-direction: row-reverse; +} +.b-sidebar > .b-sidebar-header .close { + float: none; + font-size: 1.5rem; +} +.b-sidebar > .b-sidebar-body { + flex-grow: 1; + height: 100%; + overflow-y: auto; +} +.b-sidebar > .b-sidebar-footer { + flex-grow: 0; +} +.b-skeleton-wrapper { + cursor: wait; +} +.b-skeleton { + position: relative; + overflow: hidden; + background-color: rgba(0, 0, 0, 0.12); + cursor: wait; + -webkit-mask-image: radial-gradient(white, black); + mask-image: radial-gradient(white, black); +} +.b-skeleton::before { + content: " "; +} +.b-skeleton-text { + height: 1rem; + margin-bottom: 0.25rem; + border-radius: 0.25rem; +} +.b-skeleton-button { + width: 75px; + padding: 0.375rem 0.75rem; + font-size: 1rem; + line-height: 1.5; + border-radius: 0.25rem; +} +.b-skeleton-avatar { + width: 2.5em; + height: 2.5em; + border-radius: 50%; +} +.b-skeleton-input { + height: calc(1.5em + 0.75rem + 2px); + padding: 0.375rem 0.75rem; + line-height: 1.5; + border: #ced4da solid 1px; + border-radius: 0.25rem; +} +.b-skeleton-icon-wrapper svg { + color: rgba(0, 0, 0, 0.12); +} +.b-skeleton-img { + height: 100%; + width: 100%; +} +.b-skeleton-animate-wave::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 0; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + -webkit-animation: b-skeleton-animate-wave 1.75s linear infinite; + animation: b-skeleton-animate-wave 1.75s linear infinite; +} +@media (prefers-reduced-motion: reduce) { + .b-skeleton-animate-wave::after { + background: none; + -webkit-animation: none; + animation: none; + } +} +@-webkit-keyframes b-skeleton-animate-wave { + from { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } + to { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } +} +@keyframes b-skeleton-animate-wave { + from { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } + to { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } +} +.b-skeleton-animate-fade { + -webkit-animation: b-skeleton-animate-fade 0.875s ease-in-out alternate infinite; + animation: b-skeleton-animate-fade 0.875s ease-in-out alternate infinite; +} +@media (prefers-reduced-motion: reduce) { + .b-skeleton-animate-fade { + -webkit-animation: none; + animation: none; + } +} +@-webkit-keyframes b-skeleton-animate-fade { + 0% { + opacity: 1; + } + 100% { + opacity: 0.4; + } +} +@keyframes b-skeleton-animate-fade { + 0% { + opacity: 1; + } + 100% { + opacity: 0.4; + } +} +.b-skeleton-animate-throb { + -webkit-animation: b-skeleton-animate-throb 0.875s ease-in alternate infinite; + animation: b-skeleton-animate-throb 0.875s ease-in alternate infinite; +} +@media (prefers-reduced-motion: reduce) { + .b-skeleton-animate-throb { + -webkit-animation: none; + animation: none; + } +} +@-webkit-keyframes b-skeleton-animate-throb { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.975); + transform: scale(0.975); + } +} +@keyframes b-skeleton-animate-throb { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.975); + transform: scale(0.975); + } +} +.table.b-table.b-table-fixed { + table-layout: fixed; +} +.table.b-table.b-table-no-border-collapse { + border-collapse: separate; + border-spacing: 0; +} +.table.b-table[aria-busy=true] { + opacity: 0.55; +} +.table.b-table > tbody > tr.b-table-details > td { + border-top: none !important; +} +.table.b-table > caption { + caption-side: bottom; +} +.table.b-table.b-table-caption-top > caption { + caption-side: top !important; +} +.table.b-table > tbody > .table-active, +.table.b-table > tbody > .table-active > th, +.table.b-table > tbody > .table-active > td { + background-color: rgba(0, 0, 0, 0.075); +} +.table.b-table.table-hover > tbody > tr.table-active:hover td, +.table.b-table.table-hover > tbody > tr.table-active:hover th { + color: #212529; + background-image: linear-gradient(rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.075)); + background-repeat: no-repeat; +} +.table.b-table > tbody > .bg-active, +.table.b-table > tbody > .bg-active > th, +.table.b-table > tbody > .bg-active > td { + background-color: rgba(255, 255, 255, 0.075) !important; +} +.table.b-table.table-hover.table-dark > tbody > tr.bg-active:hover td, +.table.b-table.table-hover.table-dark > tbody > tr.bg-active:hover th { + color: #fff; + background-image: linear-gradient(rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.075)); + background-repeat: no-repeat; +} +.b-table-sticky-header, +.table-responsive, +[class*=table-responsive-] { + margin-bottom: 1rem; +} +.b-table-sticky-header > .table, +.table-responsive > .table, +[class*=table-responsive-] > .table { + margin-bottom: 0; +} +.b-table-sticky-header { + overflow-y: auto; + max-height: 300px; +} +@media print { + .b-table-sticky-header { + overflow-y: visible !important; + max-height: none !important; + } +} +@supports ((position: -webkit-sticky) or (position: sticky)) { + .b-table-sticky-header > .table.b-table > thead > tr > th { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 2; + } + .b-table-sticky-header > .table.b-table > thead > tr > .b-table-sticky-column, + .b-table-sticky-header > .table.b-table > tbody > tr > .b-table-sticky-column, + .b-table-sticky-header > .table.b-table > tfoot > tr > .b-table-sticky-column, + .table-responsive > .table.b-table > thead > tr > .b-table-sticky-column, + .table-responsive > .table.b-table > tbody > tr > .b-table-sticky-column, + .table-responsive > .table.b-table > tfoot > tr > .b-table-sticky-column, + [class*=table-responsive-] > .table.b-table > thead > tr > .b-table-sticky-column, + [class*=table-responsive-] > .table.b-table > tbody > tr > .b-table-sticky-column, + [class*=table-responsive-] > .table.b-table > tfoot > tr > .b-table-sticky-column { + position: -webkit-sticky; + position: sticky; + left: 0; + } + .b-table-sticky-header > .table.b-table > thead > tr > .b-table-sticky-column, + .table-responsive > .table.b-table > thead > tr > .b-table-sticky-column, + [class*=table-responsive-] > .table.b-table > thead > tr > .b-table-sticky-column { + z-index: 5; + } + .b-table-sticky-header > .table.b-table > tbody > tr > .b-table-sticky-column, + .b-table-sticky-header > .table.b-table > tfoot > tr > .b-table-sticky-column, + .table-responsive > .table.b-table > tbody > tr > .b-table-sticky-column, + .table-responsive > .table.b-table > tfoot > tr > .b-table-sticky-column, + [class*=table-responsive-] > .table.b-table > tbody > tr > .b-table-sticky-column, + [class*=table-responsive-] > .table.b-table > tfoot > tr > .b-table-sticky-column { + z-index: 2; + } + .table.b-table > thead > tr > .table-b-table-default, + .table.b-table > tbody > tr > .table-b-table-default, + .table.b-table > tfoot > tr > .table-b-table-default { + color: #212529; + background-color: #fff; + } + .table.b-table.table-dark > thead > tr > .bg-b-table-default, + .table.b-table.table-dark > tbody > tr > .bg-b-table-default, + .table.b-table.table-dark > tfoot > tr > .bg-b-table-default { + color: #fff; + background-color: #343a40; + } + .table.b-table.table-striped > tbody > tr:nth-of-type(odd) > .table-b-table-default { + background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); + background-repeat: no-repeat; + } + .table.b-table.table-striped.table-dark > tbody > tr:nth-of-type(odd) > .bg-b-table-default { + background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)); + background-repeat: no-repeat; + } + .table.b-table.table-hover > tbody > tr:hover > .table-b-table-default { + color: #212529; + background-image: linear-gradient(rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.075)); + background-repeat: no-repeat; + } + .table.b-table.table-hover.table-dark > tbody > tr:hover > .bg-b-table-default { + color: #fff; + background-image: linear-gradient(rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.075)); + background-repeat: no-repeat; + } +} +.table.b-table > thead > tr > [aria-sort], +.table.b-table > tfoot > tr > [aria-sort] { + cursor: pointer; + background-image: none; + background-repeat: no-repeat; + background-size: 0.65em 1em; +} +.table.b-table > thead > tr > [aria-sort]:not(.b-table-sort-icon-left), +.table.b-table > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) { + background-position: right calc(0.75rem / 2) center; + padding-right: calc(0.75rem + 0.65em); +} +.table.b-table > thead > tr > [aria-sort].b-table-sort-icon-left, +.table.b-table > tfoot > tr > [aria-sort].b-table-sort-icon-left { + background-position: left calc(0.75rem / 2) center; + padding-left: calc(0.75rem + 0.65em); +} +.table.b-table > thead > tr > [aria-sort=none], +.table.b-table > tfoot > tr > [aria-sort=none] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); +} +.table.b-table > thead > tr > [aria-sort=ascending], +.table.b-table > tfoot > tr > [aria-sort=ascending] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); +} +.table.b-table > thead > tr > [aria-sort=descending], +.table.b-table > tfoot > tr > [aria-sort=descending] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); +} +.table.b-table.table-dark > thead > tr > [aria-sort=none], +.table.b-table.table-dark > tfoot > tr > [aria-sort=none], +.table.b-table > .thead-dark > tr > [aria-sort=none] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); +} +.table.b-table.table-dark > thead > tr > [aria-sort=ascending], +.table.b-table.table-dark > tfoot > tr > [aria-sort=ascending], +.table.b-table > .thead-dark > tr > [aria-sort=ascending] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); +} +.table.b-table.table-dark > thead > tr > [aria-sort=descending], +.table.b-table.table-dark > tfoot > tr > [aria-sort=descending], +.table.b-table > .thead-dark > tr > [aria-sort=descending] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); +} +.table.b-table > thead > tr > .table-dark[aria-sort=none], +.table.b-table > tfoot > tr > .table-dark[aria-sort=none] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); +} +.table.b-table > thead > tr > .table-dark[aria-sort=ascending], +.table.b-table > tfoot > tr > .table-dark[aria-sort=ascending] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); +} +.table.b-table > thead > tr > .table-dark[aria-sort=descending], +.table.b-table > tfoot > tr > .table-dark[aria-sort=descending] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"); +} +.table.b-table.table-sm > thead > tr > [aria-sort]:not(.b-table-sort-icon-left), +.table.b-table.table-sm > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) { + background-position: right calc(0.3rem / 2) center; + padding-right: calc(0.3rem + 0.65em); +} +.table.b-table.table-sm > thead > tr > [aria-sort].b-table-sort-icon-left, +.table.b-table.table-sm > tfoot > tr > [aria-sort].b-table-sort-icon-left { + background-position: left calc(0.3rem / 2) center; + padding-left: calc(0.3rem + 0.65em); +} +.table.b-table.b-table-selectable:not(.b-table-selectable-no-click) > tbody > tr { + cursor: pointer; +} +.table.b-table.b-table-selectable:not(.b-table-selectable-no-click).b-table-selecting.b-table-select-range > tbody > tr { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +@media (max-width: 575.98px) { + .table.b-table.b-table-stacked-sm { + display: block; + width: 100%; + } + .table.b-table.b-table-stacked-sm > caption, + .table.b-table.b-table-stacked-sm > tbody, + .table.b-table.b-table-stacked-sm > tbody > tr, + .table.b-table.b-table-stacked-sm > tbody > tr > td, + .table.b-table.b-table-stacked-sm > tbody > tr > th { + display: block; + } + .table.b-table.b-table-stacked-sm > thead, + .table.b-table.b-table-stacked-sm > tfoot { + display: none; + } + .table.b-table.b-table-stacked-sm > thead > tr.b-table-top-row, + .table.b-table.b-table-stacked-sm > thead > tr.b-table-bottom-row, + .table.b-table.b-table-stacked-sm > tfoot > tr.b-table-top-row, + .table.b-table.b-table-stacked-sm > tfoot > tr.b-table-bottom-row { + display: none; + } + .table.b-table.b-table-stacked-sm > caption { + caption-side: top !important; + } + .table.b-table.b-table-stacked-sm > tbody > tr > [data-label]::before { + content: attr(data-label); + width: 40%; + float: left; + text-align: right; + overflow-wrap: break-word; + font-weight: bold; + font-style: normal; + padding: 0 calc(1rem / 2) 0 0; + margin: 0; + } + .table.b-table.b-table-stacked-sm > tbody > tr > [data-label]::after { + display: block; + clear: both; + content: ""; + } + .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] > div { + display: inline-block; + width: calc(100% - 40%); + padding: 0 0 0 calc(1rem / 2); + margin: 0; + } + .table.b-table.b-table-stacked-sm > tbody > tr.top-row, + .table.b-table.b-table-stacked-sm > tbody > tr.bottom-row { + display: none; + } + .table.b-table.b-table-stacked-sm > tbody > tr > :first-child { + border-top-width: 3px; + } + .table.b-table.b-table-stacked-sm > tbody > tr > [rowspan] + td, + .table.b-table.b-table-stacked-sm > tbody > tr > [rowspan] + th { + border-top-width: 3px; + } +} +@media (max-width: 767.98px) { + .table.b-table.b-table-stacked-md { + display: block; + width: 100%; + } + .table.b-table.b-table-stacked-md > caption, + .table.b-table.b-table-stacked-md > tbody, + .table.b-table.b-table-stacked-md > tbody > tr, + .table.b-table.b-table-stacked-md > tbody > tr > td, + .table.b-table.b-table-stacked-md > tbody > tr > th { + display: block; + } + .table.b-table.b-table-stacked-md > thead, + .table.b-table.b-table-stacked-md > tfoot { + display: none; + } + .table.b-table.b-table-stacked-md > thead > tr.b-table-top-row, + .table.b-table.b-table-stacked-md > thead > tr.b-table-bottom-row, + .table.b-table.b-table-stacked-md > tfoot > tr.b-table-top-row, + .table.b-table.b-table-stacked-md > tfoot > tr.b-table-bottom-row { + display: none; + } + .table.b-table.b-table-stacked-md > caption { + caption-side: top !important; + } + .table.b-table.b-table-stacked-md > tbody > tr > [data-label]::before { + content: attr(data-label); + width: 40%; + float: left; + text-align: right; + overflow-wrap: break-word; + font-weight: bold; + font-style: normal; + padding: 0 calc(1rem / 2) 0 0; + margin: 0; + } + .table.b-table.b-table-stacked-md > tbody > tr > [data-label]::after { + display: block; + clear: both; + content: ""; + } + .table.b-table.b-table-stacked-md > tbody > tr > [data-label] > div { + display: inline-block; + width: calc(100% - 40%); + padding: 0 0 0 calc(1rem / 2); + margin: 0; + } + .table.b-table.b-table-stacked-md > tbody > tr.top-row, + .table.b-table.b-table-stacked-md > tbody > tr.bottom-row { + display: none; + } + .table.b-table.b-table-stacked-md > tbody > tr > :first-child { + border-top-width: 3px; + } + .table.b-table.b-table-stacked-md > tbody > tr > [rowspan] + td, + .table.b-table.b-table-stacked-md > tbody > tr > [rowspan] + th { + border-top-width: 3px; + } +} +@media (max-width: 991.98px) { + .table.b-table.b-table-stacked-lg { + display: block; + width: 100%; + } + .table.b-table.b-table-stacked-lg > caption, + .table.b-table.b-table-stacked-lg > tbody, + .table.b-table.b-table-stacked-lg > tbody > tr, + .table.b-table.b-table-stacked-lg > tbody > tr > td, + .table.b-table.b-table-stacked-lg > tbody > tr > th { + display: block; + } + .table.b-table.b-table-stacked-lg > thead, + .table.b-table.b-table-stacked-lg > tfoot { + display: none; + } + .table.b-table.b-table-stacked-lg > thead > tr.b-table-top-row, + .table.b-table.b-table-stacked-lg > thead > tr.b-table-bottom-row, + .table.b-table.b-table-stacked-lg > tfoot > tr.b-table-top-row, + .table.b-table.b-table-stacked-lg > tfoot > tr.b-table-bottom-row { + display: none; + } + .table.b-table.b-table-stacked-lg > caption { + caption-side: top !important; + } + .table.b-table.b-table-stacked-lg > tbody > tr > [data-label]::before { + content: attr(data-label); + width: 40%; + float: left; + text-align: right; + overflow-wrap: break-word; + font-weight: bold; + font-style: normal; + padding: 0 calc(1rem / 2) 0 0; + margin: 0; + } + .table.b-table.b-table-stacked-lg > tbody > tr > [data-label]::after { + display: block; + clear: both; + content: ""; + } + .table.b-table.b-table-stacked-lg > tbody > tr > [data-label] > div { + display: inline-block; + width: calc(100% - 40%); + padding: 0 0 0 calc(1rem / 2); + margin: 0; + } + .table.b-table.b-table-stacked-lg > tbody > tr.top-row, + .table.b-table.b-table-stacked-lg > tbody > tr.bottom-row { + display: none; + } + .table.b-table.b-table-stacked-lg > tbody > tr > :first-child { + border-top-width: 3px; + } + .table.b-table.b-table-stacked-lg > tbody > tr > [rowspan] + td, + .table.b-table.b-table-stacked-lg > tbody > tr > [rowspan] + th { + border-top-width: 3px; + } +} +@media (max-width: 1199.98px) { + .table.b-table.b-table-stacked-xl { + display: block; + width: 100%; + } + .table.b-table.b-table-stacked-xl > caption, + .table.b-table.b-table-stacked-xl > tbody, + .table.b-table.b-table-stacked-xl > tbody > tr, + .table.b-table.b-table-stacked-xl > tbody > tr > td, + .table.b-table.b-table-stacked-xl > tbody > tr > th { + display: block; + } + .table.b-table.b-table-stacked-xl > thead, + .table.b-table.b-table-stacked-xl > tfoot { + display: none; + } + .table.b-table.b-table-stacked-xl > thead > tr.b-table-top-row, + .table.b-table.b-table-stacked-xl > thead > tr.b-table-bottom-row, + .table.b-table.b-table-stacked-xl > tfoot > tr.b-table-top-row, + .table.b-table.b-table-stacked-xl > tfoot > tr.b-table-bottom-row { + display: none; + } + .table.b-table.b-table-stacked-xl > caption { + caption-side: top !important; + } + .table.b-table.b-table-stacked-xl > tbody > tr > [data-label]::before { + content: attr(data-label); + width: 40%; + float: left; + text-align: right; + overflow-wrap: break-word; + font-weight: bold; + font-style: normal; + padding: 0 calc(1rem / 2) 0 0; + margin: 0; + } + .table.b-table.b-table-stacked-xl > tbody > tr > [data-label]::after { + display: block; + clear: both; + content: ""; + } + .table.b-table.b-table-stacked-xl > tbody > tr > [data-label] > div { + display: inline-block; + width: calc(100% - 40%); + padding: 0 0 0 calc(1rem / 2); + margin: 0; + } + .table.b-table.b-table-stacked-xl > tbody > tr.top-row, + .table.b-table.b-table-stacked-xl > tbody > tr.bottom-row { + display: none; + } + .table.b-table.b-table-stacked-xl > tbody > tr > :first-child { + border-top-width: 3px; + } + .table.b-table.b-table-stacked-xl > tbody > tr > [rowspan] + td, + .table.b-table.b-table-stacked-xl > tbody > tr > [rowspan] + th { + border-top-width: 3px; + } +} +.table.b-table.b-table-stacked { + display: block; + width: 100%; +} +.table.b-table.b-table-stacked > caption, +.table.b-table.b-table-stacked > tbody, +.table.b-table.b-table-stacked > tbody > tr, +.table.b-table.b-table-stacked > tbody > tr > td, +.table.b-table.b-table-stacked > tbody > tr > th { + display: block; +} +.table.b-table.b-table-stacked > thead, +.table.b-table.b-table-stacked > tfoot { + display: none; +} +.table.b-table.b-table-stacked > thead > tr.b-table-top-row, +.table.b-table.b-table-stacked > thead > tr.b-table-bottom-row, +.table.b-table.b-table-stacked > tfoot > tr.b-table-top-row, +.table.b-table.b-table-stacked > tfoot > tr.b-table-bottom-row { + display: none; +} +.table.b-table.b-table-stacked > caption { + caption-side: top !important; +} +.table.b-table.b-table-stacked > tbody > tr > [data-label]::before { + content: attr(data-label); + width: 40%; + float: left; + text-align: right; + overflow-wrap: break-word; + font-weight: bold; + font-style: normal; + padding: 0 calc(1rem / 2) 0 0; + margin: 0; +} +.table.b-table.b-table-stacked > tbody > tr > [data-label]::after { + display: block; + clear: both; + content: ""; +} +.table.b-table.b-table-stacked > tbody > tr > [data-label] > div { + display: inline-block; + width: calc(100% - 40%); + padding: 0 0 0 calc(1rem / 2); + margin: 0; +} +.table.b-table.b-table-stacked > tbody > tr.top-row, +.table.b-table.b-table-stacked > tbody > tr.bottom-row { + display: none; +} +.table.b-table.b-table-stacked > tbody > tr > :first-child { + border-top-width: 3px; +} +.table.b-table.b-table-stacked > tbody > tr > [rowspan] + td, +.table.b-table.b-table-stacked > tbody > tr > [rowspan] + th { + border-top-width: 3px; +} +.b-time { + min-width: 150px; +} +.b-time[aria-disabled=true] output, +.b-time[aria-readonly=true] output, +.b-time output.disabled { + background-color: #e9ecef; + opacity: 1; +} +.b-time[aria-disabled=true] output { + pointer-events: none; +} +[dir=rtl] .b-time > .d-flex:not(.flex-column) { + flex-direction: row-reverse; +} +.b-time .b-time-header { + margin-bottom: 0.5rem; +} +.b-time .b-time-header output { + padding: 0.25rem; + font-size: 80%; +} +.b-time .b-time-footer { + margin-top: 0.5rem; +} +.b-time .b-time-ampm { + margin-left: 0.5rem; +} +.b-toast { + display: block; + position: relative; + max-width: 350px; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + background-clip: padding-box; + z-index: 1; + border-radius: 0.25rem; +} +.b-toast .toast { + background-color: rgba(255, 255, 255, 0.85); +} +.b-toast:not(:last-child) { + margin-bottom: 0.75rem; +} +.b-toast.b-toast-solid .toast { + background-color: white; +} +.b-toast .toast { + opacity: 1; +} +.b-toast .toast.fade:not(.show) { + opacity: 0; +} +.b-toast .toast .toast-body { + display: block; +} +.b-toast-primary .toast { + background-color: rgba(230, 242, 255, 0.85); + border-color: rgba(184, 218, 255, 0.85); + color: #004085; +} +.b-toast-primary .toast .toast-header { + color: #004085; + background-color: rgba(204, 229, 255, 0.85); + border-bottom-color: rgba(184, 218, 255, 0.85); +} +.b-toast-primary.b-toast-solid .toast { + background-color: #e6f2ff; +} +.b-toast-secondary .toast { + background-color: rgba(239, 240, 241, 0.85); + border-color: rgba(214, 216, 219, 0.85); + color: #383d41; +} +.b-toast-secondary .toast .toast-header { + color: #383d41; + background-color: rgba(226, 227, 229, 0.85); + border-bottom-color: rgba(214, 216, 219, 0.85); +} +.b-toast-secondary.b-toast-solid .toast { + background-color: #eff0f1; +} +.b-toast-success .toast { + background-color: rgba(230, 245, 233, 0.85); + border-color: rgba(195, 230, 203, 0.85); + color: #155724; +} +.b-toast-success .toast .toast-header { + color: #155724; + background-color: rgba(212, 237, 218, 0.85); + border-bottom-color: rgba(195, 230, 203, 0.85); +} +.b-toast-success.b-toast-solid .toast { + background-color: #e6f5e9; +} +.b-toast-info .toast { + background-color: rgba(229, 244, 247, 0.85); + border-color: rgba(190, 229, 235, 0.85); + color: #0c5460; +} +.b-toast-info .toast .toast-header { + color: #0c5460; + background-color: rgba(209, 236, 241, 0.85); + border-bottom-color: rgba(190, 229, 235, 0.85); +} +.b-toast-info.b-toast-solid .toast { + background-color: #e5f4f7; +} +.b-toast-warning .toast { + background-color: rgba(255, 249, 231, 0.85); + border-color: rgba(255, 238, 186, 0.85); + color: #856404; +} +.b-toast-warning .toast .toast-header { + color: #856404; + background-color: rgba(255, 243, 205, 0.85); + border-bottom-color: rgba(255, 238, 186, 0.85); +} +.b-toast-warning.b-toast-solid .toast { + background-color: #fff9e7; +} +.b-toast-danger .toast { + background-color: rgba(252, 237, 238, 0.85); + border-color: rgba(245, 198, 203, 0.85); + color: #721c24; +} +.b-toast-danger .toast .toast-header { + color: #721c24; + background-color: rgba(248, 215, 218, 0.85); + border-bottom-color: rgba(245, 198, 203, 0.85); +} +.b-toast-danger.b-toast-solid .toast { + background-color: #fcedee; +} +.b-toast-light .toast { + background-color: rgba(255, 255, 255, 0.85); + border-color: rgba(253, 253, 254, 0.85); + color: #818182; +} +.b-toast-light .toast .toast-header { + color: #818182; + background-color: rgba(254, 254, 254, 0.85); + border-bottom-color: rgba(253, 253, 254, 0.85); +} +.b-toast-light.b-toast-solid .toast { + background-color: white; +} +.b-toast-dark .toast { + background-color: rgba(227, 229, 229, 0.85); + border-color: rgba(198, 200, 202, 0.85); + color: #1b1e21; +} +.b-toast-dark .toast .toast-header { + color: #1b1e21; + background-color: rgba(214, 216, 217, 0.85); + border-bottom-color: rgba(198, 200, 202, 0.85); +} +.b-toast-dark.b-toast-solid .toast { + background-color: #e3e5e5; +} +.b-toaster { + z-index: 1100; +} +.b-toaster .b-toaster-slot { + position: relative; + display: block; +} +.b-toaster .b-toaster-slot:empty { + display: none !important; +} +.b-toaster.b-toaster-top-right, +.b-toaster.b-toaster-top-left, +.b-toaster.b-toaster-top-center, +.b-toaster.b-toaster-top-full, +.b-toaster.b-toaster-bottom-right, +.b-toaster.b-toaster-bottom-left, +.b-toaster.b-toaster-bottom-center, +.b-toaster.b-toaster-bottom-full { + position: fixed; + left: 0.5rem; + right: 0.5rem; + margin: 0; + padding: 0; + height: 0; + overflow: visible; +} +.b-toaster.b-toaster-top-right .b-toaster-slot, +.b-toaster.b-toaster-top-left .b-toaster-slot, +.b-toaster.b-toaster-top-center .b-toaster-slot, +.b-toaster.b-toaster-top-full .b-toaster-slot, +.b-toaster.b-toaster-bottom-right .b-toaster-slot, +.b-toaster.b-toaster-bottom-left .b-toaster-slot, +.b-toaster.b-toaster-bottom-center .b-toaster-slot, +.b-toaster.b-toaster-bottom-full .b-toaster-slot { + position: absolute; + max-width: 350px; + width: 100%; + /* IE 11 fix */ + left: 0; + right: 0; + padding: 0; + margin: 0; +} +.b-toaster.b-toaster-top-full .b-toaster-slot, +.b-toaster.b-toaster-bottom-full .b-toaster-slot { + width: 100%; + max-width: 100%; +} +.b-toaster.b-toaster-top-full .b-toaster-slot .b-toast, +.b-toaster.b-toaster-top-full .b-toaster-slot .toast, +.b-toaster.b-toaster-bottom-full .b-toaster-slot .b-toast, +.b-toaster.b-toaster-bottom-full .b-toaster-slot .toast { + width: 100%; + max-width: 100%; +} +.b-toaster.b-toaster-top-right, +.b-toaster.b-toaster-top-left, +.b-toaster.b-toaster-top-center, +.b-toaster.b-toaster-top-full { + top: 0; +} +.b-toaster.b-toaster-top-right .b-toaster-slot, +.b-toaster.b-toaster-top-left .b-toaster-slot, +.b-toaster.b-toaster-top-center .b-toaster-slot, +.b-toaster.b-toaster-top-full .b-toaster-slot { + top: 0.5rem; +} +.b-toaster.b-toaster-bottom-right, +.b-toaster.b-toaster-bottom-left, +.b-toaster.b-toaster-bottom-center, +.b-toaster.b-toaster-bottom-full { + bottom: 0; +} +.b-toaster.b-toaster-bottom-right .b-toaster-slot, +.b-toaster.b-toaster-bottom-left .b-toaster-slot, +.b-toaster.b-toaster-bottom-center .b-toaster-slot, +.b-toaster.b-toaster-bottom-full .b-toaster-slot { + bottom: 0.5rem; +} +.b-toaster.b-toaster-top-right .b-toaster-slot, +.b-toaster.b-toaster-bottom-right .b-toaster-slot, +.b-toaster.b-toaster-top-center .b-toaster-slot, +.b-toaster.b-toaster-bottom-center .b-toaster-slot { + margin-left: auto; +} +.b-toaster.b-toaster-top-left .b-toaster-slot, +.b-toaster.b-toaster-bottom-left .b-toaster-slot, +.b-toaster.b-toaster-top-center .b-toaster-slot, +.b-toaster.b-toaster-bottom-center .b-toaster-slot { + margin-right: auto; +} +.b-toaster.b-toaster-top-right .b-toast.b-toaster-enter-active, +.b-toaster.b-toaster-top-right .b-toast.b-toaster-leave-active, +.b-toaster.b-toaster-top-right .b-toast.b-toaster-move, +.b-toaster.b-toaster-top-left .b-toast.b-toaster-enter-active, +.b-toaster.b-toaster-top-left .b-toast.b-toaster-leave-active, +.b-toaster.b-toaster-top-left .b-toast.b-toaster-move, +.b-toaster.b-toaster-bottom-right .b-toast.b-toaster-enter-active, +.b-toaster.b-toaster-bottom-right .b-toast.b-toaster-leave-active, +.b-toaster.b-toaster-bottom-right .b-toast.b-toaster-move, +.b-toaster.b-toaster-bottom-left .b-toast.b-toaster-enter-active, +.b-toaster.b-toaster-bottom-left .b-toast.b-toaster-leave-active, +.b-toaster.b-toaster-bottom-left .b-toast.b-toaster-move { + transition: -webkit-transform 0.175s; + transition: transform 0.175s; + transition: transform 0.175s, -webkit-transform 0.175s; +} +.b-toaster.b-toaster-top-right .b-toast.b-toaster-enter-to .toast.fade, +.b-toaster.b-toaster-top-right .b-toast.b-toaster-enter-active .toast.fade, +.b-toaster.b-toaster-top-left .b-toast.b-toaster-enter-to .toast.fade, +.b-toaster.b-toaster-top-left .b-toast.b-toaster-enter-active .toast.fade, +.b-toaster.b-toaster-bottom-right .b-toast.b-toaster-enter-to .toast.fade, +.b-toaster.b-toaster-bottom-right .b-toast.b-toaster-enter-active .toast.fade, +.b-toaster.b-toaster-bottom-left .b-toast.b-toaster-enter-to .toast.fade, +.b-toaster.b-toaster-bottom-left .b-toast.b-toaster-enter-active .toast.fade { + transition-delay: 0.175s; +} +.b-toaster.b-toaster-top-right .b-toast.b-toaster-leave-active, +.b-toaster.b-toaster-top-left .b-toast.b-toaster-leave-active, +.b-toaster.b-toaster-bottom-right .b-toast.b-toaster-leave-active, +.b-toaster.b-toaster-bottom-left .b-toast.b-toaster-leave-active { + position: absolute; + transition-delay: 0.175s; +} +.b-toaster.b-toaster-top-right .b-toast.b-toaster-leave-active .toast.fade, +.b-toaster.b-toaster-top-left .b-toast.b-toaster-leave-active .toast.fade, +.b-toaster.b-toaster-bottom-right .b-toast.b-toaster-leave-active .toast.fade, +.b-toaster.b-toaster-bottom-left .b-toast.b-toaster-leave-active .toast.fade { + transition-delay: 0s; +} +.tooltip.b-tooltip { + display: block; + opacity: 1; + outline: 0; + transition: opacity 0.1s var(--appleEase); +} +.tooltip.b-tooltip.fade:not(.show) { + opacity: 0; +} +.tooltip.b-tooltip.show { + opacity: 0.9; +} +.tooltip.b-tooltip.noninteractive { + pointer-events: none; +} +.tooltip.b-tooltip .arrow { + margin: 0 0.25rem; +} +.tooltip.b-tooltip.bs-tooltip-right .arrow, +.tooltip.b-tooltip.b-tooltip-dark.bs-tooltip-auto[x-placement^=right] .arrow, +.tooltip.b-tooltip.b-tooltip-light.bs-tooltip-auto[x-placement^=right] .arrow, +.tooltip.b-tooltip.b-tooltip-danger.bs-tooltip-auto[x-placement^=right] .arrow, +.tooltip.b-tooltip.b-tooltip-warning.bs-tooltip-auto[x-placement^=right] .arrow, +.tooltip.b-tooltip.b-tooltip-info.bs-tooltip-auto[x-placement^=right] .arrow, +.tooltip.b-tooltip.b-tooltip-success.bs-tooltip-auto[x-placement^=right] .arrow, +.tooltip.b-tooltip.b-tooltip-secondary.bs-tooltip-auto[x-placement^=right] .arrow, +.tooltip.b-tooltip.b-tooltip-primary.bs-tooltip-auto[x-placement^=right] .arrow, +.tooltip.b-tooltip.bs-tooltip-left .arrow, +.tooltip.b-tooltip.b-tooltip-dark.bs-tooltip-auto[x-placement^=left] .arrow, +.tooltip.b-tooltip.b-tooltip-light.bs-tooltip-auto[x-placement^=left] .arrow, +.tooltip.b-tooltip.b-tooltip-danger.bs-tooltip-auto[x-placement^=left] .arrow, +.tooltip.b-tooltip.b-tooltip-warning.bs-tooltip-auto[x-placement^=left] .arrow, +.tooltip.b-tooltip.b-tooltip-info.bs-tooltip-auto[x-placement^=left] .arrow, +.tooltip.b-tooltip.b-tooltip-success.bs-tooltip-auto[x-placement^=left] .arrow, +.tooltip.b-tooltip.b-tooltip-secondary.bs-tooltip-auto[x-placement^=left] .arrow, +.tooltip.b-tooltip.b-tooltip-primary.bs-tooltip-auto[x-placement^=left] .arrow { + margin: 0.25rem 0; +} +.tooltip.b-tooltip-primary.bs-tooltip-top .arrow::before, +.tooltip.b-tooltip-primary.bs-tooltip-auto[x-placement^=top] .arrow::before { + border-top-color: #007bff; +} +.tooltip.b-tooltip-primary.bs-tooltip-right .arrow::before, +.tooltip.b-tooltip-primary.bs-tooltip-auto[x-placement^=right] .arrow::before { + border-right-color: #007bff; +} +.tooltip.b-tooltip-primary.bs-tooltip-bottom .arrow::before, +.tooltip.b-tooltip-primary.bs-tooltip-auto[x-placement^=bottom] .arrow::before { + border-bottom-color: #007bff; +} +.tooltip.b-tooltip-primary.bs-tooltip-left .arrow::before, +.tooltip.b-tooltip-primary.bs-tooltip-auto[x-placement^=left] .arrow::before { + border-left-color: #007bff; +} +.tooltip.b-tooltip-primary .tooltip-inner { + color: #fff; + background-color: #007bff; +} +.tooltip.b-tooltip-secondary.bs-tooltip-top .arrow::before, +.tooltip.b-tooltip-secondary.bs-tooltip-auto[x-placement^=top] .arrow::before { + border-top-color: #6c757d; +} +.tooltip.b-tooltip-secondary.bs-tooltip-right .arrow::before, +.tooltip.b-tooltip-secondary.bs-tooltip-auto[x-placement^=right] .arrow::before { + border-right-color: #6c757d; +} +.tooltip.b-tooltip-secondary.bs-tooltip-bottom .arrow::before, +.tooltip.b-tooltip-secondary.bs-tooltip-auto[x-placement^=bottom] .arrow::before { + border-bottom-color: #6c757d; +} +.tooltip.b-tooltip-secondary.bs-tooltip-left .arrow::before, +.tooltip.b-tooltip-secondary.bs-tooltip-auto[x-placement^=left] .arrow::before { + border-left-color: #6c757d; +} +.tooltip.b-tooltip-secondary .tooltip-inner { + color: #fff; + background-color: #6c757d; +} +.tooltip.b-tooltip-success.bs-tooltip-top .arrow::before, +.tooltip.b-tooltip-success.bs-tooltip-auto[x-placement^=top] .arrow::before { + border-top-color: #28a745; +} +.tooltip.b-tooltip-success.bs-tooltip-right .arrow::before, +.tooltip.b-tooltip-success.bs-tooltip-auto[x-placement^=right] .arrow::before { + border-right-color: #28a745; +} +.tooltip.b-tooltip-success.bs-tooltip-bottom .arrow::before, +.tooltip.b-tooltip-success.bs-tooltip-auto[x-placement^=bottom] .arrow::before { + border-bottom-color: #28a745; +} +.tooltip.b-tooltip-success.bs-tooltip-left .arrow::before, +.tooltip.b-tooltip-success.bs-tooltip-auto[x-placement^=left] .arrow::before { + border-left-color: #28a745; +} +.tooltip.b-tooltip-success .tooltip-inner { + color: #fff; + background-color: #28a745; +} +.tooltip.b-tooltip-info.bs-tooltip-top .arrow::before, +.tooltip.b-tooltip-info.bs-tooltip-auto[x-placement^=top] .arrow::before { + border-top-color: #17a2b8; +} +.tooltip.b-tooltip-info.bs-tooltip-right .arrow::before, +.tooltip.b-tooltip-info.bs-tooltip-auto[x-placement^=right] .arrow::before { + border-right-color: #17a2b8; +} +.tooltip.b-tooltip-info.bs-tooltip-bottom .arrow::before, +.tooltip.b-tooltip-info.bs-tooltip-auto[x-placement^=bottom] .arrow::before { + border-bottom-color: #17a2b8; +} +.tooltip.b-tooltip-info.bs-tooltip-left .arrow::before, +.tooltip.b-tooltip-info.bs-tooltip-auto[x-placement^=left] .arrow::before { + border-left-color: #17a2b8; +} +.tooltip.b-tooltip-info .tooltip-inner { + color: #fff; + background-color: #17a2b8; +} +.tooltip.b-tooltip-warning.bs-tooltip-top .arrow::before, +.tooltip.b-tooltip-warning.bs-tooltip-auto[x-placement^=top] .arrow::before { + border-top-color: #ffc107; +} +.tooltip.b-tooltip-warning.bs-tooltip-right .arrow::before, +.tooltip.b-tooltip-warning.bs-tooltip-auto[x-placement^=right] .arrow::before { + border-right-color: #ffc107; +} +.tooltip.b-tooltip-warning.bs-tooltip-bottom .arrow::before, +.tooltip.b-tooltip-warning.bs-tooltip-auto[x-placement^=bottom] .arrow::before { + border-bottom-color: #ffc107; +} +.tooltip.b-tooltip-warning.bs-tooltip-left .arrow::before, +.tooltip.b-tooltip-warning.bs-tooltip-auto[x-placement^=left] .arrow::before { + border-left-color: #ffc107; +} +.tooltip.b-tooltip-warning .tooltip-inner { + color: #212529; + background-color: #ffc107; +} +.tooltip.b-tooltip-danger.bs-tooltip-top .arrow::before, +.tooltip.b-tooltip-danger.bs-tooltip-auto[x-placement^=top] .arrow::before { + border-top-color: #dc3545; +} +.tooltip.b-tooltip-danger.bs-tooltip-right .arrow::before, +.tooltip.b-tooltip-danger.bs-tooltip-auto[x-placement^=right] .arrow::before { + border-right-color: #dc3545; +} +.tooltip.b-tooltip-danger.bs-tooltip-bottom .arrow::before, +.tooltip.b-tooltip-danger.bs-tooltip-auto[x-placement^=bottom] .arrow::before { + border-bottom-color: #dc3545; +} +.tooltip.b-tooltip-danger.bs-tooltip-left .arrow::before, +.tooltip.b-tooltip-danger.bs-tooltip-auto[x-placement^=left] .arrow::before { + border-left-color: #dc3545; +} +.tooltip.b-tooltip-danger .tooltip-inner { + color: #fff; + background-color: #dc3545; +} +.tooltip.b-tooltip-light.bs-tooltip-top .arrow::before, +.tooltip.b-tooltip-light.bs-tooltip-auto[x-placement^=top] .arrow::before { + border-top-color: #f8f9fa; +} +.tooltip.b-tooltip-light.bs-tooltip-right .arrow::before, +.tooltip.b-tooltip-light.bs-tooltip-auto[x-placement^=right] .arrow::before { + border-right-color: #f8f9fa; +} +.tooltip.b-tooltip-light.bs-tooltip-bottom .arrow::before, +.tooltip.b-tooltip-light.bs-tooltip-auto[x-placement^=bottom] .arrow::before { + border-bottom-color: #f8f9fa; +} +.tooltip.b-tooltip-light.bs-tooltip-left .arrow::before, +.tooltip.b-tooltip-light.bs-tooltip-auto[x-placement^=left] .arrow::before { + border-left-color: #f8f9fa; +} +.tooltip.b-tooltip-light .tooltip-inner { + color: #212529; + background-color: #f8f9fa; +} +.tooltip.b-tooltip-dark.bs-tooltip-top .arrow::before, +.tooltip.b-tooltip-dark.bs-tooltip-auto[x-placement^=top] .arrow::before { + border-top-color: #343a40; +} +.tooltip.b-tooltip-dark.bs-tooltip-right .arrow::before, +.tooltip.b-tooltip-dark.bs-tooltip-auto[x-placement^=right] .arrow::before { + border-right-color: #343a40; +} +.tooltip.b-tooltip-dark.bs-tooltip-bottom .arrow::before, +.tooltip.b-tooltip-dark.bs-tooltip-auto[x-placement^=bottom] .arrow::before { + border-bottom-color: #343a40; +} +.tooltip.b-tooltip-dark.bs-tooltip-left .arrow::before, +.tooltip.b-tooltip-dark.bs-tooltip-auto[x-placement^=left] .arrow::before { + border-left-color: #343a40; +} +.tooltip.b-tooltip-dark .tooltip-inner { + color: #fff; + background-color: #343a40; +} +.b-icon.bi { + display: inline-block; + overflow: visible; + vertical-align: -0.15em; +} +.b-icon.b-icon-animation-cylon, +.b-icon.b-iconstack .b-icon-animation-cylon > g { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-animation: 0.75s infinite ease-in-out alternate b-icon-animation-cylon; + animation: 0.75s infinite ease-in-out alternate b-icon-animation-cylon; +} +@media (prefers-reduced-motion: reduce) { + .b-icon.b-icon-animation-cylon, + .b-icon.b-iconstack .b-icon-animation-cylon > g { + -webkit-animation: none; + animation: none; + } +} +.b-icon.b-icon-animation-cylon-vertical, +.b-icon.b-iconstack .b-icon-animation-cylon-vertical > g { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-animation: 0.75s infinite ease-in-out alternate b-icon-animation-cylon-vertical; + animation: 0.75s infinite ease-in-out alternate b-icon-animation-cylon-vertical; +} +@media (prefers-reduced-motion: reduce) { + .b-icon.b-icon-animation-cylon-vertical, + .b-icon.b-iconstack .b-icon-animation-cylon-vertical > g { + -webkit-animation: none; + animation: none; + } +} +.b-icon.b-icon-animation-fade, +.b-icon.b-iconstack .b-icon-animation-fade > g { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-animation: 0.75s infinite ease-in-out alternate b-icon-animation-fade; + animation: 0.75s infinite ease-in-out alternate b-icon-animation-fade; +} +@media (prefers-reduced-motion: reduce) { + .b-icon.b-icon-animation-fade, + .b-icon.b-iconstack .b-icon-animation-fade > g { + -webkit-animation: none; + animation: none; + } +} +.b-icon.b-icon-animation-spin, +.b-icon.b-iconstack .b-icon-animation-spin > g { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-animation: 2s infinite linear normal b-icon-animation-spin; + animation: 2s infinite linear normal b-icon-animation-spin; +} +@media (prefers-reduced-motion: reduce) { + .b-icon.b-icon-animation-spin, + .b-icon.b-iconstack .b-icon-animation-spin > g { + -webkit-animation: none; + animation: none; + } +} +.b-icon.b-icon-animation-spin-reverse, +.b-icon.b-iconstack .b-icon-animation-spin-reverse > g { + -webkit-transform-origin: center; + transform-origin: center; + animation: 2s infinite linear reverse b-icon-animation-spin; +} +@media (prefers-reduced-motion: reduce) { + .b-icon.b-icon-animation-spin-reverse, + .b-icon.b-iconstack .b-icon-animation-spin-reverse > g { + -webkit-animation: none; + animation: none; + } +} +.b-icon.b-icon-animation-spin-pulse, +.b-icon.b-iconstack .b-icon-animation-spin-pulse > g { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-animation: 1s infinite steps(8) normal b-icon-animation-spin; + animation: 1s infinite steps(8) normal b-icon-animation-spin; +} +@media (prefers-reduced-motion: reduce) { + .b-icon.b-icon-animation-spin-pulse, + .b-icon.b-iconstack .b-icon-animation-spin-pulse > g { + -webkit-animation: none; + animation: none; + } +} +.b-icon.b-icon-animation-spin-reverse-pulse, +.b-icon.b-iconstack .b-icon-animation-spin-reverse-pulse > g { + -webkit-transform-origin: center; + transform-origin: center; + animation: 1s infinite steps(8) reverse b-icon-animation-spin; +} +@media (prefers-reduced-motion: reduce) { + .b-icon.b-icon-animation-spin-reverse-pulse, + .b-icon.b-iconstack .b-icon-animation-spin-reverse-pulse > g { + -webkit-animation: none; + animation: none; + } +} +.b-icon.b-icon-animation-throb, +.b-icon.b-iconstack .b-icon-animation-throb > g { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-animation: 0.75s infinite ease-in-out alternate b-icon-animation-throb; + animation: 0.75s infinite ease-in-out alternate b-icon-animation-throb; +} +@media (prefers-reduced-motion: reduce) { + .b-icon.b-icon-animation-throb, + .b-icon.b-iconstack .b-icon-animation-throb > g { + -webkit-animation: none; + animation: none; + } +} +@-webkit-keyframes b-icon-animation-cylon { + 0% { + -webkit-transform: translateX(-25%); + transform: translateX(-25%); + } + 100% { + -webkit-transform: translateX(25%); + transform: translateX(25%); + } +} +@keyframes b-icon-animation-cylon { + 0% { + -webkit-transform: translateX(-25%); + transform: translateX(-25%); + } + 100% { + -webkit-transform: translateX(25%); + transform: translateX(25%); + } +} +@-webkit-keyframes b-icon-animation-cylon-vertical { + 0% { + -webkit-transform: translateY(25%); + transform: translateY(25%); + } + 100% { + -webkit-transform: translateY(-25%); + transform: translateY(-25%); + } +} +@keyframes b-icon-animation-cylon-vertical { + 0% { + -webkit-transform: translateY(25%); + transform: translateY(25%); + } + 100% { + -webkit-transform: translateY(-25%); + transform: translateY(-25%); + } +} +@-webkit-keyframes b-icon-animation-fade { + 0% { + opacity: 0.1; + } + 100% { + opacity: 1; + } +} +@keyframes b-icon-animation-fade { + 0% { + opacity: 0.1; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes b-icon-animation-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes b-icon-animation-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-webkit-keyframes b-icon-animation-throb { + 0% { + opacity: 0.5; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes b-icon-animation-throb { + 0% { + opacity: 0.5; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +.btn .b-icon.bi, +.nav-link .b-icon.bi, +.dropdown-toggle .b-icon.bi, +.dropdown-item .b-icon.bi, +.input-group-text .b-icon.bi { + font-size: 125%; + vertical-align: text-bottom; +} +/*# sourceMappingURL=bootstrap-vue.css.map */ +:root { + --appleEase: cubic-bezier(0.42, 0, 0.58, 1); + --appleTransition: 0.2s var(--appleEase); +} +/* Simple CSS framework for Apple Music Electron */ +.md-labeltext { + font-size: 14px; + text-transform: uppercase; + opacity: 0.75; + font-weight: 500; +} +.md-option-container { + /* border-radius: 10px; */ + overflow: hidden; +} +.md-option-line { + display: flex; + width: 100%; + padding: 14px; + background: var(--opaquePageBGColor); + font-size: 0.85em; +} +.md-option-line.child { + background: rgba(0, 0, 0, 0.15); +} +.md-option-segment.md-option-segment_auto { + width: auto; + white-space: nowrap; +} +.md-option-container .md-option-line:not(:last-child) { + border-bottom: 1px solid rgba(0, 0, 0, 0.15); +} +input[type="range"].md-slider { + -webkit-appearance: none; + height: 7px; + background: rgba(255, 255, 255, 0.6); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; +} +input[type="range"].md-slider::-webkit-slider-thumb { + -webkit-appearance: none; + height: 20px; + width: 20px; + border-radius: 50%; + background: #ffffff; + cursor: ew-resize; + box-shadow: 0 0 2px 0 #555; +} +input[type=range].md-slider::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.md-option-header { + padding: 10px; + border-bottom: 1px solid rgba(200, 200, 200, 0.25); + font-weight: 500; + font-size: 0.9em; + background: rgba(255, 255, 255, 0.1); +} +.md-option-segment { + width: 100%; + display: flex; + justify-content: center; + flex-direction: column; +} +.md-h1 { + font-size: 3em; + text-align: center; +} +.md-header { + padding: 16px; +} +.md-header-title { + padding: 18px; + font-weight: 600; + font-size: 16px; + height: 55px; + background: var(--opaquePageBGColor); + border-bottom: 1px solid rgba(0, 0, 0, 0.15); +} +.md-footer { + padding: 16px; + text-align: center; +} +.md-transparent { + background: transparent; +} +.md-container { + display: flex; + flex-direction: column; + height: 100%; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + padding: 32px; +} +.md-container_panel { + padding: 0px; +} +.md-body { + height: 100%; + padding: 16px; + font-size: 1.25em; +} +@media (prefers-color-scheme: light) { + .md-btn { + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 1px; + border: 1px solid rgba(0, 0, 0, 0.15); + } + .md-close-btn { + background-color: #000; + } +} +/* Vue transitions */ +.fade_simple-enter-active, +.fade_simple-leave-active { + transition: all 0.5s; +} +.fade_simple-enter, +.fade_simple-leave-to { + opacity: 0; +} +.fade-enter-active, +.fade-leave-active { + transition: all 0.5s; +} +.fade-enter, +.fade-leave-to { + opacity: 0; + transform: scale(0.95); +} +/* CSS Grids */ +.container, +.container-fluid, +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); + margin-right: auto; + margin-left: auto; +} +.row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + /*margin-top: calc(-1 * var(--bs-gutter-y));*/ + /*margin-right: calc(-0.5 * var(--bs-gutter-x));*/ + /*margin-left: calc(-0.5 * var(--bs-gutter-x));*/ +} +.row > * { + box-sizing: border-box; + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * 0.5); + padding-left: calc(var(--bs-gutter-x) * 0.5); + margin-top: var(--bs-gutter-y); +} +.col { + flex: 1 0 0%; +} +.row-cols-auto > * { + flex: 0 0 auto; + width: auto; +} +.row-cols-1 > * { + flex: 0 0 auto; + width: 100%; +} +.row-cols-2 > * { + flex: 0 0 auto; + width: 50%; +} +.row-cols-3 > * { + flex: 0 0 auto; + width: 33.33333333%; +} +.row-cols-4 > * { + flex: 0 0 auto; + width: 25%; +} +.row-cols-5 > * { + flex: 0 0 auto; + width: 20%; +} +.row-cols-6 > * { + flex: 0 0 auto; + width: 16.66666667%; +} +.col-auto { + flex: 0 0 auto; + width: auto; +} +.col-1 { + flex: 0 0 auto; + width: 8.33333333%; +} +.col-2 { + flex: 0 0 auto; + width: 16.66666667%; +} +.col-3 { + flex: 0 0 auto; + width: 25%; +} +.col-4 { + flex: 0 0 auto; + width: 33.33333333%; +} +.col-5 { + flex: 0 0 auto; + width: 41.66666667%; +} +.col-6 { + flex: 0 0 auto; + width: 50%; +} +.col-7 { + flex: 0 0 auto; + width: 58.33333333%; +} +.col-8 { + flex: 0 0 auto; + width: 66.66666667%; +} +.col-9 { + flex: 0 0 auto; + width: 75%; +} +.col-10 { + flex: 0 0 auto; + width: 83.33333333%; +} +.col-11 { + flex: 0 0 auto; + width: 91.66666667%; +} +.col-12 { + flex: 0 0 auto; + width: 100%; +} +.offset-1 { + margin-left: 8.33333333%; +} +.offset-2 { + margin-left: 16.66666667%; +} +.offset-3 { + margin-left: 25%; +} +.offset-4 { + margin-left: 33.33333333%; +} +.offset-5 { + margin-left: 41.66666667%; +} +.offset-6 { + margin-left: 50%; +} +.offset-7 { + margin-left: 58.33333333%; +} +.offset-8 { + margin-left: 66.66666667%; +} +.offset-9 { + margin-left: 75%; +} +.offset-10 { + margin-left: 83.33333333%; +} +.offset-11 { + margin-left: 91.66666667%; +} +.g-0, +.gx-0 { + --bs-gutter-x: 0; +} +.g-0, +.gy-0 { + --bs-gutter-y: 0; +} +.g-1, +.gx-1 { + --bs-gutter-x: 0.25rem; +} +.g-1, +.gy-1 { + --bs-gutter-y: 0.25rem; +} +.g-2, +.gx-2 { + --bs-gutter-x: 0.5rem; +} +.g-2, +.gy-2 { + --bs-gutter-y: 0.5rem; +} +.g-3, +.gx-3 { + --bs-gutter-x: 1rem; +} +.g-3, +.gy-3 { + --bs-gutter-y: 1rem; +} +.g-4, +.gx-4 { + --bs-gutter-x: 1.5rem; +} +.g-4, +.gy-4 { + --bs-gutter-y: 1.5rem; +} +.g-5, +.gx-5 { + --bs-gutter-x: 3rem; +} +.g-5, +.gy-5 { + --bs-gutter-y: 3rem; +} +.d-inline { + display: inline !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} +.d-grid { + display: grid !important; +} +.d-table { + display: table !important; +} +.d-table-row { + display: table-row !important; +} +.d-table-cell { + display: table-cell !important; +} +.d-flex { + display: flex !important; +} +.d-inline-flex { + display: inline-flex !important; +} +.d-none { + display: none !important; +} +.flex-fill { + flex: 1 1 auto !important; +} +.flex-row { + flex-direction: row !important; +} +.flex-column { + flex-direction: column !important; +} +.flex-row-reverse { + flex-direction: row-reverse !important; +} +.flex-column-reverse { + flex-direction: column-reverse !important; +} +.flex-grow-0 { + flex-grow: 0 !important; +} +.flex-grow-1 { + flex-grow: 1 !important; +} +.flex-shrink-0 { + flex-shrink: 0 !important; +} +.flex-shrink-1 { + flex-shrink: 1 !important; +} +.flex-wrap { + flex-wrap: wrap !important; +} +.flex-nowrap { + flex-wrap: nowrap !important; +} +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} +.justify-content-start { + justify-content: flex-start !important; +} +.justify-content-end { + justify-content: flex-end !important; +} +.justify-content-center { + justify-content: center !important; +} +.justify-content-between { + justify-content: space-between !important; +} +.justify-content-around { + justify-content: space-around !important; +} +.justify-content-evenly { + justify-content: space-evenly !important; +} +.align-items-start { + align-items: flex-start !important; +} +.align-items-end { + align-items: flex-end !important; +} +.align-items-center { + align-items: center !important; +} +.align-items-baseline { + align-items: baseline !important; +} +.align-items-stretch { + align-items: stretch !important; +} +.align-content-start { + align-content: flex-start !important; +} +.align-content-end { + align-content: flex-end !important; +} +.align-content-center { + align-content: center !important; +} +.align-content-between { + align-content: space-between !important; +} +.align-content-around { + align-content: space-around !important; +} +.align-content-stretch { + align-content: stretch !important; +} +.align-self-auto { + align-self: auto !important; +} +.align-self-start { + align-self: flex-start !important; +} +.align-self-end { + align-self: flex-end !important; +} +.align-self-center { + align-self: center !important; +} +.align-self-baseline { + align-self: baseline !important; +} +.align-self-stretch { + align-self: stretch !important; +} +.order-first { + order: -1 !important; +} +.order-0 { + order: 0 !important; +} +.order-1 { + order: 1 !important; +} +.order-2 { + order: 2 !important; +} +.order-3 { + order: 3 !important; +} +.order-4 { + order: 4 !important; +} +.order-5 { + order: 5 !important; +} +.order-last { + order: 6 !important; +} +.m-0 { + margin: 0 !important; +} +.m-1 { + margin: 0.25rem !important; +} +.m-2 { + margin: 0.5rem !important; +} +.m-3 { + margin: 1rem !important; +} +.m-4 { + margin: 1.5rem !important; +} +.m-5 { + margin: 3rem !important; +} +.m-auto { + margin: auto !important; +} +.mx-0 { + margin-right: 0 !important; + margin-left: 0 !important; +} +.mx-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; +} +.mx-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; +} +.mx-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; +} +.mx-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; +} +.mx-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; +} +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} +.my-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} +.my-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} +.my-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} +.mt-0 { + margin-top: 0 !important; +} +.mt-1 { + margin-top: 0.25rem !important; +} +.mt-2 { + margin-top: 0.5rem !important; +} +.mt-3 { + margin-top: 1rem !important; +} +.mt-4 { + margin-top: 1.5rem !important; +} +.mt-5 { + margin-top: 3rem !important; +} +.mt-auto { + margin-top: auto !important; +} +.me-0 { + margin-right: 0 !important; +} +.me-1 { + margin-right: 0.25rem !important; +} +.me-2 { + margin-right: 0.5rem !important; +} +.me-3 { + margin-right: 1rem !important; +} +.me-4 { + margin-right: 1.5rem !important; +} +.me-5 { + margin-right: 3rem !important; +} +.me-auto { + margin-right: auto !important; +} +.mb-0 { + margin-bottom: 0 !important; +} +.mb-1 { + margin-bottom: 0.25rem !important; +} +.mb-2 { + margin-bottom: 0.5rem !important; +} +.mb-3 { + margin-bottom: 1rem !important; +} +.mb-4 { + margin-bottom: 1.5rem !important; +} +.mb-5 { + margin-bottom: 3rem !important; +} +.mb-auto { + margin-bottom: auto !important; +} +.ms-0 { + margin-left: 0 !important; +} +.ms-1 { + margin-left: 0.25rem !important; +} +.ms-2 { + margin-left: 0.5rem !important; +} +.ms-3 { + margin-left: 1rem !important; +} +.ms-4 { + margin-left: 1.5rem !important; +} +.ms-5 { + margin-left: 3rem !important; +} +.ms-auto { + margin-left: auto !important; +} +.p-0 { + padding: 0 !important; +} +.p-1 { + padding: 0.25rem !important; +} +.p-2 { + padding: 0.5rem !important; +} +.p-3 { + padding: 1rem !important; +} +.p-4 { + padding: 1.5rem !important; +} +.p-5 { + padding: 3rem !important; +} +.px-0 { + padding-right: 0 !important; + padding-left: 0 !important; +} +.px-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; +} +.px-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; +} +.px-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; +} +.px-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; +} +.px-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; +} +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} +.py-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} +.py-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} +.py-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} +.pt-0 { + padding-top: 0 !important; +} +.pt-1 { + padding-top: 0.25rem !important; +} +.pt-2 { + padding-top: 0.5rem !important; +} +.pt-3 { + padding-top: 1rem !important; +} +.pt-4 { + padding-top: 1.5rem !important; +} +.pt-5 { + padding-top: 3rem !important; +} +.pe-0 { + padding-right: 0 !important; +} +.pe-1 { + padding-right: 0.25rem !important; +} +.pe-2 { + padding-right: 0.5rem !important; +} +.pe-3 { + padding-right: 1rem !important; +} +.pe-4 { + padding-right: 1.5rem !important; +} +.pe-5 { + padding-right: 3rem !important; +} +.pb-0 { + padding-bottom: 0 !important; +} +.pb-1 { + padding-bottom: 0.25rem !important; +} +.pb-2 { + padding-bottom: 0.5rem !important; +} +.pb-3 { + padding-bottom: 1rem !important; +} +.pb-4 { + padding-bottom: 1.5rem !important; +} +.pb-5 { + padding-bottom: 3rem !important; +} +.ps-0 { + padding-left: 0 !important; +} +.ps-1 { + padding-left: 0.25rem !important; +} +.ps-2 { + padding-left: 0.5rem !important; +} +.ps-3 { + padding-left: 1rem !important; +} +.ps-4 { + padding-left: 1.5rem !important; +} +.ps-5 { + padding-left: 3rem !important; +} +.dropup, +.dropend, +.dropdown, +.dropstart { + position: relative; +} +.dropdown-toggle { + white-space: nowrap; +} +.dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; +} +.dropdown-toggle:empty::after { + margin-left: 0; +} +.dropdown-menu { + position: absolute; + z-index: 1000; + display: none; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0; + font-size: 1rem; + color: #212529; + text-align: left; + list-style: none; + background-color: var(--color1); + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; + box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle); + backdrop-filter: var(--glassFilter); +} +.dropdown-menu[data-bs-popper] { + top: 100%; + left: 0; + margin-top: 0.125rem; +} +.dropdown-menu-start { + --bs-position: start; +} +.dropdown-menu-start[data-bs-popper] { + right: auto; + left: 0; +} +.dropdown-menu-end { + --bs-position: end; +} +.dropdown-menu-end[data-bs-popper] { + right: 0; + left: auto; +} +@media (min-width: 576px) { + .dropdown-menu-sm-start { + --bs-position: start; + } + .dropdown-menu-sm-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-sm-end { + --bs-position: end; + } + .dropdown-menu-sm-end[data-bs-popper] { + right: 0; + left: auto; + } +} +@media (min-width: 768px) { + .dropdown-menu-md-start { + --bs-position: start; + } + .dropdown-menu-md-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-md-end { + --bs-position: end; + } + .dropdown-menu-md-end[data-bs-popper] { + right: 0; + left: auto; + } +} +@media (min-width: 992px) { + .dropdown-menu-lg-start { + --bs-position: start; + } + .dropdown-menu-lg-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-lg-end { + --bs-position: end; + } + .dropdown-menu-lg-end[data-bs-popper] { + right: 0; + left: auto; + } +} +@media (min-width: 1200px) { + .dropdown-menu-xl-start { + --bs-position: start; + } + .dropdown-menu-xl-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-xl-end { + --bs-position: end; + } + .dropdown-menu-xl-end[data-bs-popper] { + right: 0; + left: auto; + } +} +@media (min-width: 1400px) { + .dropdown-menu-xxl-start { + --bs-position: start; + } + .dropdown-menu-xxl-start[data-bs-popper] { + right: auto; + left: 0; + } + .dropdown-menu-xxl-end { + --bs-position: end; + } + .dropdown-menu-xxl-end[data-bs-popper] { + right: 0; + left: auto; + } +} +.dropup .dropdown-menu[data-bs-popper] { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: 0.125rem; +} +.dropup .dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0; + border-right: 0.3em solid transparent; + border-bottom: 0.3em solid; + border-left: 0.3em solid transparent; +} +.dropup .dropdown-toggle:empty::after { + margin-left: 0; +} +.dropend .dropdown-menu[data-bs-popper] { + top: 0; + right: auto; + left: 100%; + margin-top: 0; + margin-left: 0.125rem; +} +.dropend .dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-right: 0; + border-bottom: 0.3em solid transparent; + border-left: 0.3em solid; +} +.dropend .dropdown-toggle:empty::after { + margin-left: 0; +} +.dropend .dropdown-toggle::after { + vertical-align: 0; +} +.dropstart .dropdown-menu[data-bs-popper] { + top: 0; + right: 100%; + left: auto; + margin-top: 0; + margin-right: 0.125rem; +} +.dropstart .dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; +} +.dropstart .dropdown-toggle::after { + display: none; +} +.dropstart .dropdown-toggle::before { + display: inline-block; + margin-right: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-right: 0.3em solid; + border-bottom: 0.3em solid transparent; +} +.dropstart .dropdown-toggle:empty::after { + margin-left: 0; +} +.dropstart .dropdown-toggle::before { + vertical-align: 0; +} +.dropdown-divider { + height: 0; + margin: 0.5rem 0; + overflow: hidden; + border-top: 1px solid rgba(0, 0, 0, 0.15); +} +.dropdown-item { + display: block; + width: 100%; + padding: 0.25rem 1rem; + clear: both; + font-weight: 400; + color: #212529; + text-align: inherit; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border: 0; +} +.dropdown-item:hover, +.dropdown-item:focus { + color: #1e2125; + background-color: #e9ecef; +} +.dropdown-item.active, +.dropdown-item:active { + color: #fff; + text-decoration: none; + background-color: #0d6efd; +} +.dropdown-item.disabled, +.dropdown-item:disabled { + color: #adb5bd; + pointer-events: none; + background-color: transparent; +} +.dropdown-menu.show { + display: block; +} +.dropdown-header { + display: block; + padding: 0.5rem 1rem; + margin-bottom: 0; + font-size: 0.875rem; + color: #6c757d; + white-space: nowrap; +} +.dropdown-item-text { + display: block; + padding: 0.25rem 1rem; + color: #212529; +} +.dropdown-menu-dark { + color: #dee2e6; + background-color: #343a40; + border-color: rgba(0, 0, 0, 0.15); +} +.dropdown-menu-dark .dropdown-item { + color: #dee2e6; +} +.dropdown-menu-dark .dropdown-item:hover, +.dropdown-menu-dark .dropdown-item:focus { + color: #fff; + background-color: rgba(255, 255, 255, 0.15); +} +.dropdown-menu-dark .dropdown-item.active, +.dropdown-menu-dark .dropdown-item:active { + color: #fff; + background-color: #0d6efd; +} +.dropdown-menu-dark .dropdown-item.disabled, +.dropdown-menu-dark .dropdown-item:disabled { + color: #adb5bd; +} +.dropdown-menu-dark .dropdown-divider { + border-color: rgba(0, 0, 0, 0.15); +} +.dropdown-menu-dark .dropdown-item-text { + color: #dee2e6; +} +.dropdown-menu-dark .dropdown-header { + color: #adb5bd; +} +.list-group { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + border-radius: 0.25rem; +} +.list-group-numbered { + list-style-type: none; + counter-reset: section; +} +.list-group-numbered > li::before { + content: counters(section, ".") ". "; + counter-increment: section; +} +.list-group-item-action { + width: 100%; + color: #495057; + text-align: inherit; +} +.list-group-item-action:hover, +.list-group-item-action:focus { + z-index: 1; + color: #495057; + text-decoration: none; + background-color: #f8f9fa; +} +.list-group-item-action:active { + color: #212529; + background-color: #e9ecef; +} +.list-group-item { + position: relative; + display: block; + padding: 0.5rem 1rem; + color: #212529; + text-decoration: none; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.125); +} +.list-group-item:first-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} +.list-group-item:last-child { + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; +} +.list-group-item.disabled, +.list-group-item:disabled { + color: #6c757d; + pointer-events: none; + background-color: #fff; +} +.list-group-item.active { + z-index: 2; + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.list-group-item + .list-group-item { + border-top-width: 0; +} +.list-group-item + .list-group-item.active { + margin-top: -1px; + border-top-width: 1px; +} +.list-group-horizontal { + flex-direction: row; +} +.list-group-horizontal > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; +} +.list-group-horizontal > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; +} +.list-group-horizontal > .list-group-item.active { + margin-top: 0; +} +.list-group-horizontal > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; +} +.list-group-horizontal > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; +} +@media (min-width: 576px) { + .list-group-horizontal-sm { + flex-direction: row; + } + .list-group-horizontal-sm > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-sm > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-sm > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-sm > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-sm > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +@media (min-width: 768px) { + .list-group-horizontal-md { + flex-direction: row; + } + .list-group-horizontal-md > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-md > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-md > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-md > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-md > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +@media (min-width: 992px) { + .list-group-horizontal-lg { + flex-direction: row; + } + .list-group-horizontal-lg > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-lg > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-lg > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-lg > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-lg > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +@media (min-width: 1200px) { + .list-group-horizontal-xl { + flex-direction: row; + } + .list-group-horizontal-xl > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-xl > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-xl > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-xl > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-xl > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +@media (min-width: 1400px) { + .list-group-horizontal-xxl { + flex-direction: row; + } + .list-group-horizontal-xxl > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-xxl > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-xxl > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-xxl > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-xxl > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} +.list-group-flush { + border-radius: 0; +} +.list-group-flush > .list-group-item { + border-width: 0 0 1px; +} +.list-group-flush > .list-group-item:last-child { + border-bottom-width: 0; +} +.list-group-item-primary { + color: #084298; + background-color: #cfe2ff; +} +.list-group-item-primary.list-group-item-action:hover, +.list-group-item-primary.list-group-item-action:focus { + color: #084298; + background-color: #bacbe6; +} +.list-group-item-primary.list-group-item-action.active { + color: #fff; + background-color: #084298; + border-color: #084298; +} +.list-group-item-secondary { + color: #41464b; + background-color: #e2e3e5; +} +.list-group-item-secondary.list-group-item-action:hover, +.list-group-item-secondary.list-group-item-action:focus { + color: #41464b; + background-color: #cbccce; +} +.list-group-item-secondary.list-group-item-action.active { + color: #fff; + background-color: #41464b; + border-color: #41464b; +} +.list-group-item-success { + color: #0f5132; + background-color: #d1e7dd; +} +.list-group-item-success.list-group-item-action:hover, +.list-group-item-success.list-group-item-action:focus { + color: #0f5132; + background-color: #bcd0c7; +} +.list-group-item-success.list-group-item-action.active { + color: #fff; + background-color: #0f5132; + border-color: #0f5132; +} +.list-group-item-info { + color: #055160; + background-color: #cff4fc; +} +.list-group-item-info.list-group-item-action:hover, +.list-group-item-info.list-group-item-action:focus { + color: #055160; + background-color: #badce3; +} +.list-group-item-info.list-group-item-action.active { + color: #fff; + background-color: #055160; + border-color: #055160; +} +.list-group-item-warning { + color: #664d03; + background-color: #fff3cd; +} +.list-group-item-warning.list-group-item-action:hover, +.list-group-item-warning.list-group-item-action:focus { + color: #664d03; + background-color: #e6dbb9; +} +.list-group-item-warning.list-group-item-action.active { + color: #fff; + background-color: #664d03; + border-color: #664d03; +} +.list-group-item-danger { + color: #842029; + background-color: #f8d7da; +} +.list-group-item-danger.list-group-item-action:hover, +.list-group-item-danger.list-group-item-action:focus { + color: #842029; + background-color: #dfc2c4; +} +.list-group-item-danger.list-group-item-action.active { + color: #fff; + background-color: #842029; + border-color: #842029; +} +.list-group-item-light { + color: #636464; + background-color: #fefefe; +} +.list-group-item-light.list-group-item-action:hover, +.list-group-item-light.list-group-item-action:focus { + color: #636464; + background-color: #e5e5e5; +} +.list-group-item-light.list-group-item-action.active { + color: #fff; + background-color: #636464; + border-color: #636464; +} +.list-group-item-dark { + color: var(--textColor); + background-color: #333; +} +.list-group-item-dark.list-group-item-action:hover, +.list-group-item-dark.list-group-item-action:focus { + color: #141619; + background-color: #bebebf; +} +.list-group-item-dark.list-group-item-action.active { + color: #fff; + background-color: #141619; + border-color: #141619; +} +.toast { + width: 350px; + max-width: 100%; + font-size: 0.875rem; + pointer-events: auto; + background-color: rgba(255, 255, 255, 0.85); + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} +.toast.showing { + opacity: 0; +} +.toast:not(.show) { + display: none; +} +.toast-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + max-width: 100%; + pointer-events: none; +} +.toast-container > :not(:last-child) { + margin-bottom: 0.75rem; +} +.toast-header { + display: flex; + align-items: center; + padding: 0.5rem 0.75rem; + color: #6c757d; + background-color: rgba(255, 255, 255, 0.85); + background-clip: padding-box; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} +.toast-header .btn-close { + margin-right: -0.375rem; + margin-left: 0.75rem; +} +.toast-body { + padding: 0.75rem; + word-wrap: break-word; +} +.card { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #333; + background-clip: border-box; + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0.25rem; +} +.card > hr { + margin-right: 0; + margin-left: 0; +} +.card > .list-group { + border-top: inherit; + border-bottom: inherit; +} +.card > .list-group:first-child { + border-top-width: 0; + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} +.card > .list-group:last-child { + border-bottom-width: 0; + border-bottom-right-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); +} +.card > .card-header + .list-group, +.card > .list-group + .card-footer { + border-top: 0; +} +.card-body { + flex: 1 1 auto; + padding: 1rem 1rem; +} +.card-title { + margin-bottom: 0.5rem; +} +.card-subtitle { + margin-top: -0.25rem; + margin-bottom: 0; +} +.card-text:last-child { + margin-bottom: 0; +} +.card-link + .card-link { + margin-left: 1rem; +} +.card-header { + padding: 0.5rem 1rem; + margin-bottom: 0; + background-color: rgba(0, 0, 0, 0.03); + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} +.card-header:first-child { + border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; +} +.card-footer { + padding: 0.5rem 1rem; + background-color: rgba(0, 0, 0, 0.03); + border-top: 1px solid rgba(0, 0, 0, 0.125); + text-align: center; +} +.card-footer:last-child { + border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); +} +.card-header-tabs { + margin-right: -0.5rem; + margin-bottom: -0.5rem; + margin-left: -0.5rem; + border-bottom: 0; +} +.card-header-pills { + margin-right: -0.5rem; + margin-left: -0.5rem; +} +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 1rem; + border-radius: calc(0.25rem - 1px); +} +.card-img, +.card-img-top, +.card-img-bottom { + width: 100%; +} +.card-img, +.card-img-top { + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} +.card-img, +.card-img-bottom { + border-bottom-right-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); +} +.card-group > .card { + margin-bottom: 0.75rem; +} +@media (min-width: 576px) { + .card-group { + display: flex; + flex-flow: row wrap; + } + .card-group > .card { + flex: 1 0 0%; + margin-bottom: 0; + } + .card-group > .card + .card { + margin-left: 0; + border-left: 0; + } + .card-group > .card:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header { + border-top-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer { + border-bottom-right-radius: 0; + } + .card-group > .card:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header { + border-top-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer { + border-bottom-left-radius: 0; + } +} +.modal { + position: fixed; + top: 0; + left: 0; + z-index: 1055; + display: none; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + outline: 0; + user-select: none; +} +.modal .close { + width: 50px; + height: 42px; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; +} +.modal .close:hover { + background-color: #c42b1c; +} +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; + color: var(--textColor); +} +.modal.fade .modal-dialog { + transition: transform 0.1s var(--appleEase), opacity 0.1s var(--appleEase); + transform: scale(0.9); + opacity: 0; +} +.fade { + transition: opacity 0.15s var(--appleEase); +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} +@media (prefers-reduced-motion: reduce) { + .modal.fade .modal-dialog { + transition: none; + } +} +.modal.show .modal-dialog { + transform: none; + opacity: 1; +} +.modal.modal-static .modal-dialog { + transform: scale(1.02); +} +.modal-dialog-scrollable { + height: calc(100% - 1rem); +} +.modal-dialog-scrollable .modal-content { + max-height: 100%; + overflow: hidden; +} +.modal-dialog-scrollable .modal-body { + overflow-y: auto; +} +.modal-dialog-centered { + display: flex; + align-items: center; + min-height: calc(100% - 1rem); +} +.modal-content { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + pointer-events: auto; + background-color: var(--modalBackground); + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: var(--panelRadius); + outline: 0; + box-shadow: var(--ciderShadow-Generic); + overflow: hidden; +} +.modal-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + width: 100vw; + height: 100vh; + background-color: #000; +} +.modal-backdrop.fade { + opacity: 0; +} +.modal-backdrop.show { + opacity: 0.5; +} +.modal-header { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + padding: 1rem 1rem; + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); +} +.modal-header .btn-close { + padding: 0.5rem 0.5rem; + margin: -0.5rem -0.5rem -0.5rem auto; +} +.modal-title { + line-height: 1.5; + margin: 0; + font-size: 1em; +} +.modal-body { + position: relative; + flex: 1 1 auto; + padding: 3rem 1rem 1rem 1rem; +} +.modal-footer { + display: flex; + flex-wrap: wrap; + flex-shrink: 0; + align-items: center; + justify-content: flex-end; + padding: 0.75rem; + border-bottom-right-radius: calc(0.3rem - 1px); + border-bottom-left-radius: calc(0.3rem - 1px); +} +.modal-footer > * { + margin: 0.25rem; +} +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } + .modal-dialog-scrollable { + height: calc(100% - 3.5rem); + } + .modal-dialog-centered { + min-height: calc(100% - 3.5rem); + } + .modal-sm { + max-width: 300px; + } +} +@media (min-width: 992px) { + .modal-lg, + .modal-xl { + max-width: 800px; + } +} +@media (min-width: 1200px) { + .modal-xl { + max-width: 1140px; + } +} +.modal-fullscreen { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; +} +.modal-fullscreen .modal-content { + height: 100%; + border: 0; + border-radius: 0; +} +.modal-fullscreen .modal-header { + border-radius: 0; +} +.modal-fullscreen .modal-body { + overflow-y: auto; +} +.modal-fullscreen .modal-footer { + border-radius: 0; +} +@media (max-width: 575.98px) { + .modal-fullscreen-sm-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-sm-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-sm-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-sm-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-sm-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 767.98px) { + .modal-fullscreen-md-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-md-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-md-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-md-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-md-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 991.98px) { + .modal-fullscreen-lg-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-lg-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-lg-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-lg-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-lg-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 1199.98px) { + .modal-fullscreen-xl-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-xl-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-xl-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-xl-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-xl-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 1399.98px) { + .modal-fullscreen-xxl-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-xxl-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-xxl-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-xxl-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-xxl-down .modal-footer { + border-radius: 0; + } +} +.btn { + display: inline-block; + font-weight: 400; + line-height: 1.5; + color: #212529; + text-align: center; + text-decoration: none; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 1rem; + border-radius: 0.25rem; + font-family: inherit; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + border: 1px solid rgba(100, 100, 100, 0.35); + border-top: 1px solid rgba(100, 100, 100, 0.5); + border-radius: 6px; + font-size: 14px; +} +@media (prefers-reduced-motion: reduce) { + .btn { + transition: none; + } +} +.btn:hover { + color: #212529; +} +.btn-check:focus + .btn, +.btn:focus { + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} +.btn:disabled, +.btn.disabled, +fieldset:disabled .btn { + pointer-events: none; + opacity: 0.65; +} +.btn-primary { + color: #fff; + background-color: var(--keyColor-primary); +} +.btn-primary:hover { + color: #fff; +} +.btn-check:focus + .btn-primary, +.btn-primary:focus { + color: #fff; +} +.btn-check:checked + .btn-primary, +.btn-check:active + .btn-primary, +.btn-primary:active, +.btn-primary.active, +.show > .btn-primary.dropdown-toggle { + color: #fff; +} +.btn-primary:disabled, +.btn-primary.disabled { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.btn-secondary { + color: #fff; + border-color: 1px solid rgba(100, 100, 100, 0.35); + background-color: rgba(100, 100, 100, 0.25); + border-top-color: 1px solid rgba(100, 100, 100, 0.5); +} +.btn-secondary:hover { + color: #fff; +} +.btn-check:checked + .btn-secondary, +.btn-check:active + .btn-secondary, +.btn-secondary:active, +.btn-secondary.active, +.show > .btn-secondary.dropdown-toggle { + color: #fff; + background-color: #565e64; + border-color: #51585e; +} +.btn-check:checked + .btn-secondary:focus, +.btn-check:active + .btn-secondary:focus, +.btn-secondary:active:focus, +.btn-secondary.active:focus, +.show > .btn-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); +} +.btn-secondary:disabled, +.btn-secondary.disabled { + color: #fff; + background-color: #6c757d; + border-color: #6c757d; +} +.btn-success { + color: #fff; + background-color: #198754; + border-color: #198754; +} +.btn-success:hover { + color: #fff; + background-color: #157347; + border-color: #146c43; +} +.btn-check:focus + .btn-success, +.btn-success:focus { + color: #fff; + background-color: #157347; + border-color: #146c43; + box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); +} +.btn-check:checked + .btn-success, +.btn-check:active + .btn-success, +.btn-success:active, +.btn-success.active, +.show > .btn-success.dropdown-toggle { + color: #fff; + background-color: #146c43; + border-color: #13653f; +} +.btn-check:checked + .btn-success:focus, +.btn-check:active + .btn-success:focus, +.btn-success:active:focus, +.btn-success.active:focus, +.show > .btn-success.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); +} +.btn-success:disabled, +.btn-success.disabled { + color: #fff; + background-color: #198754; + border-color: #198754; +} +.btn-info { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-info:hover { + color: #000; + background-color: #31d2f2; + border-color: #25cff2; +} +.btn-check:focus + .btn-info, +.btn-info:focus { + color: #000; + background-color: #31d2f2; + border-color: #25cff2; + box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); +} +.btn-check:checked + .btn-info, +.btn-check:active + .btn-info, +.btn-info:active, +.btn-info.active, +.show > .btn-info.dropdown-toggle { + color: #000; + background-color: #3dd5f3; + border-color: #25cff2; +} +.btn-check:checked + .btn-info:focus, +.btn-check:active + .btn-info:focus, +.btn-info:active:focus, +.btn-info.active:focus, +.show > .btn-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); +} +.btn-info:disabled, +.btn-info.disabled { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-warning { + color: #000; + background-color: #ffc107; + border-color: #ffc107; +} +.btn-warning:hover { + color: #000; + background-color: #ffca2c; + border-color: #ffc720; +} +.btn-check:focus + .btn-warning, +.btn-warning:focus { + color: #000; + background-color: #ffca2c; + border-color: #ffc720; + box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); +} +.btn-check:checked + .btn-warning, +.btn-check:active + .btn-warning, +.btn-warning:active, +.btn-warning.active, +.show > .btn-warning.dropdown-toggle { + color: #000; + background-color: #ffcd39; + border-color: #ffc720; +} +.btn-check:checked + .btn-warning:focus, +.btn-check:active + .btn-warning:focus, +.btn-warning:active:focus, +.btn-warning.active:focus, +.show > .btn-warning.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); +} +.btn-warning:disabled, +.btn-warning.disabled { + color: #000; + background-color: #ffc107; + border-color: #ffc107; +} +.btn-danger { + color: #fff; + background-color: #dc3545; + border-color: #dc3545; +} +.btn-danger:hover { + color: #fff; + background-color: #bb2d3b; + border-color: #b02a37; +} +.btn-check:focus + .btn-danger, +.btn-danger:focus { + color: #fff; + background-color: #bb2d3b; + border-color: #b02a37; + box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); +} +.btn-check:checked + .btn-danger, +.btn-check:active + .btn-danger, +.btn-danger:active, +.btn-danger.active, +.show > .btn-danger.dropdown-toggle { + color: #fff; + background-color: #b02a37; + border-color: #a52834; +} +.btn-check:checked + .btn-danger:focus, +.btn-check:active + .btn-danger:focus, +.btn-danger:active:focus, +.btn-danger.active:focus, +.show > .btn-danger.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); +} +.btn-danger:disabled, +.btn-danger.disabled { + color: #fff; + background-color: #dc3545; + border-color: #dc3545; +} +.btn-light { + color: #000; + background-color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-light:hover { + color: #000; + background-color: #f9fafb; + border-color: #f9fafb; +} +.btn-check:focus + .btn-light, +.btn-light:focus { + color: #000; + background-color: #f9fafb; + border-color: #f9fafb; + box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); +} +.btn-check:checked + .btn-light, +.btn-check:active + .btn-light, +.btn-light:active, +.btn-light.active, +.show > .btn-light.dropdown-toggle { + color: #000; + background-color: #f9fafb; + border-color: #f9fafb; +} +.btn-check:checked + .btn-light:focus, +.btn-check:active + .btn-light:focus, +.btn-light:active:focus, +.btn-light.active:focus, +.show > .btn-light.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); +} +.btn-light:disabled, +.btn-light.disabled { + color: #000; + background-color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-dark { + color: #fff; + background-color: #212529; + border-color: #212529; +} +.btn-dark:hover { + color: #fff; + background-color: #1c1f23; + border-color: #1a1e21; +} +.btn-check:focus + .btn-dark, +.btn-dark:focus { + color: #fff; + background-color: #1c1f23; + border-color: #1a1e21; + box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); +} +.btn-check:checked + .btn-dark, +.btn-check:active + .btn-dark, +.btn-dark:active, +.btn-dark.active, +.show > .btn-dark.dropdown-toggle { + color: #fff; + background-color: #1a1e21; + border-color: #191c1f; +} +.btn-check:checked + .btn-dark:focus, +.btn-check:active + .btn-dark:focus, +.btn-dark:active:focus, +.btn-dark.active:focus, +.show > .btn-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); +} +.btn-dark:disabled, +.btn-dark.disabled { + color: #fff; + background-color: #212529; + border-color: #212529; +} +.btn-outline-primary { + color: #0d6efd; + border-color: #0d6efd; +} +.btn-outline-primary:hover { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.btn-check:focus + .btn-outline-primary, +.btn-outline-primary:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); +} +.btn-check:checked + .btn-outline-primary, +.btn-check:active + .btn-outline-primary, +.btn-outline-primary:active, +.btn-outline-primary.active, +.btn-outline-primary.dropdown-toggle.show { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.btn-check:checked + .btn-outline-primary:focus, +.btn-check:active + .btn-outline-primary:focus, +.btn-outline-primary:active:focus, +.btn-outline-primary.active:focus, +.btn-outline-primary.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); +} +.btn-outline-primary:disabled, +.btn-outline-primary.disabled { + color: #0d6efd; + background-color: transparent; +} +.btn-outline-secondary { + color: #6c757d; + border-color: #6c757d; +} +.btn-outline-secondary:hover { + color: #fff; + background-color: #6c757d; + border-color: #6c757d; +} +.btn-check:focus + .btn-outline-secondary, +.btn-outline-secondary:focus { + box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); +} +.btn-check:checked + .btn-outline-secondary, +.btn-check:active + .btn-outline-secondary, +.btn-outline-secondary:active, +.btn-outline-secondary.active, +.btn-outline-secondary.dropdown-toggle.show { + color: #fff; + background-color: #6c757d; + border-color: #6c757d; +} +.btn-check:checked + .btn-outline-secondary:focus, +.btn-check:active + .btn-outline-secondary:focus, +.btn-outline-secondary:active:focus, +.btn-outline-secondary.active:focus, +.btn-outline-secondary.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); +} +.btn-outline-secondary:disabled, +.btn-outline-secondary.disabled { + color: #6c757d; + background-color: transparent; +} +.btn-outline-success { + color: #198754; + border-color: #198754; +} +.btn-outline-success:hover { + color: #fff; + background-color: #198754; + border-color: #198754; +} +.btn-check:focus + .btn-outline-success, +.btn-outline-success:focus { + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); +} +.btn-check:checked + .btn-outline-success, +.btn-check:active + .btn-outline-success, +.btn-outline-success:active, +.btn-outline-success.active, +.btn-outline-success.dropdown-toggle.show { + color: #fff; + background-color: #198754; + border-color: #198754; +} +.btn-check:checked + .btn-outline-success:focus, +.btn-check:active + .btn-outline-success:focus, +.btn-outline-success:active:focus, +.btn-outline-success.active:focus, +.btn-outline-success.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); +} +.btn-outline-success:disabled, +.btn-outline-success.disabled { + color: #198754; + background-color: transparent; +} +.btn-outline-info { + color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-outline-info:hover { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-check:focus + .btn-outline-info, +.btn-outline-info:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); +} +.btn-check:checked + .btn-outline-info, +.btn-check:active + .btn-outline-info, +.btn-outline-info:active, +.btn-outline-info.active, +.btn-outline-info.dropdown-toggle.show { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-check:checked + .btn-outline-info:focus, +.btn-check:active + .btn-outline-info:focus, +.btn-outline-info:active:focus, +.btn-outline-info.active:focus, +.btn-outline-info.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); +} +.btn-outline-info:disabled, +.btn-outline-info.disabled { + color: #0dcaf0; + background-color: transparent; +} +.btn-outline-warning { + color: #ffc107; + border-color: #ffc107; +} +.btn-outline-warning:hover { + color: #000; + background-color: #ffc107; + border-color: #ffc107; +} +.btn-check:focus + .btn-outline-warning, +.btn-outline-warning:focus { + box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); +} +.btn-check:checked + .btn-outline-warning, +.btn-check:active + .btn-outline-warning, +.btn-outline-warning:active, +.btn-outline-warning.active, +.btn-outline-warning.dropdown-toggle.show { + color: #000; + background-color: #ffc107; + border-color: #ffc107; +} +.btn-check:checked + .btn-outline-warning:focus, +.btn-check:active + .btn-outline-warning:focus, +.btn-outline-warning:active:focus, +.btn-outline-warning.active:focus, +.btn-outline-warning.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); +} +.btn-outline-warning:disabled, +.btn-outline-warning.disabled { + color: #ffc107; + background-color: transparent; +} +.btn-outline-danger { + color: #dc3545; + border-color: #dc3545; +} +.btn-outline-danger:hover { + color: #fff; + background-color: #dc3545; + border-color: #dc3545; +} +.btn-check:focus + .btn-outline-danger, +.btn-outline-danger:focus { + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); +} +.btn-check:checked + .btn-outline-danger, +.btn-check:active + .btn-outline-danger, +.btn-outline-danger:active, +.btn-outline-danger.active, +.btn-outline-danger.dropdown-toggle.show { + color: #fff; + background-color: #dc3545; + border-color: #dc3545; +} +.btn-check:checked + .btn-outline-danger:focus, +.btn-check:active + .btn-outline-danger:focus, +.btn-outline-danger:active:focus, +.btn-outline-danger.active:focus, +.btn-outline-danger.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); +} +.btn-outline-danger:disabled, +.btn-outline-danger.disabled { + color: #dc3545; + background-color: transparent; +} +.btn-outline-light { + color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-outline-light:hover { + color: #000; + background-color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-check:focus + .btn-outline-light, +.btn-outline-light:focus { + box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); +} +.btn-check:checked + .btn-outline-light, +.btn-check:active + .btn-outline-light, +.btn-outline-light:active, +.btn-outline-light.active, +.btn-outline-light.dropdown-toggle.show { + color: #000; + background-color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-check:checked + .btn-outline-light:focus, +.btn-check:active + .btn-outline-light:focus, +.btn-outline-light:active:focus, +.btn-outline-light.active:focus, +.btn-outline-light.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); +} +.btn-outline-light:disabled, +.btn-outline-light.disabled { + color: #f8f9fa; + background-color: transparent; +} +.btn-outline-dark { + color: #212529; + border-color: #212529; +} +.btn-outline-dark:hover { + color: #fff; + background-color: #212529; + border-color: #212529; +} +.btn-check:focus + .btn-outline-dark, +.btn-outline-dark:focus { + box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); +} +.btn-check:checked + .btn-outline-dark, +.btn-check:active + .btn-outline-dark, +.btn-outline-dark:active, +.btn-outline-dark.active, +.btn-outline-dark.dropdown-toggle.show { + color: #fff; + background-color: #212529; + border-color: #212529; +} +.btn-check:checked + .btn-outline-dark:focus, +.btn-check:active + .btn-outline-dark:focus, +.btn-outline-dark:active:focus, +.btn-outline-dark.active:focus, +.btn-outline-dark.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); +} +.btn-outline-dark:disabled, +.btn-outline-dark.disabled { + color: #212529; + background-color: transparent; +} +.btn-link { + font-weight: 400; + color: #0d6efd; + text-decoration: underline; +} +.btn-link:hover { + color: #0a58ca; +} +.btn-link:disabled, +.btn-link.disabled { + color: #6c757d; +} +.btn-lg, +.btn-group-lg > .btn { + padding: 0.5rem 1rem; + font-size: 1.25rem; + border-radius: 0.3rem; +} +.btn-sm, +.btn-group-sm > .btn { + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + border-radius: 0.2rem; +} +.form-control { + width: 100%; +} +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-flex; + vertical-align: middle; +} +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + flex: 1 1 auto; +} +.btn-group > .btn-check:checked + .btn, +.btn-group > .btn-check:focus + .btn, +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active, +.btn-group-vertical > .btn-check:checked + .btn, +.btn-group-vertical > .btn-check:focus + .btn, +.btn-group-vertical > .btn:hover, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { + z-index: 1; +} +.btn-toolbar { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} +.btn-toolbar .input-group { + width: auto; +} +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) { + margin-left: -1px; +} +.btn-group > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:nth-child(n+3), +.btn-group > :not(.btn-check) + .btn, +.btn-group > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.dropdown-toggle-split { + padding-right: 0.5625rem; + padding-left: 0.5625rem; +} +.dropdown-toggle-split::after, +.dropup .dropdown-toggle-split::after, +.dropend .dropdown-toggle-split::after { + margin-left: 0; +} +.dropstart .dropdown-toggle-split::before { + margin-right: 0; +} +.btn-sm + .dropdown-toggle-split, +.btn-group-sm > .btn + .dropdown-toggle-split { + padding-right: 0.375rem; + padding-left: 0.375rem; +} +.btn-lg + .dropdown-toggle-split, +.btn-group-lg > .btn + .dropdown-toggle-split { + padding-right: 0.75rem; + padding-left: 0.75rem; +} +.btn-group-vertical { + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group { + width: 100%; +} +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) { + margin-top: -1px; +} +.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group-vertical > .btn-group:not(:last-child) > .btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn ~ .btn, +.btn-group-vertical > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.table { + --bs-table-bg: transparent; + --bs-table-accent-bg: transparent; + --bs-table-striped-color: #212529; + --bs-table-striped-bg: rgba(0, 0, 0, 0.05); + --bs-table-active-color: #212529; + --bs-table-active-bg: rgba(0, 0, 0, 0.1); + --bs-table-hover-color: #212529; + --bs-table-hover-bg: rgba(0, 0, 0, 0.075); + width: 100%; + margin-bottom: 1rem; + color: #212529; + vertical-align: top; + border-color: #dee2e6; +} +.table > :not(caption) > * > * { + padding: 0.5rem 0.5rem; + background-color: var(--bs-table-bg); + border-bottom-width: 1px; + box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); +} +.table > tbody { + vertical-align: inherit; +} +.table > thead { + vertical-align: bottom; +} +.table > :not(:first-child) { + border-top: 2px solid currentColor; +} +.caption-top { + caption-side: top; +} +.table-sm > :not(caption) > * > * { + padding: 0.25rem 0.25rem; +} +.table-bordered > :not(caption) > * { + border-width: 1px 0; +} +.table-bordered > :not(caption) > * > * { + border-width: 0 1px; +} +.table-borderless > :not(caption) > * > * { + border-bottom-width: 0; +} +.table-borderless > :not(:first-child) { + border-top-width: 0; +} +.table-striped > tbody > tr:nth-of-type(odd) > * { + --bs-table-accent-bg: var(--bs-table-striped-bg); + color: var(--bs-table-striped-color); +} +.table-active { + --bs-table-accent-bg: var(--bs-table-active-bg); + color: var(--bs-table-active-color); +} +.table-hover > tbody > tr:hover > * { + --bs-table-accent-bg: var(--bs-table-hover-bg); + color: var(--bs-table-hover-color); +} +.table-primary { + --bs-table-bg: #cfe2ff; + --bs-table-striped-bg: #c5d7f2; + --bs-table-striped-color: #000; + --bs-table-active-bg: #bacbe6; + --bs-table-active-color: #000; + --bs-table-hover-bg: #bfd1ec; + --bs-table-hover-color: #000; + color: #000; + border-color: #bacbe6; +} +.table-secondary { + --bs-table-bg: #e2e3e5; + --bs-table-striped-bg: #d7d8da; + --bs-table-striped-color: #000; + --bs-table-active-bg: #cbccce; + --bs-table-active-color: #000; + --bs-table-hover-bg: #d1d2d4; + --bs-table-hover-color: #000; + color: #000; + border-color: #cbccce; +} +.table-success { + --bs-table-bg: #d1e7dd; + --bs-table-striped-bg: #c7dbd2; + --bs-table-striped-color: #000; + --bs-table-active-bg: #bcd0c7; + --bs-table-active-color: #000; + --bs-table-hover-bg: #c1d6cc; + --bs-table-hover-color: #000; + color: #000; + border-color: #bcd0c7; +} +.table-info { + --bs-table-bg: #cff4fc; + --bs-table-striped-bg: #c5e8ef; + --bs-table-striped-color: #000; + --bs-table-active-bg: #badce3; + --bs-table-active-color: #000; + --bs-table-hover-bg: #bfe2e9; + --bs-table-hover-color: #000; + color: #000; + border-color: #badce3; +} +.table-warning { + --bs-table-bg: #fff3cd; + --bs-table-striped-bg: #f2e7c3; + --bs-table-striped-color: #000; + --bs-table-active-bg: #e6dbb9; + --bs-table-active-color: #000; + --bs-table-hover-bg: #ece1be; + --bs-table-hover-color: #000; + color: #000; + border-color: #e6dbb9; +} +.table-danger { + --bs-table-bg: #f8d7da; + --bs-table-striped-bg: #eccccf; + --bs-table-striped-color: #000; + --bs-table-active-bg: #dfc2c4; + --bs-table-active-color: #000; + --bs-table-hover-bg: #e5c7ca; + --bs-table-hover-color: #000; + color: #000; + border-color: #dfc2c4; +} +.table-light { + --bs-table-bg: #f8f9fa; + --bs-table-striped-bg: #ecedee; + --bs-table-striped-color: #000; + --bs-table-active-bg: #dfe0e1; + --bs-table-active-color: #000; + --bs-table-hover-bg: #e5e6e7; + --bs-table-hover-color: #000; + color: #000; + border-color: #dfe0e1; +} +.table-dark { + --bs-table-bg: #212529; + --bs-table-striped-bg: #2c3034; + --bs-table-striped-color: #fff; + --bs-table-active-bg: #373b3e; + --bs-table-active-color: #fff; + --bs-table-hover-bg: #323539; + --bs-table-hover-color: #fff; + color: #fff; + border-color: #373b3e; +} +.table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} +@media (max-width: 575.98px) { + .table-responsive-sm { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +@media (max-width: 767.98px) { + .table-responsive-md { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +@media (max-width: 991.98px) { + .table-responsive-lg { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +@media (max-width: 1199.98px) { + .table-responsive-xl { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +@media (max-width: 1399.98px) { + .table-responsive-xxl { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} +.nav { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.nav-link { + display: block; + padding: 0.5rem 1rem; + text-decoration: none; +} +.nav-link:hover, +.nav-link:focus { + text-decoration: none; +} +.nav-link.disabled { + color: #6c757d; + pointer-events: none; + cursor: default; +} +.nav-tabs { + border-bottom: 1px solid #dee2e6; +} +.nav-tabs .nav-link { + margin-bottom: -1px; + background: none; + border: 1px solid transparent; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} +.nav-tabs .nav-link:hover, +.nav-tabs .nav-link:focus { + border-color: #e9ecef #e9ecef #dee2e6; + isolation: isolate; +} +.nav-tabs .nav-link.disabled { + color: #6c757d; + background-color: transparent; + border-color: transparent; +} +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: #495057; + background-color: #fff; + border-color: #dee2e6 #dee2e6 #fff; +} +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.nav-pills .nav-link { + background-color: transparent; + border: 0; + border-radius: 6px; + color: #eee; + -webkit-user-drag: none; + font-weight: 500; + margin: 0px 4px; +} +.nav-pills .nav-link:hover { + background-color: var(--hover); +} +.nav-pills .nav-link.active, +.nav-pills .show > .nav-link { + color: #fff; + background-color: var(--selected); +} +.nav-fill > .nav-link, +.nav-fill .nav-item { + flex: 1 1 auto; + text-align: center; +} +.nav-justified > .nav-link, +.nav-justified .nav-item { + flex-basis: 0; + flex-grow: 1; + text-align: center; +} +.nav-fill .nav-item .nav-link, +.nav-justified .nav-item .nav-link { + width: 100%; +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} +/*! + * Bootstrap Grid v5.1.1 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ +:root { + --bs-blue: #0d6efd; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #d63384; + --bs-red: #dc3545; + --bs-orange: #fd7e14; + --bs-yellow: #ffc107; + --bs-green: #198754; + --bs-teal: #20c997; + --bs-cyan: #0dcaf0; + --bs-white: #fff; + --bs-gray: #6c757d; + --bs-gray-dark: #343a40; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #e9ecef; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #adb5bd; + --bs-gray-600: #6c757d; + --bs-gray-700: #495057; + --bs-gray-800: #343a40; + --bs-gray-900: #212529; + --bs-primary: #0d6efd; + --bs-secondary: #6c757d; + --bs-success: #198754; + --bs-info: #0dcaf0; + --bs-warning: #ffc107; + --bs-danger: #dc3545; + --bs-light: #f8f9fa; + --bs-dark: #212529; + --bs-primary-rgb: 13, 110, 253; + --bs-secondary-rgb: 108, 117, 125; + --bs-success-rgb: 25, 135, 84; + --bs-info-rgb: 13, 202, 240; + --bs-warning-rgb: 255, 193, 7; + --bs-danger-rgb: 220, 53, 69; + --bs-light-rgb: 248, 249, 250; + --bs-dark-rgb: 33, 37, 41; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-color-rgb: 33, 37, 41; + --bs-body-bg-rgb: 255, 255, 255; + --bs-font-sans-serif: inherit; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: inherit; + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #212529; + --bs-body-bg: #fff; +} +.container, +.container-fluid, +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); + margin-right: auto; + margin-left: auto; +} +@media (min-width: 576px) { + .container-sm, + .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container-md, + .container-sm, + .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 1140px; + } +} +@media (min-width: 1400px) { + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 1320px; + } +} +.col { + flex: 1 0 0%; +} +.row-cols-auto > * { + flex: 0 0 auto; + width: auto; +} +.row-cols-1 > * { + flex: 0 0 auto; + width: 100%; +} +.row-cols-2 > * { + flex: 0 0 auto; + width: 50%; +} +.row-cols-3 > * { + flex: 0 0 auto; + width: 33.33333333%; +} +.row-cols-4 > * { + flex: 0 0 auto; + width: 25%; +} +.row-cols-5 > * { + flex: 0 0 auto; + width: 20%; +} +.row-cols-6 > * { + flex: 0 0 auto; + width: 16.66666667%; +} +.col-auto { + flex: 0 0 auto; + width: auto; +} +.col-1 { + flex: 0 0 auto; + width: 8.33333333%; +} +.col-2 { + flex: 0 0 auto; + width: 16.66666667%; +} +.col-3 { + flex: 0 0 auto; + width: 25%; +} +.col-4 { + flex: 0 0 auto; + width: 33.33333333%; +} +.col-5 { + flex: 0 0 auto; + width: 41.66666667%; +} +.col-6 { + flex: 0 0 auto; + width: 50%; +} +.col-7 { + flex: 0 0 auto; + width: 58.33333333%; +} +.col-8 { + flex: 0 0 auto; + width: 66.66666667%; +} +.col-9 { + flex: 0 0 auto; + width: 75%; +} +.col-10 { + flex: 0 0 auto; + width: 83.33333333%; +} +.col-11 { + flex: 0 0 auto; + width: 91.66666667%; +} +.col-12 { + flex: 0 0 auto; + width: 100%; +} +.offset-1 { + margin-left: 8.33333333%; +} +.offset-2 { + margin-left: 16.66666667%; +} +.offset-3 { + margin-left: 25%; +} +.offset-4 { + margin-left: 33.33333333%; +} +.offset-5 { + margin-left: 41.66666667%; +} +.offset-6 { + margin-left: 50%; +} +.offset-7 { + margin-left: 58.33333333%; +} +.offset-8 { + margin-left: 66.66666667%; +} +.offset-9 { + margin-left: 75%; +} +.offset-10 { + margin-left: 83.33333333%; +} +.offset-11 { + margin-left: 91.66666667%; +} +.g-0, +.gx-0 { + --bs-gutter-x: 0; +} +.g-0, +.gy-0 { + --bs-gutter-y: 0; +} +.g-1, +.gx-1 { + --bs-gutter-x: 0.25rem; +} +.g-1, +.gy-1 { + --bs-gutter-y: 0.25rem; +} +.g-2, +.gx-2 { + --bs-gutter-x: 0.5rem; +} +.g-2, +.gy-2 { + --bs-gutter-y: 0.5rem; +} +.g-3, +.gx-3 { + --bs-gutter-x: 1rem; +} +.g-3, +.gy-3 { + --bs-gutter-y: 1rem; +} +.g-4, +.gx-4 { + --bs-gutter-x: 1.5rem; +} +.g-4, +.gy-4 { + --bs-gutter-y: 1.5rem; +} +.g-5, +.gx-5 { + --bs-gutter-x: 3rem; +} +.g-5, +.gy-5 { + --bs-gutter-y: 3rem; +} +@media (min-width: 576px) { + .col-sm { + flex: 1 0 0%; + } + .row-cols-sm-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-sm-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-sm-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-sm-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-sm-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-sm-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-sm-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-sm-auto { + flex: 0 0 auto; + width: auto; + } + .col-sm-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-sm-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-sm-3 { + flex: 0 0 auto; + width: 25%; + } + .col-sm-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-sm-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-sm-6 { + flex: 0 0 auto; + width: 50%; + } + .col-sm-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-sm-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-sm-9 { + flex: 0 0 auto; + width: 75%; + } + .col-sm-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-sm-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-sm-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-sm-0 { + margin-left: 0; + } + .offset-sm-1 { + margin-left: 8.33333333%; + } + .offset-sm-2 { + margin-left: 16.66666667%; + } + .offset-sm-3 { + margin-left: 25%; + } + .offset-sm-4 { + margin-left: 33.33333333%; + } + .offset-sm-5 { + margin-left: 41.66666667%; + } + .offset-sm-6 { + margin-left: 50%; + } + .offset-sm-7 { + margin-left: 58.33333333%; + } + .offset-sm-8 { + margin-left: 66.66666667%; + } + .offset-sm-9 { + margin-left: 75%; + } + .offset-sm-10 { + margin-left: 83.33333333%; + } + .offset-sm-11 { + margin-left: 91.66666667%; + } + .g-sm-0, + .gx-sm-0 { + --bs-gutter-x: 0; + } + .g-sm-0, + .gy-sm-0 { + --bs-gutter-y: 0; + } + .g-sm-1, + .gx-sm-1 { + --bs-gutter-x: 0.25rem; + } + .g-sm-1, + .gy-sm-1 { + --bs-gutter-y: 0.25rem; + } + .g-sm-2, + .gx-sm-2 { + --bs-gutter-x: 0.5rem; + } + .g-sm-2, + .gy-sm-2 { + --bs-gutter-y: 0.5rem; + } + .g-sm-3, + .gx-sm-3 { + --bs-gutter-x: 1rem; + } + .g-sm-3, + .gy-sm-3 { + --bs-gutter-y: 1rem; + } + .g-sm-4, + .gx-sm-4 { + --bs-gutter-x: 1.5rem; + } + .g-sm-4, + .gy-sm-4 { + --bs-gutter-y: 1.5rem; + } + .g-sm-5, + .gx-sm-5 { + --bs-gutter-x: 3rem; + } + .g-sm-5, + .gy-sm-5 { + --bs-gutter-y: 3rem; + } +} +@media (min-width: 768px) { + .col-md { + flex: 1 0 0%; + } + .row-cols-md-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-md-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-md-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-md-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-md-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-md-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-md-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-md-auto { + flex: 0 0 auto; + width: auto; + } + .col-md-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-md-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-md-3 { + flex: 0 0 auto; + width: 25%; + } + .col-md-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-md-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-md-6 { + flex: 0 0 auto; + width: 50%; + } + .col-md-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-md-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-md-9 { + flex: 0 0 auto; + width: 75%; + } + .col-md-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-md-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-md-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-md-0 { + margin-left: 0; + } + .offset-md-1 { + margin-left: 8.33333333%; + } + .offset-md-2 { + margin-left: 16.66666667%; + } + .offset-md-3 { + margin-left: 25%; + } + .offset-md-4 { + margin-left: 33.33333333%; + } + .offset-md-5 { + margin-left: 41.66666667%; + } + .offset-md-6 { + margin-left: 50%; + } + .offset-md-7 { + margin-left: 58.33333333%; + } + .offset-md-8 { + margin-left: 66.66666667%; + } + .offset-md-9 { + margin-left: 75%; + } + .offset-md-10 { + margin-left: 83.33333333%; + } + .offset-md-11 { + margin-left: 91.66666667%; + } + .g-md-0, + .gx-md-0 { + --bs-gutter-x: 0; + } + .g-md-0, + .gy-md-0 { + --bs-gutter-y: 0; + } + .g-md-1, + .gx-md-1 { + --bs-gutter-x: 0.25rem; + } + .g-md-1, + .gy-md-1 { + --bs-gutter-y: 0.25rem; + } + .g-md-2, + .gx-md-2 { + --bs-gutter-x: 0.5rem; + } + .g-md-2, + .gy-md-2 { + --bs-gutter-y: 0.5rem; + } + .g-md-3, + .gx-md-3 { + --bs-gutter-x: 1rem; + } + .g-md-3, + .gy-md-3 { + --bs-gutter-y: 1rem; + } + .g-md-4, + .gx-md-4 { + --bs-gutter-x: 1.5rem; + } + .g-md-4, + .gy-md-4 { + --bs-gutter-y: 1.5rem; + } + .g-md-5, + .gx-md-5 { + --bs-gutter-x: 3rem; + } + .g-md-5, + .gy-md-5 { + --bs-gutter-y: 3rem; + } +} +@media (min-width: 992px) { + .col-lg { + flex: 1 0 0%; + } + .row-cols-lg-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-lg-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-lg-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-lg-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-lg-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-lg-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-lg-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-lg-auto { + flex: 0 0 auto; + width: auto; + } + .col-lg-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-lg-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-lg-3 { + flex: 0 0 auto; + width: 25%; + } + .col-lg-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-lg-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-lg-6 { + flex: 0 0 auto; + width: 50%; + } + .col-lg-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-lg-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-lg-9 { + flex: 0 0 auto; + width: 75%; + } + .col-lg-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-lg-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-lg-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-lg-0 { + margin-left: 0; + } + .offset-lg-1 { + margin-left: 8.33333333%; + } + .offset-lg-2 { + margin-left: 16.66666667%; + } + .offset-lg-3 { + margin-left: 25%; + } + .offset-lg-4 { + margin-left: 33.33333333%; + } + .offset-lg-5 { + margin-left: 41.66666667%; + } + .offset-lg-6 { + margin-left: 50%; + } + .offset-lg-7 { + margin-left: 58.33333333%; + } + .offset-lg-8 { + margin-left: 66.66666667%; + } + .offset-lg-9 { + margin-left: 75%; + } + .offset-lg-10 { + margin-left: 83.33333333%; + } + .offset-lg-11 { + margin-left: 91.66666667%; + } + .g-lg-0, + .gx-lg-0 { + --bs-gutter-x: 0; + } + .g-lg-0, + .gy-lg-0 { + --bs-gutter-y: 0; + } + .g-lg-1, + .gx-lg-1 { + --bs-gutter-x: 0.25rem; + } + .g-lg-1, + .gy-lg-1 { + --bs-gutter-y: 0.25rem; + } + .g-lg-2, + .gx-lg-2 { + --bs-gutter-x: 0.5rem; + } + .g-lg-2, + .gy-lg-2 { + --bs-gutter-y: 0.5rem; + } + .g-lg-3, + .gx-lg-3 { + --bs-gutter-x: 1rem; + } + .g-lg-3, + .gy-lg-3 { + --bs-gutter-y: 1rem; + } + .g-lg-4, + .gx-lg-4 { + --bs-gutter-x: 1.5rem; + } + .g-lg-4, + .gy-lg-4 { + --bs-gutter-y: 1.5rem; + } + .g-lg-5, + .gx-lg-5 { + --bs-gutter-x: 3rem; + } + .g-lg-5, + .gy-lg-5 { + --bs-gutter-y: 3rem; + } +} +@media (min-width: 1200px) { + .col-xl { + flex: 1 0 0%; + } + .row-cols-xl-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-xl-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-xl-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-xl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-xl-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-xl-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-xl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-xl-auto { + flex: 0 0 auto; + width: auto; + } + .col-xl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-xl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-xl-3 { + flex: 0 0 auto; + width: 25%; + } + .col-xl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-xl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-xl-6 { + flex: 0 0 auto; + width: 50%; + } + .col-xl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-xl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-xl-9 { + flex: 0 0 auto; + width: 75%; + } + .col-xl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-xl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-xl-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-xl-0 { + margin-left: 0; + } + .offset-xl-1 { + margin-left: 8.33333333%; + } + .offset-xl-2 { + margin-left: 16.66666667%; + } + .offset-xl-3 { + margin-left: 25%; + } + .offset-xl-4 { + margin-left: 33.33333333%; + } + .offset-xl-5 { + margin-left: 41.66666667%; + } + .offset-xl-6 { + margin-left: 50%; + } + .offset-xl-7 { + margin-left: 58.33333333%; + } + .offset-xl-8 { + margin-left: 66.66666667%; + } + .offset-xl-9 { + margin-left: 75%; + } + .offset-xl-10 { + margin-left: 83.33333333%; + } + .offset-xl-11 { + margin-left: 91.66666667%; + } + .g-xl-0, + .gx-xl-0 { + --bs-gutter-x: 0; + } + .g-xl-0, + .gy-xl-0 { + --bs-gutter-y: 0; + } + .g-xl-1, + .gx-xl-1 { + --bs-gutter-x: 0.25rem; + } + .g-xl-1, + .gy-xl-1 { + --bs-gutter-y: 0.25rem; + } + .g-xl-2, + .gx-xl-2 { + --bs-gutter-x: 0.5rem; + } + .g-xl-2, + .gy-xl-2 { + --bs-gutter-y: 0.5rem; + } + .g-xl-3, + .gx-xl-3 { + --bs-gutter-x: 1rem; + } + .g-xl-3, + .gy-xl-3 { + --bs-gutter-y: 1rem; + } + .g-xl-4, + .gx-xl-4 { + --bs-gutter-x: 1.5rem; + } + .g-xl-4, + .gy-xl-4 { + --bs-gutter-y: 1.5rem; + } + .g-xl-5, + .gx-xl-5 { + --bs-gutter-x: 3rem; + } + .g-xl-5, + .gy-xl-5 { + --bs-gutter-y: 3rem; + } +} +@media (min-width: 1400px) { + .col-xxl { + flex: 1 0 0%; + } + .row-cols-xxl-auto > * { + flex: 0 0 auto; + width: auto; + } + .row-cols-xxl-1 > * { + flex: 0 0 auto; + width: 100%; + } + .row-cols-xxl-2 > * { + flex: 0 0 auto; + width: 50%; + } + .row-cols-xxl-3 > * { + flex: 0 0 auto; + width: 33.33333333%; + } + .row-cols-xxl-4 > * { + flex: 0 0 auto; + width: 25%; + } + .row-cols-xxl-5 > * { + flex: 0 0 auto; + width: 20%; + } + .row-cols-xxl-6 > * { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-xxl-auto { + flex: 0 0 auto; + width: auto; + } + .col-xxl-1 { + flex: 0 0 auto; + width: 8.33333333%; + } + .col-xxl-2 { + flex: 0 0 auto; + width: 16.66666667%; + } + .col-xxl-3 { + flex: 0 0 auto; + width: 25%; + } + .col-xxl-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + .col-xxl-5 { + flex: 0 0 auto; + width: 41.66666667%; + } + .col-xxl-6 { + flex: 0 0 auto; + width: 50%; + } + .col-xxl-7 { + flex: 0 0 auto; + width: 58.33333333%; + } + .col-xxl-8 { + flex: 0 0 auto; + width: 66.66666667%; + } + .col-xxl-9 { + flex: 0 0 auto; + width: 75%; + } + .col-xxl-10 { + flex: 0 0 auto; + width: 83.33333333%; + } + .col-xxl-11 { + flex: 0 0 auto; + width: 91.66666667%; + } + .col-xxl-12 { + flex: 0 0 auto; + width: 100%; + } + .offset-xxl-0 { + margin-left: 0; + } + .offset-xxl-1 { + margin-left: 8.33333333%; + } + .offset-xxl-2 { + margin-left: 16.66666667%; + } + .offset-xxl-3 { + margin-left: 25%; + } + .offset-xxl-4 { + margin-left: 33.33333333%; + } + .offset-xxl-5 { + margin-left: 41.66666667%; + } + .offset-xxl-6 { + margin-left: 50%; + } + .offset-xxl-7 { + margin-left: 58.33333333%; + } + .offset-xxl-8 { + margin-left: 66.66666667%; + } + .offset-xxl-9 { + margin-left: 75%; + } + .offset-xxl-10 { + margin-left: 83.33333333%; + } + .offset-xxl-11 { + margin-left: 91.66666667%; + } + .g-xxl-0, + .gx-xxl-0 { + --bs-gutter-x: 0; + } + .g-xxl-0, + .gy-xxl-0 { + --bs-gutter-y: 0; + } + .g-xxl-1, + .gx-xxl-1 { + --bs-gutter-x: 0.25rem; + } + .g-xxl-1, + .gy-xxl-1 { + --bs-gutter-y: 0.25rem; + } + .g-xxl-2, + .gx-xxl-2 { + --bs-gutter-x: 0.5rem; + } + .g-xxl-2, + .gy-xxl-2 { + --bs-gutter-y: 0.5rem; + } + .g-xxl-3, + .gx-xxl-3 { + --bs-gutter-x: 1rem; + } + .g-xxl-3, + .gy-xxl-3 { + --bs-gutter-y: 1rem; + } + .g-xxl-4, + .gx-xxl-4 { + --bs-gutter-x: 1.5rem; + } + .g-xxl-4, + .gy-xxl-4 { + --bs-gutter-y: 1.5rem; + } + .g-xxl-5, + .gx-xxl-5 { + --bs-gutter-x: 3rem; + } + .g-xxl-5, + .gy-xxl-5 { + --bs-gutter-y: 3rem; + } +} +.d-inline { + display: inline !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} +.d-grid { + display: grid !important; +} +.d-table { + display: table !important; +} +.d-table-row { + display: table-row !important; +} +.d-table-cell { + display: table-cell !important; +} +.d-flex { + display: flex !important; +} +.d-inline-flex { + display: inline-flex !important; +} +.d-none { + display: none !important; +} +.flex-fill { + flex: 1 1 auto !important; +} +.flex-row { + flex-direction: row !important; +} +.flex-column { + flex-direction: column !important; +} +.flex-row-reverse { + flex-direction: row-reverse !important; +} +.flex-column-reverse { + flex-direction: column-reverse !important; +} +.flex-grow-0 { + flex-grow: 0 !important; +} +.flex-grow-1 { + flex-grow: 1 !important; +} +.flex-shrink-0 { + flex-shrink: 0 !important; +} +.flex-shrink-1 { + flex-shrink: 1 !important; +} +.flex-wrap { + flex-wrap: wrap !important; +} +.flex-nowrap { + flex-wrap: nowrap !important; +} +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} +.justify-content-start { + justify-content: flex-start !important; +} +.justify-content-end { + justify-content: flex-end !important; +} +.justify-content-center { + justify-content: center !important; +} +.justify-content-between { + justify-content: space-between !important; +} +.justify-content-around { + justify-content: space-around !important; +} +.justify-content-evenly { + justify-content: space-evenly !important; +} +.align-items-start { + align-items: flex-start !important; +} +.align-items-end { + align-items: flex-end !important; +} +.align-items-center { + align-items: center !important; +} +.align-items-baseline { + align-items: baseline !important; +} +.align-items-stretch { + align-items: stretch !important; +} +.align-content-start { + align-content: flex-start !important; +} +.align-content-end { + align-content: flex-end !important; +} +.align-content-center { + align-content: center !important; +} +.align-content-between { + align-content: space-between !important; +} +.align-content-around { + align-content: space-around !important; +} +.align-content-stretch { + align-content: stretch !important; +} +.align-self-auto { + align-self: auto !important; +} +.align-self-start { + align-self: flex-start !important; +} +.align-self-end { + align-self: flex-end !important; +} +.align-self-center { + align-self: center !important; +} +.align-self-baseline { + align-self: baseline !important; +} +.align-self-stretch { + align-self: stretch !important; +} +.order-first { + order: -1 !important; +} +.order-0 { + order: 0 !important; +} +.order-1 { + order: 1 !important; +} +.order-2 { + order: 2 !important; +} +.order-3 { + order: 3 !important; +} +.order-4 { + order: 4 !important; +} +.order-5 { + order: 5 !important; +} +.order-last { + order: 6 !important; +} +.m-0 { + margin: 0 !important; +} +.m-1 { + margin: 0.25rem !important; +} +.m-2 { + margin: 0.5rem !important; +} +.m-3 { + margin: 1rem !important; +} +.m-4 { + margin: 1.5rem !important; +} +.m-5 { + margin: 3rem !important; +} +.m-auto { + margin: auto !important; +} +.mx-0 { + margin-right: 0 !important; + margin-left: 0 !important; +} +.mx-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; +} +.mx-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; +} +.mx-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; +} +.mx-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; +} +.mx-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; +} +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} +.my-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} +.my-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} +.my-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} +.mt-0 { + margin-top: 0 !important; +} +.mt-1 { + margin-top: 0.25rem !important; +} +.mt-2 { + margin-top: 0.5rem !important; +} +.mt-3 { + margin-top: 1rem !important; +} +.mt-4 { + margin-top: 1.5rem !important; +} +.mt-5 { + margin-top: 3rem !important; +} +.mt-auto { + margin-top: auto !important; +} +.me-0 { + margin-right: 0 !important; +} +.me-1 { + margin-right: 0.25rem !important; +} +.me-2 { + margin-right: 0.5rem !important; +} +.me-3 { + margin-right: 1rem !important; +} +.me-4 { + margin-right: 1.5rem !important; +} +.me-5 { + margin-right: 3rem !important; +} +.me-auto { + margin-right: auto !important; +} +.mb-0 { + margin-bottom: 0 !important; +} +.mb-1 { + margin-bottom: 0.25rem !important; +} +.mb-2 { + margin-bottom: 0.5rem !important; +} +.mb-3 { + margin-bottom: 1rem !important; +} +.mb-4 { + margin-bottom: 1.5rem !important; +} +.mb-5 { + margin-bottom: 3rem !important; +} +.mb-auto { + margin-bottom: auto !important; +} +.ms-0 { + margin-left: 0 !important; +} +.ms-1 { + margin-left: 0.25rem !important; +} +.ms-2 { + margin-left: 0.5rem !important; +} +.ms-3 { + margin-left: 1rem !important; +} +.ms-4 { + margin-left: 1.5rem !important; +} +.ms-5 { + margin-left: 3rem !important; +} +.ms-auto { + margin-left: auto !important; +} +.p-0 { + padding: 0 !important; +} +.p-1 { + padding: 0.25rem !important; +} +.p-2 { + padding: 0.5rem !important; +} +.p-3 { + padding: 1rem !important; +} +.p-4 { + padding: 1.5rem !important; +} +.p-5 { + padding: 3rem !important; +} +.px-0 { + padding-right: 0 !important; + padding-left: 0 !important; +} +.px-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; +} +.px-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; +} +.px-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; +} +.px-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; +} +.px-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; +} +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} +.py-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} +.py-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} +.py-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} +.pt-0 { + padding-top: 0 !important; +} +.pt-1 { + padding-top: 0.25rem !important; +} +.pt-2 { + padding-top: 0.5rem !important; +} +.pt-3 { + padding-top: 1rem !important; +} +.pt-4 { + padding-top: 1.5rem !important; +} +.pt-5 { + padding-top: 3rem !important; +} +.pe-0 { + padding-right: 0 !important; +} +.pe-1 { + padding-right: 0.25rem !important; +} +.pe-2 { + padding-right: 0.5rem !important; +} +.pe-3 { + padding-right: 1rem !important; +} +.pe-4 { + padding-right: 1.5rem !important; +} +.pe-5 { + padding-right: 3rem !important; +} +.pb-0 { + padding-bottom: 0 !important; +} +.pb-1 { + padding-bottom: 0.25rem !important; +} +.pb-2 { + padding-bottom: 0.5rem !important; +} +.pb-3 { + padding-bottom: 1rem !important; +} +.pb-4 { + padding-bottom: 1.5rem !important; +} +.pb-5 { + padding-bottom: 3rem !important; +} +.ps-0 { + padding-left: 0 !important; +} +.ps-1 { + padding-left: 0.25rem !important; +} +.ps-2 { + padding-left: 0.5rem !important; +} +.ps-3 { + padding-left: 1rem !important; +} +.ps-4 { + padding-left: 1.5rem !important; +} +.ps-5 { + padding-left: 3rem !important; +} +@media (min-width: 576px) { + .d-sm-inline { + display: inline !important; + } + .d-sm-inline-block { + display: inline-block !important; + } + .d-sm-block { + display: block !important; + } + .d-sm-grid { + display: grid !important; + } + .d-sm-table { + display: table !important; + } + .d-sm-table-row { + display: table-row !important; + } + .d-sm-table-cell { + display: table-cell !important; + } + .d-sm-flex { + display: flex !important; + } + .d-sm-inline-flex { + display: inline-flex !important; + } + .d-sm-none { + display: none !important; + } + .flex-sm-fill { + flex: 1 1 auto !important; + } + .flex-sm-row { + flex-direction: row !important; + } + .flex-sm-column { + flex-direction: column !important; + } + .flex-sm-row-reverse { + flex-direction: row-reverse !important; + } + .flex-sm-column-reverse { + flex-direction: column-reverse !important; + } + .flex-sm-grow-0 { + flex-grow: 0 !important; + } + .flex-sm-grow-1 { + flex-grow: 1 !important; + } + .flex-sm-shrink-0 { + flex-shrink: 0 !important; + } + .flex-sm-shrink-1 { + flex-shrink: 1 !important; + } + .flex-sm-wrap { + flex-wrap: wrap !important; + } + .flex-sm-nowrap { + flex-wrap: nowrap !important; + } + .flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-sm-start { + justify-content: flex-start !important; + } + .justify-content-sm-end { + justify-content: flex-end !important; + } + .justify-content-sm-center { + justify-content: center !important; + } + .justify-content-sm-between { + justify-content: space-between !important; + } + .justify-content-sm-around { + justify-content: space-around !important; + } + .justify-content-sm-evenly { + justify-content: space-evenly !important; + } + .align-items-sm-start { + align-items: flex-start !important; + } + .align-items-sm-end { + align-items: flex-end !important; + } + .align-items-sm-center { + align-items: center !important; + } + .align-items-sm-baseline { + align-items: baseline !important; + } + .align-items-sm-stretch { + align-items: stretch !important; + } + .align-content-sm-start { + align-content: flex-start !important; + } + .align-content-sm-end { + align-content: flex-end !important; + } + .align-content-sm-center { + align-content: center !important; + } + .align-content-sm-between { + align-content: space-between !important; + } + .align-content-sm-around { + align-content: space-around !important; + } + .align-content-sm-stretch { + align-content: stretch !important; + } + .align-self-sm-auto { + align-self: auto !important; + } + .align-self-sm-start { + align-self: flex-start !important; + } + .align-self-sm-end { + align-self: flex-end !important; + } + .align-self-sm-center { + align-self: center !important; + } + .align-self-sm-baseline { + align-self: baseline !important; + } + .align-self-sm-stretch { + align-self: stretch !important; + } + .order-sm-first { + order: -1 !important; + } + .order-sm-0 { + order: 0 !important; + } + .order-sm-1 { + order: 1 !important; + } + .order-sm-2 { + order: 2 !important; + } + .order-sm-3 { + order: 3 !important; + } + .order-sm-4 { + order: 4 !important; + } + .order-sm-5 { + order: 5 !important; + } + .order-sm-last { + order: 6 !important; + } + .m-sm-0 { + margin: 0 !important; + } + .m-sm-1 { + margin: 0.25rem !important; + } + .m-sm-2 { + margin: 0.5rem !important; + } + .m-sm-3 { + margin: 1rem !important; + } + .m-sm-4 { + margin: 1.5rem !important; + } + .m-sm-5 { + margin: 3rem !important; + } + .m-sm-auto { + margin: auto !important; + } + .mx-sm-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-sm-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-sm-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-sm-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-sm-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-sm-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-sm-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-sm-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-sm-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-sm-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-sm-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-sm-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-sm-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-sm-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-sm-0 { + margin-top: 0 !important; + } + .mt-sm-1 { + margin-top: 0.25rem !important; + } + .mt-sm-2 { + margin-top: 0.5rem !important; + } + .mt-sm-3 { + margin-top: 1rem !important; + } + .mt-sm-4 { + margin-top: 1.5rem !important; + } + .mt-sm-5 { + margin-top: 3rem !important; + } + .mt-sm-auto { + margin-top: auto !important; + } + .me-sm-0 { + margin-right: 0 !important; + } + .me-sm-1 { + margin-right: 0.25rem !important; + } + .me-sm-2 { + margin-right: 0.5rem !important; + } + .me-sm-3 { + margin-right: 1rem !important; + } + .me-sm-4 { + margin-right: 1.5rem !important; + } + .me-sm-5 { + margin-right: 3rem !important; + } + .me-sm-auto { + margin-right: auto !important; + } + .mb-sm-0 { + margin-bottom: 0 !important; + } + .mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .mb-sm-3 { + margin-bottom: 1rem !important; + } + .mb-sm-4 { + margin-bottom: 1.5rem !important; + } + .mb-sm-5 { + margin-bottom: 3rem !important; + } + .mb-sm-auto { + margin-bottom: auto !important; + } + .ms-sm-0 { + margin-left: 0 !important; + } + .ms-sm-1 { + margin-left: 0.25rem !important; + } + .ms-sm-2 { + margin-left: 0.5rem !important; + } + .ms-sm-3 { + margin-left: 1rem !important; + } + .ms-sm-4 { + margin-left: 1.5rem !important; + } + .ms-sm-5 { + margin-left: 3rem !important; + } + .ms-sm-auto { + margin-left: auto !important; + } + .p-sm-0 { + padding: 0 !important; + } + .p-sm-1 { + padding: 0.25rem !important; + } + .p-sm-2 { + padding: 0.5rem !important; + } + .p-sm-3 { + padding: 1rem !important; + } + .p-sm-4 { + padding: 1.5rem !important; + } + .p-sm-5 { + padding: 3rem !important; + } + .px-sm-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-sm-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-sm-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-sm-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-sm-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-sm-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-sm-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-sm-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-sm-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-sm-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-sm-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-sm-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-sm-0 { + padding-top: 0 !important; + } + .pt-sm-1 { + padding-top: 0.25rem !important; + } + .pt-sm-2 { + padding-top: 0.5rem !important; + } + .pt-sm-3 { + padding-top: 1rem !important; + } + .pt-sm-4 { + padding-top: 1.5rem !important; + } + .pt-sm-5 { + padding-top: 3rem !important; + } + .pe-sm-0 { + padding-right: 0 !important; + } + .pe-sm-1 { + padding-right: 0.25rem !important; + } + .pe-sm-2 { + padding-right: 0.5rem !important; + } + .pe-sm-3 { + padding-right: 1rem !important; + } + .pe-sm-4 { + padding-right: 1.5rem !important; + } + .pe-sm-5 { + padding-right: 3rem !important; + } + .pb-sm-0 { + padding-bottom: 0 !important; + } + .pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .pb-sm-3 { + padding-bottom: 1rem !important; + } + .pb-sm-4 { + padding-bottom: 1.5rem !important; + } + .pb-sm-5 { + padding-bottom: 3rem !important; + } + .ps-sm-0 { + padding-left: 0 !important; + } + .ps-sm-1 { + padding-left: 0.25rem !important; + } + .ps-sm-2 { + padding-left: 0.5rem !important; + } + .ps-sm-3 { + padding-left: 1rem !important; + } + .ps-sm-4 { + padding-left: 1.5rem !important; + } + .ps-sm-5 { + padding-left: 3rem !important; + } +} +@media (min-width: 768px) { + .d-md-inline { + display: inline !important; + } + .d-md-inline-block { + display: inline-block !important; + } + .d-md-block { + display: block !important; + } + .d-md-grid { + display: grid !important; + } + .d-md-table { + display: table !important; + } + .d-md-table-row { + display: table-row !important; + } + .d-md-table-cell { + display: table-cell !important; + } + .d-md-flex { + display: flex !important; + } + .d-md-inline-flex { + display: inline-flex !important; + } + .d-md-none { + display: none !important; + } + .flex-md-fill { + flex: 1 1 auto !important; + } + .flex-md-row { + flex-direction: row !important; + } + .flex-md-column { + flex-direction: column !important; + } + .flex-md-row-reverse { + flex-direction: row-reverse !important; + } + .flex-md-column-reverse { + flex-direction: column-reverse !important; + } + .flex-md-grow-0 { + flex-grow: 0 !important; + } + .flex-md-grow-1 { + flex-grow: 1 !important; + } + .flex-md-shrink-0 { + flex-shrink: 0 !important; + } + .flex-md-shrink-1 { + flex-shrink: 1 !important; + } + .flex-md-wrap { + flex-wrap: wrap !important; + } + .flex-md-nowrap { + flex-wrap: nowrap !important; + } + .flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-md-start { + justify-content: flex-start !important; + } + .justify-content-md-end { + justify-content: flex-end !important; + } + .justify-content-md-center { + justify-content: center !important; + } + .justify-content-md-between { + justify-content: space-between !important; + } + .justify-content-md-around { + justify-content: space-around !important; + } + .justify-content-md-evenly { + justify-content: space-evenly !important; + } + .align-items-md-start { + align-items: flex-start !important; + } + .align-items-md-end { + align-items: flex-end !important; + } + .align-items-md-center { + align-items: center !important; + } + .align-items-md-baseline { + align-items: baseline !important; + } + .align-items-md-stretch { + align-items: stretch !important; + } + .align-content-md-start { + align-content: flex-start !important; + } + .align-content-md-end { + align-content: flex-end !important; + } + .align-content-md-center { + align-content: center !important; + } + .align-content-md-between { + align-content: space-between !important; + } + .align-content-md-around { + align-content: space-around !important; + } + .align-content-md-stretch { + align-content: stretch !important; + } + .align-self-md-auto { + align-self: auto !important; + } + .align-self-md-start { + align-self: flex-start !important; + } + .align-self-md-end { + align-self: flex-end !important; + } + .align-self-md-center { + align-self: center !important; + } + .align-self-md-baseline { + align-self: baseline !important; + } + .align-self-md-stretch { + align-self: stretch !important; + } + .order-md-first { + order: -1 !important; + } + .order-md-0 { + order: 0 !important; + } + .order-md-1 { + order: 1 !important; + } + .order-md-2 { + order: 2 !important; + } + .order-md-3 { + order: 3 !important; + } + .order-md-4 { + order: 4 !important; + } + .order-md-5 { + order: 5 !important; + } + .order-md-last { + order: 6 !important; + } + .m-md-0 { + margin: 0 !important; + } + .m-md-1 { + margin: 0.25rem !important; + } + .m-md-2 { + margin: 0.5rem !important; + } + .m-md-3 { + margin: 1rem !important; + } + .m-md-4 { + margin: 1.5rem !important; + } + .m-md-5 { + margin: 3rem !important; + } + .m-md-auto { + margin: auto !important; + } + .mx-md-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-md-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-md-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-md-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-md-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-md-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-md-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-md-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-md-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-md-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-md-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-md-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-md-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-md-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-md-0 { + margin-top: 0 !important; + } + .mt-md-1 { + margin-top: 0.25rem !important; + } + .mt-md-2 { + margin-top: 0.5rem !important; + } + .mt-md-3 { + margin-top: 1rem !important; + } + .mt-md-4 { + margin-top: 1.5rem !important; + } + .mt-md-5 { + margin-top: 3rem !important; + } + .mt-md-auto { + margin-top: auto !important; + } + .me-md-0 { + margin-right: 0 !important; + } + .me-md-1 { + margin-right: 0.25rem !important; + } + .me-md-2 { + margin-right: 0.5rem !important; + } + .me-md-3 { + margin-right: 1rem !important; + } + .me-md-4 { + margin-right: 1.5rem !important; + } + .me-md-5 { + margin-right: 3rem !important; + } + .me-md-auto { + margin-right: auto !important; + } + .mb-md-0 { + margin-bottom: 0 !important; + } + .mb-md-1 { + margin-bottom: 0.25rem !important; + } + .mb-md-2 { + margin-bottom: 0.5rem !important; + } + .mb-md-3 { + margin-bottom: 1rem !important; + } + .mb-md-4 { + margin-bottom: 1.5rem !important; + } + .mb-md-5 { + margin-bottom: 3rem !important; + } + .mb-md-auto { + margin-bottom: auto !important; + } + .ms-md-0 { + margin-left: 0 !important; + } + .ms-md-1 { + margin-left: 0.25rem !important; + } + .ms-md-2 { + margin-left: 0.5rem !important; + } + .ms-md-3 { + margin-left: 1rem !important; + } + .ms-md-4 { + margin-left: 1.5rem !important; + } + .ms-md-5 { + margin-left: 3rem !important; + } + .ms-md-auto { + margin-left: auto !important; + } + .p-md-0 { + padding: 0 !important; + } + .p-md-1 { + padding: 0.25rem !important; + } + .p-md-2 { + padding: 0.5rem !important; + } + .p-md-3 { + padding: 1rem !important; + } + .p-md-4 { + padding: 1.5rem !important; + } + .p-md-5 { + padding: 3rem !important; + } + .px-md-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-md-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-md-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-md-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-md-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-md-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-md-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-md-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-md-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-md-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-md-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-md-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-md-0 { + padding-top: 0 !important; + } + .pt-md-1 { + padding-top: 0.25rem !important; + } + .pt-md-2 { + padding-top: 0.5rem !important; + } + .pt-md-3 { + padding-top: 1rem !important; + } + .pt-md-4 { + padding-top: 1.5rem !important; + } + .pt-md-5 { + padding-top: 3rem !important; + } + .pe-md-0 { + padding-right: 0 !important; + } + .pe-md-1 { + padding-right: 0.25rem !important; + } + .pe-md-2 { + padding-right: 0.5rem !important; + } + .pe-md-3 { + padding-right: 1rem !important; + } + .pe-md-4 { + padding-right: 1.5rem !important; + } + .pe-md-5 { + padding-right: 3rem !important; + } + .pb-md-0 { + padding-bottom: 0 !important; + } + .pb-md-1 { + padding-bottom: 0.25rem !important; + } + .pb-md-2 { + padding-bottom: 0.5rem !important; + } + .pb-md-3 { + padding-bottom: 1rem !important; + } + .pb-md-4 { + padding-bottom: 1.5rem !important; + } + .pb-md-5 { + padding-bottom: 3rem !important; + } + .ps-md-0 { + padding-left: 0 !important; + } + .ps-md-1 { + padding-left: 0.25rem !important; + } + .ps-md-2 { + padding-left: 0.5rem !important; + } + .ps-md-3 { + padding-left: 1rem !important; + } + .ps-md-4 { + padding-left: 1.5rem !important; + } + .ps-md-5 { + padding-left: 3rem !important; + } +} +@media (min-width: 992px) { + .d-lg-inline { + display: inline !important; + } + .d-lg-inline-block { + display: inline-block !important; + } + .d-lg-block { + display: block !important; + } + .d-lg-grid { + display: grid !important; + } + .d-lg-table { + display: table !important; + } + .d-lg-table-row { + display: table-row !important; + } + .d-lg-table-cell { + display: table-cell !important; + } + .d-lg-flex { + display: flex !important; + } + .d-lg-inline-flex { + display: inline-flex !important; + } + .d-lg-none { + display: none !important; + } + .flex-lg-fill { + flex: 1 1 auto !important; + } + .flex-lg-row { + flex-direction: row !important; + } + .flex-lg-column { + flex-direction: column !important; + } + .flex-lg-row-reverse { + flex-direction: row-reverse !important; + } + .flex-lg-column-reverse { + flex-direction: column-reverse !important; + } + .flex-lg-grow-0 { + flex-grow: 0 !important; + } + .flex-lg-grow-1 { + flex-grow: 1 !important; + } + .flex-lg-shrink-0 { + flex-shrink: 0 !important; + } + .flex-lg-shrink-1 { + flex-shrink: 1 !important; + } + .flex-lg-wrap { + flex-wrap: wrap !important; + } + .flex-lg-nowrap { + flex-wrap: nowrap !important; + } + .flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-lg-start { + justify-content: flex-start !important; + } + .justify-content-lg-end { + justify-content: flex-end !important; + } + .justify-content-lg-center { + justify-content: center !important; + } + .justify-content-lg-between { + justify-content: space-between !important; + } + .justify-content-lg-around { + justify-content: space-around !important; + } + .justify-content-lg-evenly { + justify-content: space-evenly !important; + } + .align-items-lg-start { + align-items: flex-start !important; + } + .align-items-lg-end { + align-items: flex-end !important; + } + .align-items-lg-center { + align-items: center !important; + } + .align-items-lg-baseline { + align-items: baseline !important; + } + .align-items-lg-stretch { + align-items: stretch !important; + } + .align-content-lg-start { + align-content: flex-start !important; + } + .align-content-lg-end { + align-content: flex-end !important; + } + .align-content-lg-center { + align-content: center !important; + } + .align-content-lg-between { + align-content: space-between !important; + } + .align-content-lg-around { + align-content: space-around !important; + } + .align-content-lg-stretch { + align-content: stretch !important; + } + .align-self-lg-auto { + align-self: auto !important; + } + .align-self-lg-start { + align-self: flex-start !important; + } + .align-self-lg-end { + align-self: flex-end !important; + } + .align-self-lg-center { + align-self: center !important; + } + .align-self-lg-baseline { + align-self: baseline !important; + } + .align-self-lg-stretch { + align-self: stretch !important; + } + .order-lg-first { + order: -1 !important; + } + .order-lg-0 { + order: 0 !important; + } + .order-lg-1 { + order: 1 !important; + } + .order-lg-2 { + order: 2 !important; + } + .order-lg-3 { + order: 3 !important; + } + .order-lg-4 { + order: 4 !important; + } + .order-lg-5 { + order: 5 !important; + } + .order-lg-last { + order: 6 !important; + } + .m-lg-0 { + margin: 0 !important; + } + .m-lg-1 { + margin: 0.25rem !important; + } + .m-lg-2 { + margin: 0.5rem !important; + } + .m-lg-3 { + margin: 1rem !important; + } + .m-lg-4 { + margin: 1.5rem !important; + } + .m-lg-5 { + margin: 3rem !important; + } + .m-lg-auto { + margin: auto !important; + } + .mx-lg-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-lg-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-lg-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-lg-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-lg-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-lg-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-lg-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-lg-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-lg-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-lg-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-lg-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-lg-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-lg-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-lg-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-lg-0 { + margin-top: 0 !important; + } + .mt-lg-1 { + margin-top: 0.25rem !important; + } + .mt-lg-2 { + margin-top: 0.5rem !important; + } + .mt-lg-3 { + margin-top: 1rem !important; + } + .mt-lg-4 { + margin-top: 1.5rem !important; + } + .mt-lg-5 { + margin-top: 3rem !important; + } + .mt-lg-auto { + margin-top: auto !important; + } + .me-lg-0 { + margin-right: 0 !important; + } + .me-lg-1 { + margin-right: 0.25rem !important; + } + .me-lg-2 { + margin-right: 0.5rem !important; + } + .me-lg-3 { + margin-right: 1rem !important; + } + .me-lg-4 { + margin-right: 1.5rem !important; + } + .me-lg-5 { + margin-right: 3rem !important; + } + .me-lg-auto { + margin-right: auto !important; + } + .mb-lg-0 { + margin-bottom: 0 !important; + } + .mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .mb-lg-3 { + margin-bottom: 1rem !important; + } + .mb-lg-4 { + margin-bottom: 1.5rem !important; + } + .mb-lg-5 { + margin-bottom: 3rem !important; + } + .mb-lg-auto { + margin-bottom: auto !important; + } + .ms-lg-0 { + margin-left: 0 !important; + } + .ms-lg-1 { + margin-left: 0.25rem !important; + } + .ms-lg-2 { + margin-left: 0.5rem !important; + } + .ms-lg-3 { + margin-left: 1rem !important; + } + .ms-lg-4 { + margin-left: 1.5rem !important; + } + .ms-lg-5 { + margin-left: 3rem !important; + } + .ms-lg-auto { + margin-left: auto !important; + } + .p-lg-0 { + padding: 0 !important; + } + .p-lg-1 { + padding: 0.25rem !important; + } + .p-lg-2 { + padding: 0.5rem !important; + } + .p-lg-3 { + padding: 1rem !important; + } + .p-lg-4 { + padding: 1.5rem !important; + } + .p-lg-5 { + padding: 3rem !important; + } + .px-lg-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-lg-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-lg-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-lg-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-lg-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-lg-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-lg-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-lg-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-lg-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-lg-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-lg-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-lg-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-lg-0 { + padding-top: 0 !important; + } + .pt-lg-1 { + padding-top: 0.25rem !important; + } + .pt-lg-2 { + padding-top: 0.5rem !important; + } + .pt-lg-3 { + padding-top: 1rem !important; + } + .pt-lg-4 { + padding-top: 1.5rem !important; + } + .pt-lg-5 { + padding-top: 3rem !important; + } + .pe-lg-0 { + padding-right: 0 !important; + } + .pe-lg-1 { + padding-right: 0.25rem !important; + } + .pe-lg-2 { + padding-right: 0.5rem !important; + } + .pe-lg-3 { + padding-right: 1rem !important; + } + .pe-lg-4 { + padding-right: 1.5rem !important; + } + .pe-lg-5 { + padding-right: 3rem !important; + } + .pb-lg-0 { + padding-bottom: 0 !important; + } + .pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .pb-lg-3 { + padding-bottom: 1rem !important; + } + .pb-lg-4 { + padding-bottom: 1.5rem !important; + } + .pb-lg-5 { + padding-bottom: 3rem !important; + } + .ps-lg-0 { + padding-left: 0 !important; + } + .ps-lg-1 { + padding-left: 0.25rem !important; + } + .ps-lg-2 { + padding-left: 0.5rem !important; + } + .ps-lg-3 { + padding-left: 1rem !important; + } + .ps-lg-4 { + padding-left: 1.5rem !important; + } + .ps-lg-5 { + padding-left: 3rem !important; + } +} +@media (min-width: 1200px) { + .d-xl-inline { + display: inline !important; + } + .d-xl-inline-block { + display: inline-block !important; + } + .d-xl-block { + display: block !important; + } + .d-xl-grid { + display: grid !important; + } + .d-xl-table { + display: table !important; + } + .d-xl-table-row { + display: table-row !important; + } + .d-xl-table-cell { + display: table-cell !important; + } + .d-xl-flex { + display: flex !important; + } + .d-xl-inline-flex { + display: inline-flex !important; + } + .d-xl-none { + display: none !important; + } + .flex-xl-fill { + flex: 1 1 auto !important; + } + .flex-xl-row { + flex-direction: row !important; + } + .flex-xl-column { + flex-direction: column !important; + } + .flex-xl-row-reverse { + flex-direction: row-reverse !important; + } + .flex-xl-column-reverse { + flex-direction: column-reverse !important; + } + .flex-xl-grow-0 { + flex-grow: 0 !important; + } + .flex-xl-grow-1 { + flex-grow: 1 !important; + } + .flex-xl-shrink-0 { + flex-shrink: 0 !important; + } + .flex-xl-shrink-1 { + flex-shrink: 1 !important; + } + .flex-xl-wrap { + flex-wrap: wrap !important; + } + .flex-xl-nowrap { + flex-wrap: nowrap !important; + } + .flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-xl-start { + justify-content: flex-start !important; + } + .justify-content-xl-end { + justify-content: flex-end !important; + } + .justify-content-xl-center { + justify-content: center !important; + } + .justify-content-xl-between { + justify-content: space-between !important; + } + .justify-content-xl-around { + justify-content: space-around !important; + } + .justify-content-xl-evenly { + justify-content: space-evenly !important; + } + .align-items-xl-start { + align-items: flex-start !important; + } + .align-items-xl-end { + align-items: flex-end !important; + } + .align-items-xl-center { + align-items: center !important; + } + .align-items-xl-baseline { + align-items: baseline !important; + } + .align-items-xl-stretch { + align-items: stretch !important; + } + .align-content-xl-start { + align-content: flex-start !important; + } + .align-content-xl-end { + align-content: flex-end !important; + } + .align-content-xl-center { + align-content: center !important; + } + .align-content-xl-between { + align-content: space-between !important; + } + .align-content-xl-around { + align-content: space-around !important; + } + .align-content-xl-stretch { + align-content: stretch !important; + } + .align-self-xl-auto { + align-self: auto !important; + } + .align-self-xl-start { + align-self: flex-start !important; + } + .align-self-xl-end { + align-self: flex-end !important; + } + .align-self-xl-center { + align-self: center !important; + } + .align-self-xl-baseline { + align-self: baseline !important; + } + .align-self-xl-stretch { + align-self: stretch !important; + } + .order-xl-first { + order: -1 !important; + } + .order-xl-0 { + order: 0 !important; + } + .order-xl-1 { + order: 1 !important; + } + .order-xl-2 { + order: 2 !important; + } + .order-xl-3 { + order: 3 !important; + } + .order-xl-4 { + order: 4 !important; + } + .order-xl-5 { + order: 5 !important; + } + .order-xl-last { + order: 6 !important; + } + .m-xl-0 { + margin: 0 !important; + } + .m-xl-1 { + margin: 0.25rem !important; + } + .m-xl-2 { + margin: 0.5rem !important; + } + .m-xl-3 { + margin: 1rem !important; + } + .m-xl-4 { + margin: 1.5rem !important; + } + .m-xl-5 { + margin: 3rem !important; + } + .m-xl-auto { + margin: auto !important; + } + .mx-xl-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-xl-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-xl-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-xl-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-xl-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-xl-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-xl-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-xl-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-xl-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-xl-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-xl-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-xl-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-xl-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-xl-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-xl-0 { + margin-top: 0 !important; + } + .mt-xl-1 { + margin-top: 0.25rem !important; + } + .mt-xl-2 { + margin-top: 0.5rem !important; + } + .mt-xl-3 { + margin-top: 1rem !important; + } + .mt-xl-4 { + margin-top: 1.5rem !important; + } + .mt-xl-5 { + margin-top: 3rem !important; + } + .mt-xl-auto { + margin-top: auto !important; + } + .me-xl-0 { + margin-right: 0 !important; + } + .me-xl-1 { + margin-right: 0.25rem !important; + } + .me-xl-2 { + margin-right: 0.5rem !important; + } + .me-xl-3 { + margin-right: 1rem !important; + } + .me-xl-4 { + margin-right: 1.5rem !important; + } + .me-xl-5 { + margin-right: 3rem !important; + } + .me-xl-auto { + margin-right: auto !important; + } + .mb-xl-0 { + margin-bottom: 0 !important; + } + .mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .mb-xl-3 { + margin-bottom: 1rem !important; + } + .mb-xl-4 { + margin-bottom: 1.5rem !important; + } + .mb-xl-5 { + margin-bottom: 3rem !important; + } + .mb-xl-auto { + margin-bottom: auto !important; + } + .ms-xl-0 { + margin-left: 0 !important; + } + .ms-xl-1 { + margin-left: 0.25rem !important; + } + .ms-xl-2 { + margin-left: 0.5rem !important; + } + .ms-xl-3 { + margin-left: 1rem !important; + } + .ms-xl-4 { + margin-left: 1.5rem !important; + } + .ms-xl-5 { + margin-left: 3rem !important; + } + .ms-xl-auto { + margin-left: auto !important; + } + .p-xl-0 { + padding: 0 !important; + } + .p-xl-1 { + padding: 0.25rem !important; + } + .p-xl-2 { + padding: 0.5rem !important; + } + .p-xl-3 { + padding: 1rem !important; + } + .p-xl-4 { + padding: 1.5rem !important; + } + .p-xl-5 { + padding: 3rem !important; + } + .px-xl-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-xl-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-xl-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-xl-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-xl-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-xl-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-xl-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-xl-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-xl-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-xl-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-xl-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-xl-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-xl-0 { + padding-top: 0 !important; + } + .pt-xl-1 { + padding-top: 0.25rem !important; + } + .pt-xl-2 { + padding-top: 0.5rem !important; + } + .pt-xl-3 { + padding-top: 1rem !important; + } + .pt-xl-4 { + padding-top: 1.5rem !important; + } + .pt-xl-5 { + padding-top: 3rem !important; + } + .pe-xl-0 { + padding-right: 0 !important; + } + .pe-xl-1 { + padding-right: 0.25rem !important; + } + .pe-xl-2 { + padding-right: 0.5rem !important; + } + .pe-xl-3 { + padding-right: 1rem !important; + } + .pe-xl-4 { + padding-right: 1.5rem !important; + } + .pe-xl-5 { + padding-right: 3rem !important; + } + .pb-xl-0 { + padding-bottom: 0 !important; + } + .pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .pb-xl-3 { + padding-bottom: 1rem !important; + } + .pb-xl-4 { + padding-bottom: 1.5rem !important; + } + .pb-xl-5 { + padding-bottom: 3rem !important; + } + .ps-xl-0 { + padding-left: 0 !important; + } + .ps-xl-1 { + padding-left: 0.25rem !important; + } + .ps-xl-2 { + padding-left: 0.5rem !important; + } + .ps-xl-3 { + padding-left: 1rem !important; + } + .ps-xl-4 { + padding-left: 1.5rem !important; + } + .ps-xl-5 { + padding-left: 3rem !important; + } +} +@media (min-width: 1400px) { + .d-xxl-inline { + display: inline !important; + } + .d-xxl-inline-block { + display: inline-block !important; + } + .d-xxl-block { + display: block !important; + } + .d-xxl-grid { + display: grid !important; + } + .d-xxl-table { + display: table !important; + } + .d-xxl-table-row { + display: table-row !important; + } + .d-xxl-table-cell { + display: table-cell !important; + } + .d-xxl-flex { + display: flex !important; + } + .d-xxl-inline-flex { + display: inline-flex !important; + } + .d-xxl-none { + display: none !important; + } + .flex-xxl-fill { + flex: 1 1 auto !important; + } + .flex-xxl-row { + flex-direction: row !important; + } + .flex-xxl-column { + flex-direction: column !important; + } + .flex-xxl-row-reverse { + flex-direction: row-reverse !important; + } + .flex-xxl-column-reverse { + flex-direction: column-reverse !important; + } + .flex-xxl-grow-0 { + flex-grow: 0 !important; + } + .flex-xxl-grow-1 { + flex-grow: 1 !important; + } + .flex-xxl-shrink-0 { + flex-shrink: 0 !important; + } + .flex-xxl-shrink-1 { + flex-shrink: 1 !important; + } + .flex-xxl-wrap { + flex-wrap: wrap !important; + } + .flex-xxl-nowrap { + flex-wrap: nowrap !important; + } + .flex-xxl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-content-xxl-start { + justify-content: flex-start !important; + } + .justify-content-xxl-end { + justify-content: flex-end !important; + } + .justify-content-xxl-center { + justify-content: center !important; + } + .justify-content-xxl-between { + justify-content: space-between !important; + } + .justify-content-xxl-around { + justify-content: space-around !important; + } + .justify-content-xxl-evenly { + justify-content: space-evenly !important; + } + .align-items-xxl-start { + align-items: flex-start !important; + } + .align-items-xxl-end { + align-items: flex-end !important; + } + .align-items-xxl-center { + align-items: center !important; + } + .align-items-xxl-baseline { + align-items: baseline !important; + } + .align-items-xxl-stretch { + align-items: stretch !important; + } + .align-content-xxl-start { + align-content: flex-start !important; + } + .align-content-xxl-end { + align-content: flex-end !important; + } + .align-content-xxl-center { + align-content: center !important; + } + .align-content-xxl-between { + align-content: space-between !important; + } + .align-content-xxl-around { + align-content: space-around !important; + } + .align-content-xxl-stretch { + align-content: stretch !important; + } + .align-self-xxl-auto { + align-self: auto !important; + } + .align-self-xxl-start { + align-self: flex-start !important; + } + .align-self-xxl-end { + align-self: flex-end !important; + } + .align-self-xxl-center { + align-self: center !important; + } + .align-self-xxl-baseline { + align-self: baseline !important; + } + .align-self-xxl-stretch { + align-self: stretch !important; + } + .order-xxl-first { + order: -1 !important; + } + .order-xxl-0 { + order: 0 !important; + } + .order-xxl-1 { + order: 1 !important; + } + .order-xxl-2 { + order: 2 !important; + } + .order-xxl-3 { + order: 3 !important; + } + .order-xxl-4 { + order: 4 !important; + } + .order-xxl-5 { + order: 5 !important; + } + .order-xxl-last { + order: 6 !important; + } + .m-xxl-0 { + margin: 0 !important; + } + .m-xxl-1 { + margin: 0.25rem !important; + } + .m-xxl-2 { + margin: 0.5rem !important; + } + .m-xxl-3 { + margin: 1rem !important; + } + .m-xxl-4 { + margin: 1.5rem !important; + } + .m-xxl-5 { + margin: 3rem !important; + } + .m-xxl-auto { + margin: auto !important; + } + .mx-xxl-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + .mx-xxl-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + .mx-xxl-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + .mx-xxl-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + .mx-xxl-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + .mx-xxl-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + .mx-xxl-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-xxl-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .my-xxl-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + .my-xxl-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + .my-xxl-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + .my-xxl-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + .my-xxl-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + .my-xxl-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-xxl-0 { + margin-top: 0 !important; + } + .mt-xxl-1 { + margin-top: 0.25rem !important; + } + .mt-xxl-2 { + margin-top: 0.5rem !important; + } + .mt-xxl-3 { + margin-top: 1rem !important; + } + .mt-xxl-4 { + margin-top: 1.5rem !important; + } + .mt-xxl-5 { + margin-top: 3rem !important; + } + .mt-xxl-auto { + margin-top: auto !important; + } + .me-xxl-0 { + margin-right: 0 !important; + } + .me-xxl-1 { + margin-right: 0.25rem !important; + } + .me-xxl-2 { + margin-right: 0.5rem !important; + } + .me-xxl-3 { + margin-right: 1rem !important; + } + .me-xxl-4 { + margin-right: 1.5rem !important; + } + .me-xxl-5 { + margin-right: 3rem !important; + } + .me-xxl-auto { + margin-right: auto !important; + } + .mb-xxl-0 { + margin-bottom: 0 !important; + } + .mb-xxl-1 { + margin-bottom: 0.25rem !important; + } + .mb-xxl-2 { + margin-bottom: 0.5rem !important; + } + .mb-xxl-3 { + margin-bottom: 1rem !important; + } + .mb-xxl-4 { + margin-bottom: 1.5rem !important; + } + .mb-xxl-5 { + margin-bottom: 3rem !important; + } + .mb-xxl-auto { + margin-bottom: auto !important; + } + .ms-xxl-0 { + margin-left: 0 !important; + } + .ms-xxl-1 { + margin-left: 0.25rem !important; + } + .ms-xxl-2 { + margin-left: 0.5rem !important; + } + .ms-xxl-3 { + margin-left: 1rem !important; + } + .ms-xxl-4 { + margin-left: 1.5rem !important; + } + .ms-xxl-5 { + margin-left: 3rem !important; + } + .ms-xxl-auto { + margin-left: auto !important; + } + .p-xxl-0 { + padding: 0 !important; + } + .p-xxl-1 { + padding: 0.25rem !important; + } + .p-xxl-2 { + padding: 0.5rem !important; + } + .p-xxl-3 { + padding: 1rem !important; + } + .p-xxl-4 { + padding: 1.5rem !important; + } + .p-xxl-5 { + padding: 3rem !important; + } + .px-xxl-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + .px-xxl-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + .px-xxl-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + .px-xxl-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + .px-xxl-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + .px-xxl-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + .py-xxl-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .py-xxl-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + .py-xxl-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + .py-xxl-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + .py-xxl-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + .py-xxl-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + .pt-xxl-0 { + padding-top: 0 !important; + } + .pt-xxl-1 { + padding-top: 0.25rem !important; + } + .pt-xxl-2 { + padding-top: 0.5rem !important; + } + .pt-xxl-3 { + padding-top: 1rem !important; + } + .pt-xxl-4 { + padding-top: 1.5rem !important; + } + .pt-xxl-5 { + padding-top: 3rem !important; + } + .pe-xxl-0 { + padding-right: 0 !important; + } + .pe-xxl-1 { + padding-right: 0.25rem !important; + } + .pe-xxl-2 { + padding-right: 0.5rem !important; + } + .pe-xxl-3 { + padding-right: 1rem !important; + } + .pe-xxl-4 { + padding-right: 1.5rem !important; + } + .pe-xxl-5 { + padding-right: 3rem !important; + } + .pb-xxl-0 { + padding-bottom: 0 !important; + } + .pb-xxl-1 { + padding-bottom: 0.25rem !important; + } + .pb-xxl-2 { + padding-bottom: 0.5rem !important; + } + .pb-xxl-3 { + padding-bottom: 1rem !important; + } + .pb-xxl-4 { + padding-bottom: 1.5rem !important; + } + .pb-xxl-5 { + padding-bottom: 3rem !important; + } + .ps-xxl-0 { + padding-left: 0 !important; + } + .ps-xxl-1 { + padding-left: 0.25rem !important; + } + .ps-xxl-2 { + padding-left: 0.5rem !important; + } + .ps-xxl-3 { + padding-left: 1rem !important; + } + .ps-xxl-4 { + padding-left: 1.5rem !important; + } + .ps-xxl-5 { + padding-left: 3rem !important; + } +} +@media print { + .d-print-inline { + display: inline !important; + } + .d-print-inline-block { + display: inline-block !important; + } + .d-print-block { + display: block !important; + } + .d-print-grid { + display: grid !important; + } + .d-print-table { + display: table !important; + } + .d-print-table-row { + display: table-row !important; + } + .d-print-table-cell { + display: table-cell !important; + } + .d-print-flex { + display: flex !important; + } + .d-print-inline-flex { + display: inline-flex !important; + } + .d-print-none { + display: none !important; + } +} +.tooltip { + position: absolute; + z-index: 999999; + display: block; + margin: 0; + font-family: var(--bs-font-sans-serif); + font-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.875rem; + word-wrap: break-word; + opacity: 0; + pointer-events: none; +} +.tooltip.show { + opacity: 0.9; +} +.tooltip .tooltip-arrow { + position: absolute; + display: block; + width: 0.8rem; + height: 0.4rem; +} +.tooltip .tooltip-arrow::before { + position: absolute; + content: ""; + border-color: transparent; + border-style: solid; +} +.bs-tooltip-top, +.bs-tooltip-auto[data-popper-placement^=top] { + padding: 0.4rem 0; +} +.bs-tooltip-top .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow { + bottom: 0; +} +.bs-tooltip-top .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { + top: -1px; + border-width: 0.4rem 0.4rem 0; + border-top-color: #000; +} +.bs-tooltip-end, +.bs-tooltip-auto[data-popper-placement^=right] { + padding: 0 0.4rem; +} +.bs-tooltip-end .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow { + left: 0; + width: 0.4rem; + height: 0.8rem; +} +.bs-tooltip-end .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { + right: -1px; + border-width: 0.4rem 0.4rem 0.4rem 0; + border-right-color: #000; +} +.bs-tooltip-bottom, +.bs-tooltip-auto[data-popper-placement^=bottom] { + padding: 0.4rem 0; +} +.bs-tooltip-bottom .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow { + top: 0; +} +.bs-tooltip-bottom .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { + bottom: -1px; + border-width: 0 0.4rem 0.4rem; + border-bottom-color: #000; +} +.bs-tooltip-start, +.bs-tooltip-auto[data-popper-placement^=left] { + padding: 0 0.4rem; +} +.bs-tooltip-start .tooltip-arrow, +.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow { + right: 0; + width: 0.4rem; + height: 0.8rem; +} +.bs-tooltip-start .tooltip-arrow::before, +.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { + left: -1px; + border-width: 0.4rem 0 0.4rem 0.4rem; + border-left-color: #000; +} +.tooltip-inner { + max-width: 200px; + padding: 0.25rem 0.5rem; + color: #fff; + text-align: center; + background-color: #000; + border-radius: 0.25rem; + -webkit-user-select: none; + user-select: none; + pointer-events: none; +} +.popover { + position: absolute; + top: 0; + left: 0 /* rtl:ignore */; + z-index: 1070; + display: block; + max-width: 276px; + font-family: var(--bs-font-sans-serif); + font-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.875rem; + word-wrap: break-word; + background-color: var(--modalBackground); + background-clip: padding-box; + box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow); + border-radius: var(--mediaItemRadius); +} +.popover .popover-arrow { + position: absolute; + display: block; + width: 1rem; + height: 0.5rem; +} +.popover .popover-arrow::before, +.popover .popover-arrow::after { + position: absolute; + display: block; + content: ""; + border-color: transparent; + border-style: solid; +} +.bs-popover-top > .popover-arrow, +.bs-popover-auto[data-popper-placement^=top] > .popover-arrow { + bottom: calc(-0.5rem - 1px); +} +.bs-popover-top > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { + bottom: 0; + border-width: 0.5rem 0.5rem 0; + border-top-color: rgba(0, 0, 0, 0.25); +} +.bs-popover-top > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after { + bottom: 1px; + border-width: 0.5rem 0.5rem 0; + border-top-color: #fff; +} +.bs-popover-end > .popover-arrow, +.bs-popover-auto[data-popper-placement^=right] > .popover-arrow { + left: calc(-0.5rem - 1px); + width: 0.5rem; + height: 1rem; +} +.bs-popover-end > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { + left: 0; + border-width: 0.5rem 0.5rem 0.5rem 0; + border-right-color: rgba(0, 0, 0, 0.25); +} +.bs-popover-end > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after { + left: 1px; + border-width: 0.5rem 0.5rem 0.5rem 0; + border-right-color: #fff; +} +.bs-popover-bottom > .popover-arrow, +.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow { + top: calc(-0.5rem - 1px); +} +.bs-popover-bottom > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { + top: 0; + border-width: 0 0.5rem 0.5rem 0.5rem; + border-bottom-color: rgba(0, 0, 0, 0.25); +} +.bs-popover-bottom > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after { + top: 1px; + border-width: 0 0.5rem 0.5rem 0.5rem; + border-bottom-color: #fff; +} +.bs-popover-bottom .popover-header::before, +.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 1rem; + margin-left: -0.5rem; + content: ""; + border-bottom: 1px solid #f0f0f0; +} +.bs-popover-start > .popover-arrow, +.bs-popover-auto[data-popper-placement^=left] > .popover-arrow { + right: calc(-0.5rem - 1px); + width: 0.5rem; + height: 1rem; +} +.bs-popover-start > .popover-arrow::before, +.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { + right: 0; + border-width: 0.5rem 0 0.5rem 0.5rem; + border-left-color: rgba(0, 0, 0, 0.25); +} +.bs-popover-start > .popover-arrow::after, +.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after { + right: 1px; + border-width: 0.5rem 0 0.5rem 0.5rem; + border-left-color: #fff; +} +.popover-header { + padding: 0.5rem 1rem; + margin-bottom: 0; + font-size: 1rem; + background-color: #f0f0f0; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); +} +.popover-header:empty { + display: none; +} +.popover-body { + padding: 1rem 1rem; + color: var(--textColor); +} +.carousel { + position: relative; +} +.carousel.pointer-event { + -ms-touch-action: pan-y; + touch-action: pan-y; +} +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} +.carousel-inner::after { + display: block; + clear: both; + content: ""; +} +.carousel-item { + position: relative; + display: none; + float: left; + width: 100%; + margin-right: -100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transition: -webkit-transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .carousel-item { + transition: none; + } +} +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: block; +} +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + -webkit-transform: translateX(100%); + transform: translateX(100%); +} +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); +} +.carousel-fade .carousel-item { + opacity: 0; + transition-property: opacity; + -webkit-transform: none; + transform: none; +} +.carousel-fade .carousel-item.active, +.carousel-fade .carousel-item-next.carousel-item-left, +.carousel-fade .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; +} +.carousel-fade .active.carousel-item-left, +.carousel-fade .active.carousel-item-right { + z-index: 0; + opacity: 0; + transition: opacity 0s 0.6s; +} +@media (prefers-reduced-motion: reduce) { + .carousel-fade .active.carousel-item-left, + .carousel-fade .active.carousel-item-right { + transition: none; + } +} +.carousel-control-prev, +.carousel-control-next { + position: absolute; + top: 0; + bottom: 0; + z-index: 1; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: 15%; + padding: 0; + color: #fff; + text-align: center; + background: none; + border: 0; + opacity: 0.5; + transition: opacity 0.15s ease; +} +@media (prefers-reduced-motion: reduce) { + .carousel-control-prev, + .carousel-control-next { + transition: none; + } +} +.carousel-control-prev:hover, +.carousel-control-prev:focus, +.carousel-control-next:hover, +.carousel-control-next:focus { + color: #fff; + text-decoration: none; + outline: 0; + opacity: 0.9; +} +.carousel-control-prev { + left: 0; +} +.carousel-control-next { + right: 0; +} +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: inline-block; + width: 20px; + height: 20px; + background: 50% / 100% 100% no-repeat; +} +.carousel-control-prev-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); +} +.carousel-control-next-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); +} +.carousel-indicators { + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 15; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + padding-left: 0; + margin-right: 15%; + margin-left: 15%; + list-style: none; +} +.carousel-indicators li { + box-sizing: content-box; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + width: 30px; + height: 3px; + margin-right: 3px; + margin-left: 3px; + text-indent: -999px; + cursor: pointer; + background-color: #fff; + background-clip: padding-box; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + opacity: 0.5; + transition: opacity 0.6s ease; +} +@media (prefers-reduced-motion: reduce) { + .carousel-indicators li { + transition: none; + } +} +.carousel-indicators .active { + opacity: 1; +} +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; +} +@-webkit-keyframes notyf-fadeinup { + 0% { + opacity: 0; + transform: translateY(25%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes notyf-fadeinup { + 0% { + opacity: 0; + transform: translateY(25%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@-webkit-keyframes notyf-fadeinleft { + 0% { + opacity: 0; + transform: translateX(25%); + } + to { + opacity: 1; + transform: translateX(0); + } +} +@keyframes notyf-fadeinleft { + 0% { + opacity: 0; + transform: translateX(25%); + } + to { + opacity: 1; + transform: translateX(0); + } +} +@-webkit-keyframes notyf-fadeoutright { + 0% { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(25%); + } +} +@keyframes notyf-fadeoutright { + 0% { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(25%); + } +} +@-webkit-keyframes notyf-fadeoutdown { + 0% { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(25%); + } +} +@keyframes notyf-fadeoutdown { + 0% { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(25%); + } +} +@-webkit-keyframes ripple { + 0% { + transform: scale(0) translateY(-45%) translateX(13%); + } + to { + transform: scale(1) translateY(-45%) translateX(13%); + } +} +@keyframes ripple { + 0% { + transform: scale(0) translateY(-45%) translateX(13%); + } + to { + transform: scale(1) translateY(-45%) translateX(13%); + } +} +.notyf { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + color: #fff; + z-index: 9999; + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: flex-end; + pointer-events: none; + box-sizing: border-box; + padding: 20px; +} +.notyf__icon--error, +.notyf__icon--success { + height: 21px; + width: 21px; + background: #fff; + border-radius: 50%; + display: block; + margin: 0 auto; + position: relative; +} +.notyf__icon--error:after, +.notyf__icon--error:before { + content: ""; + background: currentColor; + display: block; + position: absolute; + width: 3px; + border-radius: 3px; + left: 9px; + height: 12px; + top: 5px; +} +.notyf__icon--error:after { + transform: rotate(-45deg); +} +.notyf__icon--error:before { + transform: rotate(45deg); +} +.notyf__icon--success:after, +.notyf__icon--success:before { + content: ""; + background: currentColor; + display: block; + position: absolute; + width: 3px; + border-radius: 3px; +} +.notyf__icon--success:after { + height: 6px; + transform: rotate(-45deg); + top: 9px; + left: 6px; +} +.notyf__icon--success:before { + height: 11px; + transform: rotate(45deg); + top: 5px; + left: 10px; +} +.notyf__toast { + display: block; + overflow: hidden; + pointer-events: auto; + -webkit-animation: notyf-fadeinup 0.3s ease-in forwards; + animation: notyf-fadeinup 0.3s ease-in forwards; + box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.25); + position: relative; + padding: 0 15px; + border-radius: 2px; + max-width: 300px; + transform: translateY(25%); + box-sizing: border-box; + flex-shrink: 0; +} +.notyf__toast--disappear { + transform: translateY(0); + -webkit-animation: notyf-fadeoutdown 0.3s forwards; + animation: notyf-fadeoutdown 0.3s forwards; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} +.notyf__toast--disappear .notyf__icon, +.notyf__toast--disappear .notyf__message { + -webkit-animation: notyf-fadeoutdown 0.3s forwards; + animation: notyf-fadeoutdown 0.3s forwards; + opacity: 1; + transform: translateY(0); +} +.notyf__toast--disappear .notyf__dismiss { + -webkit-animation: notyf-fadeoutright 0.3s forwards; + animation: notyf-fadeoutright 0.3s forwards; + opacity: 1; + transform: translateX(0); +} +.notyf__toast--disappear .notyf__message { + -webkit-animation-delay: 0.05s; + animation-delay: 0.05s; +} +.notyf__toast--upper { + margin-bottom: 20px; +} +.notyf__toast--lower { + margin-top: 20px; +} +.notyf__toast--dismissible .notyf__wrapper { + padding-right: 30px; +} +.notyf__ripple { + height: 400px; + width: 400px; + position: absolute; + transform-origin: bottom right; + right: 0; + top: 0; + border-radius: 50%; + transform: scale(0) translateY(-51%) translateX(13%); + z-index: 5; + -webkit-animation: ripple 0.4s ease-out forwards; + animation: ripple 0.4s ease-out forwards; +} +.notyf__wrapper { + display: flex; + align-items: center; + padding-top: 17px; + padding-bottom: 17px; + padding-right: 15px; + border-radius: 3px; + position: relative; + z-index: 10; +} +.notyf__icon { + width: 22px; + text-align: center; + font-size: 1.3em; + opacity: 0; + -webkit-animation: notyf-fadeinup 0.3s forwards; + animation: notyf-fadeinup 0.3s forwards; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + margin-right: 13px; +} +.notyf__dismiss { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 26px; + margin-right: -15px; + -webkit-animation: notyf-fadeinleft 0.3s forwards; + animation: notyf-fadeinleft 0.3s forwards; + -webkit-animation-delay: 0.35s; + animation-delay: 0.35s; + opacity: 0; +} +.notyf__dismiss-btn { + background-color: rgba(0, 0, 0, 0.25); + border: none; + cursor: pointer; + transition: opacity 0.2s ease, background-color 0.2s ease; + outline: none; + opacity: 0.35; + height: 100%; + width: 100%; +} +.notyf__dismiss-btn:after, +.notyf__dismiss-btn:before { + content: ""; + background: #fff; + height: 12px; + width: 2px; + border-radius: 3px; + position: absolute; + left: calc(50% - 1px); + top: calc(50% - 5px); +} +.notyf__dismiss-btn:after { + transform: rotate(-45deg); +} +.notyf__dismiss-btn:before { + transform: rotate(45deg); +} +.notyf__dismiss-btn:hover { + opacity: 0.7; + background-color: rgba(0, 0, 0, 0.15); +} +.notyf__dismiss-btn:active { + opacity: 0.8; +} +.notyf__message { + vertical-align: middle; + position: relative; + opacity: 0; + -webkit-animation: notyf-fadeinup 0.3s forwards; + animation: notyf-fadeinup 0.3s forwards; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; + line-height: 1.5em; +} +@media only screen and (max-width: 480px) { + .notyf { + padding: 0; + } + .notyf__ripple { + height: 600px; + width: 600px; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + } + .notyf__toast { + max-width: none; + border-radius: 0; + box-shadow: 0 -2px 7px 0 rgba(0, 0, 0, 0.13); + width: 100%; + } + .notyf__dismiss { + width: 56px; + } +} +.md-select { + padding: 6px; + border-radius: 6px; + border: 1px solid rgba(200, 200, 200, 0.1); + border-top: 1px solid rgba(100, 100, 100, 0.5); + font-family: inherit; + font-size: 14px; + background: rgba(100, 100, 100, 0.25); + color: #eee; +} +.md-select option { + font-size: 1em; + font-family: inherit; + padding: 8px 16px; + background: #404040; +} +.md-select optgroup { + background: #2c2c2c; +} +.md-select:focus { + outline: solid 1px var(--selected); +} +.md-btn { + font-family: inherit; + background: rgba(100, 100, 100, 0.25); + padding: 8px 14px; + border-radius: 6px; + font-size: 14px; + border: 1px solid rgba(100, 100, 100, 0.35); + border-top: 1px solid rgba(100, 100, 100, 0.5); + color: #eee; + white-space: nowrap; + transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase); +} +.md-btn.md-btn-block { + display: block; + width: 100%; +} +.md-btn.md-btn-glyph { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} +.md-btn.md-btn-primary { + background: #ff2b52a6; + color: white; + border: 1px solid rgba(220, 53, 69, 0.25); + border-top: 1px solid rgba(220, 53, 69, 0.5); +} +.md-btn.md-btn-small { + padding: 6px 8px; + font-size: 13px; +} +.md-btn:hover { + filter: brightness(125%); +} +.md-btn:active { + filter: brightness(75%); + transform: scale(0.98); + transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); +} +.md-btn.md-btn-icon { + display: inline-flex; + vertical-align: middle; + justify-content: center; +} +.md-btn.md-btn-icon > img { + margin: 0px 16px 0px 0px; + pointer-events: none; +} +.md-btn.md-btn-icon > .md-btn-text { + margin: 0px; +} +.btn-group { + display: inline-flex; + justify-content: center; + align-items: center; +} +.btn-group > .md-btn { + border-radius: 0px; + width: 100%; +} +.btn-group > .md-btn:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.btn-group > .md-btn:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.btn-group > .md-btn:not(:first-child):not(:last-child) { + border-radius: 0px; +} +.md-close-btn { + -webkit-mask-image: url("ameres://icons/webui/close.svg"); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + background-color: white; + opacity: 0.75; + -webkit-mask-size: contain; + height: 18px; + width: 18px; +} +.md-ico-play { + content: url("./assets/play.svg"); + width: 10px; + height: 12px; + margin-right: 1px; + align-self: center; +} +.md-ico-shuffle { + content: url("./assets/shuffle.svg"); + width: 1em; + height: 1em; + margin-right: 1px; + margin-bottom: -2px; + align-self: center; +} +.md-ico-remove { + content: url("./assets/feather/x-circle-white.svg"); + width: 16px; + height: 16px; + margin-right: 1px; + margin-bottom: -1.5px; + align-self: center; +} +.md-ico-add { + content: url("./assets/feather/plus-circle-white.svg"); + width: 1em; + height: 1em; + margin-right: 1px; + margin-bottom: -1.5px; + align-self: center; +} +.reload-btn { + background: rgba(86, 86, 86, 0.52); + border-radius: 100%; + width: 32px; + height: 32px; + border: 0px; + appearance: none; + display: flex; + justify-content: center; + align-items: center; +} +.reload-btn:hover { + background: rgba(86, 86, 86, 0.8); + cursor: pointer; +} +.reload-btn > svg { + height: 50%; + color: #eee; +} +.wr-btn { + font-family: inherit; + appearance: none; + border: 0px; + border-radius: 6px; + padding: 8px; + font-weight: 600; + background: rgba(80, 80, 80, 0.7); + color: white; +} +.cd-btn-seeall { + background: transparent; + border: 0px; + color: var(--keyColor); + font-family: inherit; + font-weight: 500; + font-size: 16px; + border-radius: 4px; + padding: 6px; +} +.cd-btn-seeall:hover { + cursor: pointer; + background: rgba(200, 200, 200, 0.1); +} +.mediaitem-artwork { + border-radius: var(--mediaItemRadius); + overflow: hidden; + flex: 0 0 auto; + position: relative; + width: 100%; + height: 100%; +} +.mediaitem-artwork .animatedartwork-view-box { + position: absolute; + top: 0px; + width: 100%; + height: 100%; +} +.mediaitem-artwork .animatedartwork-view-box .animated { + position: absolute; + top: 0px; + width: 100%; + height: 100%; +} +.mediaitem-artwork .animatedartwork-view-box .animated video { + width: 100%; + height: 100%; +} +.mediaitem-artwork.rounded { + border-radius: 100%; +} +.mediaitem-artwork.rounded::after { + border-radius: 100%; +} +.mediaitem-artwork::after { + content: ""; + box-shadow: var(--mediaItemShadow); + z-index: 1; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + border-radius: inherit; +} +.mediaitem-artwork img { + width: 100%; + height: 100%; + object-fit: cover; + image-rendering: -webkit-optimize-contrast; + pointer-events: none; + background-image: url("./assets/MissingArtwork.svg"); + background-size: cover; + background-position: center; +} +.mediaitem-artwork.no-shadow { + box-shadow: none; +} +.mediaitem-artwork.no-shadow::after { + display: none; +} +.mediaitem-artwork.subtle-shadow { + box-shadow: var(--mediaItemShadow-ShadowSubtle); +} +.mediaitem-artwork.shadow { + box-shadow: var(--mediaItemShadow-Shadow); +} +#artworkLCD img { + image-rendering: auto; +} +/* queue item */ +.cd-queue-item { + border-bottom: 0px solid rgba(200, 200, 200, 0.1); + padding: 1px; + padding-bottom: 9px; + padding-top: 9px; +} +.cd-queue-item .row, +.cd-queue-item .col { + padding: 0px; + margin: 0px; +} +.cd-queue-item .artwork { + width: 42px; + height: 42px; + flex: 0 0 auto; +} +.cd-queue-item:hover { + background: var(--selected); +} +.cd-queue-item.selected { + background: var(--selected); +} +.cd-queue-item:active { + background: var(--selected-click); + color: #eee; +} +.cd-queue-item .queue-info { + justify-content: center; + display: flex; + flex-direction: column; + flex-grow: 1; +} +.cd-queue-item .queue-info .queue-title { + font-size: 14px; +} +.cd-queue-item .queue-info .queue-subtitle { + font-size: 0.7em; + opacity: 0.7; +} +.cd-queue-item .queue-duration-info { + display: flex; + flex-grow: 0; +} +.cd-queue-item .queue-duration { + font-size: 14px; + justify-content: center; + min-width: 60px; + height: 100%; +} +.cd-queue-item .queue-explicit-icon { + display: flex; + width: 24px; + padding: 0px; +} +.cd-queue-item .explicit-icon { + background-image: url("./assets/explicit.svg"); + height: 12px; + width: 36px; + filter: contrast(0); + background-repeat: no-repeat; +} +/* horizontal media scroller */ +.cd-hmedia-scroller::-webkit-scrollbar-thumb { + box-shadow: none; +} +.cd-hmedia-scroller:hover::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.cd-hmedia-scroller.hmedia-scroller-card .mediaitem-card { + margin: 16px; +} +/* mediaitem-list-item */ +.cd-mediaitem-list-item { + width: 100%; + height: 60px; + display: flex; + flex: 0 0 auto; + flex-direction: row; + font-size: 14px; + justify-content: center-between; + align-items: center; + border-radius: var(--mediaItemRadius); + position: relative; + /* CSS.gg + */ +} +.cd-mediaitem-list-item .listitem-content { + width: 100%; + height: 60px; + display: flex; + flex: 0 0 auto; + flex-direction: row; + font-size: 14px; + justify-content: center-between; + align-items: center; + border-radius: var(--mediaItemRadius); + position: relative; +} +.cd-mediaitem-list-item:hover .heart-icon { + display: none; +} +.cd-mediaitem-list-item .popular { + background-image: url(assets/star.svg); + background-repeat: no-repeat; + background-size: 10px; + width: 10px; + height: 10px; + position: absolute; + left: 3px; +} +.cd-mediaitem-list-item .artwork { + height: 42px; + width: 42px; + object-fit: cover; + object-position: center; + flex: 0 0 auto; + background-repeat: no-repeat; + margin: 12px; + border: 0px; + outline: none; + position: relative; + overflow: hidden; + border-radius: var(--mediaItemRadiusSmall); +} +.cd-mediaitem-list-item .artwork .mediaitem-artwork { + border-radius: var(--mediaItemRadiusSmall); +} +.cd-mediaitem-list-item .artwork .overlay-play { + background: rgba(0, 0, 0, 0.5); + opacity: 0; + appearance: none; + border: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0px; + z-index: 5; + cursor: pointer; +} +.cd-mediaitem-list-item .artwork .overlay-play:hover { + opacity: 1; +} +.cd-mediaitem-list-item .artwork .overlay-play:active { + background: var(--selected-click); +} +.cd-mediaitem-list-item .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-list-item .info-rect { + height: 100%; + display: flex; + flex-flow: column; + justify-content: center; + flex-grow: 1; +} +.cd-mediaitem-list-item .title { + width: 100%; +} +.cd-mediaitem-list-item .subtitle { + width: 90%; + font-size: 0.8em; + opacity: 0.7; +} +.cd-mediaitem-list-item .duration { + min-width: 60px; + text-align: center; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.cd-mediaitem-list-item .metainfo { + min-width: 145px; + text-align: center; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.cd-mediaitem-list-item .heart-unfilled { + -webkit-mask-image: url("assets/feather/heart.svg"); + height: 12px; + width: 12px; + background-repeat: no-repeat; + background-color: #999; +} +.cd-mediaitem-list-item .heart-filled { + -webkit-mask-image: url("assets/feather/heart-fill.svg"); + height: 12px; + width: 12px; + background-repeat: no-repeat; + background-color: #999; +} +.cd-mediaitem-list-item .explicit-icon { + background-image: url("./assets/explicit.svg"); + height: 12px; + width: 36px; + filter: contrast(0); + background-repeat: no-repeat; +} +.cd-mediaitem-list-item .heart-icon { + display: flex; + position: absolute; + left: 20px; +} +@keyframes load-bar { + 10% { + box-shadow: inset 0 -4px 0; + } + 20% { + box-shadow: inset 0 -10px 0; + } + 30% { + box-shadow: inset 0 -12px 0; + } + 40% { + box-shadow: inset 0 -8px 0; + } + 50% { + box-shadow: inset 0 -4px 0; + } + 60% { + box-shadow: inset 0 -6px 0; + } + 80% { + box-shadow: inset 0 -12px 0; + } + 90% { + box-shadow: inset 0 -6px 0; + } + to { + box-shadow: inset 0 -2px 0; + } +} +.cd-mediaitem-list-item .loadbar-sound, +.cd-mediaitem-list-item .loadbar-sound::after, +.cd-mediaitem-list-item .loadbar-sound::before { + animation: load-bar 1.3s ease infinite alternate; + box-sizing: border-box; + width: 3px; + height: 28px; + box-shadow: inset 0 -12px 0; +} +.cd-mediaitem-list-item .loadbar-sound { + margin-left: 22px; + margin-top: -16px; + position: relative; + transform: scale(var(--load-bar, 1)); + color: var(--keyColor); + display: block; +} +.cd-mediaitem-list-item .loadbar-sound::after, +.cd-mediaitem-list-item .loadbar-sound::before { + content: ""; + position: absolute; + bottom: 0; +} +.cd-mediaitem-list-item .loadbar-sound::before { + left: -4.5px; + animation-delay: -2.4s; +} +.cd-mediaitem-list-item .loadbar-sound::after { + right: -4.2px; + animation-delay: -3.7s; +} +.cd-mediaitem-list-item .isLibrary { + flex: 0 0 auto; + width: 40px; + text-align: center; +} +.cd-mediaitem-list-item .isLibrary button { + appearance: none; + border: 0px; + background: transparent; + cursor: pointer; + filter: contrast(0.8); +} +.cd-mediaitem-list-item:hover { + background: rgba(200, 200, 200, 0.1); + box-shadow: var(--mediaItemShadow); +} +.cd-mediaitem-list-item:hover .overlay-play { + opacity: 1; +} +.cd-mediaitem-list-item.mediaitem-selected { + background: var(--selected); + box-shadow: var(--mediaItemShadow); +} +.cd-mediaitem-list-item:active { + background: var(--selected-click); + box-shadow: var(--mediaItemShadow); + color: #eee; +} +.cd-mediaitem-list-item.disabled { + opacity: 0.5; + pointer-events: none; +} +.cd-mediaitem-list-item.compact { + height: 40px; + font-size: 13px; +} +.cd-mediaitem-list-item.compact .artwork { + display: none; +} +.cd-mediaitem-list-item.compact .info-rect { + padding-left: 1em; +} +/* mediaitem-hrect */ +.cd-mediaitem-hrect { + background: rgba(255, 255, 255, 0.18); + width: 264px; + height: 100px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: row; + font-size: 14px; + justify-content: center; + align-items: center; + border-radius: 6px; + cursor: pointer; +} +.cd-mediaitem-hrect .artwork { + height: 70px; + width: 70px; + background: blue; + border-radius: var(--mediaItemRadius); + background: var(--artwork); + background-size: contain; + flex: 0 0 auto; + background-repeat: no-repeat; + margin: 18px; +} +.cd-mediaitem-hrect .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-hrect .info-rect { + width: 100%; +} +.cd-mediaitem-hrect .title { + width: 100%; + text-align: center; +} +.cd-mediaitem-hrect .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +/* mediaitem-square-sp */ +.cd-mediaitem-square-sp { + --spcolor: var(""); + width: 190px; + height: 245px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: flex-start; + align-items: center; + border-radius: 6px; + margin-left: 10px; + cursor: pointer; + background-color: var(--spcolor); +} +.cd-mediaitem-square-sp .artwork { + height: 190px; + width: 190px; + background: blue; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: 6px; + margin-top: 0px; +} +.cd-mediaitem-square-sp .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-square-sp .artwork:hover { + box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1000000px inset; +} +.cd-mediaitem-square-sp .title { + width: 90%; + text-align: center; +} +.cd-mediaitem-square-sp .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay { + z-index: 3; +} +.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover { + opacity: 1; +} +.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay { + pointer-events: none; +} +.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay { + opacity: 1; +} +.cd-mediaitem-square-sp:hover { + box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1000000px inset; +} +/* mediaitem-square-large */ +.cd-mediaitem-square-large { + width: 190px; + height: 250px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: flex-start; + align-items: center; + border-radius: 6px; + margin-left: 10px; + cursor: pointer; +} +.cd-mediaitem-square-large > * { + z-index: inherit; +} +.cd-mediaitem-square-large .artwork { + height: 190px; + width: 190px; + background: blue; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: 6px; + margin-top: 0px; +} +.cd-mediaitem-square-large-overlay { + position: absolute; + width: 190px; + float: right; + height: 250px; + top: 0px; + margin: 10px; + margin-top: 0px; + opacity: 0; +} +.cd-mediaitem-square-large-overlay > * { + pointer-events: auto; +} +.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay { + z-index: 3; +} +.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover { + opacity: 1; +} +.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay { + pointer-events: none; +} +.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay { + opacity: 1; +} +.cd-mediaitem-square-large .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-square-large .title { + width: 90%; + text-align: center; +} +.cd-mediaitem-square-large .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +/* mediaitem-mvview */ +/* mediaitem-mvview */ +.cd-mediaitem-mvview { + width: 300px; + height: 250px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: flex-start; + align-items: center; + border-radius: 6px; + margin-left: 10px; + cursor: pointer; +} +.cd-mediaitem-mvview > * { + z-index: inherit; +} +.cd-mediaitem-mvview .artwork { + height: 172px; + width: 300px; + background: blue; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: 6px; + margin-top: 0px; +} +.cd-mediaitem-mvview-overlay { + position: absolute; + width: 300px; + float: right; + height: 250px; + top: 0px; + margin: 10px; + margin-top: 0px; + opacity: 0; +} +.cd-mediaitem-mvview-overlay > * { + pointer-events: auto; +} +.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay { + z-index: 3; +} +.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay:hover { + opacity: 1; +} +.cd-mediaitem-mvview + .cd-mediaitem-mvview-overlay { + pointer-events: none; +} +.cd-mediaitem-mvview:hover + .cd-mediaitem-mvview-overlay { + opacity: 1; +} +.cd-mediaitem-mvview .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-mvview .title { + width: 90%; + text-align: center; +} +.cd-mediaitem-mvview .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +/* mediaitem-square */ +.cd-mediaitem-square { + --transitionDuration: 0.25s; + --scaleRate: 1.25; + --scaleRateArtwork: 1; + width: 200px; + height: 200px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: center; + align-items: center; + border-radius: 6px; + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; +} +.cd-mediaitem-square .artwork-container { + position: relative; +} +.cd-mediaitem-square .artwork-container .artwork { + height: 150px; + width: 150px; + background: blue; + border-radius: var(--mediaItemRadius); + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: 6px; + cursor: pointer; + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; +} +.cd-mediaitem-square .artwork-container .artwork .mediaitem-artwork { + box-shadow: unset; +} +.cd-mediaitem-square .artwork-container .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.cd-mediaitem-square .artwork-container .badge-container { + transition: opacity 0.1s var(--appleEase); + opacity: 1; +} +.cd-mediaitem-square .artwork-container .badge-container .socialBadge { + width: 32px; + height: 32px; + position: absolute; + right: 14px; + bottom: 14px; + border-radius: 100%; + overflow: hidden; + z-index: 2; + pointer-events: none; +} +.cd-mediaitem-square .artwork-container > .play-btn, +.cd-mediaitem-square .artwork-container > .menu-btn { + opacity: 0; + appearance: none; + padding: 0px; + border: 0px; + width: 30px; + height: 30px; + border-radius: 50%; + background: rgba(50, 50, 50, 0.7); + cursor: pointer; + transition: opacity 0.1s var(--appleEase); +} +.cd-mediaitem-square .artwork-container > .play-btn :hover, +.cd-mediaitem-square .artwork-container > .menu-btn :hover { + border-radius: 50%; + background: rgba(250, 0, 0, 0.7); +} +.cd-mediaitem-square .artwork-container > .play-btn { + position: absolute; + bottom: 14px; + left: 14px; + z-index: 2; +} +.cd-mediaitem-square .artwork-container > .menu-btn { + position: absolute; + bottom: 14px; + right: 14px; + z-index: 2; +} +.cd-mediaitem-square .artwork-container:hover > .badge-container { + opacity: 0; +} +.cd-mediaitem-square .artwork-container:hover > .play-btn, +.cd-mediaitem-square .artwork-container:hover > .menu-btn { + opacity: 1; +} +@media (min-width: 1460px) { + .cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) { + --scaleRate: 1.1; + --scaleRateArtwork: 0.9; + width: calc(200px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + } + .cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) .artwork-container > .artwork { + width: calc(190px * var(--scaleRateArtwork)); + height: calc(190px * var(--scaleRateArtwork)); + } +} +@media (min-width: 1550px) { + .cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) { + --scaleRate: 1.25; + --scaleRateArtwork: 1; + width: calc(200px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + } + .cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) .artwork-container > .artwork { + width: calc(190px * var(--scaleRateArtwork)); + height: calc(190px * var(--scaleRateArtwork)); + } +} +.cd-mediaitem-square .info-rect { + width: 90%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.cd-mediaitem-square .title { + width: 100%; + text-align: center; + display: flex; + align-content: center; + justify-content: center; +} +.cd-mediaitem-square .subtitle { + width: 100%; + text-align: center; + font-size: 12px; +} +.cd-mediaitem-square .unavailable-overlay { + position: absolute; + top: 0px; + left: 0px; + bottom: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 2; + pointer-events: none; + background: rgba(0, 0, 0, 0.4); + margin: 2em; + border-radius: 10px; +} +.cd-mediaitem-square .unavailable-overlay > .codicon { + font-size: 4em; + font-weight: bold; + opacity: 0.5; +} +.cd-mediaitem-square.mediaitem-video { + height: 200px; + width: 240px; +} +.cd-mediaitem-square.mediaitem-video .artwork { + height: 120px; + width: 212px; +} +@media (min-width: 1460px) { + .cd-mediaitem-square.mediaitem-video:not(.noscale) { + --scaleRate: 1.1; + --scaleRateArtwork: 1.1; + width: calc(240px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + } + .cd-mediaitem-square.mediaitem-video:not(.noscale) .artwork-container > .artwork { + width: calc(220px * var(--scaleRateArtwork)); + height: calc(123px * var(--scaleRateArtwork)); + } +} +@media (min-width: 1550px) { + .cd-mediaitem-square.mediaitem-video:not(.noscale) { + --scaleRate: 1.25; + --scaleRateArtwork: 1.25; + width: calc(240px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + } + .cd-mediaitem-square.mediaitem-video:not(.noscale) .artwork-container > .artwork { + width: calc(220px * var(--scaleRateArtwork)); + height: calc(123px * var(--scaleRateArtwork)); + } +} +.cd-mediaitem-square.mediaitem-brick { + height: 200px; + width: 240px; +} +.cd-mediaitem-square.mediaitem-brick .artwork { + height: 123px; + width: 220px; +} +@media (min-width: 1460px) { + .cd-mediaitem-square.mediaitem-brick:not(.noscale) { + --scaleRate: 1.1; + --scaleRateArtwork: 1.1; + width: calc(240px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + } + .cd-mediaitem-square.mediaitem-brick:not(.noscale) .artwork-container > .artwork { + width: calc(220px * var(--scaleRateArtwork)); + height: calc(123px * var(--scaleRateArtwork)); + } +} +@media (min-width: 1550px) { + .cd-mediaitem-square.mediaitem-brick:not(.noscale) { + --scaleRate: 1.25; + --scaleRateArtwork: 1.25; + width: calc(240px * var(--scaleRate)); + height: calc(200px * var(--scaleRate)); + } + .cd-mediaitem-square.mediaitem-brick:not(.noscale) .artwork-container > .artwork { + width: calc(220px * var(--scaleRateArtwork)); + height: calc(123px * var(--scaleRateArtwork)); + } +} +.cd-mediaitem-square.mediaitem-small { + width: 140px; + height: 180px; +} +.cd-mediaitem-square.mediaitem-small .artwork { + height: 128px; + width: 128px; +} +.cd-mediaitem-square.mediaitem-card { + background: #ccc; + background: var(--spcolor); + height: 302px; + width: 230px; + overflow: hidden; + position: relative; + border-radius: calc(var(--mediaItemRadius) * 2); + box-shadow: var(--mediaItemShadow-ShadowSubtle); +} +.cd-mediaitem-square.mediaitem-card .artwork { + width: 230px; + height: 230px; + overflow: hidden; + border-radius: 0px; + margin: 0; + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear, filter 0.2s ease-in-out; +} +.cd-mediaitem-square.mediaitem-card .artwork .mediaitem-artwork { + border-radius: 0px; +} +.cd-mediaitem-square.mediaitem-card .artwork .mediaitem-artwork::after { + box-shadow: unset; +} +.cd-mediaitem-square.mediaitem-card .info-rect-card { + padding: 10px 10px 14px; + position: relative; + width: 100%; + display: grid; + align-content: center; +} +.cd-mediaitem-square.mediaitem-card .info-rect-card::before { + background: var(--bgartwork); + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + background-size: cover; + background-position: bottom; + z-index: 0; + opacity: 1; + filter: brightness(0.5) blur(50px) saturate(180%); + transition: filter 0.2s ease-in-out; +} +.cd-mediaitem-square.mediaitem-card .title { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 0.9em; + font-weight: 500; + z-index: 1; +} +.cd-mediaitem-square.mediaitem-card .title + .subtitle { + max-height: none !important; +} +.cd-mediaitem-square.mediaitem-card .subtitle { + height: 100%; + justify-content: center; + align-items: center; + font-size: 0.75em; + width: 100%; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + max-height: 4.8em; + z-index: 1; +} +.cd-mediaitem-square.mediaitem-card::after { + box-shadow: var(--mediaItemShadow); + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + pointer-events: none; + border-radius: inherit; +} +.cd-mediaitem-square.mediaitem-card:hover .artwork { + filter: brightness(0.8); +} +.cd-mediaitem-square.mediaitem-card:hover .info-rect-card::before { + filter: brightness(0.3) blur(50px) saturate(180%); +} +@media (min-width: 1460px) { + .cd-mediaitem-square.mediaitem-card:not(.noscale) { + width: calc(230px * 1.1); + height: calc(298px * 1.1); + } + .cd-mediaitem-square.mediaitem-card:not(.noscale) .artwork-container > .artwork { + width: calc(230px * 1.1); + height: calc(230px * 1.1); + } +} +@media (min-width: 1550px) { + .cd-mediaitem-square.mediaitem-card:not(.noscale) { + width: calc(230px * 1.25); + height: calc(298px * 1.25); + } + .cd-mediaitem-square.mediaitem-card:not(.noscale) .artwork-container > .artwork { + width: calc(230px * 1.25); + height: calc(230px * 1.25); + } +} +/* mediaitem-square */ +.albums-square-containeru > * > .cd-mediaitem-square { + --frame: max(220px, 15vw); + width: var(--frame); + height: calc(var(--frame) * 13 / 11); + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: calc(var(--frame) / 220 * 14); + justify-content: center; + align-items: center; + border-radius: calc(var(--frame) / 220 * 6); +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container { + position: relative; +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container .artwork { + height: calc(var(--frame) * 19 / 22); + width: calc(var(--frame) * 19 / 22); + background: blue; + border-radius: var(--mediaItemRadius); + background: var(--artwork); + background-size: cover; + flex: 0 0 auto; + margin: calc(var(--frame) / 220 * 6); + cursor: pointer; +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container .artwork.round { + border-radius: var(--mediaItemRadiusRound); +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .play-btn, +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .menu-btn { + opacity: 0; + appearance: none; + padding: 0px; + border: 0px; + width: calc(var(--frame) / 220 * 30); + height: calc(var(--frame) / 220 * 30); + border-radius: 50%; + background: rgba(50, 50, 50, 0.7); + cursor: pointer; + backdrop-filter: blur(32px) saturate(180%); + transition: opacity 0.1s var(--appleEase); +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .play-btn { + position: absolute; + bottom: calc(var(--frame) / 220 * 14); + left: calc(var(--frame) / 220 * 14); + z-index: 2; +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .menu-btn { + position: absolute; + bottom: calc(var(--frame) / 220 * 14); + right: calc(var(--frame) / 220 * 14); + z-index: 2; +} +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container:hover > .play-btn, +.albums-square-containeru > * > .cd-mediaitem-square .artwork-container:hover > .menu-btn { + opacity: 1; +} +.albums-square-containeru > * > .cd-mediaitem-square .title { + width: 90%; + text-align: center; +} +.albums-square-containeru > * > .cd-mediaitem-square .subtitle { + width: 100%; + text-align: center; + font-size: calc(var(--frame) / 220 * 12); +} +.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-video { + height: calc(var(--frame) / 220 * 200); + width: calc(var(--frame) / 220 * 240); +} +.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-video .artwork { + height: calc(var(--frame) / 220 * 120); + width: calc(var(--frame) / 220 * 212); +} +.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-brick { + height: calc(var(--frame) / 220 * 200); + width: calc(var(--frame) / 220 * 240); +} +.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-brick .artwork { + height: calc(var(--frame) / 220 * 123); + width: calc(var(--frame)); +} +.listitem-horizontal .cd-mediaitem-list-item { + width: 350px; + height: 60px; +} +.mediaitem-list-item__grid { + background: rgba(200, 200, 200, 0.05); + border-radius: 10px; + padding: var(--contentInnerPadding); + box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; + width: 100%; +} +.mediaitem-list-item__grid .cd-mediaitem-list-item { + width: 350px; + height: 60px; +} +.mediaitem-list-item__grid::-webkit-scrollbar { + display: none; +} +.mediaitem-list-item__grid:hover::-webkit-scrollbar { + display: initial; +} +.svg-icon { + --color: #aaa; + --url: url("./assets/feather/share.svg"); + -webkit-mask-image: var(--url); + -webkit-mask-size: cover; + height: 18px; + width: 18px; + background: var(--color); +} +.svg-icon.inline { + display: inline-block; +} +.sidebar-icon { + width: 18px; + height: 18px; + margin-right: 8px; +} +.sidebar-icon > .svg-icon { + width: 100%; + height: 100%; + --color: #aaa; +} +.sidebar-icon > svg { + width: 100%; + height: 100%; + color: #aaa; +} +/* Switch Checkbox */ +input[type=checkbox][switch] { + width: 38px; + appearance: none; + border-radius: 32px; + height: 24px; + zoom: 1; + top: 0; + cursor: pointer; + left: 0; + position: relative; + transform: scale(1); + background: #8e8e93; + padding: 0; + margin: 0; +} +input[type=checkbox][switch]:focus, +input[type=checkbox][switch]:active { + outline: none; +} +input[type=checkbox][switch]:checked { + background: var(--keyColor); + border: 0 solid var(--keyColor); + mix-blend-mode: unset; +} +input[type=checkbox][switch]:checked:hover { + background: var(--keyColor-rollover); +} +input[type=checkbox][switch]:checked:active { + background: var(--keyColor-pressed); +} +input[type=checkbox][switch]::before { + background: white; + width: 26px; + height: 26px; + top: -1px; + left: -1px; + position: absolute; + content: ' '; + border-radius: 32px; + transition: 0.1s left var(--appleEase); + transform: scale(0.75); +} +input[type=checkbox][switch]:checked::before { + background: white; + top: -1px; + left: 13px; + transition: 0.1s left var(--appleEase); + transform: scale(0.75); +} +input[type=checkbox][switch]:disabled::before { + opacity: 0.5; +} +input[type=checkbox][switch]:active::before { + left: 13px; +} +input[type=checkbox][switch]:checked:active::before { + left: -1px; +} +/* End Switch Checkbox */ +.header-text { + margin: 0px; +} +.media-item--small { + background: rgba(0, 0, 0, 0.25); + height: 162px; + width: 132px; + display: inline-flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 10px; +} +.media-item--small .artwork { + background: red; + margin: 6px; + border-radius: 100%; + width: 90px; + height: 90px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.3); +} +.playlist-artwork { + height: 190px; + width: 190px; + background: blue; + border-radius: 6px; + background: var(--artwork); + background-size: cover; + box-shadow: var(--mediaItemShadow); + flex: 0 0 auto; + margin: 6px; + margin-top: 0px; +} +.media-item--small .text { + font-weight: 600; + font-size: 0.9em; +} +.media-item--small .subtext { + font-size: 0.75em; +} +.player-duration-time { + opacity: 0.5; +} +.player-artwork-container { + display: flex; + align-items: center; + justify-content: center; +} +.player-duration-container { + font-size: 0.85em; + font-weight: 500; +} +.media-artwork { + --artwork: url(""); + width: 80vw; + height: 80vw; + max-height: 500px; + max-width: 500px; + background: black; + background-image: var(--artwork); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border-radius: 8px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16), 0 8px 40px rgba(0, 0, 0, 0.55); + transition: transform 0.1s var(--appleEase); +} +.media-artwork.paused { + transition: transform 0.35s var(--appleEase); + transform: scale(0.85); +} +.playback-slider { + width: 90%; +} +.volume-slider { + width: 100%; +} +.volume-slider-container { + width: 90%; + margin: 0 auto; + padding: 0px; +} +.volume-slider-container .col-auto, +.volume-slider-container .col { + display: flex; + align-items: center; + justify-self: center; + padding: 0px; + margin: 0px; +} +.playback-button { + font-size: 2em; + width: 40px; + height: 36px; + padding: 0px; + background: transparent; + border: 0px; + border-radius: 0px; + box-shadow: unset; + background-size: 12px; + background-position: center; + background-repeat: no-repeat; + opacity: 0.7; + border-radius: 6px; + position: relative; +} +.playback-button:before { + content: ""; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--selected); + border-radius: inherit; + position: absolute; + opacity: 0; + z-index: -1; + transform: scale(0.5); + pointer-events: none; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.playback-button:hover:before { + transform: scale(1); + opacity: 1; +} +.playback-button--small { + border-radius: 6px; + font-size: 1em; + color: inherit; + background-size: 0.98em; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + width: 40px; + height: 32px; + border: 0px; + box-shadow: unset; + opacity: 0.7; + position: relative; +} +.playback-button--small:before { + content: ""; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--selected); + border-radius: inherit; + position: absolute; + opacity: 0; + z-index: -1; + transform: scale(0.5); + pointer-events: none; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.playback-button--small:hover:before { + transform: scale(1); + opacity: 1; +} +.playback-button--small.active { + background-color: rgba(200, 200, 200, 0.25); +} +.playback-button:active, +.playback-button--small:active { + background-color: var(--selected-click); +} +.playback-button--small.search { + background-image: url("./assets/search.svg"); +} +.playback-button--small.cast { + background-image: url("./assets/cast_white.svg"); + background-size: 1.25em; +} +.playback-button--small.miniplayer { + background-image: url("./assets/pip.svg"); +} +.playback-button--small.queue { + background-image: url("./assets/list.svg"); +} +.playback-button--small.lyrics { + background-image: url("./assets/quote-right.svg"); +} +.playback-button--small.shuffle { + background-image: url("./assets/shuffle.svg"); +} +.playback-button--small.repeat { + background-image: url("./assets/repeat.svg"); +} +.playback-button--small.repeat.repeatOne { + background-color: rgba(200, 200, 200, 0.25); + background-image: url("./assets/repeatOne.svg"); +} +.playback-button.stop { + background-image: url('./assets/cider-icons/stop.svg'); + background-size: 38px; + background-position: center; +} +.playback-button.collapseLibrary { + font-family: "codicon"; + font-size: 1em; + color: var(--textColor); + display: grid; + place-items: center; +} +.playback-button.collapseLibrary span { + position: absolute; +} +.playback-button.pause { + background-image: url('./assets/cider-icons/pause.svg'); + background-size: 38px; + background-position: center; +} +.playback-button.play { + background-image: url('./assets/cider-icons/play.svg'); + background-size: 38px; + background-position: center; +} +.playback-button.next { + background-image: url('./assets/cider-icons/forward.svg'); + background-size: 60%; + background-position: center; +} +.playback-button.previous { + background-image: url('./assets/cider-icons/backward.svg'); + background-size: 60%; + background-position: center; +} +.playback-button.disabled, +.playback-button--small.disabled { + opacity: 0.25 !important; + pointer-events: none; + transform: none !important; +} +.playback-button.disabled:hover, +.playback-button--small.disabled:hover { + background-color: transparent !important; + transform: none !important; +} +.playback-button.navigation { + display: flex; + justify-content: center; + align-items: center; + color: white; +} +.playback-button.navigation > svg { + height: 16px; + width: 16px; + pointer-events: none; +} +.playback-buttons { + display: flex; + align-items: center; + justify-content: center; +} +.player-volume-glyph { + width: 32px; + height: 16px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} +.player-volume-glyph.decrease { + background-image: url("./assets/volume.svg"); + opacity: 0.5; +} +.player-volume-glyph.increase { + background-image: url("./assets/volume-2.svg"); + opacity: 0.5; +} +.player-track-info { + width: 90%; + margin: 0 auto; +} +.player-song-title { + font-size: 1.25em; + text-align: left; + margin: 0 auto; + font-weight: 500; +} +.player-song-artist { + font-size: 1em; + text-align: left; + margin: 0 auto; + color: var(--keyColor); + font-weight: 400; +} +.player-song-artist:hover { + cursor: pointer; + text-decoration: underline; +} +.player-more-container { + display: flex; + align-items: center; + justify-content: center; +} +.player-more-button { + appearance: none; + width: 32px; + height: 32px; + border-radius: 50%; + border: 0px; + background: var(--keyColor); + cursor: pointer; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16); + color: white; + font-weight: bold; + padding: 0px; + font-size: 16px; +} +.back-button { + width: 40px; + height: 40px; + background-color: transparent; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + background-image: url("./assets/arrow-left.svg"); + border: 0px; + border-radius: 0px; +} +.header-text { + height: 40px; + display: flex; + align-items: center; +} +.list-entry-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px; + font-size: 1em; + font-family: inherit; +} +.list-entry { + display: flex; + align-items: center; + /* justify-content: space-between; */ + padding: 12px; + font-size: 1em; + font-family: inherit; + border-bottom: 1px solid rgba(255 255 255 / 0.1); + cursor: pointer; +} +.list-entry-image { + --artwork: url(""); + width: 64px; + height: 64px; + background: var(--artwork); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border-radius: 8px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16), 0 8px 40px rgba(0, 0, 0, 0.55); +} +.list-entry-image.artist { + border-radius: 50%; +} +.list-entry-body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin-left: 12px; +} +.list-entry-name { + font-size: 14px; + font-weight: 500; + overflow: hidden; + width: 100%; +} +.list-entry-artist { + font-size: 12px; + overflow: hidden; + width: 100%; +} +.list-entry .handle { + height: 100%; + width: 28px; + background: var(--keyColor); + display: flex; + justify-content: center; + align-items: center; +} +.artist-chip { + display: inline-flex; + align-items: center; + justify-content: center; + margin: 12px 12px 12px 0px; + border-radius: 4px; + color: white; + font-size: 1em; + font-weight: 500; + cursor: pointer; +} +.artist-chip .artist-chip__follow { + appearance: none; + border: 0; + height: 32px; + width: 32px; + background: #ffffff0f; + margin: 0px 0px 0px 10px; + font-weight: bold; + color: white; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + cursor: pointer; + flex: 0 0 32px; +} +.artist-chip .artist-chip__follow:hover { + background: var(--selected); +} +.artist-chip .artist-chip__image { + width: 32px; + height: 32px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + border-radius: 100%; + overflow: hidden; + margin: 0px 12px 0px 0px; + pointer-events: none; + flex: 0 0 32px; +} +.artist-chip .artist-chip__image .mediaitem-artwork { + border-radius: inherit; +} +.artist-chip .artist-chip__name { + pointer-events: none; +} +.search-panel { + background: rgba(0, 0, 0, 0.5); +} +.search-header { + position: absolute; + width: 100%; + z-index: 1; + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid rgba(200, 200, 200, 0.08); +} +.connection-error-panel { + background: rgba(0, 0, 0, 0.5); +} +.search-type-container { + display: flex; +} +.search-type-button { + background: rgba(20, 20, 20, 0.85); + border-radius: 50px; + color: white; + border: 0px; + box-shadow: unset; + font-family: inherit; + padding: 8px 16px; + font-size: 14px; + font-weight: 500; + margin: 8px; + margin-top: 0px; + margin-bottom: 0px; +} +.search-type-button.active { + background: var(--keyColor); +} +.search-tab-container { + overflow: auto; + white-space: nowrap; + overflow-y: hidden; +} +.search-body-container { + position: relative; + width: 100%; + height: 100%; +} +.search-body { + position: absolute; + width: 100%; + height: 100%; + padding-top: 220px; +} +.search-tab { + background: rgba(20, 20, 20, 0.85); + border-radius: 50px; + color: white; + border: 0px; + box-shadow: unset; + font-family: inherit; + padding: 8px 16px; + font-size: 14px; + font-weight: 500; +} +.search-tab.active { + background: var(--keyColor); +} +.fancy-pills .nav-pills { + position: relative; +} +.fancy-pills .nav-pills .nav-link { + transition: transform 0.3s var(--appleEase); + position: relative; + background-color: transparent; + border: 0; + border-radius: 50px; + color: #eee; + -webkit-user-drag: none; + font-weight: 500; + margin: 0px 4px; +} +.fancy-pills .nav-pills .nav-link:after { + --dist: 1px; + content: ""; + position: absolute; + top: var(--dist); + bottom: var(--dist); + left: var(--dist); + right: var(--dist); + background-color: transparent; + border-radius: 50px; + z-index: -1; + opacity: 0; + transition: background-color 0.5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius 0.32s var(--appleEase); +} +.fancy-pills .nav-pills .nav-link:hover { + outline: none; + transform: scale(1.1); + background: transparent; + color: #333; +} +.fancy-pills .nav-pills .nav-link:hover:after { + opacity: 1; + background-color: #eee; + transition: background-color 0.25s var(--appleEase), border-radius 0.25s var(--appleEase), color 0s var(--appleEase), opacity 0s var(--appleEase); +} +.fancy-pills .nav-pills .nav-link.active { + outline: none; + transform: scale(1.1); + background: transparent; + color: #333; + font-weight: 600; +} +.fancy-pills .nav-pills .nav-link.active:after { + opacity: 1; + background-color: #eee; +} +.fancy-pills .nav-pills:hover .nav-link.active { + outline: none; + background: transparent; + color: #eee; + transform: scale(1); +} +.fancy-pills .nav-pills:hover .nav-link.active:after { + background: rgba(200, 200, 200, 0.15); + opacity: 1; + transition: color 0s; + --dist: 4px; +} +.fancy-pills .nav-pills:hover .nav-link.active:hover { + transform: scale(1.1); + z-index: 1; + color: #333; +} +.fancy-pills .nav-pills:hover .nav-link.active:hover:after { + background: #eee; + border-radius: inherit; + --dist: 1px; +} +.fancy-pills .nav-pills:after { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(200, 200, 200, 0.1); + border-radius: 50px; + z-index: 0; + pointer-events: none; +} +.grouping-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; +} +.grouping-container .grouping-btn { + padding: 16px; + appearance: none; + border: 0px; + border-radius: 10px; + background: var(--color1); + color: var(--keyColor); + width: 100%; + text-align: left; + font-family: inherit; + cursor: pointer; + flex: 1 0 21%; + position: relative; +} +.grouping-container .grouping-btn:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + font-family: "codicon"; + display: flex; + align-items: center; + width: 28px; + font-weight: bold; + font-size: 1.2em; + pointer-events: none; +} +.app-sidebar-header .search-input-container .search-hints-container { + top: 38px; + padding: 3px; +} +.content-inner.library-page .heart-icon { + left: 7px; +} +.content-inner.library-page .cd-mediaitem-list-item { + padding-left: 25px; +} +.content-inner.library-artists-page .inner-container .list-container .podcasts-list { + background: rgba(27, 27, 27); + padding-top: 14px; + width: 272px; +} +.content-inner.library-artists-page .inner-container .list-container .podcasts-list .cd-mediaitem-list-item { + margin-left: 10px; +} +.content-inner.library-artists-page .inner-container .list-container .podcasts-list .cd-mediaitem-list-item:hover { + width: 96%; +} +.notyf__toast { + -webkit-app-region: no-drag; + cursor: pointer; +} +.notyf-info { + background: var(--keyColor); +} +.tooltip-inner { + background: #2f2f2f; + opacity: 1; + border: 1px solid rgba(0, 0, 0, 0.35); + transition: all 0.3s ease-in-out; + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); +} +.modal-fullscreen { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + z-index: 1000; +} +.modal-fullscreen .modal-window { + background: #333; + border-radius: 10px; + box-shadow: var(--mediaItemShadow-Shadow); + display: flex; + flex-flow: column; + max-height: 500px; + max-width: 360px; + background: #121212; + width: 100%; + position: relative; +} +.modal-fullscreen .modal-window:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + box-shadow: var(--mediaItemShadow); + z-index: 1; + border-radius: inherit; +} +.modal-fullscreen .modal-window .modal-header { + width: 100%; + padding: 6px; +} +.modal-fullscreen .modal-window .modal-content { + width: 100%; + height: 100%; + overflow: hidden; + overflow-y: overlay; +} +.spatialproperties-panel .modal-window { + overflow: hidden; +} +.spatialproperties-panel .modal-window:not(.airplay-modal) { + height: 700px; + max-height: 700px; + width: 800px; + max-width: 800px; +} +.spatialproperties-panel .modal-window .info-header { + padding-left: 12px; +} +.spatialproperties-panel .modal-window .visual-container { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} +.spatialproperties-panel .modal-window .visual { + position: relative; + height: 250px; + width: 300px; + display: inline-flex; + align-items: flex-end; + justify-content: center; + filter: drop-shadow(2px 12px 6px rgba(0, 0, 0, 0.25)); + margin: 0 auto; +} +.spatialproperties-panel .modal-window .visual .face { + position: absolute; + width: calc(12px * 6); + height: calc(12px * 6); + border-radius: 6px; + transform: rotateX(60deg) rotateZ(-45deg); + transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; +} +.spatialproperties-panel .modal-window .visual .listener { + position: absolute; + width: 32px; + height: 32px; + border-radius: 6px; + transform: rotateX(60deg) rotateZ(-45deg); + transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; + background: white; + color: black; + z-index: 2; +} +.spatialproperties-panel .modal-window .visual .audiosource { + position: absolute; + width: 32px; + height: 32px; + border-radius: 6px; + transform: rotateX(60deg) rotateZ(-45deg); + transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear; + background: yellow; + z-index: 2; +} +.spatialproperties-panel .modal-window .visual .face:nth-of-type(1) { + background: linear-gradient(45deg, #28223a, #1f2038); + z-index: 1; +} +.spatialproperties-panel .modal-window .visual .face:nth-of-type(2) { + background: linear-gradient(45deg, #7d53ad, #5763ff); + transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px); + opacity: 0.7; + z-index: 3; +} +.spatialproperties-panel .modal-window .modal-header { + padding: 16px; + position: relative; + overflow: hidden; +} +.spatialproperties-panel .modal-window .modal-header .modal-title { + text-align: center; +} +.spatialproperties-panel .modal-window .modal-header .close-btn { + width: 36px; + height: 36px; + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 10px; + right: 10px; + border-radius: 50px; + display: grid; + align-content: center; +} +.spatialproperties-panel .modal-window .modal-header .close-btn:before { + content: ""; + font-family: "codicon"; + color: var(--textColor); + font-size: 20px; +} +.spatialproperties-panel .modal-window .modal-header .close-btn:hover { + background-color: #c42b1c; +} +.addtoplaylist-panel .modal-window { + max-height: 600px; + max-width: 400px; + background: rgba(18, 18, 18, 0.9); + overflow: hidden; + backdrop-filter: blur(16px) saturate(180%); +} +.addtoplaylist-panel .modal-window .modal-header { + padding: 16px; + position: relative; +} +.addtoplaylist-panel .modal-window .modal-header .modal-title { + text-align: center; +} +.addtoplaylist-panel .modal-window .modal-header .close-btn { + width: 36px; + height: 36px; + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 10px; + right: 10px; + border-radius: 50px; + display: grid; + align-content: center; +} +.addtoplaylist-panel .modal-window .modal-header .close-btn:before { + content: ""; + font-family: "codicon"; + color: var(--textColor); + font-size: 20px; +} +.addtoplaylist-panel .modal-window .modal-header .close-btn:hover { + background-color: #c42b1c; +} +.addtoplaylist-panel .modal-window .modal-search { + width: 100%; + padding: 0px 16px; + position: relative; +} +.addtoplaylist-panel .modal-window .playlist-item { + appearance: none; + border: 0px; + text-align: left; + width: 100%; + margin: 0; + display: flex; + background: rgba(32, 32, 32, 0.46); + color: #eee; + font-family: inherit; + font-size: 0.98em; + padding: 6px 12px; + align-items: center; + flex-flow: row; +} +.addtoplaylist-panel .modal-window .playlist-item .icon { + pointer-events: none; + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 6px; +} +.addtoplaylist-panel .modal-window .playlist-item .name { + position: relative; +} +.addtoplaylist-panel .modal-window .playlist-item:hover { + background: var(--selected); +} +.addtoplaylist-panel .modal-window .playlist-item:active { + background: var(--selected-click); +} +.addtoplaylist-panel .modal-window .playlist-item.focused { + background: var(--keyColor); +} +.addtoplaylist-panel .modal-window .playlist-item:last-child { + border-bottom: 0px; +} +.menu-panel { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 100001; + display: flex; + justify-content: center; + align-items: center; + -webkit-app-region: no-drag; +} +.menu-panel .menu-header-body { + padding: 6px; + display: flex; + background: rgba(200, 200, 200, 0.1); +} +.menu-panel .menu-header-body .menu-option-header { + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--mediaItemRadius); + appearance: none; + border: 0; + background: transparent; +} +.menu-panel .menu-header-body .menu-option-header.active .sidebar-icon > .svg-icon { + --color: var(--keyColor); +} +.menu-panel .menu-header-body .menu-option-header:hover { + background: var(--selected); +} +.menu-panel .menu-header-body .menu-option-header:active { + background: var(--selected-click); +} +.menu-panel .menu-panel-body { + display: flex; + flex-flow: column; + background: rgba(30, 30, 30, 0.45); + backdrop-filter: blur(32px) saturate(180%); + position: relative; + min-width: 200px; + box-shadow: var(--ciderShadow-Generic); + border-radius: var(--panelRadius); + overflow: hidden; + font-size: 13px; +} +.menu-panel .menu-panel-body .menu-option { + text-align: left; + display: flex; + appearance: none; + border: 0px; + font: inherit; + background: transparent; + color: inherit; + margin: 0 auto; + position: relative; + width: 100%; + padding: 9px 14px; + align-items: center; +} +.menu-panel .menu-panel-body .menu-option::before { + background: var(--hover); + border-radius: 6px; + content: ""; + --sizeY: 3px; + --sizeX: 4px; + top: var(--sizeY); + left: var(--sizeX); + bottom: var(--sizeY); + right: var(--sizeX); + position: absolute; + opacity: 0; + transform: scale(0.98); + z-index: -1; + transition: transform 0.25s ease-out, opacity 0.25s ease-out; +} +.menu-panel .menu-panel-body .menu-option:hover::before { + transition: transform 0s ease-in, opacity 0s ease-in; + opacity: 1; + transform: scale(1); +} +.menu-panel .menu-panel-body .menu-option:active::before { + transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; + opacity: 1; + transform: scale(0.98); + background: var(--selected-click); +} +.menu-panel .menu-header-text { + margin: 18px 6px; +} +.menu-panel .menu-header-text .close-btn { + width: 36px; + height: 36px; + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 10px; + right: 10px; + border-radius: 50px; + display: grid; + align-content: center; +} +.menu-panel .menu-header-text .close-btn:before { + content: ""; + font-family: "codicon"; + color: var(--textColor); + font-size: 20px; +} +.menu-panel .menu-header-text .close-btn:hover { + background-color: #c42b1c; +} +.menu-panel .menu-body { + overflow: overlay; + height: 100%; + display: flex; + flex-flow: column; + gap: 0px; + padding: 0px; + position: relative; +} +.menu-panel .menu-footer { + width: 100%; + padding: 12px; +} +.queue-panel { + height: 100%; + width: 100%; + display: flex; + flex-flow: column; +} +.queue-panel .queue-header-text { + margin: 18px 6px; +} +.queue-panel .queue-body { + overflow: overlay; + height: 100%; +} +.queue-panel .queue-footer { + width: 100%; + padding: 12px; +} +.queue-panel .autoplay { + background: rgba(200, 200, 200, 0.15); + display: flex; + justify-content: center; + appearance: none; + border: 0; + border-radius: 6px; + height: 32px; + width: 32px; +} +.queue-panel .infinity { + content: url("./assets/infinity.svg"); + margin: auto; +} +.moreinfo-modal .modal-window { + height: 70%; + max-height: 100%; + width: 45%; + max-width: 100%; + overflow: hidden; + line-height: 1.25; +} +.moreinfo-modal .modal-content { + padding: 1em; + font-size: 0.8rem; +} +.moreinfo-modal .modal-content br { + display: block; + /* makes it have a width */ + content: ""; + /* clears default height */ + margin: 2em; + margin-bottom: -0.6rem; +} +.moreinfo-modal .modal-header { + flex-direction: column; +} +.moreinfo-modal .modal-header .modal-title { + text-align: unset !important; + width: 100%; +} +.moreinfo-modal .modal-header .modal-title:not(.modal-subtitle) { + font-size: 25px; +} +.mediainfo-popover { + user-select: none; + background-color: #000000; + overflow: hidden; +} +.mediainfo-popover .content .shadow-artwork { + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + filter: blur(32px) brightness(50%) saturate(280%); +} +.mediainfo-popover .content .popover-artwork { + width: 200px; + height: 200px; + margin: 0 auto; + margin-bottom: 20px; +} +.mediainfo-popover .content .song-name { + font-weight: 600; +} +.mediainfo-popover .content .song-artist, +.mediainfo-popover .content .song-album { + opacity: 0.75; + cursor: pointer; +} +.mediainfo-popover .content .song-artist:hover, +.mediainfo-popover .content .song-album:hover { + text-decoration: underline; +} +._svg-icon { + --icon: url("./assets/chevron-left.svg"); + --size: 1em; + width: var(--size); + height: var(--size); + -webkit-mask-image: var(--icon); + -webkit-mask-position: center; + -webkit-mask-size: contain; + background: rgba(255, 255, 255, 0.76); + -webkit-mask-repeat: no-repeat; +} +._svg-icon.md { + --size: 1.2em; +} +.content-inner { + position: absolute; + top: var(--navigationBarHeight); + left: 0; + padding: 32px; + width: 100%; + transition: zoom 1s; + zoom: 1; +} +.content-inner.centered { + height: 100%; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; +} +.github-themes-page { + display: flex; + flex-direction: column; + padding: 0px; + height: calc(100% - var(--navigationBarHeight)); +} +.github-themes-page .github-avatar { + height: 42px; + width: 42px; + margin: 6px; + border-radius: 32px; +} +.github-themes-page .repo-name { + margin: 0px; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: break-spaces; +} +.github-themes-page .repo-url { + color: var(--textColor); + font-size: 0.8em; +} +.github-themes-page .repo-preview-name { + margin: 0px; +} +.github-themes-page .repos-list { + height: 100%; + overflow-y: overlay; + width: 320px; + font-size: 14px; +} +.github-themes-page .repos-list > .list-group { + margin: 0px; +} +.github-themes-page .repos-list .list-group-item { + padding: 12px 6px; +} +.github-themes-page .repos-list .list-group-item:hover { + filter: brightness(1.2); +} +.github-themes-page .repos-list .list-group-item:active { + filter: brightness(0.8); +} +.github-themes-page .github-preview { + height: 100%; + flex: 1; + background: var(--color2); + padding: 16px 32px; + overflow-y: overlay; +} +.github-themes-page .gh-content { + display: flex; + flex-direction: row; + flex: 1; + overflow: hidden; +} +.github-themes-page .gh-header { + padding: 16px; +} +.library-page { + padding: 0px; +} +.library-page .library-header { + position: sticky; + top: 0; + left: 0; + border-bottom: 1px solid rgba(200, 200, 200, 0.05); + z-index: 6; + background: black; + padding: 0px 2em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); +} +.library-page .well { + margin: 2em; +} +.search-page .searchToggle { + float: right; +} +.search-page .searchToggle > button { + min-width: 120px; +} +.search-page .cd-mediaitem-square.mediaitem-brick { + width: 530px !important; +} +.search-page .cd-mediaitem-square.mediaitem-brick .artwork-container .artwork { + height: 168px !important; + width: 507px !important; + z-index: 1; +} +.search-page .cd-mediaitem-square.mediaitem-brick .title { + font-weight: bold; + justify-content: left; + font-size: 18px; + margin-top: -40px; + z-index: 5; + pointer-events: none; +} +.content-inner.podcasts-page { + display: flex; + height: calc(100% - var(--navigationBarHeight)); + padding: 0px; +} +.content-inner.podcasts-page .list-flat { + border-radius: 0px; +} +.content-inner.podcasts-page .podcast-artwork { + width: 200px; + margin: 16px auto; + height: 200px; +} +.content-inner.podcasts-page .podcasts-list { + height: 100%; + width: 280px; + background: rgba(200, 200, 200, 0.1); + overflow-y: overlay; + border-right: 1px solid var(--color2); + flex: none; + overflow-x: hidden; +} +.content-inner.podcasts-page .podcasts-list .podcast-list-header { + border-bottom: 1px solid var(--color2); + font-size: 0.7em; + padding: 6px; + background: #ffffff17; + text-transform: uppercase; + font-weight: 600; + opacity: 0.5; +} +.content-inner.podcasts-page .podcasts-list .podcasts-search { + padding: 10px; + position: sticky; + top: 0; + left: 0; + width: 100%; + border-bottom: 1px solid var(--color2); + z-index: 2; + background: #303030; +} +.content-inner.podcasts-page .episodes-list { + height: 100%; + width: 100%; + background: rgba(200, 200, 200, 0.06); + overflow-y: overlay; + overflow-x: hidden; +} +.content-inner.podcasts-page .episodes-list .episodes-inline-info { + padding: 14px 14px 0px 14px; +} +.content-inner.podcasts-page .episodes-list .episodes-inline-info .podcast-show-info { + display: flex; + justify-content: center; + flex-direction: column; +} +.content-inner.podcasts-page .episodes-list .episodes-inline-info .podcast-show-description { + margin: 32px 6px; + font-size: 0.8rem; + white-space: pre-wrap; + display: block; +} +.content-inner.podcasts-page .episodes-list .episodes-inline-info .podcast-artwork { + width: 120px; + margin: 0px auto; + height: 120px; +} +.content-inner.podcasts-page .episodes-list .podcast-no-search-results { + text-align: center; + margin-top: 40px; +} +.content-inner.podcasts-page .podcasts-details { + width: 300px; + flex: none; + background: rgba(255, 255, 255, 0.05); + overflow-y: overlay; + overflow-x: hidden; + top: 2%; + z-index: 2; + border-left: 1px solid var(--color2); + padding-bottom: 1em; +} +.content-inner.podcasts-page .podcasts-details .meta-btn { + font-size: 0.75em; +} +.content-inner.podcasts-page .podcasts-details .podcasts-details-header { + display: flex; + justify-content: end; + align-items: center; + position: sticky; + top: 0; + z-index: 2; +} +.content-inner.podcasts-page .podcasts-details .close-btn { + width: 50px; + height: 42px; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; +} +.content-inner.podcasts-page .podcasts-details .close-btn:hover { + background-color: #c42b1c; +} +.content-inner.podcasts-page .podcasts-details .podcast-genre { + text-align: center; + margin: 6px; + font-size: 0.8em; + font-weight: 500; + opacity: 0.8; +} +.content-inner.podcasts-page .podcasts-details .podcast-metainfo { + text-align: center; + font-size: 0.7em; + opacity: 0.8; +} +.content-inner.podcasts-page .podcasts-details .podcast-header { + text-align: center; + padding: 0 1rem; +} +.content-inner.podcasts-page .podcasts-details .podcast-play-btn { + width: 50%; + display: block; + margin: 0 auto; +} +.content-inner.podcasts-page .podcasts-details .podcast-description { + margin: 12px; + font-size: 0.75em; + white-space: pre-wrap; + display: block; + line-break: anywhere; +} +.content-inner.library-artists-page { + height: calc(100% - 60px - var(--navigationBarHeight)); + padding: 0px; +} +.content-inner.library-artists-page .inner-container { + display: flex; + height: calc(100% - var(--navigationBarHeight)); + padding: 0px; + height: 100%; +} +.content-inner.library-artists-page .inner-container .list-flat { + border-radius: 0px; +} +.content-inner.library-artists-page .inner-container .podcast-artwork { + width: 200px; + margin: 16px auto; + height: 200px; +} +.content-inner.library-artists-page .inner-container .podcasts-list { + height: 100%; + width: 280px; + background: rgba(200, 200, 200, 0.1); + overflow-y: overlay; + border-right: 1px solid var(--color2); + flex: none; + overflow-x: hidden; +} +.content-inner.library-artists-page .inner-container .podcasts-list .podcast-list-header { + border-bottom: 1px solid var(--color2); + font-size: 0.7em; + padding: 6px; + background: #ffffff17; + text-transform: uppercase; + font-weight: 600; + opacity: 0.5; +} +.content-inner.library-artists-page .inner-container .podcasts-list .podcasts-search { + padding: 10px; + position: sticky; + top: 0; + left: 0; + width: 100%; + border-bottom: 1px solid var(--color2); + z-index: 2; + background: #303030; +} +.content-inner.library-artists-page .inner-container .episodes-list { + height: calc(100% + 60px); + width: 100%; + background: rgba(200, 200, 200, 0.06); + overflow-y: overlay; + overflow-x: hidden; +} +.content-inner.library-artists-page .inner-container .episodes-list .episodes-inline-info { + padding: 14px 14px 0px 14px; +} +.content-inner.library-artists-page .inner-container .episodes-list .episodes-inline-info .podcast-show-info { + display: flex; + justify-content: center; + flex-direction: column; +} +.content-inner.library-artists-page .inner-container .episodes-list .episodes-inline-info .podcast-show-description { + margin: 32px 6px; + font-size: 0.8rem; + white-space: pre-wrap; + display: block; +} +.content-inner.library-artists-page .inner-container .episodes-list .episodes-inline-info .podcast-artwork { + width: 120px; + margin: 0px auto; + height: 120px; +} +.content-inner.library-artists-page .inner-container .episodes-list .podcast-no-search-results { + text-align: center; + margin-top: 40px; +} +.content-inner.library-artists-page .inner-container .podcasts-details { + width: 300px; + flex: none; + background: rgba(255, 255, 255, 0.05); + overflow-y: overlay; + overflow-x: hidden; + top: 2%; + z-index: 2; + border-left: 1px solid var(--color2); + padding-bottom: 1em; +} +.content-inner.library-artists-page .inner-container .podcasts-details .meta-btn { + font-size: 0.75em; +} +.content-inner.library-artists-page .inner-container .podcasts-details .podcasts-details-header { + display: flex; + justify-content: end; + align-items: center; + position: sticky; + top: 0; + z-index: 2; +} +.content-inner.library-artists-page .inner-container .podcasts-details .close-btn { + width: 50px; + height: 42px; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 0; + right: 0; +} +.content-inner.library-artists-page .inner-container .podcasts-details .close-btn:hover { + background-color: #c42b1c; +} +.content-inner.library-artists-page .inner-container .podcasts-details .podcast-genre { + text-align: center; + margin: 6px; + font-size: 0.8em; + font-weight: 500; + opacity: 0.8; +} +.content-inner.library-artists-page .inner-container .podcasts-details .podcast-metainfo { + text-align: center; + font-size: 0.7em; + opacity: 0.8; +} +.content-inner.library-artists-page .inner-container .podcasts-details .podcast-header { + text-align: center; +} +.content-inner.library-artists-page .inner-container .podcasts-details .podcast-play-btn { + width: 50%; + display: block; + margin: 0 auto; +} +.content-inner.library-artists-page .inner-container .podcasts-details .podcast-description { + margin: 12px; + font-size: 0.75em; + white-space: pre-wrap; + display: block; + line-break: anywhere; +} +@media only screen and (max-width: 1230px) { + .content-inner.library-artists-page .content-inner.podcasts-page .podcasts-details { + height: 96%; + width: 300px; + flex: none; + background: rgba(20, 20, 20, 0.97); + overflow-y: overlay; + overflow-x: hidden; + position: absolute; + right: 2%; + top: 2%; + border-radius: 10px; + box-shadow: var(--ciderShadow-Generic); + z-index: 2; + } +} +@media only screen and (max-width: 1230px) { + .content-inner.podcasts-page .podcasts-details { + height: 96%; + width: 300px; + flex: none; + background: rgba(20, 20, 20, 0.97); + overflow-y: overlay; + overflow-x: hidden; + position: absolute; + right: 2%; + top: 2%; + border-radius: 10px; + box-shadow: var(--ciderShadow-Generic); + z-index: 2; + } +} +/* Album / Playlist Page */ +.playlist-page { + --bgColor: transparent; + padding: 0px; + top: 0; + padding-top: var(--navigationBarHeight); + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; +} +.playlist-page .cd-mediaitem-list-item:hover .heart-icon { + display: flex; +} +.playlist-page .cd-mediaitem-list-item .heart-icon { + left: -25px; +} +.playlist-page .editTracksBtn { + position: absolute; + top: 20px; + right: 20px; + z-index: 1; +} +.playlist-page .editTracksBtn > span { + display: flex; + gap: 8px; +} +.playlist-page .mediaContainer { + transition: width 0.5s ease-in-out, height 0.5s ease-in-out; + width: 260px; + height: 260px; +} +.playlist-page .playlist-body { + padding: 32px; + overflow-y: overlay; + height: 100%; + padding: 0px; + background-color: var(--color3); +} +.playlist-page .playlist-body.scrollbody .tabs { + display: flex; + flex-flow: column; + height: 100%; +} +.playlist-page .playlist-body.scrollbody .tabs .nav-link { + text-transform: capitalize; +} +.playlist-page .playlist-body.scrollbody .tabs .tab-content { + height: 100%; + overflow: hidden; + margin: 0px; +} +.playlist-page .playlist-body.scrollbody .tabs .tab-content .tab-pane { + height: 100%; + overflow-y: overlay; + overflow-x: hidden; + padding: var(--contentInnerPadding); + padding-inline: 40px; + -webkit-mask-image: linear-gradient(180deg, transparent, white 20px); +} +.playlist-page .playlist-body.scrollbody .tabs .tab-content .tab-pane .well { + margin: 0px; +} +.playlist-page .floating-header { + position: sticky; + top: 0; + left: 0; + border-bottom: 1px solid rgba(200, 200, 200, 0.05); + z-index: 6; + padding: 0px 1em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); + transition: opacity 0.1s var(--appleEase); + display: none; +} +.playlist-page .playlist-display { + padding: var(--contentInnerPadding); + min-height: 300px; + position: relative; + box-shadow: 0px 4px 6px 3px rgba(0, 0, 0, 0.1); + transition: min-height 0.5s ease-in-out; +} +.playlist-page .playlist-display .artworkContainer { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: 0; + margin-top: calc(var(--navigationBarHeight) * -1); + margin-bottom: -10px; + padding: 0; + -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, #c8c8c8, transparent 98%); + opacity: 0.7; + animation: playlistArtworkFadeIn 1s var(--appleEase); +} +.playlist-page .playlist-display .artworkContainer .artworkMaterial img { + filter: brightness(100%) blur(80px) saturate(100%) contrast(1); + object-position: center; + object-fit: cover; + width: 100%; + height: 100%; + transform: unset; +} +.playlist-page .playlist-display .playlistInfo { + z-index: 1; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +.playlist-page .playlist-display .playlistInfo .playlist-hero { + width: 100%; + transform: translateX(25%); + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.playlist-page .playlist-display .playlistInfo .playlist-hero .mediaitem-artwork { + -webkit-mask-image: -webkit-radial-gradient(center, circle cover, #000000 50%, rgba(0, 0, 0, 0) 75%); + border-radius: 0px; +} +.playlist-page .playlist-display .playlistInfo .playlist-hero .hero-tint { + position: absolute; + top: 0; + opacity: 0.6; + width: 100%; + height: 100%; +} +.playlist-page .playlist-display .playlistInfo > .row { + width: calc(100% - 32px); +} +.playlist-page .playlist-display .playlistInfo .playlist-info { + flex-shrink: unset; + display: flex; + flex-flow: column; + justify-content: flex-end; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-name { + font-weight: 700; + font-size: 1.6rem; + margin-right: 6px; + margin-bottom: 6px; + flex-shrink: unset; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .search-input::placeholder { + color: var(--heroplaceholdercolor); +} +.playlist-page .playlist-display .playlistInfo .playlist-info .nameEdit { + font-weight: 700; + font-size: 1.6rem; + flex-shrink: unset; + background: transparent; + border: 0px; + color: inherit; + font-family: inherit; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .descriptionEdit { + font-size: 14px; + flex-shrink: unset; + background: transparent; + border: 0px; + color: inherit; + font-family: inherit; + width: 60vw; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .descriptionEdit { + font-size: 14px; + flex-shrink: unset; + background: transparent; + border: 0px; + color: inherit; + font-family: inherit; + width: 60vw; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-artist { + font-size: 20px; + margin-bottom: 6px; + margin-right: 6px; + flex-shrink: unset; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc { + transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out; + box-sizing: border-box; + font-size: 14px; + flex-shrink: unset; + margin-right: 5px; + max-height: 100px; + position: relative; + height: 4vh; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc .content { + height: 4vh; + -webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(#000000), to(rgba(0, 0, 0, 0))); +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc .more-btn { + appearance: none; + position: absolute; + right: 0; + bottom: 0; + padding: 0 5px; + font-size: 14px; + color: var(--keyColor); + background-color: transparent; + border: 0px; + cursor: pointer; + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + justify-content: flex-end; + align-items: flex-end; + font-weight: 600; + font-family: inherit; + text-transform: uppercase; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc-expanded { + box-sizing: border-box; + font-size: 14px; + position: relative; +} +.playlist-page .playlist-display .playlistInfo .playlist-info .playlist-desc-expanded .more-btn { + appearance: none; + position: absolute; + right: 0; + bottom: 0; + padding: 0 5px; + font-size: 14px; + color: var(--keyColor); + background-color: transparent; + border: 0px; + cursor: pointer; + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + justify-content: flex-end; + align-items: flex-end; + font-weight: 600; + font-family: inherit; + text-transform: uppercase; +} +.playlist-page .friends-info { + display: flex; + flex-flow: column; +} +.playlist-page .friends-info .badge-container { + display: flex; + flex-flow: wrap; +} +.playlist-page .friends-info .badge-container .socialBadge { + width: 40px; + height: 40px; + border-radius: 100%; + overflow: hidden; + box-shadow: var(--mediaItemShadow-ShadowSubtle); + transition: transform 0.2s var(--appleEase); + margin: 6px; +} +.playlist-page .friends-info .badge-container .socialBadge:hover { + transform: scale(1.2); +} +.playlist-page .friends-info .friends-name { + text-align: center; + font-size: 0.9em; + margin: 8px; +} +.playlist-page .playlist-time { + font-size: 0.9em; + margin: 6px; + opacity: 0.7; + transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out; + height: 0.9em; +} +.playlist-page.inline-playlist { + overflow: hidden; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 10; + position: sticky; + margin-top: calc(var(--navigationBarHeight) * -1); +} +.playlist-page.inline-playlist .floating-header { + opacity: 1; + top: 0px; + z-index: 6; + padding: 1em; + backdrop-filter: unset; + background: black; +} +.playlist-page.inline-playlist .floating-header h3 { + display: none; +} +.playlist-page.inline-playlist .playlist-inner { + background: black; + width: 80%; + height: 100%; + overflow: overlay; + box-shadow: var(--ciderShadow-Generic); + border-radius: var(--mediaItemRadius) var(--mediaItemRadius) 0px 0px; +} +.playlist-page.inline-playlist .playlist-inner .close-btn { + position: sticky; + top: 16px; + left: 16px; + margin-left: 16px; + z-index: 7; +} +.playlist-page .pilldim .nav-pills { + width: max-content; + margin: 0 auto; + margin-top: 16px; +} +.playlist-page.plmin .playlist-display { + transition: min-height 0.5s ease-in-out; + min-height: 200px; +} +.playlist-page.plmin .playlist-display .mediaContainer { + transition: width 0.5s ease-in-out, height 0.5s ease-in-out; + width: 128px !important; + height: 128px !important; +} +.playlist-page.plmin .playlist-display .playlist-time { + transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out; + height: 0px; + opacity: 0; +} +.playlist-page.plmin .playlist-display .playlist-desc { + transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out; + height: 0px !important; + opacity: 0; +} +@keyframes playlistArtworkFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 0.7; + } +} +.collection-page { + padding-bottom: 128px; +} +.collection-page .top-fab { + height: 52px; + width: 52px; + position: fixed; + bottom: 32px; + right: 32px; + border-radius: 100%; + background: #3c3c3c; + border: 0px; + appearance: none; + box-shadow: var(--ciderShadow-Generic); +} +.collection-page .top-fab > svg { + height: 50%; + color: #eee; + pointer-events: none; +} +.collection-page .top-fab:hover { + background: #646464; +} +.collection-page .top-fab:active { + background: var(--keyColor); +} +.collection-page .header-text { + margin-bottom: 32px; +} +/* Artist Page */ +.artist-page { + padding: 0px; + top: 0; +} +.artist-page .floating-header { + position: sticky; + top: 0; + left: 0; + border-bottom: 1px solid rgba(200, 200, 200, 0.05); + z-index: 6; + padding: 0px 1em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); + transition: opacity 0.1s var(--appleEase); +} +.artist-page.animated .artist-header .more-btn-round { + position: absolute; + bottom: 22px !important; + right: 28px; +} +.artist-page.animated .artist-header { + min-height: 500px; +} +.artist-page .artist-header { + color: white; + display: flex; + align-items: center; + justify-content: space-between; + min-height: 400px; + position: relative; + pointer-events: none; +} +.artist-page .artist-header .header-content { + z-index: 1; +} +.artist-page .artist-header .artist-hero { + height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.artist-page .artist-header .artist-hero .mediaitem-artwork { + border-radius: 0px; +} +.artist-page .artist-header .artworkContainer { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: 0; + padding: 0; + -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, #c8c8c8, transparent 98%); + opacity: 0.7; + animation: playlistArtworkFadeIn 1s var(--appleEase); +} +.artist-page .artist-header .artworkContainer .artworkMaterial img { + filter: brightness(100%) blur(80px) saturate(100%) contrast(1); + object-position: center; + object-fit: cover; + width: 100%; + height: 100%; + transform: unset; +} +.artist-page .artist-header .more-btn-round { + position: absolute; + bottom: 82px; + right: 28px; +} +.artist-page .artist-header .animated { + width: 100%; + height: 100%; + align-self: center; + position: absolute; + overflow: hidden; + box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1000000px inset; + z-index: 1; +} +.artist-page .artist-header .animated video { + overflow: hidden; + height: 100%; + width: 100%; + min-height: 56.25vw; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.artist-page .artist-header .row .col.flex-center { + z-index: 4; +} +.artist-page .artist-image { + width: 200px; + height: 200px; + margin: 32px; + position: relative; +} +.artist-page .artist-image .overlay-play { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + background: rgba(0, 0, 0, 0.5); + transition: opacity 0.1s var(--appleEase); + border-radius: 100%; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + appearance: none; + border: 0px; + padding: 0px; +} +.artist-page .artist-image .overlay-play:hover { + opacity: 1; +} +.artist-page .artist-image .overlay-play:active { + background: var(--selected-click); +} +.artist-page .artist-image .overlay-play > svg { + width: 70%; +} +.artist-page .artist-play { + width: 32px; + height: 32px; + background: rgba(100, 100, 100, 0.5); + box-shadow: var(--ciderShadow-Generic); + border-radius: 100%; + box-shadow: var(--mediaItemShadow); + display: none; + cursor: pointer; + appearance: none; + border: 0px; + padding: 0px; +} +.artist-page .artist-play:hover { + filter: brightness(125%); +} +.artist-page .artist-play:active { + filter: brightness(75%); + transform: scale(0.98); + transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); +} +.artist-page .artist-title .artist-play { + transform: translateY(3px); + margin: 14px; +} +.artist-page .artist-title.artist-animation-on { + width: 100%; + flex: unset; + margin-left: 0.5em; + color: whitesmoke; + position: absolute; + bottom: 0; +} +.artist-page .artist-title.artist-animation-on .artist-play { + display: block; +} +.artist-page .artist-body { + padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); + margin: -64px 20px; +} +.artist-page .artist-body .arow { + display: flex; + overflow: hidden; + padding: 16px 32px; +} +.artist-page .artist-body .arow > .latestRelease { + width: 250px; +} +.artist-page .artist-body .arow > .topSongs { + width: calc(100% - 250px); +} +.artist-page .artist-body .arow.arowb > .topSongs { + width: 100%; +} +.artist-page.animated > .artist-body { + padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); + margin-top: -57px; +} +.artist-page .showmoreless { + font-family: inherit; + font-size: 16px; + font-weight: 500; + background: transparent; + border: 0px; + border-radius: 6px; + appearance: none; + color: var(--keyColor); + padding: 8px 12px; + cursor: pointer; + margin-top: 12px; + float: right; +} +.artist-page .showmoreless:hover { + background: rgba(200, 200, 200, 0.1); +} +/* Artist Page End */ +.installed-themes-page .themeContextMenu { + background: transparent; + color: var(--keyColor); + border: 0px; +} +.installed-themes-page .list-group-item.addon { + background: rgba(86, 86, 86, 0.2); +} +.installed-themes-page .list-group-item.applied { + background: var(--keyColor-disabled); + pointer-events: none; +} +.installed-themes-page .repo-header { + font-size: 16px; + position: sticky; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 50px; + z-index: 1; + background: rgba(36, 36, 36, 0.5); + display: flex; + justify-content: center; + align-items: center; + backdrop-filter: var(--glassFilter); + overflow: hidden; + border-bottom: 1px solid rgba(0, 0, 0, 0.18); + border-top: 1px solid rgba(135, 135, 135, 0.18); +} +.installed-themes-page .style-editor-container { + height: 100%; + flex: 1; + background: var(--color2); + padding: 0px; + overflow-y: overlay; +} +.installed-themes-page .style-editor-container .list-group-item { + border-radius: 0px; +} +.installed-themes-page .stylestack-editor { + width: 100%; +} +.installed-themes-page .stylestack-editor .btn, +.installed-themes-page .stylestack-editor .btn-group { + width: 100%; +} +.installed-themes-page .stylestack-editor .themeLabel { + display: flex; + align-items: center; +} +.installed-themes-page .stylestack-editor .handle { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.installed-themes-page .stylestack-editor .list-group-item:hover { + cursor: grab; +} +.installed-themes-page .stylestack-editor .list-group-item:active { + cursor: grabbing; +} +.installed-themes-page .stylestack-editor .removeItem { + border: 0px; + background: transparent; + height: 32px; + font-weight: bold; + color: var(--textColor); + cursor: pointer; +} +.installed-themes-page .stylestack-editor .stylesDropdown > .dropdown-menu { + height: 300px; + overflow-y: overlay; +} +.settings-page { + padding: 0px; +} +.settings-page .nav { + width: 90%; + margin: 16px auto 0px; +} +.audiolabs-page { + padding: 0px; +} +.audiolabs-page .md-option-header { + padding: 1.25em 1.25em; + border-bottom: unset; + border-top: unset; + font-weight: 600; + font-size: 1em; + background: rgba(255, 255, 255, 0.03); +} +.audiolabs-page .carousel-item > img { + object-fit: cover; + width: 100%; +} +.audiolabs-page .spprofile-line { + height: 300px; + width: 100%; + max-width: 1024px; + padding: 16px; + margin: 0 auto; +} +.audiolabs-page .spprofile-line .spprofile-viewport { + height: 100%; + position: relative; + border-radius: var(--mediaItemRadius); + overflow: hidden; + box-shadow: var(--mediaItemShadow-Shadow); + background: black; +} +.audiolabs-page .spprofile-line .spprofile-viewport .spprev, +.audiolabs-page .spprofile-line .spprofile-viewport .nextprev { + position: absolute; + height: 100%; + width: 64px; + top: 0; + background: rgba(0, 0, 0, 0.2); + z-index: 1; + border: 0px; + transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase); +} +.audiolabs-page .spprofile-line .spprofile-viewport .spprev:hover, +.audiolabs-page .spprofile-line .spprofile-viewport .nextprev:hover { + background: var(--selected); + transform: scale(1.1); +} +.audiolabs-page .spprofile-line .spprofile-viewport .spprev:active, +.audiolabs-page .spprofile-line .spprofile-viewport .nextprev:active { + transition: background 0s var(--appleEase); + background: var(--selected-click); +} +.audiolabs-page .spprofile-line .spprofile-viewport .spprev:before, +.audiolabs-page .spprofile-line .spprofile-viewport .nextprev:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #eee; + opacity: 1; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 1em; +} +.audiolabs-page .spprofile-line .spprofile-viewport .spprev { + left: 0; +} +.audiolabs-page .spprofile-line .spprofile-viewport .spprev:before { + -webkit-mask-image: url("./views/svg/chevron-left.svg"); +} +.audiolabs-page .spprofile-line .spprofile-viewport .nextprev { + right: 0; +} +.audiolabs-page .spprofile-line .spprofile-viewport .nextprev:before { + -webkit-mask-image: url("./views/svg/chevron-right.svg"); +} +.audiolabs-page .spprofile-line .spprofile-viewport .spslide { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; + background: black; +} +.audiolabs-page .spprofile-line .spprofile-viewport .spslide > img { + WIDTH: 100%; + height: 100%; + object-fit: cover; +} +.audiolabs-page .spprofile-line .spprofile-viewport .spslide .sptitle { + position: absolute; + bottom: 0px; + left: 0; + width: 100%; + text-align: center; + font-size: 18px; + text-shadow: 0px 2px 4px #00000033; +} +.audiolabs-page .spprofile-line .spprofile-viewport .spfade-enter-active, +.audiolabs-page .spprofile-line .spprofile-viewport .spfade-leave-active { + --transitionTime: 0.2s; + transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase); + will-change: opacity, transform; +} +.audiolabs-page .spprofile-line .spprofile-viewport .spfade-enter { + opacity: 0; + transform: scale(1.2) translate3d(0, 0, 0); + will-change: opacity, transform; +} +.audiolabs-page .spprofile-line .spprofile-viewport .spfade-leave-to { + opacity: 1; + transform: scale(1) translate3d(0, 0, 0); + will-change: opacity, transform; +} +.audiolabs-page .settings-option-body { + margin: 16px; +} +@keyframes gradient-animation { + 0% { + background-position: 0% 0%; + } + 50% { + background-position: 100% 0%; + } + 100% { + background-position: 0% 0%; + } +} +.home-page .md-btn-replay { + background-image: linear-gradient(-45deg, #2e2173, #925042); + animation: gradient-animation 5s ease-in-out infinite; + background-size: 400% 400%; + border: 0px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2); + text-transform: uppercase; + font-weight: bold; +} +.home-page .md-btn-replay--hero { + font-size: 1em; + padding: 16px; + background-image: linear-gradient(-45deg, #2e2173, #925042); + animation: gradient-animation 5s ease-in-out infinite; + background-size: 400% 400%; + border: 0px; + box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2); + margin-top: 1em; + font-size: 0.9em; + text-transform: uppercase; + font-weight: bold; +} +.home-page .artist-feed-card { + position: absolute; + bottom: 0; + left: 10%; + z-index: 1; + background: black; + width: 80%; + height: 96%; + overflow: scroll; + border-radius: 10px; +} +.home-page .col.madeforyou-col { + width: 420px; + min-width: 0px; + max-width: 420px; +} +.home-page .well.artistfeed-well { + margin-top: 0px; + height: 392px; + align-content: flex-start; +} +.home-page .hint-text { + font-size: 0.9rem; + color: rgba(200, 200, 200, 0.7); +} +.home-page .user-icon { + border-radius: 100%; + width: 128px; + height: 128px; + overflow: hidden; + box-shadow: var(--mediaItemShadow-Shadow); + margin: 16px; +} +.home-page .well.profile-well { + flex-direction: column; + justify-content: center; + align-items: center; +} +.home-page .well.profile-well .name { + margin: 4px; + font-weight: 500; +} +.home-page .well.profile-well .handle { + margin: 4px; + opacity: 0.7; + font-weight: 500; +} +.replay-page { + --replayTextShadow: 0px 3px 2px #6f3f52; +} +.replay-page .replay-period { + height: 200px; + width: 200px; + margin: 6px; + border-radius: var(--mediaItemRadius); + overflow: hidden; + cursor: pointer; + transition: transform 0.2s var(--appleEase); + transition-delay: 0.1s; + align-self: center; +} +.replay-page .replay-period:hover { + transform: translateY(-6px); + transition-delay: 0s; +} +.replay-page .replay-period .artwork-container { + height: 200px; + width: 200px; +} +.replay-page .replay-playlist-container .cd-mediaitem-square { + height: 230px; + width: 230px; +} +.replay-page .replay-playlist-container .cd-mediaitem-square .info-rect { + display: none; +} +.replay-page .replay-video { + max-height: 300px; + max-width: 800px; + margin: 0 auto; +} +.replay-page .replay-video .mediaitem-artwork { + max-height: 300px; + max-width: 800px; +} +.replay-page .replay-video .mediaitem-artwork .animatedartwork-view-box .animated video { + object-fit: cover; +} +.replay-page .top-genres-container .genre-name { + font-size: 0.9em; + margin: 6px 0px; + font-weight: 500; +} +.replay-page .top-genres-container .genre-count { + width: 100%; + height: 32px; + background: #ffffff14; + border-radius: 10px; + overflow: hidden; +} +.replay-page .top-genres-container .genre-count .genre-count-bar { + height: 100%; + width: 0%; + background: var(--keyColor); + display: flex; + justify-content: center; + align-items: center; + min-width: 32px; + font-size: 0.9em; + font-weight: 500; +} +.replay-page .cd-mediaitem-square { + transition: transform 0.2s var(--appleEase); + transition-delay: 0.1s; +} +.replay-page .cd-mediaitem-square .mediaitem-artwork { + animation: replayFadeIn 0.5s var(--appleEase); +} +.replay-page .cd-mediaitem-square:hover { + transform: scale(1.1); + transition-delay: 0s; +} +@keyframes replayFadeIn { + 0% { + transform: translateY(10px) scale(0.9); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +.replay-page .replay-viewport { + background-image: linear-gradient(-45deg, #2e2173, #925042); + animation: gradient-animation 5s ease-in-out infinite; + background-size: 400% 400%; + padding: 16px 40px; + border-radius: 10px; + box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow); + color: rgba(238, 238, 238, 0.86); +} +.replay-page .replay-viewport .replay-header { + text-align: center; + font-size: 3em; + text-shadow: var(--replayTextShadow); +} +.replay-page .replay-card { + background: transparent; + border: 0px; +} +.content-inner.oobe { + position: absolute; + overflow: hidden; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: grid; + place-items: center; + width: 100%; + background: #1e1e1e; +} +.content-inner.oobe .oobe-view { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32px; + max-width: 1280px; + max-height: 720px; + align-self: center; + justify-self: center; + height: 100%; + width: 100%; +} +.content-inner.oobe .oobe-view .oobe-header { + font-size: 3em; + text-shadow: var(--replayTextShadow); + font-weight: 600; +} +.content-inner.oobe .oobe-view .oobe-body { + flex: 1; + width: 100%; + background: #ffffff0d; + border-radius: 20px; + padding: 3em; + overflow-y: scroll; + overflow-x: hidden; +} +@media screen and (max-width: 1161px) { + .content-inner.oobe .oobe-view .oobe-body { + font-size: 13px; + } +} +.content-inner.oobe .oobe-view .oobe-body.text { + white-space: pre-wrap; +} +.content-inner.oobe .oobe-view .oobe-body .blurb { + white-space: pre-wrap; + margin: 16px; + line-height: 1.5em; +} +.content-inner.oobe .oobe-view .oobe-body.visual { + padding: 1em; +} +.content-inner.oobe .oobe-view .oobe-body.visual .stylePicker { + border-radius: 10px; + overflow: hidden; + cursor: pointer; + transition: 0.25s all; + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); + width: 450px; + margin: 0 auto; +} +.content-inner.oobe .oobe-view .oobe-body.visual .stylePicker .visualPreview { + pointer-events: none; + transition: 0.25s all; + width: 100%; +} +.content-inner.oobe .oobe-view .oobe-body.visual .stylePicker .card-body { + padding: 0; + display: flex; + justify-content: center; + align-items: center; +} +.content-inner.oobe .oobe-view .oobe-body.visual .stylePicker .card-footer { + font-size: 1.25em; + font-weight: 500; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + border: 0px; + text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); + font-weight: bold; +} +.content-inner.oobe .oobe-view .oobe-body.visual .stylePicker.style-active { + outline: 4px solid var(--keyColor); +} +.content-inner.oobe .oobe-view .oobe-body.visual .stylePicker:hover { + transform: scale(1.1) translateZ(-1px) translateY(10px); + z-index: 1; + box-shadow: 0px 12px 16px rgba(0, 0, 0, 0.25); +} +@media screen and (max-height: 688px) { + .content-inner.oobe .oobe-view .oobe-body.visual .stylePicker { + width: 270px; + } +} +.content-inner.oobe .oobe-view .oobe-footer { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 16px; +} +.content-inner.oobe .oobe-view .oobe-footer .md-btn { + font-size: 18px; + min-width: 128px; + text-align: center; +} +.content-inner.oobe .oobe-titlebar { + position: absolute; + top: 0; + left: 0; + height: 46px; + width: 100%; + align-items: center; + justify-content: right; + display: flex; + -webkit-app-region: drag; +} +.content-inner.oobe .oobe-titlebar .button-group { + -webkit-app-region: no-drag; + display: flex; + flex-direction: row; + width: 100px; + height: 100%; + justify-content: center; + align-items: center; + gap: 16px; +} +.content-inner.oobe .oobe-titlebar .button-group > button { + height: 32px; + width: 32px; + font-size: 16px; + border-radius: 0px; + border: 0; + appearance: none; + position: relative; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100%; +} +.content-inner.oobe .oobe-titlebar .button-group > button.close { + background-color: #fc3c44aa; +} +.content-inner.oobe .oobe-titlebar .button-group > button.close:hover { + background-color: #fc3c44; +} +.content-inner.oobe .oobe-titlebar .button-group > button.min { + background-color: rgba(200, 200, 200, 0.05); +} +.content-inner.oobe .oobe-titlebar .button-group > button.min:hover { + background-color: rgba(200, 200, 200, 0.1); +} +.content-inner.oobe .oobe-titlebar .button-group > button.close::before { + font-family: "codicon"; + content: ""; + color: white; +} +.content-inner.oobe .oobe-titlebar .button-group > button.min::before { + font-family: "codicon"; + content: ""; + color: white; +} +.content-inner.cider-multiroom { + padding: 0px; +} +.content-inner.cider-multiroom .detail { + padding: 32px; +} +.content-inner.cider-multiroom .header-desc { + font-size: 1em; + font-weight: 400; +} +.content-inner.cider-multiroom .artworkContainer { + height: 300px; + width: 100%; +} +.content-inner.cider-multiroom .artworkContainer img { + height: 100%; + width: 100%; + overflow: hidden; + object-fit: cover; + filter: unset; +} +.content-inner.cider-multiroom .artworkContainer img:last-child { + transform: unset; +} +.settings-panel { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0); + display: flex; + justify-content: center; + align-items: center; + z-index: 16; +} +.settings-panel .settings-window { + background: var(--baseColorMix); + max-width: 80%; + max-height: 90%; + width: 100%; + height: 100%; + border-radius: 10px; + box-shadow: var(--ciderShadow-Generic); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + position: relative; + flex: 1; + backdrop-filter: var(--glassFilterHeavy); + transition: width 0.25s ease-in-out, height 0.25s ease-in-out, max-width 0.25s ease-in-out, max-height 0.25s ease-in-out; +} +.settings-panel .settings-window .header-text { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + opacity: 0.9; +} +.settings-panel .settings-window .nav-pills { + gap: 6px; +} +.settings-panel .settings-window .nav-pills .nav-link { + display: flex; + gap: 10px; + align-items: center; +} +.settings-panel .settings-window .md-option-header { + padding: 0px 26px; + border-bottom: unset; + border-top: unset; + font-weight: 600; + background: rgba(255, 255, 255, 0); + font-size: 2em; +} +.settings-panel .settings-window .settings-option-body-webview { + height: 100%; + width: 100%; +} +.settings-panel .settings-window .settings-option-body { + margin: 16px; +} +.settings-panel .settings-window.maxed { + width: 100%; + height: 100%; + max-height: 100%; + max-width: 100%; + border-radius: 0px; + box-shadow: unset; +} +.settings-panel .settings-window .close-btn { + width: 36px; + height: 36px; + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 10px; + right: 10px; + border-radius: 50px; + display: grid; + align-content: center; + z-index: 9; +} +.settings-panel .settings-window .close-btn:before { + content: ""; + font-family: "codicon"; + color: var(--textColor); + font-size: 20px; +} +.settings-panel .settings-window .close-btn:hover { + background-color: #c42b1c; +} +.settings-panel .settings-window .close-btn.minmax-btn { + right: 52px; +} +.settings-panel .settings-window .close-btn.minmax-btn:before { + content: ""; +} +.settings-panel .settings-window .close-btn.minmax-btn.min:before { + content: ""; +} +.settings-panel .settings-window .close-btn.minmax-btn:hover { + background-color: var(--selected); +} +.settings-panel .settings-window .tabs { + height: 100%; + width: 100%; + margin: 0; + padding: 0; +} +.settings-panel .settings-window .tabs > .col-auto { + width: 230px; +} +.settings-panel .settings-window .tabs .tab-content { + margin: 0 !important; +} +.settings-panel .settings-window .tab-content { + overflow-y: overlay; + height: 100%; + background-color: var(--panelColor2); + padding-top: 48px; + border-left: 1px solid var(--borderColor); +} +:root { + --appleEase: cubic-bezier(0.42, 0, 0.58, 1); + --borderColor: rgba(200, 200, 200, 0.16); + --mediaItemShadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16); + --mediaItemShadow-Shadow: 0 8px 40px rgba(0, 0, 0, 0.55); + --mediaItemShadow-ShadowSubtle: 0 4px 14px rgba(0, 0, 0, 0.1); + --ciderShadow-Generic: var(--mediaItemShadow), 0 8px 40px rgb(0 0 0 / 0.55); + --mediaItemRadius: 8px; + --mediaItemRadiusSmall: 6px; + --mediaItemRadiusMedium: 8px; + --mediaItemRadiusRound: 100%; + --panelRadius: 10px; + --contentInnerPadding: 16px; + --navbarHeight1: 48px; + --navbarHeight2: 0px; + --navbarHeight: calc(var(--navbarHeight1) + var(--navbarHeight2)); + --selected: rgba(130, 130, 130, 0.3); + --selected-click: rgba(80, 80, 80, 0.3); + --hover: rgba(200, 200, 200, 0.1); + --keyColorDefault: #fc3c44; + --keyColor: #fc3c44; + --keyColor-rgb: 250, 88, 106; + --keyColor-rollover: #ff8a9c; + --keyColor-rollover-rgb: 255, 138, 156; + --keyColor-pressed: #ff7183; + --keyColor-pressed-rgb: 255, 113, 131; + --keyColor-deepPressed: #ff8a9c; + --keyColor-deepPressed-rgb: 255, 138, 156; + --keyColor-disabled: rgba(250, 88, 106, 0.35); + --keyColor-primary: #ff2b52a6; + --navigationBarHeight: 0px; + --modalBackground: #262626; + --songProgressColor: var(--keyColor); + --songProgressBackground: #333; + --textColor: #eee; + --replayGradient: linear-gradient(45deg, hsl(248, 58%, 29%), hsl(13, 41%, 42%)); + --glassFilter: blur(16px) saturate(180%); + --glassFilterHeavy: blur(64px) saturate(280%); + --sidebarWidth: 260px; +} +*:focus-visible { + outline: 2px solid var(--keyColor); +} +html, +body { + margin: 0; + padding: 0; + overflow: hidden; + width: 100%; + height: 100%; + box-sizing: border-box; + background-size: cover; + background-position: center; + background: #0000; + font-family: "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + transition: opacity 0.1s var(--appleEase); +} +a:-webkit-any-link { + color: var(--keyColor); +} +hr { + appearance: none; + border: none; + height: 1px; + background-color: rgba(255, 255, 255, 0.2); +} +body[loading] .app-navigation { + pointer-events: none; +} +body.stopanimation * { + animation: unset !important; +} +body.stopanimation * .loadbar-sound { + display: none; +} +body.notransparency::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0.5; + display: none; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); +} +*, +*:before, +*:after { + box-sizing: inherit; +} +/* Modern style overlay scrollbars */ +::-webkit-scrollbar { + width: 16px; + height: 24px; +} +::-webkit-scrollbar-button { + display: none; +} +::-webkit-scrollbar-track-piece { + background: transparent; +} +::-webkit-scrollbar-thumb { + background: transparent; + border: 6px solid transparent; + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); + border-radius: 16px; + min-height: 64px; + transition: border 1s; +} +::-webkit-scrollbar-thumb:hover { + border: 5px solid transparent; + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.8); +} +[disabled] { + pointer-events: none; + opacity: 0.5; +} +#app { + --panelColor1: rgba(32, 32, 32, 0.5); + --panelColor2: rgba(39, 39, 39, 0.5); + --color1: var(--panelColor2); + --color2: var(--panelColor1); + --color3: rgba(0, 0, 0, 0.2); + --bgColor: transparent; + --bgWidth: 0px; + --bgHeight: 0px; + --chromeHeight1: 55px; + --chromeHeight2: 0px; + --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2)); + width: 100%; + height: 100%; + background: transparent; + color: var(--textColor); + user-select: none; + margin: 0 auto; + position: relative; + overflow: hidden; + background-size: 400% 400%; +} +#app.simplebg { + background: #0e0e0e; +} +.bgGradientMaterial-base { + position: relative; +} +.bgGradientMaterial-base::before { + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 250%; + background-image: var(--bgColor); + content: ""; + z-index: -1; + transform: rotateZ(0deg); + transform-origin: center; + animation: bgRotate 10s linear infinite; + filter: brightness(100%) saturate(200%) contrast(1.5); +} +@keyframes bgRotate { + 0% { + transform: rotateZ(0deg); + } + 100% { + transform: rotateZ(360deg); + } +} +[hidden] { + display: none !important; +} +input[type="text"], +input[type="number"] { + background: #1c1c1c; + border-radius: 3px; + border: 1px solid rgba(200, 200, 200, 0.25); + color: #eee; + padding: 6px; + font-size: 1em; + font-family: inherit; +} +.bg-artwork--placeholder { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #222; + z-index: -1; + background-size: cover; + background-position: center; + opacity: 0.7; +} +a.dropdown-item { + color: var(--textColor); +} +a.dropdown-item:hover { + background-color: var(--selected); + color: var(--textColor); +} +a.dropdown-item:active { + background-color: var(--selected-click); +} +.bg-artwork { + position: absolute; + width: 200%; + background: var(--artwork); + filter: brightness(200%) blur(180px) saturate(280%) contrast(2); + opacity: 1; + transition: opacity 0.25s var(--appleEase); + pointer-events: none; + transform: translateZ(0px); + animation: rotateBg 35s linear infinite; + backface-visibility: hidden; +} +@keyframes rotateBg { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +.bg-artwork-container { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + pointer-events: none; + transform: translateZ(0px); + z-index: -1; +} +.bg-artwork-container .bg-artwork.a { + top: 0; + left: 0; +} +.bg-artwork-container .bg-artwork.b { + bottom: 0; + right: 0; + animation-direction: reverse; + animation-delay: 10s; +} +.bg-artwork-container.noanimation .bg-artwork { + animation: none; +} +.artworkMaterial { + position: relative; + height: 100%; + width: 100%; + overflow: hidden; + pointer-events: none; +} +.artworkMaterial img { + position: absolute; + width: 200%; + opacity: 0.5; + filter: brightness(200%) blur(180px) saturate(280%) contrast(2); +} +.artworkMaterial img:first-child { + top: 0; + left: 0; +} +.artworkMaterial img:last-child { + bottom: 0; + right: 0; + transform: rotate(180deg); +} +[artwork-hidden] { + transition: opacity 0.25s var(--appleEase); + opacity: 0; +} +input[type="range"].web-slider { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.6); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; +} +input[type="range"].web-slider::-webkit-slider-thumb { + -webkit-appearance: none; + height: 20px; + width: 20px; + border-radius: 50%; + background: #ffffff; + cursor: ew-resize; + box-shadow: 0 0 2px 0 #555; +} +input[type=range].web-slider::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.nopadding { + padding: 0px; +} +#app-main { + display: flex; + width: 100%; + height: 100%; + flex-direction: column; + opacity: 1; + overflow: hidden; + background-color: rgba(20 20 20 / 0.7); +} +#app-sidebar { + height: 100%; + width: var(--sidebarWidth); + display: flex; + flex-direction: column; + flex: 0 0 auto; + position: relative; + background: linear-gradient(180deg, var(--baseColorMix) calc(var(--chromeHeight1) + 1px), var(--sidebarColorMix) calc(var(--chromeHeight1) + 1px)); + max-width: var(--sidebarWidth); + padding-top: var(--chromeHeight1); +} +#app-navbar { + height: 40px; + width: 100%; + background: rgba(30, 30, 30, 0.85); + position: sticky; + top: 0px; + left: 0; + z-index: 2; + backdrop-filter: blur(16px) saturate(180%); +} +#app-content { + --navigationBarHeight: var(--chromeHeight1); + background-color: var(--baseColorMix); + height: 100%; + width: 100%; + overflow-y: scroll; + overflow-y: overlay; + overflow-x: hidden; + border-radius: 0; + border-left: 1px solid var(--baseColorMix); + position: relative; +} +#app-content::-webkit-scrollbar-track-piece { + margin-top: var(--chromeHeight1); +} +.app-drawer { + width: 300px; + flex: 0 0 auto; + position: absolute; + right: 16px; + background: var(--color2); + border-radius: 12px; + z-index: 10; + backdrop-filter: blur(40px) saturate(180%); + box-shadow: var(--ciderShadow-Generic); + overflow: hidden; + height: calc(calc(100% - 6%) - var(--chromeHeight1)); + top: calc(var(--chromeHeight1) + 3%); +} +.app-drawer .bgArtworkMaterial { + display: none; + position: absolute; + width: 100%; + height: 100%; +} +.app-drawer .bgArtworkMaterial .bg-artwork-container .bg-artwork { + filter: brightness(80%) blur(180px) saturate(180%) contrast(1); +} +.search-input-container { + position: relative; +} +.search-input { + width: 100%; + padding: 6px; + border-radius: 6px; + border: 1px solid rgba(100, 100, 100, 0.35); + border-top: 1px solid rgba(100, 100, 100, 0.5); + border-bottom: 1px solid rgba(60, 60, 60, 0.62); + font-family: inherit; + font-size: 14px; + background: #1e1e1e99; + color: #c8c8c8; + font-weight: 500; + padding-left: 32px; + position: relative; +} +.search-input:focus { + outline: none; + border-bottom: 1px solid var(--keyColor); +} +.search-input--icon { + content: ''; + width: 100%; + height: 100%; + display: block; + position: absolute; + top: 0px; + left: 0px; + background-image: url('assets/search.svg'); + background-position: 10px; + background-repeat: no-repeat; + background-size: 12px; + pointer-events: none; + opacity: 0.55; +} +.app-sidebar-header { + font-size: 14px; + padding: 11px; + font-weight: 600; +} +.app-sidebar-header-text { + font-size: 11px; + padding: 6px 6px; + font-weight: 600; + opacity: 0.5; + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNiA5IDYgNiA2LTYiPjwvcGF0aD4KPC9zdmc+"); + background-size: 16px; + background-repeat: no-repeat; + background-position: 98%; + border-radius: 3px; +} +.app-sidebar-header-text.collapsed { + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtOSAxOCA2LTYtNi02Ij48L3BhdGg+Cjwvc3ZnPg=="); +} +.app-sidebar-header-text:hover { + background-color: var(--selected); +} +.app-sidebar-header-text:active { + background-color: var(--selected-click); +} +.app-sidebar-footer { + border-top: 1px solid rgba(200, 200, 200, 0.15); + padding: 11px; +} +.app-sidebar-footer .app-playback-controls { + margin: 0 auto; +} +.app-sidebar-footer .app-playback-controls .control-buttons { + display: flex; + justify-content: center; + align-content: center; +} +.app-sidebar-footer .app-playback-controls .volume { + display: flex; +} +.app-sidebar-footer.collapseTab { + display: flex; + padding: 6px; + border: 0; +} +.app-sidebar-footer.collapseTab > button { + appearance: none; + width: 100%; + position: relative; + padding-left: 40px; + text-align: left; + font-family: inherit; +} +.app-sidebar-footer.collapseTab > button:hover { + background-color: var(--selected); +} +.app-sidebar-footer.collapseTab > button:active { + background-color: var(--selected-click); +} +.app-sidebar-footer.collapseTab > button:after { + content: ''; + display: flex; + justify-content: center; + align-items: center; + width: 46px; + height: 100%; + position: absolute; + top: 0; + left: 0; + font-weight: bold; + font-size: 1em; + font-family: "codicon"; +} +.app-sidebar-button { + width: 100%; + padding: 0px; + font-family: inherit; + display: flex; + border-radius: 6px; + border: 1px solid rgba(200, 200, 200, 0.05); + background: rgba(100, 100, 100, 0.25); + color: #eee; + font-weight: 500; + align-items: center; +} +.app-sidebar-button.active { + background: rgba(200, 200, 200, 0.15); + animation: usermenuBtnClick 0.3s cubic-bezier(0.36, 0, 0.66, -0.56); +} +@keyframes usermenuBtnClick { + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(-6px); + } + 100% { + transform: translateY(0px); + } +} +.app-sidebar-button > .sidebar-user-icon { + width: 32px; + height: 32px; + border-radius: 100%; + background-image: var(--artwork); + margin: 10px; + flex: 0 0 auto; + box-shadow: var(--mediaItemShadow); + background-size: contain; +} +.app-sidebar-button > .sidebar-user-text { + width: 100%; + display: flex; + font-size: 14px; + flex-direction: column; + text-align: center; + margin-right: 35px; +} +.app-sidebar-button > .sidebar-user-text .fullname { + text-align: left; +} +.app-sidebar-button > .sidebar-user-text .handle-text { + font-size: 12px; + opacity: 0.7; + text-align: left; +} +.app-sidebar-notification { + text-align: center; + font-size: 12px; + min-height: 36px; + display: flex; + justify-content: center; + align-items: center; + border-top: 1px solid rgba(200, 200, 200, 0.15); + background: rgba(0, 0, 0, 0.15); + flex-direction: column; + padding: 10px 0px; +} +.app-sidebar-notification.libraryNotification { + flex-direction: row; + padding: 0px; +} +.app-sidebar-notification.libraryNotification .message { + flex-grow: 1; +} +.app-sidebar-notification.libraryNotification .spinner { + width: 46px; + height: 30px; + margin-left: 1em; +} +.app-sidebar-content { + padding: 8px; + overflow-y: scroll; + overflow-y: overlay; + height: 100%; +} +.search-hints-container { + top: 44px; + position: absolute; + left: 0px; + width: var(--sidebarWidth); + max-width: var(--sidebarWidth); + padding: 10px; + z-index: 1; +} +.search-hints-container .search-hints { + background: rgba(30, 30, 30, 0.45); + padding: 6px; + border-radius: var(--panelRadius); + width: 100%; + box-shadow: var(--ciderShadow-Generic); + backdrop-filter: var(--glassFilter); + animation: cmenuBodyIn 0.5s var(--appleEase); +} +@keyframes cmenuBodyIn { + 0% { + background: #1e1e1e; + } + 100% { + background: rgba(30, 30, 30, 0.45); + } +} +.search-hints-container .search-hints .search-hint { + background: transparent; + display: block; + width: 100%; + text-align: left; + color: #eee; + font-family: inherit; + font-size: 15px; + padding: 8px 12px; + border: 0px; + appearance: none; + border-radius: 6px; + margin: 2px 0px; +} +.search-hints-container .search-hints .search-hint:hover { + background: var(--selected); +} +.usermenu-container { + top: var(--chromeHeight1); + z-index: 200001 !important; + position: absolute; + left: 0px; + width: var(--sidebarWidth); + max-width: var(--sidebarWidth); + padding: 10px; + z-index: 1; +} +.usermenu-container .usermenu-body { + background: rgba(30, 30, 30, 0.45); + padding: 6px; + border-radius: var(--panelRadius); + width: 100%; + box-shadow: var(--ciderShadow-Generic); + backdrop-filter: var(--glassFilter); + animation: cmenuBodyIn 0.5s var(--appleEase); +} +@keyframes cmenuBodyIn { + 0% { + background: #1e1e1e; + } + 100% { + background: rgba(30, 30, 30, 0.45); + } +} +.usermenu-container .usermenu-body .usermenu-item { + background: transparent; + display: block; + width: 100%; + text-align: left; + color: #eee; + font-family: inherit; + font-size: 15px; + padding: 8px 12px; + border: 0px; + appearance: none; + border-radius: 6px; + margin: 2px 0px; +} +.usermenu-container .usermenu-body .usermenu-item:hover { + background: var(--selected); +} +.usermenu-container .usermenu-body .usermenu-item .usermenu-item-icon { + position: relative; + top: 1.5px; + right: 3px; + display: table-cell; +} +.usermenu-container .usermenu-body .usermenu-item .usermenu-item-name { + position: relative; + bottom: 2px; + padding-left: 5px; + display: table-cell; +} +.context-menu { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0); + z-index: 100; +} +.context-menu .context-menu-item { + background: transparent; + display: flex; + width: 100%; + text-align: left; + color: #eee; + font-family: inherit; + font-size: 14px; + padding: 6px 12px; + border: 0px; + appearance: none; + border-radius: 6px; + margin: 2px 0px; +} +.context-menu .context-menu-item:hover { + background: var(--selected); + cursor: pointer; +} +.context-menu .context-menu-item:active { + background: var(--selected-click); +} +.context-menu .context-menu-body { + background: #242424; + padding: 6px; + border-radius: 6px; + box-shadow: var(--ciderShadow-Generic); +} +.context-menu .context-menu-body.context-menu-open { + animation-duration: 0.1s; + animation-name: contextMenuIn; + animation-iteration-count: 1; + animation-easings: var(--appleEase); +} +.context-menu .context-menu-body.context-menu-close { + animation-duration: 0.1s; + animation-name: contextMenuOut; + animation-iteration-count: 1; + animation-easings: var(--appleEase); +} +@keyframes contextMenuIn { + 0% { + transform: scale(0.9); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes contextMenuOut { + 0% { + transform: scale(1); + opacity: 1; + } + 100% { + transform: scale(0.9); + opacity: 0; + } +} +.hidden-opacity { + opacity: 0; + height: 0px; + width: 0px; + margin: 0px; +} +.spinner { + background-image: url("assets/spinner.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + width: 50px; + height: 50px; + display: inline-block; +} +.app-sidebar-content::-webkit-scrollbar { + display: none; +} +.app-sidebar-content:hover::-webkit-scrollbar { + display: initial; +} +.app-sidebar-item { + --iconSize: 18px; + display: flex; + width: 100%; + padding: 8px 12px; + font-weight: 400; + font-family: inherit; + font-size: 14px; + margin: 3px 0px; + border: 1px solid transparent; + border-radius: 6px; + background: transparent; + color: #eee; + transition: transform 0.1s; + text-align: left; + align-items: center; + gap: 12px; +} +.app-sidebar-item.app-sidebar-item-playlist { + -webkit-user-drag: element; + overflow: hidden; + text-overflow: ellipsis; +} +.app-sidebar-item.app-sidebar-item-playlist .presentNotice { + align-self: center; + margin-left: 8px; + text-transform: uppercase; + font-size: 0.7em; + opacity: 0.6; +} +.app-sidebar-item > ._svg-icon { + --size: var(--iconSize); +} +.app-sidebar-item:hover { + border: 1px solid rgba(200, 200, 200, 0); + background: rgba(180, 180, 180, 0.15); +} +.app-sidebar-item:active { + border: 1px solid rgba(200, 200, 200, 0); + background: rgba(150, 150, 150, 0.15); + transition: transform 0s; +} +.app-sidebar-item.active { + border: 1px solid rgba(200, 200, 200, 0); + background: rgba(200, 200, 200, 0.15); + transform: scale(1); + transition: transform 0s; + cursor: default; +} +.app-chrome { + background-color: var(--baseColorMix); + box-shadow: 0px 3px 6px rgba(20, 20, 20, 0.12), 0px 1px 0px 0px rgba(200, 200, 200, 0.12); + width: 100%; + height: var(--chromeHeight1); + display: flex; + flex-direction: row; + -webkit-app-region: drag; + z-index: 4; +} +.app-chrome:not(.chrome-bottom) { + z-index: 16; + position: fixed; + backdrop-filter: var(--glassFilter); +} +.app-chrome:not(.chrome-bottom) .app-chrome--center { + flex: 1; +} +.app-chrome .top-nav-group { + background: var(--baseColor); + border: 1px solid #323232; + border-radius: 10px; + display: flex; + height: 32px; +} +.app-chrome .top-nav-group .app-sidebar-item { + background-color: var(--baseColor); + border-radius: 10px!important; + border: 0px; + min-width: 120px; + padding: 6px; + justify-content: center; + align-items: center; + margin: 0px; + height: 100%; +} +.app-chrome .top-nav-group .app-sidebar-item:hover { + background-color: #2b2b2b; +} +.app-chrome .top-nav-group .app-sidebar-item.active { + background-color: #2b2b2b; +} +.app-chrome .top-nav-group .app-sidebar-item.md-btn-primary { + box-shadow: 0px 0px 0px 1px #323232; + background-color: #2b2b2b; + z-index: 1; +} +.app-chrome .vdiv { + width: 1px; + background: white; + opacity: 0.25; + height: 50%; + margin: 6px; +} +.mv-chrome { + position: absolute; + top: 0; + right: 0; + width: 90%; + height: 55px; + -webkit-app-region: drag; +} +.app-chrome .app-chrome--left, +.app-chrome .app-chrome--center, +.app-chrome .app-chrome--right { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.app-chrome .app-chrome--left { + width: 30%; + justify-content: left; + -webkit-app-region: drag; +} +.app-chrome .app-chrome--center .app-title-text { + font-size: 0.8em; +} +.app-chrome .app-chrome--right { + width: 30%; + justify-content: right; +} +.app-chrome .app-chrome-item { + height: 100%; + width: auto; + display: flex; + justify-content: center; + align-items: center; + -webkit-app-region: no-drag; + height: auto; +} +.app-chrome .app-chrome-item.generic { + width: 50px; + opacity: 0.7; +} +.app-chrome .app-chrome-item.volume { + width: 100px; + margin-right: 6px; +} +.app-chrome .app-chrome-item.search { + margin-right: 6px; +} +.volume-button { + background-image: url("./assets/feather/volume-2.svg"); + height: 15px; + width: 30px; + padding: 0px; + background: transparent; + border: 0px; + border-radius: 0px; + box-shadow: unset; + background-size: 12px; + background-position: center; + background-repeat: no-repeat; + opacity: 0.7; + border-radius: 6px; +} +.volume-button:active, +.volume-button--small:active { + transform: scale(0.9); +} +.volume-button.active, +.volume-button--small.active { + background-image: url("./assets/feather/volume.svg"); +} +.volume-button--small { + border-radius: 6px; + color: inherit; + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + height: 15px; + width: 30px; + border: 0px; + box-shadow: unset; + opacity: 0.7; + background-image: url("./assets/feather/volume-2.svg"); +} +.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #A5A8BA; + box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%); + cursor: default; + transition: all var(--appleTransition); +} +.app-chrome .app-chrome-item.volume > input[type=range] { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.4); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; + width: 100%; +} +.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.app-chrome .back-button { + height: 100%; + width: 60px; +} +.app-chrome .app-chrome-item.full-height { + height: 100%; +} +.app-chrome .app-chrome-item > .app-mainmenu { + width: 34px; + font-size: 13px; + background: url("./assets/CiderMenu.svg"); + background-size: auto; + background-repeat: no-repeat; + background-position: center; + height: 34px; + margin-right: 16px; + margin-left: 16px; + margin-top: 1.5px; + border: 0px; + border-radius: 6px; + transition: transform 0.1s var(--appleEase); + position: relative; +} +.app-chrome .app-chrome-item > .app-mainmenu:hover { + transform: scale(1.1); +} +.app-chrome .app-chrome-item > .app-mainmenu:active, +.app-chrome .app-chrome-item > .app-mainmenu.active { + border-radius: 100%; + transform: scale(1.1); + outline: 2px solid var(--keyColor); +} +.app-chrome .app-chrome-item > .window-controls { + width: 138px; + font-size: 13px; + height: 100%; + display: flex; +} +.app-chrome .app-chrome-item > .window-controls-macos { + width: 100px; +} +.app-chrome .app-chrome-item > .window-controls > div { + height: 100%; + width: 32px; +} +.app-chrome .app-chrome-item > .window-controls > div:hover { + background: rgba(200, 200, 200, 0.1); +} +.app-chrome .app-chrome-item > .window-controls > div.close { + width: 100%; + height: 100%; + background-image: var(--gfx-closeBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; +} +.app-chrome .app-chrome-item > .window-controls > div.close:hover { + background-color: #c42b1c; +} +.app-chrome .app-chrome-item > .window-controls > div.minmax { + background-image: var(--gfx-maxBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + width: 100%; + height: 100%; +} +.app-chrome .app-chrome-item > .window-controls > div.minmax.restore { + background-image: var(--gfx-restoreBtn); +} +.app-chrome .app-chrome-item > .window-controls > div.minimize { + background-image: var(--gfx-minBtn); + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + width: 100%; + height: 100%; +} +body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minimize { + display: none; +} +body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minmax { + display: none; +} +body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.close { + display: none; +} +.app-chrome .app-chrome-item.playback-controls { + width: 80%; + height: 90%; + display: flex; + max-width: 500px; + border-left: 1px solid rgba(200, 200, 200, 0.08); + border-right: 1px solid rgba(200, 200, 200, 0.08); + -webkit-app-region: drag; +} +.app-chrome .app-chrome-item > .app-playback-controls { + display: flex; + justify-content: center; + align-content: center; + width: 100%; + -webkit-app-region: no-drag; +} +.app-chrome .app-chrome-item > .app-playback-controls .info-rect { + mask-image: linear-gradient(-90deg, transparent 0%, black 10%, black 90%, transparent 100%); + -webkit-mask-image: linear-gradient(-90deg, transparent 3%, black 10%, black 90%, transparent 100%); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-name { + font-weight: 600; + text-align: center; + font-size: 13px; + height: 1.3em; + line-height: 1.3em; + white-space: nowrap; + max-width: 360px; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-name .song-name-normal { + height: inherit; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-name .explicit-icon { + background-image: url("./assets/explicit.svg"); + height: 9px; + width: 13px; + filter: contrast(0); + background-repeat: no-repeat; + margin-left: 3px; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-name .heart-icon { + height: 9px; + width: 13px; + filter: contrast(0); + background-repeat: no-repeat; + margin-left: 3px; +} +.app-chrome .app-chrome-item > .app-playback-controls .lossless-icon { + background-image: url("./assets/lossless.svg") !important; +} +.app-chrome .app-chrome-item > .app-playback-controls .ppe-icon { + background-image: url("./assets/ppe.svg") !important; + margin-left: 0.5em !important; + flex: 1; +} +.app-chrome .app-chrome-item > .app-playback-controls .private-icon { + background-image: url("./assets/private.svg") !important; + margin-left: 0.5em !important; + flex: 1; +} +.app-chrome .app-chrome-item > .app-playback-controls .chrome-icon-container { + display: flex; + position: absolute; + right: 0px; +} +.app-chrome .app-chrome-item > .app-playback-controls .audio-type { + filter: contrast(0); + background-repeat: no-repeat; + background-size: contain; + height: 15px; + width: 15px; + margin-bottom: 15px; +} +div[data-type="library-music-videos"] .info-rect .title::before, +div[data-type="musicVideo"] .info-rect .title::before { + content: ""; + background-image: url(./assets/feather/video.svg); + background-size: contain; + filter: invert(0.6); + display: inline-block; + width: 20px; + height: 20px; + margin-bottom: -4px; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-duration p { + font-weight: 400; + font-size: 10px; + height: 1.2em; + line-height: 1.3em; + overflow: hidden; + margin: 0 0 0 0.25em; +} +.app-playback-controls:hover .marquee { + animation: unset; +} +.app-playback-controls:hover .marquee.song-artist { + overflow: hidden; +} +.app-playback-controls:hover .marquee .song-artist { + overflow: hidden; +} +.app-playback-controls:hover .marquee.song-name { + overflow: hidden; +} +.app-playback-controls:hover .marquee::after { + content: none !important; + display: none; +} +.marquee { + animation: marquee 15s linear 2s infinite; +} +.marquee.song-artist { + overflow: unset; +} +.marquee .song-artist { + overflow: unset; +} +.marquee.song-name { + overflow: unset; +} +.marquee::after { + content: attr(data-value); +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress { + position: absolute; + bottom: 0px; + left: 0px; + background: transparent; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress:hover > input[type=range]::-webkit-slider-thumb { + opacity: 1; + transform: scale(1); + z-index: 1; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range] { + appearance: none; + width: 100%; + height: 4px; + background-color: rgba(200, 200, 200, 0.1); + border-radius: 2px; + margin: 0; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-webkit-slider-thumb { + opacity: 0; + transform: scale(0.5); + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 100%; + background: var(--songProgressColor); + cursor: default; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-moz-range-thumb { + width: 8px; + height: 8px; + border-radius: 100%; + background: var(--songProgressColor); + cursor: default; +} +@keyframes marquee { + from { + transform: translateX(0); + } + to { + transform: translateX(-140%); + } +} +.app-chrome .app-chrome-item > .app-playback-controls .artwork { + width: 42px; + height: 42px; + background-image: var(--artwork); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + border-radius: var(--mediaItemRadiusSmall); + flex: 0 0 auto; + margin: 6px; + image-rendering: -webkit-optimize-contrast; +} +.app-chrome .app-chrome-item > .app-playback-controls .artwork .mediaitem-artwork { + border-radius: var(--mediaItemRadiusSmall); +} +.app-chrome .app-chrome-item > .app-playback-controls .actions { + width: 42px; + height: 42px; + border-radius: 2px; + flex: 0 0 auto; + margin: 6px; + display: flex; + justify-content: center; + align-items: center; + filter: contrast(0.8); +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu { + height: 100%; + width: 100%; + padding: 0px; + margin: 0px; + background: transparent; + border: 0px; + appearance: none; + display: flex; + justify-content: center; + align-items: center; + border-radius: 6px; +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu:focus { + outline: none; +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu:hover { + background: var(--hover); +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu:active { + background: var(--selected-click); + transform: scale(0.95); +} +.app-chrome .app-chrome-item > .app-playback-controls .actions .lcdMenu .svg-icon { + --url: url('views/svg/more.svg') !important; +} +.app-chrome .app-chrome-item > .app-playback-controls .playback-info { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; + overflow: hidden; +} +.app-chrome .app-chrome-item > .app-playback-controls .playback-info > .song-progress { + width: 100%; +} +.app-navigation { + background: transparent; + align-items: center; + justify-content: center; + background: var(--color1); + height: calc(100% - var(--chromeHeight2)); + width: 100%; + display: flex; + position: relative; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album { + font-weight: 400; + font-size: 12px; + text-align: center; + /*height: 1.2em; + line-height: 1.2em;*/ + z-index: 1; + align-items: center; + justify-content: center; + width: 80%; + max-width: 340px; + overflow: hidden; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album .song-artist-album-content { + font-weight: 400; + font-size: 12px; + text-align: center; + width: 100%; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album .song-artist-album-content.song-artist-normal { + height: inherit; +} +.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album.song-artist-marquee > marquee { + margin-bottom: -3px; +} +.display--small { + display: none !important; +} +.web-slider.display--small { + margin: 10px; +} +input[type="range"].web-slider.display--small::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #323232; + cursor: default; + box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); +} +/* Window is smaller <= 1023px width */ +@media only screen and (max-width: 1120px) { + .display--small { + display: inherit !important; + } + .display--small .slider { + width: 100%; + z-index: 1; + } + .display--small .input-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding-bottom: 10px; + } + .display--small input[type=range] { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.4); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; + } + .display--small input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #323232; + cursor: default; + box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); + transition: all var(--appleTransition); + } + .display--small input[type=range]::-webkit-slider-thumb:hover { + background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px); + transform: scale(1.2); + } + .display--small input[type=range]::-webkit-slider-thumb:active { + background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px); + transform: scale(1); + } + .display--small input[type=range]::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; + } + .display--large { + display: none !important; + } +} +.flex-center { + display: flex; + align-items: center; + flex-wrap: wrap; +} +.md-container { + width: 100%; + position: relative; +} +.lyric-body { + -webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(#000000), to(rgba(0, 0, 0, 0))); + overflow-y: scroll; + overflow-x: hidden; + display: flex; + flex-flow: column; + font-family: "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +.lyric-body .no-lyrics { + width: 100%; + justify-content: center; + align-items: center; + font-weight: bold; + font-size: 26px; +} +.lyric-line { + --bgSpeed: 1s; + appearance: none; + color: white; + font-size: 26px; + transform: scale(0.8); + transform-origin: left center; + transition: transform 0.5s var(--appleEase); + opacity: 0.75; + width: auto; + display: inline-block; + margin: 10px; + margin-left: 5%; + margin-right: 0px; + overflow-wrap: break-word; +} +.lyric-line.active .verse { + opacity: 0.6; +} +.lyric-line.active .verse.verse-active { + opacity: 1; + transition: opacity 0.35s var(--appleEase); +} +.lyric-line:hover { + cursor: pointer; +} +.lyric-line:hover::after { + content: ' '; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + transform: scale(1.06); + background: rgba(200, 200, 200, 0.1); + pointer-events: none; + border-radius: 10px; + -webkit-backface-visibility: hidden; +} +.lyric-line.active { + --bgSpeed: 1s; + opacity: 1; + transform: scale(1); + /*background: var(--keyColor);*/ + transition: transform 0.2s var(--appleEase), opacity 0.35s var(--appleEase); +} +.lyric-line:not(.active) { + filter: blur(1px); +} +.lyric-line:not(.active).unsynced { + filter: none !important; +} +.lyric-line.unsynced { + filter: none !important; +} +.lyric-body:hover > .lyric-line:not(.active) { + filter: none !important; +} +.lyricWaiting { + margin-bottom: 10px; + display: none; +} +.lyric-line.active .lyricWaiting { + display: inline-flex; + animation: lyricWaitingLine 6s cubic-bezier(0.42, 0, 0.58, 1) infinite; +} +.lyric-line.active .lyricWaiting > div { + width: 10px; + height: 10px; + background: white; + border-radius: 50%; + margin: 3px; +} +.lyrics-translation { + font-size: 1.6rem; + font-weight: 450; + font-family: "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + filter: contrast(0.5); +} +.lyric-footer { + bottom: 0; + height: 50px; + width: 100%; + position: absolute; + z-index: 1000; + opacity: 1; + background: rgba(30, 30, 30, 0.8); + justify-content: center; + align-items: center; + display: none; + transition: opacity 0.1s var(--appleEase); +} +.lyric-body:hover + .lyric-footer, +.lyric-footer:hover { + display: flex; +} +.modular-fs .app-drawer .lyric-footer { + background: unset; + display: flex; + opacity: 0.3; +} +.modular-fs .app-drawer .lyric-footer:hover { + opacity: 1; +} +.modular-fs .app-drawer .lyric-body .no-lyrics { + height: 100%; + display: flex; +} +@keyframes lyricWaitingLine { + 0% { + opacity: 0.25; + transform: scale(0.85); + } + 50% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0.25; + transform: scale(0.85); + } +} +@keyframes dotOpacity { + 0% { + opacity: 0.25; + } + 100% { + opacity: 1; + } +} +.lyric-line2:before { + background: var(--keyColor); + content: ''; + width: 0%; + height: 6px; + position: absolute; + bottom: -8px; + left: 0; + border-radius: 10px; + z-index: -1; + transition: width var(--bgSpeed); +} +.lyric-line2.active:before { + width: 100%; + transition: width var(--bgSpeed); +} +.player_top { + height: 100%; +} +/* Cider */ +.more-btn-round { + border-radius: 100%; + background: rgba(100, 100, 100, 0.5); + box-shadow: var(--ciderShadow-Generic); + width: 32px; + height: 32px; + border: 0px; + cursor: pointer; + z-index: 5; + display: flex; + justify-content: center; + align-items: center; +} +.more-btn-round:hover { + filter: brightness(125%); +} +.more-btn-round:active { + filter: brightness(75%); + transform: scale(0.98); + transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); +} +.more-btn-round .svg-icon { + width: 100%; + background: #eee; + --url: url("./views/svg/more.svg"); +} +.about-page .teamBtn { + display: flex; + align-items: center; + width: 100%; + font-size: 14px; + padding: 6px 16px; + margin: 4px; +} +.about-page .teamBtn > img { + width: 30px; + margin: 0px 16px 0px 0px; + pointer-events: none; + border-radius: 100%; + box-shadow: var(--mediaItemShadow); + image-rendering: -webkit-optimize-contrast; +} +.about-page .sponsorBtn { + display: inline-flex; + justify-content: center; + align-items: center; +} +.about-page .sponsorBtn > img { + width: 26px; + margin: 0px 16px 0px 0px; + pointer-events: none; +} +.sidebar-playlist .folder-button-active { + background: rgba(255, 255, 255, 0.12); +} +.sidebar-playlist .folder-body { + background: #ffffff0a; + border-radius: 10px; + padding: 1px 6px; +} +.sidebar-playlist .folder-body .spinner { + display: block; + width: 100%; + height: 32px; + background-size: 16px; +} +#navigation-bar { + width: 100%; + background: rgba(0, 0, 0, 0.25); + height: var(--navigationBarHeight); + display: flex; + align-items: center; + padding: 0px 6px; + z-index: 7; + position: sticky; + top: 0; + left: 0; + backdrop-filter: blur(32px); + mix-blend-mode: hard-light; +} +#navigation-bar .nav-item { + appearance: none; + border: 0px; + height: 32px; + width: 40px; + background: transparent; + padding: 6px; + display: flex; + justify-content: center; + align-items: center; + color: rgba(200, 200, 200, 0.8); + margin: 2px; + border-radius: 6px; + transition: transform 0.1s var(--appleEase); +} +#navigation-bar .nav-item:active { + background: var(--selected-click); + transform: scale(0.96); + transition: transform 0s var(--appleEase); +} +#navigation-bar .nav-item > svg { + width: 8px; + pointer-events: none; +} +#navigation-bar .nav-item:hover { + background: var(--selected); +} +#navigation-bar .nav-item:hover > svg { + color: #c8c8c8; +} +.well { + background: rgba(200, 200, 200, 0.05); + border-radius: 10px; + padding: var(--contentInnerPadding); + margin-top: 16px; +} +.well.itemContainer { + display: flex; + flex-flow: wrap; + justify-content: center; +} +.well.itemContainer .cd-mediaitem-square-container { + align-items: center; +} +.well.itemContainer .cd-mediaitem-square { + width: 220px; + height: 260px; + display: inline-flex; + flex: 0 0 auto; + flex-direction: column; + font-size: 14px; + justify-content: center; + align-items: center; + border-radius: 6px; + max-width: 240px; + flex-grow: 1; +} +.well.itemContainer.collection-list-square { + display: grid; + grid-template-columns: repeat(4, minmax(200px, 1fr)); +} +@media screen and (min-width: 1500px) { + .well.itemContainer.collection-list-square { + grid-template-columns: repeat(6, minmax(200px, 1fr)); + } +} +@media screen and (max-width: 1150px) { + .well.itemContainer.collection-list-square { + grid-template-columns: repeat(3, minmax(200px, 1fr)); + } +} +.cd-mediaitem-square-container { + display: inline-flex; + flex-direction: column; + justify-content: center; +} +.reasonSP { + color: #a7a3a3; + font-weight: 500; + margin-left: 15px; +} +.text-overflow-elipsis { + display: -webkit-box; + min-width: 0px; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; +} +.no-animation { + animation: unset !important; +} +.fullscreen-view-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: black; + z-index: 99; + display: flex; + justify-content: center; + align-items: center; + opacity: 1; +} +.fullscreen-view { + width: 100%; + height: 100%; + background: black; + display: flex; + justify-content: center; + align-items: center; +} +.fullscreen-view .app-content-container { + width: 100%; + height: 100%; +} +.fullscreen-view .app-content-container #app-content { + width: 100%; + height: 100%; +} +.fullscreen-view .fs-row { + flex-grow: 0.5; +} +.fullscreen-view .playback-button--small.active { + background-color: rgba(200, 200, 200, 0.25); +} +.fullscreen-view .playback-button--small { + opacity: 0.7; +} +.fullscreen-view .right-col { + height: 50vh; +} +.fullscreen-view .bg-artwork-container { + display: block !important; +} +@media only screen and (max-width: 1121px) { + .fullscreen-view .display--large { + display: flex !important; + } +} +.fullscreen-view .display--large { + display: flex; +} +.fullscreen-view .display--large .slider { + width: 100%; + z-index: 1; +} +.fullscreen-view .display--large .input-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} +.fullscreen-view .display--large .volume-button--small { + border-radius: 6px; + color: inherit; + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + height: 15px; + width: 30px; + border: 0px; + box-shadow: unset; + opacity: 0.7; + background-image: url("./assets/feather/volume-2.svg"); +} +.fullscreen-view .display--large .volume-button--small:active { + transform: scale(0.9); +} +.fullscreen-view .display--large .volume-button--small.active { + background-image: url("./assets/feather/volume.svg"); +} +.fullscreen-view .display--large input[type=range] { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.4); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; +} +.fullscreen-view .display--large input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #323232; + cursor: default; + box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); + transition: all var(--appleTransition); +} +.fullscreen-view .display--large input[type=range]::-webkit-slider-thumb:hover { + background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px); + transform: scale(1.2); +} +.fullscreen-view .display--large input[type=range]::-webkit-slider-thumb:active { + background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px); + transform: scale(1); +} +.fullscreen-view .display--large input[type=range]::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.fullscreen-view .background { + position: absolute; + background-size: cover; + width: 100%; + height: 100%; +} +.fullscreen-view .background .bgArtworkMaterial { + position: absolute; + width: 100%; + height: 100%; +} +.fullscreen-view .background .bgArtworkMaterial .bg-artwork-container { + z-index: unset; +} +.fullscreen-view .background .bgArtworkMaterial .bg-artwork-container .bg-artwork { + filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9); +} +.fullscreen-view .lyrics-col { + height: 62vh; + display: flex; + justify-content: center; + align-content: center; + width: 80%; +} +.fullscreen-view .lyrics-col ::-webkit-scrollbar-thumb { + box-shadow: unset; +} +.fullscreen-view .lyrics-col:hover ::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.fullscreen-view .lyrics-col .no-lyrics { + width: 100%; + height: 100%; + display: flex; + justify-content: center; +} +.fullscreen-view .lyrics-col .lyric-line { + font-size: 35px; +} +.fullscreen-view .queue-col { + width: 60vh; + height: 62vh; +} +.fullscreen-view .queue-col .queue-title { + opacity: 0.6; +} +.fullscreen-view .queue-col .queue-panel > * { + z-index: 3; +} +.fullscreen-view .queue-col ::-webkit-scrollbar-thumb { + box-shadow: unset; +} +.fullscreen-view .queue-col:hover ::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.fullscreen-view .tab-toggles { + display: flex; + position: absolute; + bottom: 0; + right: 0; + width: 15vh; + height: 5vh; + justify-content: space-evenly; +} +.fullscreen-view .tab-toggles .volume { + background-image: url("./assets/feathers/volume.svg"); + padding: 0.5vh; + width: 2vh; + height: 2vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.fullscreen-view .tab-toggles .queue { + background-image: url("./assets/list.svg"); + padding: 0.5vh; + width: 2.5vh; + height: 2.5vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.fullscreen-view .tab-toggles .lyrics { + background-image: url("./assets/quote-right.svg"); + padding: 0.5vh; + width: 2.5vh; + height: 2.5vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.fullscreen-view .tab-toggles .active { + background-color: rgba(200, 200, 200, 0.7); + border-radius: 3px; +} +.fullscreen-view .artwork-col { + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; +} +.fullscreen-view .artwork-col .artwork { + width: 50vh; + height: 50vh; +} +.fullscreen-view .artwork-col .controls-parents { + width: 50vh; +} +.fullscreen-view .artwork-col .app-playback-controls .song-artist, +.fullscreen-view .artwork-col .app-playback-controls .song-name { + font-weight: 600; + text-align: center; + font-size: 0.9em; + height: 1.2em; + line-height: 0.9em; + overflow: hidden; + text-overflow: ellipsis; + max-width: 360px; +} +.fullscreen-view .artwork-col .app-playback-controls .song-artist .song-name-normal, +.fullscreen-view .artwork-col .app-playback-controls .song-name .song-name-normal { + height: inherit; +} +.fullscreen-view .artwork-col .app-playback-controls .song-artist { + font-size: 0.875em; + font-weight: 400; +} +.fullscreen-view .artwork-col .app-playback-controls .song-name { + width: unset !important; + margin-top: 0.15vh; + display: -webkit-box; + line-height: 1.2; + text-overflow: ellipsis; + text-align: center; +} +.fullscreen-view .artwork-col .app-playback-controls .playback-info { + margin-top: 0.5vh; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; +} +.fullscreen-view .artwork-col .app-playback-controls .playback-info input[type="range"] { + width: 100%; +} +.fullscreen-view .artwork-col .app-playback-controls .playback-info > div { + width: 100%; + text-align: center; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress { + position: absolute; + bottom: -1.5vh; + left: 0px; + background: transparent; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress .song-duration p { + font-weight: 400; + font-size: 10px; + height: 1.2em; + line-height: 1.3em; + overflow: hidden; + margin: 0 0 0 0.25em; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress:hover > input[type=range]::-webkit-slider-thumb { + opacity: 1; + transform: scale(1); + z-index: 1; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress input[type=range] { + appearance: none; + width: 100%; + height: 4px; + background-color: rgba(200, 200, 200, 0.1); + border-radius: 2px; +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress input[type=range]::-webkit-slider-thumb { + opacity: 0; + transform: scale(0.5); + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 100%; + background: var(--songProgressColor); + cursor: default; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.fullscreen-view .artwork-col .app-playback-controls .song-progress input[type=range]::-moz-range-thumb { + width: 8px; + height: 8px; + border-radius: 100%; + background: var(--songProgressColor); + cursor: default; +} +.fullscreen-view .artwork-col .control-buttons { + margin-top: 2vh; + display: inline-flex; + width: 100%; + justify-content: center; +} +.mini-view { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.mini-view .fs-row { + flex-grow: 1; +} +.mini-view .playback-button--small.active { + background-color: rgba(200, 200, 200, 0.25); +} +.mini-view .player-exit { + z-index: 3; + position: absolute; + top: 5px; + right: 5px; + -webkit-app-region: no-drag; +} +.mini-view .player-pin { + z-index: 3; + position: absolute; + min-width: 20px; + min-height: 20px; + top: 5px; + right: 30px; + -webkit-app-region: no-drag; +} +.mini-view #mini-pin { + display: none; +} +.mini-view .player-pin:hover #mini-pin { + display: block; +} +.mini-view .playback-button--small { + opacity: 0.7; +} +.mini-view .right-col { + height: 50vh; +} +@media only screen and (max-width: 1121px) { + .mini-view .display--large { + display: flex !important; + } +} +.mini-view .display--large { + display: flex; +} +.mini-view .display--large .slider { + width: 100%; + z-index: 1; +} +.mini-view .display--large .input-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} +.mini-view .display--large .volume-button--small { + border-radius: 6px; + color: inherit; + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + height: 15px; + width: 30px; + border: 0px; + box-shadow: unset; + opacity: 0.7; + background-image: url("./assets/feather/volume-2.svg"); +} +.mini-view .display--large .volume-button--small:active { + transform: scale(0.9); +} +.mini-view .display--large .volume-button--small.active { + background-image: url("./assets/feather/volume.svg"); +} +.mini-view .display--large input[type=range] { + -webkit-appearance: none; + height: 4px; + background: rgba(255, 255, 255, 0.4); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; +} +.mini-view .display--large input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: #323232; + cursor: default; + box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4); + transition: all var(--appleTransition); +} +.mini-view .display--large input[type=range]::-webkit-slider-thumb:hover { + background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px); + transform: scale(1.2); +} +.mini-view .display--large input[type=range]::-webkit-slider-thumb:active { + background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px); + transform: scale(1); +} +.mini-view .display--large input[type=range]::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} +.mini-view .background { + position: absolute; + background-size: cover; + width: 100%; + height: 100%; + -webkit-user-select: none; + -webkit-app-region: drag; +} +.mini-view .background .bgArtworkMaterial { + position: absolute; + width: 100%; + height: 100%; +} +.mini-view .background .bgArtworkMaterial .bg-artwork-container { + z-index: unset; +} +.mini-view .background .bgArtworkMaterial .bg-artwork-container .bg-artwork { + filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9); +} +.mini-view .background .bgArtworkMaterial .no-animation { + animation: unset; +} +.mini-view .lyrics-col { + height: 62vh; + display: flex; + justify-content: center; + align-content: center; + width: 80%; +} +.mini-view .lyrics-col ::-webkit-scrollbar-thumb { + box-shadow: unset; +} +.mini-view .lyrics-col:hover ::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.mini-view .lyrics-col .no-lyrics { + width: 100%; + height: 100%; + display: flex; + justify-content: center; +} +.mini-view .lyrics-col .lyric-line { + font-size: 35px; +} +.mini-view .queue-col { + width: 60vh; + height: 50vh; +} +.mini-view .queue-col .queue-title { + opacity: 0.6; +} +.mini-view .queue-col .queue-panel > * { + z-index: 3; +} +.mini-view .queue-col ::-webkit-scrollbar-thumb { + box-shadow: unset; +} +.mini-view .queue-col:hover ::-webkit-scrollbar-thumb { + box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5); +} +.mini-view .tab-toggles { + display: flex; + position: absolute; + bottom: 0; + right: 0; + width: 15vh; + height: 5vh; + justify-content: space-evenly; +} +.mini-view .tab-toggles .volume { + background-image: url("./assets/feathers/volume.svg"); + padding: 0.5vh; + width: 2vh; + height: 2vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.mini-view .tab-toggles .queue { + background-image: url("./assets/list.svg"); + padding: 0.5vh; + width: 2.5vh; + height: 2.5vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.mini-view .tab-toggles .lyrics { + background-image: url("./assets/quote-right.svg"); + padding: 0.5vh; + width: 2.5vh; + height: 2.5vh; + background-origin: content-box; + background-repeat: no-repeat; +} +.mini-view .tab-toggles .active { + background-color: rgba(200, 200, 200, 0.7); + border-radius: 3px; +} +.mini-view .artwork-col { + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; +} +.mini-view .artwork-col .artwork { + width: 100%; + height: 100%; +} +.mini-view .artwork-col .artwork .mediaitem-artwork { + border-radius: unset; +} +.mini-view .artwork-col .controls-parents { + width: 100%; + position: absolute; + background: #0000009e; + backdrop-filter: blur(10px); + bottom: 0px; + z-index: 3; + opacity: 0; + padding: 3%; +} +.mini-view .artwork-col .controls-parents:hover { + opacity: 1; +} +.mini-view .artwork-col .app-playback-controls { + -webkit-app-region: no-drag; +} +.mini-view .artwork-col .app-playback-controls .song-artist, +.mini-view .artwork-col .app-playback-controls .song-name { + font-weight: 600; + text-align: center; + font-size: 0.9em; + height: 1.2em; + line-height: 0.9em; + overflow: hidden; + text-overflow: ellipsis; + max-width: 360px; +} +.mini-view .artwork-col .app-playback-controls .song-artist .song-name-normal, +.mini-view .artwork-col .app-playback-controls .song-name .song-name-normal { + height: inherit; +} +.mini-view .artwork-col .app-playback-controls .song-artist { + font-size: 0.875em; + font-weight: 400; +} +.mini-view .artwork-col .app-playback-controls .song-name { + width: unset !important; + margin-top: 0.15vh; + display: -webkit-box; + line-height: 1.2; + text-overflow: ellipsis; + text-align: center; +} +.mini-view .artwork-col .app-playback-controls .playback-info { + margin-top: 0.5vh; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; +} +.mini-view .artwork-col .app-playback-controls .playback-info input[type="range"] { + width: 100%; +} +.mini-view .artwork-col .app-playback-controls .playback-info > div { + width: 100%; + text-align: center; +} +.mini-view .artwork-col .app-playback-controls .song-progress { + position: absolute; + bottom: -3.5vh; + left: 0px; + background: transparent; +} +.mini-view .artwork-col .app-playback-controls .song-progress .song-duration p { + font-weight: 400; + font-size: 10px; + height: 1.2em; + line-height: 1.3em; + overflow: hidden; + margin: 0 0 0 0.25em; +} +.mini-view .artwork-col .app-playback-controls .song-progress:hover > input[type=range]::-webkit-slider-thumb { + opacity: 1; + transform: scale(1); + z-index: 1; +} +.mini-view .artwork-col .app-playback-controls .song-progress input[type=range] { + appearance: none; + width: 100%; + height: 4px; + background-color: rgba(200, 200, 200, 0.1); + border-radius: 2px; +} +.mini-view .artwork-col .app-playback-controls .song-progress input[type=range]::-webkit-slider-thumb { + opacity: 0; + transform: scale(0.5); + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 100%; + background: var(--songProgressColor); + cursor: default; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.mini-view .artwork-col .app-playback-controls .song-progress input[type=range]::-moz-range-thumb { + width: 8px; + height: 8px; + border-radius: 100%; + background: var(--songProgressColor); + cursor: default; +} +.mini-view .artwork-col .control-buttons { + margin-top: 3.5vh; + display: inline-flex; + width: 100%; + justify-content: center; +} +#micaEffect { + opacity: 1; + filter: brightness(1) saturate(320%); +} +@keyframes micaEnter { + 0% { + opacity: 0; + transform: translateY(10px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } +} +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.modular-fs .app-chrome.chrome-bottom { + position: fixed; + bottom: 0; + left: 0; + z-index: 14!important; + backdrop-filter: var(--glassFilter); +} +.modular-fs .app-navigation { + height: 100%; +} +.modular-fs .app-drawer { + width: 100%; + right: 0px; + top: 0px; + height: 100%; + border-radius: 0px; + box-shadow: unset; + background: black; +} +.modular-fs .app-drawer .bgArtworkMaterial { + display: block; +} +.modular-fs .app-drawer .bgArtworkMaterial::before { + top: -50%; + left: -20%; + width: 200VH; + height: 200VH; +} +.modular-fs .app-drawer .bgArtworkMaterial .bg-artwork-container { + display: block !important; +} +.modular-fs .app-drawer .lyric-body { + justify-content: center; + align-items: center; + padding: 0px; + margin: 0px; + overflow: hidden; + filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.7)); +} +.modular-fs .app-drawer .lyric-body .lyric-line { + pointer-events: none; + font-weight: 600; + font-size: 2em; + transform-origin: center; + animation: fsLyricIn var(--appleEase) 0.2s; + opacity: 0.9; +} +.modular-fs .app-drawer .lyric-body .lyric-line:not(.active) { + display: none; + margin: 0; + transform: scale(1); +} +.modular-fs .app-drawer .lyric-body .lyric-line.active { + margin: 0; + transform: scale(1); +} +@keyframes fsLyricIn { + 0% { + opacity: 0; + transform: scale(0.98); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +/* Transitions */ +.replaycard-enter-active, +.replaycard-leave-active { + transition: opacity 0.5s var(--appleEase), transform 0.5s var(--appleEase); +} +.replaycard-enter, +.replaycard-leave-to { + opacity: 0; + transform: translateY(20px); +} +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.15s var(--appleEase); +} +.fade-enter, +.fade-leave-to { + opacity: 0; +} +.modal-enter-active, +.modal-leave-active { + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +.modal-enter, +.modal-leave-to { + opacity: 0; + transform: scale(1.1); +} +.wpfade-enter-active, +.wpfade-leave-active { + transition: opacity 0.1s var(--appleEase); +} +.wpfade-enter, +.wpfade-leave-to { + opacity: 0; +} +.wpfade_transform-enter-active, +.wpfade_transform-leave-active { + --transitionTime: 0.2s; + transition: opacity var(--transitionTime) var(--appleEase); + will-change: opacity, transform; +} +.wpfade_transform-enter { + opacity: 0; + transform: unset; + will-change: opacity; +} +.wpfade_transform-leave-to { + opacity: 0; + transform: unset; + will-change: opacity; +} +.wpfade_transform_backwards-enter-active, +.wpfade_transform_backwards-leave-active { + --transitionTime: 0.2s; + transition: opacity var(--transitionTime) var(--appleEase); +} +.wpfade_transform_backwards-enter { + opacity: 0; + transform: unset; + will-change: opacity; +} +.wpfade_transform_backwards-leave-to { + opacity: 0; + transform: unset; + will-change: opacity; +} +.fabfade-enter-active, +.fabfade-leave-active { + transition: transform 0.1s var(--appleEase), opacity 0.1s var(--appleEase); +} +.fabfade-enter, +.fabfade-leave-to { + opacity: 0; + transform: scale(0.5); +} +.fsModeSwitch-enter-active, +.fsModeSwitch-leave-active { + transition: transform 1s var(--appleEase), opacity 1s var(--appleEase); +} +.fsModeSwitch-enter, +.fsModeSwitch-leave-to { + transform: scale(1.1); + opacity: 0; +} +.sidebartransition-enter-active, +.sidebartransition-leave-active { + transition: margin-left 0.35s var(--appleEase); +} +.sidebartransition-enter, +.sidebartransition-leave-to { + margin-left: calc(var(--sidebarWidth) * -1); +} +.drawertransition-enter-active, +.drawertransition-leave-active { + transition: transform 0.25s var(--appleEase); +} +.drawertransition-enter, +.drawertransition-leave-to { + transform: translateX(400px); +} +:root { + --gfx-closeBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjM2LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PmN2D9EAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEtJREFUGJWNkMENwDAIA1FGY/8hkn8HOAqPfBsFKvz1yZYtbqwAlUIB6saUAH2NJ4MvL4PLgK/x13LAGTSqEaVa1a0x7XvcmI3D1wbntaRbB2haYwAAAABJRU5ErkJggg=='); + --gfx-maxBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjU4LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PlwQMBUAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFBJREFUGJXV0LERgCAUBNHVsQADM3uwWWbojQIs47MEGhgAuS/eSw41qeFYqGlRA7iAm74DKLyrfRABoLrOgq+/hJXngi71BOoGZKBMHqhAbtMvQzel9pREAAAAAElFTkSuQmCC'); + --gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjI0LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PqiFCFwAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHNJREFUGJWtkKEOwlAMRc+QM5AwQYJFoPjZCWb2YRPIaeRTLwfTLQs0UxzX3tumtxCog78UdVTbZmM8AmsdXIABeKH2ak221dDuamnUCjyA+WtbB0zAGXgT0ycSFk31kBky/moUeBLpbsl91wi6Nnbfs/g+7XOQq6ifjfkAAAAASUVORK5CYII='); + --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC'); +} +#apple-music-video-container { + background: black; + position: absolute; + float: left; + display: none; + width: 100%; + height: 100%; + bottom: 0; + z-index: 100000; +} +#apple-music-video-container #player-fullscreen { + background-size: 50%; + background-position: center; + background-repeat: no-repeat; + filter: opacity(0.6); + background-color: transparent; + border-radius: 10px; + transition: 0.2s ease-in-out filter; + bottom: 0; +} +#apple-music-video-container #player-fullscreen:hover { + filter: opacity(1); + transition: 0.2s ease-in-out filter; +} +#apple-music-video-container #player-pip { + background-color: transparent; + border-radius: 10px; + bottom: 0; + filter: opacity(0.6); + transition: 0.2s ease-in-out filter; +} +#apple-music-video-container #player-pip:hover { + filter: opacity(1); + transition: 0.2s ease-in-out filter; +} +#apple-music-video-container .playback-info { + position: absolute; + width: 100%; + bottom: 0; + padding: 20px 40px; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%); +} +#apple-music-video-container .playback-info .song-artist { + font-size: 1.7rem; + font-weight: bold; +} +#apple-music-video-container .playback-info .song-name { + font-size: 1.2rem; + font-weight: bold; + color: #ffffff; +} +#apple-music-video-container input[type="range"] { + align-self: center; + height: 4px; + border-radius: 0.5rem; + margin-inline: 10px; +} +#apple-music-video-container .song-progress input[type="range"] { + appearance: initial; +} +#apple-music-video-container .song-progress input[type="range"]::-webkit-slider-thumb { + box-shadow: 0px 0px 0px #000000; + border: 1px solid #39404D; + background: #fff; + height: 0.7rem; + width: 0.7rem; + border-radius: 50%; + cursor: pointer; + -webkit-appearance: none; +} +#apple-music-video-player { + position: absolute; + top: 50%; + width: 100%; + transform: translate(0, -50%); + height: 100%; +} +#app.twopanel #apple-music-video-container { + top: 0; + bottom: unset; +} +.inactive { + opacity: 0; +} +#apple-music-video-player-controls { + position: absolute; + z-index: 100001; + float: left; + width: 100%; + height: 100%; +} +#apple-music-video-player-controls .playback-info .song-progress { + display: flex; +} +#apple-music-video-player-controls .playback-info .app-chrome-item.display--large { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; +} +#apple-music-video-player-controls .playback-info .app-chrome-item.display--large .playback-button { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 3px; +} +#apple-music-video-player-controls .playback-info .song-artist-album { + font-weight: 400; + font-size: 12px; + text-align: center; + /*height: 1.2em; + line-height: 1.2em;*/ + z-index: 1; + align-items: center; + justify-content: center; + width: 80%; + max-width: 340px; + overflow: hidden; +} +#apple-music-video-player-controls .playback-info .song-artist-album .song-artist-album-content { + font-weight: 400; + font-size: 12px; + text-align: center; + width: 100%; +} +#apple-music-video-player-controls .playback-info .song-artist-album .song-artist-album-content.song-artist-normal { + height: inherit; +} +#apple-music-video-player-controls .playback-info .song-artist-album.song-artist-marquee > marquee { + margin-bottom: -3px; +} +#apple-music-video-player-controls #player-exit { + position: absolute; + z-index: 100001; + float: left; + width: 100%; + margin-left: 10px; + margin-right: 10px; + margin-top: 10px; + margin-bottom: 10px; + cursor: pointer; +} +#apple-music-video-player-controls #player-pip { + position: absolute; + z-index: 100001; + width: 32px; + height: 32px; + margin: 10px; + right: 50px; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} +#apple-music-video-player-controls #player-pip > svg { + width: 50%; +} +#apple-music-video-player-controls #player-fullscreen { + position: absolute; + z-index: 100001; + width: 32px; + height: 32px; + margin: 10px; + right: 0px; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} +#apple-music-video-player-controls #player-fullscreen > svg { + width: 70%; +} +#apple-music-video-player-controls:hover { + opacity: 1; +} +img[src=""] { + text-indent: -10000px; +} +div#captions { + font-size: 1.2rem; + position: absolute; + top: 85%; + text-align: center; + width: auto; + align-self: center; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.6); + color: yellow; + white-space: pre-line; + font-family: 'Inter', 'Noto Sans JP', 'Source Han Sans SC', 'Source Han Sans HK', 'Source Han Sans SC', 'Source Han Sans HK', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif; +} +[v-cloak] { + display: none !important; +} +.item-navigate:hover { + text-decoration: underline; + cursor: pointer; +} +.title-browse-sp { + width: 100%; + text-align: left; + margin-bottom: 2px; +} +.bold { + font-weight: bold; +} +.semibold { + font-weight: 500; +} +.madeforyou-body { + margin-top: 15px; +} +.albums-square-container { + text-align: center; +} +body.no-gpu { + --ciderShadow-Generic: var(--mediaItemShadow); + --mediaItemShadow-Shadow: var(--mediaItemShadow); + --mediaItemShadow-ShadowSubtle: var(--mediaItemShadow); +} +body.no-gpu .bg-artwork-container { + display: none; + animation: none !important; +} +body.no-gpu .bg-artwork-container .bg-artwork { + animation: none !important; +} +body.no-gpu .floating-header { + background: black; + backdrop-filter: unset; +} +body.no-gpu .artworkContainer { + animation: unset!important; + opacity: 0.7; +} +body.no-gpu .info-rect-card:before { + display: none; +} +body.no-gpu .menu-panel .menu-panel-body { + background: #1e1e1e; + backdrop-filter: unset; +} +body.no-gpu #navigation-bar { + backdrop-filter: unset; + mix-blend-mode: unset; + background: #000000; +} +body.no-gpu .addtoplaylist-panel .modal-window { + background: #121212; + backdrop-filter: unset; +} +body.no-gpu .app-drawer { + backdrop-filter: unset; + mix-blend-mode: unset; + background: #1c1c1c; +} +body.no-gpu .wpfade-enter-active, +body.no-gpu .wpfade-leave-active { + transition: opacity 0s var(--appleEase); +} +body.no-gpu .wpfade-enter, +body.no-gpu .wpfade-leave-to { + opacity: 0; +} +body.no-gpu .drawertransition-enter-active, +body.no-gpu .drawertransition-leave-active { + transition: right 0s var(--appleEase); +} +body.no-gpu .drawertransition-enter, +body.no-gpu .drawertransition-leave-to { + right: -300px; +} +body.no-gpu .lyric-line:hover::after { + display: none; +} +.qrimg { + width: -webkit-fill-available; + max-block-size: -webkit-fill-available; + object-fit: contain; + overflow-x: hidden; + overflow-y: hidden; +} +.equalizer-panel .modal-window { + height: 330px; + max-height: 330px; + width: 740px; + max-width: 800px; + overflow: hidden; +} +.equalizer-panel .modal-window .info-header { + padding-left: 12px; +} +.equalizer-panel .modal-window .visual-container { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} +.equalizer-panel .modal-window .modal-header { + padding: 16px; + position: relative; + overflow: hidden; +} +.equalizer-panel .modal-window .modal-header .modal-title { + text-align: center; +} +.equalizer-panel .modal-window .modal-header .close-btn { + width: 36px; + height: 36px; + background-position: center; + background-repeat: no-repeat; + -webkit-app-region: no-drag; + appearance: none; + border: 0; + background-color: transparent; + position: absolute; + top: 10px; + right: 10px; + border-radius: 50px; + display: grid; + align-content: center; +} +.equalizer-panel .modal-window .modal-header .close-btn:before { + content: ""; + font-family: "codicon"; + color: var(--textColor); + font-size: 20px; +} +.equalizer-panel .modal-window .modal-header .close-btn:hover { + background-color: #c42b1c; +} +.equalizer-panel .modal-window .modal-content { + display: block; +} +.equalizer-panel .modal-window .modal-content .inputs-container { + margin-left: 8px; +} +.equalizer-panel .modal-window .modal-content .input-container { + display: inline-grid; + width: 54px; + justify-items: center; + font-size: 0.7em; +} +.equalizer-panel .modal-window .modal-content .input-container.mini { + display: inline-grid; + width: 43px; + justify-items: center; + font-size: 0.7em; +} +.equalizer-panel .modal-window .modal-content .freq-header { + margin-bottom: 2px; +} +.equalizer-panel .modal-window .modal-content .reset-button { + width: 50%; + margin-left: 25%; + text-align: center; +} +.equalizer-panel .modal-window .modal-content input.eq-slider { + -webkit-appearance: slider-vertical; + width: 5%; +} +.equalizer-panel .modal-window .modal-content input[type="number"] { + padding: unset; + width: 55px; +} +.equalizer-panel .modal-window .modal-content .header input.eq-slider { + -webkit-appearance: slider-vertical; + width: 5%; + opacity: 0; +} +.equalizer-panel .modal-window .modal-lowercontent { + padding: 16px; + background-color: var(--modalBackground); +} +body[platform='darwin'] #window-controls-container { + display: none; +} +body[platform='darwin'] .app-chrome .app-chrome-item > .app-mainmenu { + opacity: 0; + width: 52px; + pointer-events: none; + -webkit-app-region: drag; +} +.percent { + display: inline-block; + position: relative; +} +.percent::after { + position: relative; + right: 2em; + transition: all 0.05s ease-in-out; +} +.percent:hover::after, +.percent:focus-within::after { + right: 3.5em; +} +.percent::after { + content: '%'; +} +.playbackrate-text { + align-items: end; + margin-right: 5px; +} +.modal .close { + color: transparent; +} +.spatialproperties-panel.modal-fullscreen { + flex-direction: column; +} +.cursor { + background: rgba(255, 255, 255, 0.5); + width: 16px; + height: 16px; + position: fixed; + z-index: 9999999999; + pointer-events: none; + border-radius: 100%; + box-shadow: 0px 0px 0px 2px #c8c8c8; + top: 0; + left: 0; + display: none; +} +.keybinds-page .md-option-header { + padding: 10px 0px; + border-bottom: unset; + border-top: unset; + font-weight: 600; + background: rgba(255, 255, 255, 0); + font-size: 2em; +} +.keybinds-page .md-option-header-sub { + padding: 15px 10px; + border-bottom: unset; + border-top: unset; + background: rgba(255, 255, 255, 0); + font-weight: 600; + font-size: 1.7em; +} +.keybinds-page .md-option-line { + padding: 15px 20px; + font-size: 0.9em; +} +.content-inner.keybinds-page { + top: var(--navigationBarHeight); + padding: 15px; +} +body[platform="darwin"] html { + background: transparent!important; +} +body[platform="darwin"].notransparency::before { + display: none; +} +body[platform="darwin"] #app.simplebg { + background: transparent; +} +body[platform="darwin"] #app::before { + display: none; +} +body[platform="darwin"] #app .app-chrome { + background-color: var(--macOSChromeColor); +} +body[platform="darwin"] #app.twopanel { + --chromeHeight1: 55px; + --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2)); +} +body[platform="darwin"] #app.twopanel .app-chrome .app-chrome-item.search { + margin-right: 12px; +} +body[platform="darwin"] #app.twopanel .app-chrome .app-mainmenu { + width: 46px; +} +body[platform="darwin"] #app.twopanel .app-chrome.chrome-bottom { + background-color: var(--macOSChromeColor); +} +body[platform="darwin"] #app-main { + background-color: transparent; +} +body[platform="darwin"] #app-main .app-navigation { + background: transparent; +} +body[platform="darwin"] #app-main #app-content { + background-color: #1e1e1e6b; +} +body[platform="darwin"] #apple-music-video-player-controls #player-exit { + margin-top: 18px; + left: 70px; +} +body[platform="linux"] .window-controls { + justify-content: flex-end; + align-items: center; + padding-right: 6px; +} +body[platform="linux"] .window-controls > div { + --iconSize: 16px; +} +body[platform="linux"] .window-controls > div.close, +body[platform="linux"] .window-controls > div.minmax, +body[platform="linux"] .window-controls > div.minimize, +body[platform="linux"] .window-controls > div.minmax.restore { + background-image: unset!important; + position: relative; + display: grid; + align-content: center; + text-align: center; + height: 36px!important; + width: 36px!important; + border-radius: 50px; + transition: background-color 0.1s ease-in-out; +} +body[platform="linux"] .window-controls > div.close:hover, +body[platform="linux"] .window-controls > div.minmax:hover, +body[platform="linux"] .window-controls > div.minimize:hover, +body[platform="linux"] .window-controls > div.minmax.restore:hover { + background: rgba(200, 200, 200, 0.1) !important; +} +body[platform="linux"] .window-controls > div.close::before { + font-family: "codicon"; + font-size: var(--iconSize); + content: ""; +} +body[platform="linux"] .window-controls > div.minmax::before { + font-family: "codicon"; + font-size: var(--iconSize); + content: ""; +} +body[platform="linux"] .window-controls > div.minimize::before { + font-family: "codicon"; + font-size: var(--iconSize); + content: ""; +} +body[platform="linux"] .window-controls > div.restore::before { + font-family: "codicon"; + font-size: var(--iconSize); + content: ""; +} +#app.compact .content-inner { + zoom: 0.95; +} +#app.compact .app-sidebar-content { + padding: 0px; +} +#app.compact .app-sidebar-content .app-sidebar-header-text { + padding: 6px 10px; + margin: 0px; +} +#app.compact .app-sidebar-content .app-sidebar-item { + display: flex; + width: 100%; + padding: 8px 12px; + font-size: 13px; + margin: 0px; + border: 1px solid transparent; + border-radius: 0px; + transition: unset; + transform: unset; +} +#app.compact .app-sidebar-content .app-sidebar-item:active { + background: var(--selected-click); +} +#app.compact .app-sidebar-content .app-sidebar-item::after { + display: none; +} +#app.compact .app-sidebar-content .app-sidebar-item.active { + background: var(--keyColor-disabled); +} +#app.compact .app-sidebar-content .sidebar-icon { + width: 14px; + height: 16px; + margin-right: 8px; +} +#app.compact .app-sidebar-content .folder-body { + border-radius: 0px; + padding: 0px; +} +#app.navbar { + --navigationBarHeight: 38px; +} +#app.twopanel { + --chromeHeight1: 46px; + --chromeHeight2: 90px; + --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2)); +} +#app.twopanel .modular-fs .app-drawer .lyric-footer { + bottom: var(--chromeHeight2); +} +#app.twopanel .app-chrome { + height: var(--chromeHeight1); +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center { + flex: 1; +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group { + background: #1e1e1e99; + border: 1px solid #323232; + border-radius: 12px; + display: flex; + height: 32px; +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item { + background-color: #1e1e1e00; + border-radius: 10px !important; + border: 0px; + min-width: 120px; + padding: 6px; + justify-content: center; + align-items: center; + margin: 0px; + height: 100%; + position: relative; +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item:before { + --dist: 1px; + content: ''; + position: absolute; + top: var(--dist); + left: var(--dist); + right: var(--dist); + bottom: var(--dist); + background-color: #fff; + opacity: 0; + border-radius: 10px; + transform: scale(0.5); + transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item:after { + display: none; +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item:hover { + background-color: transparent; +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item:hover:before { + transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; + opacity: 0.1; + transform: scale(1); +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item.active { + background-color: transparent; +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item.active:before { + opacity: 0.2; + transform: scale(1); +} +#app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item.md-btn-primary { + box-shadow: 0px 0px 0px 1px #323232; + background-color: #2b2b2b; + z-index: 1; +} +#app.twopanel .app-chrome .app-mainmenu { + width: 30px; + height: 30px; +} +#app.twopanel .app-chrome .search-input { + width: 180px; +} +#app.twopanel .app-chrome.chrome-bottom { + background: var(--color2); + -webkit-app-region: no-drag; + height: var(--chromeHeight2); + box-shadow: 0px -2px 6px rgba(20, 20, 20, 0.12), 0px -1px 0px 0px rgba(200, 200, 200, 0.12); + z-index: 4; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome-playback-duration-bottom { + width: 100%; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome-playback-duration-bottom .col { + display: flex; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome-playback-duration-bottom .col-sm-auto { + width: 4em; + display: flex; + justify-content: center; + align-items: center; + font-size: 0.8em; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome-playback-duration-bottom input[type=range] { + appearance: none; + width: 100%; + height: 5px; + background-color: rgba(200, 200, 200, 0.1); + border-radius: 6px; + box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%); + align-self: center; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome-playback-duration-bottom input[type=range]::-webkit-slider-thumb { + opacity: 0; + transform: scale(1); + -webkit-appearance: none; + appearance: none; + width: 16px; + height: 16px; + border-radius: 100%; + background: var(--keyColor); + cursor: default; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome-playback-duration-bottom input[type=range]:hover::-webkit-slider-thumb { + opacity: 1; +} +#app.twopanel .app-sidebar-footer--controls { + display: none !important; +} +#app.twopanel .app-chrome.chrome-bottom { + -webkit-app-region: no-drag; +} +#app.twopanel .app-chrome.chrome-bottom .app-playback-controls .actions { + align-self: center; +} +#app.twopanel .app-chrome.chrome-bottom .playback-button.play, +#app.twopanel .app-chrome.chrome-bottom .playback-button.pause, +#app.twopanel .app-chrome.chrome-bottom .playback-button.stop { + width: 42px; + height: 42px; + border-radius: 50%; + margin: 6px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center { + display: flex; + flex-direction: column; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-controls { + display: flex; + z-index: 1; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration { + position: relative; + width: 80%; + -webkit-app-region: no-drag; + height: 16px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress { + height: 16px; + position: absolute; + bottom: 4px; + left: 0px; + right: 4px; + background: transparent; + z-index: 0; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress .song-duration { + display: flex; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress .song-duration p { + font-weight: 400; + font-size: 10px; + height: 1.2em; + line-height: 1.3em; + overflow: hidden; + margin: 0 0 0 0.25em; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress:hover > input[type=range]::-webkit-slider-thumb { + opacity: 1; + transform: scale(1); + z-index: 1; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress input[type=range] { + appearance: none; + width: 100%; + height: 4px; + background-color: rgba(200, 200, 200, 0.1); + border-radius: 2px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--center .app-chrome-playback-duration .song-progress input[type=range]::-webkit-slider-thumb { + opacity: 0; + transform: scale(0.5); + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 100%; + background: var(--keyColor); + cursor: default; + transition: opacity 0.1s var(--appleEase), transform 0.1s var(--appleEase); +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left { + width: 30%; + justify-content: flex-start; + align-items: flex-start; + -webkit-app-region: no-drag !important; + flex: 0 0 auto; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls { + -webkit-app-region: no-drag !important; + width: 100%; + height: 100%; + max-width: 100%; + border: 0px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .artwork { + --offset: 20px; + --marginOffset: 2; + --size: calc(var(--chromeHeight2) - var(--offset)); + width: var(--size); + height: var(--size); + margin: 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset)); +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .artwork .mediaitem-artwork, +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .artwork img { + border-radius: calc(var(--mediaItemRadius) / 2); +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info { + align-items: flex-start; + margin: 6px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .song-name { + text-align: left; + font-size: 0.8em; + font-weight: 500; + width: 100%; + -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%); +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .song-artist, +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .song-album { + font-size: 0.75em; + opacity: 0.8; + cursor: pointer; + white-space: nowrap; + max-width: 360px; + -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%); + width: 100%; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .song-artist:hover, +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .song-album:hover { + text-decoration: underline; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .audio-type { + margin: 0px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--left .playback-controls .playback-info .song-artist-album-content { + text-align: left; + font-size: 12px; +} +#app.twopanel .app-chrome.chrome-bottom .app-chrome--right { + width: 30%; + flex: 0 0 auto; + padding-right: 8px; +} +#app.twopanel .collection-page .top-fab { + bottom: 96px; +} +@media (max-width: 1100px) { + #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center { + flex: unset; + } + #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item { + min-width: 110px; + } + #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item .sidebar-item-text { + display: none; + } + #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item .sidebar-icon { + margin: 0px; + } +} +@media (max-width: 1000px) { + #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center { + flex: unset; + } + #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item { + min-width: 60px; + } + #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item .sidebar-item-text { + display: none; + } + #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item .sidebar-icon { + margin: 0px; + } +} +#app.macosemu .app-chrome .app-chrome-item > .window-controls-macos { + display: flex; + justify-content: center; + align-items: center; + width: 96px; +} +#app.macosemu .app-chrome .app-chrome-item > .window-controls-macos div { + margin: 4px; + background-color: red; + border-radius: 100%; + flex: 0 0 auto; + background-image: unset !important; +} +#app.macosemu .app-chrome .app-chrome-item > .window-controls-macos div.close { + box-shadow: 0px 0px 0px 1px #420000; + background-color: #ff5c5c; + width: 12px; + height: 12px; +} +#app.macosemu .app-chrome .app-chrome-item > .window-controls-macos div.minimize { + box-shadow: 0px 0px 0px 1px #322000; + background-color: #ffbd4c; + width: 12px; + height: 12px; +} +#app.macosemu .app-chrome .app-chrome-item > .window-controls-macos div.minmax { + box-shadow: 0px 0px 0px 1px #0b260b; + background-color: #4dca4d; + width: 12px; + height: 12px; +} +#app.macosemu .usermenu-body { + left: calc(100vw - 260px); + position: relative; +} diff --git a/src/renderer/style.less b/src/renderer/style.less index 0d986506..f9b394e8 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -2080,6 +2080,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { justify-content: center; align-items: center; + .app-content-container { + width:100%; + height:100%; + #app-content { + width:100%; + height:100%; + } + } + + + + .fs-row { flex-grow: 0.5; } diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs index 6380283d..1d191de3 100644 --- a/src/renderer/views/components/fullscreen.ejs +++ b/src/renderer/views/components/fullscreen.ejs @@ -12,7 +12,7 @@ -
+
- +
@@ -138,11 +138,17 @@ +
+ +
+
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index 9b5aad5d..e17c11d9 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -15,8 +15,8 @@ Cider - - + " type="text/css" href="style.<%- (env.dev ? "css" : "less") %>"/> +