@color-switch-active: #a1141c; @color-switch-partially-active-color: lighten(#a1141c, 10%); @color-switch-required: gray; @color-link: #a1141c; @color-background: #fff; @color-font: #58585a; @color-button: #a1141c; @color-accept-all-button-text: white; @color-accept-button-text: #58585a; @color-decline-button-text: #58585a; .inwarecc { font-family: inherit; font-size: 14px; } .inwarecc button { font-family: inherit; font-size: 14px; } .inwarecc.cm-as-context-notice { height: 100%; padding-bottom: 12px; padding-top: 12px; } .inwarecc .cookie-modal, .inwarecc .context-notice, .inwarecc .cookie-notice { /* The switch - the box around the slider */ } .inwarecc .cookie-modal .cm-switch-container, .inwarecc .context-notice .cm-switch-container, .inwarecc .cookie-notice .cm-switch-container { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #c8c8c8; display: block; position: relative; padding: 10px; padding-left: 66px; line-height: 20px; vertical-align: middle; min-height: 40px; } .inwarecc .cookie-modal .cm-switch-container:last-child, .inwarecc .context-notice .cm-switch-container:last-child, .inwarecc .cookie-notice .cm-switch-container:last-child { border-bottom: 0; } .inwarecc .cookie-modal .cm-switch-container:first-child, .inwarecc .context-notice .cm-switch-container:first-child, .inwarecc .cookie-notice .cm-switch-container:first-child { margin-top: 0; } .inwarecc .cookie-modal .cm-switch-container p, .inwarecc .context-notice .cm-switch-container p, .inwarecc .cookie-notice .cm-switch-container p { margin-top: 0; } .inwarecc .cookie-modal .cm-switch, .inwarecc .context-notice .cm-switch, .inwarecc .cookie-notice .cm-switch { position: relative; display: inline-block; width: 50px; height: 30px; } .inwarecc .cookie-modal .cm-list-input:checked + .cm-list-label .slider, .inwarecc .context-notice .cm-list-input:checked + .cm-list-label .slider, .inwarecc .cookie-notice .cm-list-input:checked + .cm-list-label .slider { background-color: @color-switch-active; } .inwarecc .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider, .inwarecc .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider, .inwarecc .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider { background-color: @color-switch-partially-active-color; opacity: 0.6; } .inwarecc .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider::before, .inwarecc .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before, .inwarecc .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before { -ms-transform: translateX(10px); transform: translateX(10px); } .inwarecc .cookie-modal .cm-list-input.only-required + .cm-list-label .slider, .inwarecc .context-notice .cm-list-input.only-required + .cm-list-label .slider, .inwarecc .cookie-notice .cm-list-input.only-required + .cm-list-label .slider { background-color: @color-switch-required; opacity: 0.8; } .inwarecc .cookie-modal .cm-list-input.only-required + .cm-list-label .slider::before, .inwarecc .context-notice .cm-list-input.only-required + .cm-list-label .slider::before, .inwarecc .cookie-notice .cm-list-input.only-required + .cm-list-label .slider::before { -ms-transform: translateX(10px); transform: translateX(10px); } .inwarecc .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider, .inwarecc .context-notice .cm-list-input.required:checked + .cm-list-label .slider, .inwarecc .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider { background-color: @color-switch-required; opacity: 0.8; cursor: not-allowed; } .inwarecc .cookie-modal .slider, .inwarecc .context-notice .slider, .inwarecc .cookie-notice .slider { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19); } .inwarecc .cookie-modal .cm-list-input, .inwarecc .context-notice .cm-list-input, .inwarecc .cookie-notice .cm-list-input { position: absolute; top: 0; left: 0; opacity: 0; width: 50px; height: 30px; } .inwarecc .cookie-modal .cm-list-title, .inwarecc .context-notice .cm-list-title, .inwarecc .cookie-notice .cm-list-title { font-size: 0.9em; font-weight: 600; } .inwarecc .cookie-modal .cm-list-description, .inwarecc .context-notice .cm-list-description, .inwarecc .cookie-notice .cm-list-description { color: @color-font; font-size: 0.9em; padding-top: 4px; } .inwarecc .cookie-modal .cm-list-label, .inwarecc .context-notice .cm-list-label, .inwarecc .cookie-notice .cm-list-label { /* The slider */ /* Rounded sliders */ } .inwarecc .cookie-modal .cm-list-label .cm-switch, .inwarecc .context-notice .cm-list-label .cm-switch, .inwarecc .cookie-notice .cm-list-label .cm-switch { position: absolute; left: 0; } .inwarecc .cookie-modal .cm-list-label .slider, .inwarecc .context-notice .cm-list-label .slider, .inwarecc .cookie-notice .cm-list-label .slider { background-color: #f2f2f2; position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; transition: 0.4s; width: 50px; display: inline-block; } .inwarecc .cookie-modal .cm-list-label .slider::before, .inwarecc .context-notice .cm-list-label .slider::before, .inwarecc .cookie-notice .cm-list-label .slider::before { background-color: #e6e6e6; position: absolute; content: ''; height: 20px; width: 20px; left: 5px; bottom: 5px; transition: 0.4s; } .inwarecc .cookie-modal .cm-list-label .slider.round, .inwarecc .context-notice .cm-list-label .slider.round, .inwarecc .cookie-notice .cm-list-label .slider.round { border-radius: 30px; } .inwarecc .cookie-modal .cm-list-label .slider.round::before, .inwarecc .context-notice .cm-list-label .slider.round::before, .inwarecc .cookie-notice .cm-list-label .slider.round::before { border-radius: 50%; } .inwarecc .cookie-modal .cm-list-label input:focus + .slider, .inwarecc .context-notice .cm-list-label input:focus + .slider, .inwarecc .cookie-notice .cm-list-label input:focus + .slider { box-shadow-color: #9c9c9c; box-shadow: 0 0 1px #9c9c9c; } .inwarecc .cookie-modal .cm-list-label input:checked + .slider::before, .inwarecc .context-notice .cm-list-label input:checked + .slider::before, .inwarecc .cookie-notice .cm-list-label input:checked + .slider::before { -ms-transform: translateX(20px); transform: translateX(20px); } .inwarecc .cookie-modal .cm-list-input:focus + .cm-list-label .slider, .inwarecc .context-notice .cm-list-input:focus + .cm-list-label .slider, .inwarecc .cookie-notice .cm-list-input:focus + .cm-list-label .slider { box-shadow: 0 4px 6px 0 rgba(125, 125, 125, 0.2), 5px 5px 10px 0 rgba(125, 125, 125, 0.19); } .inwarecc .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before, .inwarecc .context-notice .cm-list-input:checked + .cm-list-label .slider::before, .inwarecc .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before { -ms-transform: translateX(20px); transform: translateX(20px); } .inwarecc .cookie-modal .slider, .inwarecc .context-notice .slider, .inwarecc .cookie-notice .slider { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19); } .inwarecc .cookie-modal a, .inwarecc .context-notice a, .inwarecc .cookie-notice a { color: @color-link; text-decoration: none; } .inwarecc .cookie-modal p, .inwarecc .cookie-modal strong, .inwarecc .cookie-modal h1, .inwarecc .cookie-modal h2, .inwarecc .cookie-modal ul, .inwarecc .cookie-modal li, .inwarecc .context-notice p, .inwarecc .context-notice strong, .inwarecc .context-notice h1, .inwarecc .context-notice h2, .inwarecc .context-notice ul, .inwarecc .context-notice li, .inwarecc .cookie-notice p, .inwarecc .cookie-notice strong, .inwarecc .cookie-notice h1, .inwarecc .cookie-notice h2, .inwarecc .cookie-notice ul, .inwarecc .cookie-notice li { color: @color-font; } .inwarecc .cookie-modal p, .inwarecc .cookie-modal h1, .inwarecc .cookie-modal h2, .inwarecc .cookie-modal ul, .inwarecc .cookie-modal li, .inwarecc .context-notice p, .inwarecc .context-notice h1, .inwarecc .context-notice h2, .inwarecc .context-notice ul, .inwarecc .context-notice li, .inwarecc .cookie-notice p, .inwarecc .cookie-notice h1, .inwarecc .cookie-notice h2, .inwarecc .cookie-notice ul, .inwarecc .cookie-notice li { display: block; text-align: left; margin: 0; padding: 0; margin-top: 0.7em; } .inwarecc .cookie-modal h1, .inwarecc .cookie-modal h2, .inwarecc .cookie-modal h3, .inwarecc .cookie-modal h4, .inwarecc .cookie-modal h5, .inwarecc .cookie-modal h6, .inwarecc .context-notice h1, .inwarecc .context-notice h2, .inwarecc .context-notice h3, .inwarecc .context-notice h4, .inwarecc .context-notice h5, .inwarecc .context-notice h6, .inwarecc .cookie-notice h1, .inwarecc .cookie-notice h2, .inwarecc .cookie-notice h3, .inwarecc .cookie-notice h4, .inwarecc .cookie-notice h5, .inwarecc .cookie-notice h6 { font-family: inherit; } .inwarecc .cookie-modal .cm-link, .inwarecc .context-notice .cm-link, .inwarecc .cookie-notice .cm-link { margin-right: 0.5em; vertical-align: middle; } .inwarecc .cookie-modal .cm-btn, .inwarecc .context-notice .cm-btn, .inwarecc .cookie-notice .cm-btn { color: #fff; background-color: #5c5c5c; border-radius: 4px; margin-right: 0.5em; border-style: none; padding: 0.8em; font-size: 1em; cursor: pointer; transition: background-color 300ms ease-out 100ms; } .inwarecc .cookie-modal .cm-btn:disabled, .inwarecc .context-notice .cm-btn:disabled, .inwarecc .cookie-notice .cm-btn:disabled { opacity: 0.5; } .inwarecc .cookie-modal .cm-btn.cm-btn-close, .inwarecc .context-notice .cm-btn.cm-btn-close, .inwarecc .cookie-notice .cm-btn.cm-btn-close { background-color: #c8c8c8; } .inwarecc .cookie-modal .cm-btn-accept-all, .inwarecc .context-notice .cm-btn-accept-all, .inwarecc .cookie-notice .cm-btn-accept-all { background-color: @color-button; color: @color-accept-all-button-text; &:hover{ background-color: darken(@color-button, 10%); } } .inwarecc .cookie-modal .cm-btn-accept, .inwarecc .context-notice .cm-btn-accept, .inwarecc .cookie-notice .cm-btn-accept { color: @color-accept-button-text; &:hover{ background-color: darken(@color-button, 10%); } } .inwarecc .cookie-modal .cm-btn.cm-btn-success-var, .inwarecc .context-notice .cm-btn.cm-btn-success-var, .inwarecc .cookie-notice .cm-btn.cm-btn-success-var { background-color: @color-switch-active; } .inwarecc .cookie-modal .cm-btn.cm-btn-info, .inwarecc .context-notice .cm-btn.cm-btn-info, .inwarecc .cookie-notice .cm-btn.cm-btn-info { background-color: white; border: 2px solid @color-button; &:hover{ background-color: @color-button; } } .inwarecc .cookie-modal .cm-btn.cm-btn-decline, .inwarecc .context-notice .cm-btn.cm-btn-decline, .inwarecc .cookie-notice .cm-btn.cm-btn-decline { background-color: white; border: 2px solid @color-decline-button-text; color: @color-decline-button-text; &:hover{ background-color: #aeaeae; } } .inwarecc .context-notice { border-radius: 4px; border-style: solid; border-width: 1px; border-color: #c8c8c8; background-color: #fafafa; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; padding: 12px; height: 100%; } .inwarecc .context-notice.cm-dark { background-color: #333; border-color: #5c5c5c; } .inwarecc .context-notice.cm-dark p { color: #fafafa; } .inwarecc .context-notice.cm-dark p a { color: #459cdc; } .inwarecc .context-notice p { color: #333; flex-grow: 0; text-align: center; padding-top: 0; margin-top: 0; } .inwarecc .context-notice p a { color: @color-switch-active; } .inwarecc .context-notice p.cm-buttons { margin-top: 12px; } .inwarecc .cookie-modal { width: 100%; height: 100%; position: fixed; overflow: hidden; left: 0; top: 0; z-index: 1000; } .inwarecc .cookie-modal.cm-embedded { position: relative; height: inherit; width: inherit; left: inherit; right: inherit; z-index: 0; } .inwarecc .cookie-modal.cm-embedded .cm-modal.cm-inwarecc { position: relative; -ms-transform: none; transform: none; } .inwarecc .cookie-modal .cm-bg { background: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; position: fixed; top: 0; left: 0; } .inwarecc .cookie-modal .cm-modal.cm-inwarecc { background-color: @color-background; color: @color-font; z-index: 1001; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19); width: 100%; max-height: 98%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); position: fixed; overflow: auto; } @media (min-width: 660px) { .inwarecc .cookie-modal .cm-modal.cm-inwarecc { border-radius: 4px; position: relative; margin: 0 auto; max-width: 640px; height: auto; width: auto; } } .inwarecc .cookie-modal .cm-modal .hide { border-style: none; background: none; cursor: pointer; position: absolute; top: 20px; right: 20px; z-index: 1; } .inwarecc .cookie-modal .cm-modal .hide svg { stroke: #000; } .inwarecc .cookie-modal .cm-modal .cm-footer { border-top-color: #5c5c5c; border-top-width: 1px; border-top-style: solid; padding: 1em; } .inwarecc .cookie-modal .cm-modal .cm-footer-buttons { display: flex; flex-flow: row; justify-content: space-between; } .inwarecc .cookie-modal .cm-modal .cm-footer .cm-powered-by { font-size: 0.8em; padding-top: 4px; text-align: right; padding-right: 8px; } .inwarecc .cookie-modal .cm-modal .cm-footer .cm-powered-by a { color: #5c5c5c; } .inwarecc .cookie-modal .cm-modal .cm-header { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #5c5c5c; padding: 1em; padding-right: 24px; } .inwarecc .cookie-modal .cm-modal .cm-header h1 { margin: 0; font-size: 2em; display: block; } .inwarecc .cookie-modal .cm-modal .cm-header h1.title { padding-right: 20px; } .inwarecc .cookie-modal .cm-modal .cm-body { padding: 1em; } .inwarecc .cookie-modal .cm-modal .cm-body ul { display: block; } .inwarecc .cookie-modal .cm-modal .cm-body span { display: inline-block; width: auto; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes { padding: 0; margin: 0; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-caret, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret { color: #a0a0a0; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content { margin-left: -40px; display: none; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content.expanded, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content.expanded { margin-top: 10px; display: block; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose { position: relative; line-height: 20px; vertical-align: middle; padding-left: 60px; min-height: 40px; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service:first-child, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose:first-child, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service:first-child, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose:first-child { margin-top: 0; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p { margin-top: 0; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p.purposes, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes { color: #a0a0a0; font-size: 0.8em; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service.cm-toggle-all, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose.cm-toggle-all, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service.cm-toggle-all, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all { border-top-width: 1px; border-top-style: solid; border-top-color: #5c5c5c; padding-top: 1em; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-list-title, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-list-title, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-list-title, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-list-title { font-weight: 600; white-space: nowrap; } .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-opt-out, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out, .inwarecc .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required { color: #5c5c5c; padding-left: 0.2em; font-size: 0.8em; } .inwarecc .cookie-notice:not(.cookie-modal-notice) { background-color: @color-background; z-index: 999; position: fixed; width: 100%; bottom: 0; right: 0; } @media (min-width: 1024px) { .inwarecc .cookie-notice:not(.cookie-modal-notice) { border-radius: 4px; position: fixed; right: 20px; left: auto; bottom: 20px; top: auto; max-width: 400px; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19); } } @media (max-width: 1023px) { .inwarecc .cookie-notice:not(.cookie-modal-notice) { border-style: none; border-radius: 0; } } .inwarecc .cookie-notice:not(.cookie-modal-notice).cn-embedded { position: relative; height: inherit; width: inherit; left: inherit; right: inherit; bottom: inherit; z-index: 0; } .inwarecc .cookie-notice:not(.cookie-modal-notice).cn-embedded .cn-body { padding-top: 0.5em; } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body { margin-bottom: 0; margin-right: 0; bottom: 0; padding: 1em; padding-top: 0; } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body p { margin-bottom: 0.5em; } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body p.cn-changes { text-decoration: underline; } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more { display: inline-block; flex-grow: 1; } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { display: inline-block; margin-top: -0.5em; } @media (max-width: 384px) { .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { width: 100%; } } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn { margin-top: 0.5em; } @media (max-width: 384px) { .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn { width: calc(50% - 0.5em); } } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { margin-top: -0.5em; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: right; align-items: baseline; } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a, .inwarecc .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div { margin-top: 0.5em; } .inwarecc .cookie-modal-notice { background-color: @color-background; color: #fafafa; z-index: 1001; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19); width: 100%; max-height: 98%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); position: fixed; overflow: auto; padding: 1em; padding-top: 0.2em; } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cm-btn-success{ background-color: @color-button; color: @color-accept-all-button-text; &:hover{ background-color: darken(@color-button, 10%); } } .inwarecc .cookie-notice:not(.cookie-modal-notice) .cm-btn-danger{ background-color: #fff; color: #000; border: 2px solid #000; &:hover{ background-color: #aeaeae; } } @media (min-width: 400px) { .inwarecc .cookie-modal-notice { border-radius: 4px; position: relative; margin: 0 auto; max-width: 400px; height: auto; width: auto; } } .cookieString{ color: #a0a0a0; } .inwarecc .cookie-modal-notice .cn-ok { display: flex; flex-flow: row; justify-content: space-between; align-items: center; margin-top: 1em; } .cm-body ul li:before{ content: initial; } .cm-body ul li{ text-indent: 0; } @media screen and (min-width: 400px) { .cm-body { max-height: 50vh; overflow-y: scroll; } } .cm-body::-webkit-scrollbar { width: 8px; } .cm-body::-webkit-scrollbar-thumb { background-color: #888; } .cm-body::-webkit-scrollbar-thumb:hover { background-color: #555; } .cm-body::-webkit-scrollbar-track { background-color: #f1f1f1; } .cm-body::-webkit-scrollbar-track:hover { background-color: #ddd; }