/*!***************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/cropperjs/dist/cropper.min.css?ngGlobalStyle ***! \***************************************************************************************************************************************************************************************************************************************************/ /*! * Cropper.js v1.6.3 * https://fengyuanchen.github.io/cropperjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2026-08-23T09:24:55.184Z */.cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed} /*!**************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/pdfjs-dist/web/pdf_viewer.css?ngGlobalStyle ***! \**************************************************************************************************************************************************************************************************************************************************/ /* Copyright 2014 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .messageBar{ --closing-button-icon:url('messageBar_closingButton.svg'); --message-bar-close-button-color:var(--text-primary-color); --message-bar-close-button-color-hover:var(--text-primary-color); --message-bar-close-button-border-radius:4px; --message-bar-close-button-border:none; --message-bar-close-button-hover-bg-color:rgb(21 20 26 / 0.14); --message-bar-close-button-active-bg-color:rgb(21 20 26 / 0.21); --message-bar-close-button-focus-bg-color:rgb(21 20 26 / 0.07); } @media (prefers-color-scheme: dark){ .messageBar{ --message-bar-close-button-hover-bg-color:rgb(251 251 254 / 0.14); --message-bar-close-button-active-bg-color:rgb(251 251 254 / 0.21); --message-bar-close-button-focus-bg-color:rgb(251 251 254 / 0.07); } } @media screen and (forced-colors: active){ .messageBar{ --message-bar-close-button-color:ButtonText; --message-bar-close-button-border:1px solid ButtonText; --message-bar-close-button-hover-bg-color:ButtonText; --message-bar-close-button-active-bg-color:ButtonText; --message-bar-close-button-focus-bg-color:ButtonText; --message-bar-close-button-color-hover:HighlightText; } } .messageBar{ display:flex; position:relative; padding:8px 8px 8px 16px; flex-direction:column; justify-content:center; align-items:center; gap:8px; -webkit-user-select:none; user-select:none; border-radius:4px; border:1px solid var(--message-bar-border-color); background:var(--message-bar-bg-color); color:var(--message-bar-fg-color); } .messageBar > div{ display:flex; align-items:flex-start; gap:8px; align-self:stretch; } :is(.messageBar > div)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--message-bar-icon); mask-image:var(--message-bar-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--message-bar-icon-color); flex-shrink:0; } .messageBar button{ cursor:pointer; } :is(.messageBar button):focus-visible{ outline:var(--focus-ring-outline); outline-offset:2px; } .messageBar .closeButton{ width:32px; height:32px; background:none; border-radius:var(--message-bar-close-button-border-radius); border:var(--message-bar-close-button-border); display:flex; align-items:center; justify-content:center; } :is(.messageBar .closeButton)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--closing-button-icon); mask-image:var(--closing-button-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--message-bar-close-button-color); } :is(.messageBar .closeButton):is(:hover,:active,:focus)::before{ background-color:var(--message-bar-close-button-color-hover); } :is(.messageBar .closeButton):hover{ background-color:var(--message-bar-close-button-hover-bg-color); } :is(.messageBar .closeButton):active{ background-color:var(--message-bar-close-button-active-bg-color); } :is(.messageBar .closeButton):focus{ background-color:var(--message-bar-close-button-focus-bg-color); } :is(.messageBar .closeButton) > span{ display:inline-block; width:0; height:0; overflow:hidden; } #editorUndoBar{ --text-primary-color:#15141a; --message-bar-icon:url('secondaryToolbarButton-documentProperties.svg'); --message-bar-icon-color:#0060df; --message-bar-bg-color:#deeafc; --message-bar-fg-color:var(--text-primary-color); --message-bar-border-color:rgb(0 0 0 / 0.08); --undo-button-bg-color:rgb(21 20 26 / 0.07); --undo-button-bg-color-hover:rgb(21 20 26 / 0.14); --undo-button-bg-color-active:rgb(21 20 26 / 0.21); --undo-button-border:1px solid #0060df; --undo-button-fg-color:var(--message-bar-fg-color); --undo-button-fg-color-hover:var(--undo-button-fg-color); --undo-button-fg-color-active:var(--undo-button-fg-color); } @media (prefers-color-scheme: dark){ #editorUndoBar{ --text-primary-color:#fbfbfe; --message-bar-icon-color:#73a7f3; --message-bar-bg-color:#003070; --message-bar-border-color:rgb(255 255 255 / 0.08); --undo-button-bg-color:rgb(255 255 255 / 0.08); --undo-button-bg-color-hover:rgb(255 255 255 / 0.14); --undo-button-bg-color-active:rgb(255 255 255 / 0.21); --undo-button-border:1px solid #0df; } } @media screen and (forced-colors: active){ #editorUndoBar{ --text-primary-color:CanvasText; --message-bar-icon-color:CanvasText; --message-bar-bg-color:Canvas; --message-bar-border-color:CanvasText; --undo-button-bg-color:ButtonText; --undo-button-bg-color-hover:SelectedItem; --undo-button-bg-color-active:SelectedItem; --undo-button-fg-color:ButtonFace; --undo-button-fg-color-hover:SelectedItemText; --undo-button-fg-color-active:SelectedItemText; --undo-button-border:none; } } #editorUndoBar{ position:fixed; top:50px; left:50%; transform:translateX(-50%); z-index:10; padding-block:8px; padding-inline:16px 8px; font:menu; font-size:15px; cursor:default; } #editorUndoBar button{ cursor:pointer; } #editorUndoBar #editorUndoBarUndoButton{ border-radius:4px; font-weight:590; line-height:19.5px; color:var(--undo-button-fg-color); border:var(--undo-button-border); padding:4px 16px; margin-inline-start:8px; height:32px; background-color:var(--undo-button-bg-color); } :is(#editorUndoBar #editorUndoBarUndoButton):hover{ background-color:var(--undo-button-bg-color-hover); color:var(--undo-button-fg-color-hover); } :is(#editorUndoBar #editorUndoBarUndoButton):active{ background-color:var(--undo-button-bg-color-active); color:var(--undo-button-fg-color-active); } #editorUndoBar > div{ align-items:center; } .dialog{ --dialog-bg-color:white; --dialog-border-color:white; --dialog-shadow:0 2px 14px 0 rgb(58 57 68 / 0.2); --text-primary-color:#15141a; --text-secondary-color:#5b5b66; --hover-filter:brightness(0.9); --link-fg-color:#0060df; --link-hover-fg-color:#0250bb; --separator-color:#f0f0f4; --textarea-border-color:#8f8f9d; --textarea-bg-color:white; --textarea-fg-color:var(--text-secondary-color); --radio-bg-color:#f0f0f4; --radio-checked-bg-color:#fbfbfe; --radio-border-color:#8f8f9d; --radio-checked-border-color:#0060df; --button-secondary-bg-color:rgb(21 20 26 / 0.07); --button-secondary-fg-color:var(--text-primary-color); --button-secondary-border-color:var(--button-secondary-bg-color); --button-secondary-active-bg-color:rgb(21 20 26 / 0.21); --button-secondary-active-fg-color:var(--button-secondary-fg-color); --button-secondary-active-border-color:var(--button-secondary-bg-color); --button-secondary-hover-bg-color:rgb(21 20 26 / 0.14); --button-secondary-hover-fg-color:var(--button-secondary-fg-color); --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color); --button-primary-bg-color:#0060df; --button-primary-fg-color:#fbfbfe; --button-primary-border-color:var(--button-primary-bg-color); --button-primary-active-bg-color:#054096; --button-primary-active-fg-color:var(--button-primary-fg-color); --button-primary-active-border-color:var(--button-primary-active-bg-color); --button-primary-hover-bg-color:#0250bb; --button-primary-hover-fg-color:var(--button-primary-fg-color); --button-primary-hover-border-color:var(--button-primary-hover-bg-color); --button-disabled-bg-color:color-mix(in srgb, currentcolor, transparent 60%); --button-disabled-fg-color:var(--button-disabled-bg-color); --input-text-bg-color:white; --input-text-fg-color:var(--text-primary-color); } @media (prefers-color-scheme: dark){ .dialog{ --dialog-bg-color:#1c1b22; --dialog-border-color:#1c1b22; --dialog-shadow:0 2px 14px 0 #15141a; --text-primary-color:#fbfbfe; --text-secondary-color:#cfcfd8; --hover-filter:brightness(1.4); --link-fg-color:#0df; --link-hover-fg-color:#80ebff; --separator-color:#52525e; --textarea-bg-color:#42414d; --radio-bg-color:#2b2a33; --radio-checked-bg-color:#15141a; --radio-checked-border-color:#0df; --button-secondary-bg-color:rgb(251 251 254 / 0.07); --button-secondary-active-bg-color:rgb(251 251 254 / 0.21); --button-secondary-hover-bg-color:rgb(251 251 254 / 0.14); --button-primary-bg-color:#0df; --button-primary-fg-color:#15141a; --button-primary-active-bg-color:#aaf2ff; --button-primary-hover-bg-color:#80ebff; --input-text-bg-color:#42414d; } } @media screen and (forced-colors: active){ .dialog{ --dialog-bg-color:Canvas; --dialog-border-color:CanvasText; --dialog-shadow:none; --text-primary-color:CanvasText; --text-secondary-color:CanvasText; --hover-filter:none; --link-fg-color:LinkText; --link-hover-fg-color:LinkText; --separator-color:CanvasText; --textarea-border-color:ButtonBorder; --textarea-bg-color:Field; --textarea-fg-color:ButtonText; --radio-bg-color:ButtonFace; --radio-checked-bg-color:ButtonFace; --radio-border-color:ButtonText; --radio-checked-border-color:ButtonText; --button-secondary-bg-color:HighlightText; --button-secondary-fg-color:ButtonText; --button-secondary-border-color:ButtonText; --button-secondary-active-bg-color:HighlightText; --button-secondary-active-fg-color:SelectedItem; --button-secondary-active-border-color:ButtonText; --button-secondary-hover-bg-color:HighlightText; --button-secondary-hover-fg-color:SelectedItem; --button-secondary-hover-border-color:SelectedItem; --button-primary-bg-color:ButtonText; --button-primary-fg-color:HighlightText; --button-primary-border-color:ButtonText; --button-primary-active-bg-color:SelectedItem; --button-primary-active-fg-color:HighlightText; --button-primary-active-border-color:ButtonText; --button-primary-hover-bg-color:SelectedItem; --button-primary-hover-fg-color:HighlightText; --button-primary-hover-border-color:SelectedItem; --button-disabled-bg-color:GrayText; --button-disabled-fg-color:ButtonFace; --input-text-bg-color:HighlightText; --input-text-fg-color:FieldText; } } .dialog{ font:message-box; font-size:13px; font-weight:400; line-height:150%; border-radius:4px; padding:12px 16px; border:1px solid var(--dialog-border-color); background:var(--dialog-bg-color); color:var(--text-primary-color); box-shadow:var(--dialog-shadow); } :is(.dialog .mainContainer) *:focus-visible{ outline:var(--focus-ring-outline); outline-offset:2px; } :is(.dialog .mainContainer) .title{ display:flex; width:auto; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:12px; } :is(:is(.dialog .mainContainer) .title) > span{ font-size:13px; font-style:normal; font-weight:590; line-height:150%; } :is(.dialog .mainContainer) .dialogSeparator{ width:100%; height:0; margin-block:4px; border-top:1px solid var(--separator-color); border-bottom:none; } :is(.dialog .mainContainer) .dialogButtonsGroup{ display:flex; gap:12px; align-self:flex-end; } :is(.dialog .mainContainer) .radio{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; } :is(:is(.dialog .mainContainer) .radio) > .radioButton{ display:flex; gap:8px; align-self:stretch; align-items:center; } :is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input{ -webkit-appearance:none; appearance:none; box-sizing:border-box; width:16px; height:16px; border-radius:50%; background-color:var(--radio-bg-color); border:1px solid var(--radio-border-color); } :is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):hover{ filter:var(--hover-filter); } :is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):checked{ background-color:var(--radio-checked-bg-color); border:4px solid var(--radio-checked-border-color); } :is(:is(.dialog .mainContainer) .radio) > .radioLabel{ display:flex; padding-inline-start:24px; align-items:flex-start; gap:10px; align-self:stretch; } :is(:is(:is(.dialog .mainContainer) .radio) > .radioLabel) > span{ flex:1 0 0; font-size:11px; color:var(--text-secondary-color); } :is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton)){ border-radius:4px; border:1px solid; font:menu; font-weight:590; font-size:13px; padding:4px 16px; width:auto; height:32px; } :is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ cursor:pointer; filter:var(--hover-filter); } :is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) > span{ color:inherit; font:inherit; } .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))){ color:var(--button-secondary-fg-color); background-color:var(--button-secondary-bg-color); border-color:var(--button-secondary-border-color); } .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ color:var(--button-secondary-hover-fg-color); background-color:var(--button-secondary-hover-bg-color); border-color:var(--button-secondary-hover-border-color); } .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active{ color:var(--button-secondary-active-fg-color); background-color:var(--button-secondary-active-bg-color); border-color:var(--button-secondary-active-border-color); } .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))){ color:var(--button-primary-fg-color); background-color:var(--button-primary-bg-color); border-color:var(--button-primary-border-color); opacity:1; } .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ color:var(--button-primary-hover-fg-color); background-color:var(--button-primary-hover-bg-color); border-color:var(--button-primary-hover-border-color); } .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active{ color:var(--button-primary-active-fg-color); background-color:var(--button-primary-active-bg-color); border-color:var(--button-primary-active-border-color); } :is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ color:var(--button-disabled-fg-color) !important; background-color:var(--button-disabled-bg-color); border-color:var(--button-disabled-bg-color); pointer-events:none; } :is(.dialog .mainContainer) a{ color:var(--link-fg-color); } :is(:is(.dialog .mainContainer) a):hover{ color:var(--link-hover-fg-color); } :is(.dialog .mainContainer) textarea{ font:inherit; padding:8px; resize:none; margin:0; box-sizing:border-box; border-radius:4px; border:1px solid var(--textarea-border-color); background:var(--textarea-bg-color); color:var(--textarea-fg-color); } :is(:is(.dialog .mainContainer) textarea):focus{ outline-offset:0; border-color:transparent; } :is(:is(.dialog .mainContainer) textarea):disabled{ pointer-events:none; opacity:0.4; } :is(.dialog .mainContainer) input[type="text"]{ background-color:var(--input-text-bg-color); color:var(--input-text-fg-color); } :is(.dialog .mainContainer) .messageBar{ --message-bar-bg-color:#ffebcd; --message-bar-fg-color:#15141a; --message-bar-border-color:rgb(0 0 0 / 0.08); --message-bar-icon:url('messageBar_warning.svg'); --message-bar-icon-color:#cd411e; } @media (prefers-color-scheme: dark){ :is(.dialog .mainContainer) .messageBar{ --message-bar-bg-color:#5a3100; --message-bar-fg-color:#fbfbfe; --message-bar-border-color:rgb(255 255 255 / 0.08); --message-bar-icon-color:#e49c49; } } @media screen and (forced-colors: active){ :is(.dialog .mainContainer) .messageBar{ --message-bar-bg-color:HighlightText; --message-bar-fg-color:CanvasText; --message-bar-border-color:CanvasText; --message-bar-icon-color:CanvasText; } } :is(.dialog .mainContainer) .messageBar{ align-self:stretch; } :is(:is(:is(.dialog .mainContainer) .messageBar) > div)::before,:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ margin-block:4px; } :is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:1 0 0; } :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title{ font-size:13px; font-weight:590; } :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description{ font-size:13px; } :is(.dialog .mainContainer) .toggler{ display:flex; align-items:center; gap:8px; align-self:stretch; } :is(:is(.dialog .mainContainer) .toggler) > .togglerLabel{ -webkit-user-select:none; user-select:none; } .textLayer{ position:absolute; text-align:initial; inset:0; overflow:clip; opacity:1; line-height:1; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; caret-color:CanvasText; z-index:0; } .textLayer.highlighting{ touch-action:none; } .textLayer :is(span,br){ color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; } .textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){ z-index:1; } .textLayer span.markedContent{ top:0; height:0; } .textLayer span[role="img"]{ -webkit-user-select:none; user-select:none; cursor:default; } .textLayer .highlight{ --highlight-bg-color:rgb(180 0 170 / 0.25); --highlight-selected-bg-color:rgb(0 100 0 / 0.25); --highlight-backdrop-filter:none; --highlight-selected-backdrop-filter:none; } @media screen and (forced-colors: active){ .textLayer .highlight{ --highlight-bg-color:transparent; --highlight-selected-bg-color:transparent; --highlight-backdrop-filter:var(--hcm-highlight-filter); --highlight-selected-backdrop-filter:var( --hcm-highlight-selected-filter ); } } .textLayer .highlight{ margin:-1px; padding:1px; background-color:var(--highlight-bg-color); backdrop-filter:var(--highlight-backdrop-filter); border-radius:4px; } .appended:is(.textLayer .highlight){ position:initial; } .begin:is(.textLayer .highlight){ border-radius:4px 0 0 4px; } .end:is(.textLayer .highlight){ border-radius:0 4px 4px 0; } .middle:is(.textLayer .highlight){ border-radius:0; } .selected:is(.textLayer .highlight){ background-color:var(--highlight-selected-bg-color); backdrop-filter:var(--highlight-selected-backdrop-filter); } .textLayer ::selection{ background:rgba(0 0 255 / 0.25); background:color-mix(in srgb, AccentColor, transparent 75%); } .textLayer br::selection{ background:transparent; } .textLayer .endOfContent{ display:block; position:absolute; inset:100% 0 0; z-index:0; cursor:default; -webkit-user-select:none; user-select:none; } .textLayer.selecting .endOfContent{ top:0; } .annotationLayer{ --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); --input-focus-border-color:Highlight; --input-focus-outline:1px solid Canvas; --input-unfocused-border-color:transparent; --input-disabled-border-color:transparent; --input-hover-border-color:black; --link-outline:none; } @media screen and (forced-colors: active){ .annotationLayer{ --input-focus-border-color:CanvasText; --input-unfocused-border-color:ActiveText; --input-disabled-border-color:GrayText; --input-hover-border-color:Highlight; --link-outline:1.5px solid LinkText; } .annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{ outline:1.5px solid selectedItem; } .annotationLayer .linkAnnotation{ outline:var(--link-outline); } :is(.annotationLayer .linkAnnotation):hover{ backdrop-filter:var(--hcm-highlight-filter); } :is(.annotationLayer .linkAnnotation) > a:hover{ opacity:0 !important; background:none !important; box-shadow:none; } .annotationLayer .popupAnnotation .popup{ outline:calc(1.5px * var(--total-scale-factor)) solid CanvasText !important; background-color:ButtonFace !important; color:ButtonText !important; } .annotationLayer .highlightArea:hover::after{ position:absolute; top:0; left:0; width:100%; height:100%; backdrop-filter:var(--hcm-highlight-filter); content:""; pointer-events:none; } .annotationLayer .popupAnnotation.focused .popup{ outline:calc(3px * var(--total-scale-factor)) solid Highlight !important; } } .annotationLayer{ position:absolute; top:0; left:0; pointer-events:none; transform-origin:0 0; } .annotationLayer[data-main-rotation="90"] .norotate{ transform:rotate(270deg) translateX(-100%); } .annotationLayer[data-main-rotation="180"] .norotate{ transform:rotate(180deg) translate(-100%, -100%); } .annotationLayer[data-main-rotation="270"] .norotate{ transform:rotate(90deg) translateY(-100%); } .annotationLayer.disabled section,.annotationLayer.disabled .popup{ pointer-events:none; } .annotationLayer .annotationContent{ position:absolute; width:100%; height:100%; pointer-events:none; } .freetext:is(.annotationLayer .annotationContent){ background:transparent; border:none; inset:0; overflow:visible; white-space:nowrap; font:10px sans-serif; line-height:1.35; } .annotationLayer section{ position:absolute; text-align:initial; pointer-events:auto; box-sizing:border-box; transform-origin:0 0; -webkit-user-select:none; user-select:none; } :is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent{ display:none; } .textLayer.selecting ~ .annotationLayer section{ pointer-events:none; } .annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton) > a{ position:absolute; font-size:1em; top:0; left:0; width:100%; height:100%; } .annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover{ opacity:0.2; background-color:rgb(255 255 0); box-shadow:0 2px 10px rgb(255 255 0); } .annotationLayer .linkAnnotation.hasBorder:hover{ background-color:rgb(255 255 0 / 0.2); } .annotationLayer .hasBorder{ background-size:100% 100%; } .annotationLayer .textAnnotation img{ position:absolute; cursor:pointer; width:100%; height:100%; top:0; left:0; } .annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{ background-image:var(--annotation-unfocused-field-background); border:2px solid var(--input-unfocused-border-color); box-sizing:border-box; font:calc(9px * var(--total-scale-factor)) sans-serif; height:100%; margin:0; vertical-align:top; width:100%; } .annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{ outline:1.5px solid red; } .annotationLayer .choiceWidgetAnnotation select option{ padding:0; } .annotationLayer .buttonWidgetAnnotation.radioButton input{ border-radius:50%; } .annotationLayer .textWidgetAnnotation textarea{ resize:none; } .annotationLayer .textWidgetAnnotation [disabled]:is(input,textarea),.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{ background:none; border:2px solid var(--input-disabled-border-color); cursor:not-allowed; } .annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{ border:2px solid var(--input-hover-border-color); } .annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{ border-radius:2px; } .annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{ background:none; border:2px solid var(--input-focus-border-color); border-radius:2px; outline:var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{ background-image:none; background-color:transparent; } .annotationLayer .buttonWidgetAnnotation.checkBox :focus{ border:2px solid var(--input-focus-border-color); border-radius:2px; outline:var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation.radioButton :focus{ border:2px solid var(--input-focus-border-color); outline:var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{ background-color:CanvasText; content:""; display:block; position:absolute; } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{ height:80%; left:45%; width:1px; } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{ transform:rotate(45deg); } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{ transform:rotate(-45deg); } .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{ border-radius:50%; height:50%; left:25%; top:25%; width:50%; } .annotationLayer .textWidgetAnnotation input.comb{ font-family:monospace; padding-left:2px; padding-right:0; } .annotationLayer .textWidgetAnnotation input.comb:focus{ width:103%; } .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{ -webkit-appearance:none; appearance:none; } .annotationLayer .fileAttachmentAnnotation .popupTriggerArea{ height:100%; width:100%; } .annotationLayer .popupAnnotation{ position:absolute; font-size:calc(9px * var(--total-scale-factor)); pointer-events:none; width:max-content; max-width:45%; height:auto; } .annotationLayer .popup{ background-color:rgb(255 255 153); box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgb(136 136 136); border-radius:calc(2px * var(--total-scale-factor)); outline:1.5px solid rgb(255 255 74); padding:calc(6px * var(--total-scale-factor)); cursor:pointer; font:message-box; white-space:normal; word-wrap:break-word; pointer-events:auto; -webkit-user-select:text; user-select:text; } .annotationLayer .popupAnnotation.focused .popup{ outline-width:3px; } .annotationLayer .popup *{ font-size:calc(9px * var(--total-scale-factor)); } .annotationLayer .popup > .header{ display:inline-block; } .annotationLayer .popup > .header h1{ display:inline; } .annotationLayer .popup > .header .popupDate{ display:inline-block; margin-left:calc(5px * var(--total-scale-factor)); width:-moz-fit-content; width:fit-content; } .annotationLayer .popupContent{ border-top:1px solid rgb(51 51 51); margin-top:calc(2px * var(--total-scale-factor)); padding-top:calc(2px * var(--total-scale-factor)); } .annotationLayer .richText > *{ white-space:pre-wrap; font-size:calc(9px * var(--total-scale-factor)); } .annotationLayer .popupTriggerArea{ cursor:pointer; } .annotationLayer section svg{ position:absolute; width:100%; height:100%; top:0; left:0; } .annotationLayer .annotationTextContent{ position:absolute; width:100%; height:100%; opacity:0; color:transparent; -webkit-user-select:none; user-select:none; pointer-events:none; } :is(.annotationLayer .annotationTextContent) span{ width:100%; display:inline-block; } .annotationLayer svg.quadrilateralsContainer{ contain:strict; width:0; height:0; position:absolute; top:0; left:0; z-index:-1; } :root{ --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); --xfa-focus-outline:auto; } @media screen and (forced-colors: active){ :root{ --xfa-focus-outline:2px solid CanvasText; } .xfaLayer *:required{ outline:1.5px solid selectedItem; } } .xfaLayer{ background-color:transparent; } .xfaLayer .highlight{ margin:-1px; padding:1px; background-color:rgb(239 203 237); border-radius:4px; } .xfaLayer .highlight.appended{ position:initial; } .xfaLayer .highlight.begin{ border-radius:4px 0 0 4px; } .xfaLayer .highlight.end{ border-radius:0 4px 4px 0; } .xfaLayer .highlight.middle{ border-radius:0; } .xfaLayer .highlight.selected{ background-color:rgb(203 223 203); } .xfaPage{ overflow:hidden; position:relative; } .xfaContentarea{ position:absolute; } .xfaPrintOnly{ display:none; } .xfaLayer{ position:absolute; text-align:initial; top:0; left:0; transform-origin:0 0; line-height:1.2; } .xfaLayer *{ color:inherit; font:inherit; font-style:inherit; font-weight:inherit; font-kerning:inherit; letter-spacing:-0.01px; text-align:inherit; text-decoration:inherit; box-sizing:border-box; background-color:transparent; padding:0; margin:0; pointer-events:auto; line-height:inherit; } .xfaLayer *:required{ outline:1.5px solid red; } .xfaLayer div, .xfaLayer svg, .xfaLayer svg *{ pointer-events:none; } .xfaLayer a{ color:blue; } .xfaRich li{ margin-left:3em; } .xfaFont{ color:black; font-weight:normal; font-kerning:none; font-size:10px; font-style:normal; letter-spacing:0; text-decoration:none; vertical-align:0; } .xfaCaption{ overflow:hidden; flex:0 0 auto; } .xfaCaptionForCheckButton{ overflow:hidden; flex:1 1 auto; } .xfaLabel{ height:100%; width:100%; } .xfaLeft{ display:flex; flex-direction:row; align-items:center; } .xfaRight{ display:flex; flex-direction:row-reverse; align-items:center; } :is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){ max-height:100%; } .xfaTop{ display:flex; flex-direction:column; align-items:flex-start; } .xfaBottom{ display:flex; flex-direction:column-reverse; align-items:flex-start; } :is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){ width:100%; } .xfaBorder{ background-color:transparent; position:absolute; pointer-events:none; } .xfaWrapped{ width:100%; height:100%; } :is(.xfaTextfield, .xfaSelect):focus{ background-image:none; background-color:transparent; outline:var(--xfa-focus-outline); outline-offset:-1px; } :is(.xfaCheckbox, .xfaRadio):focus{ outline:var(--xfa-focus-outline); } .xfaTextfield, .xfaSelect{ height:100%; width:100%; flex:1 1 auto; border:none; resize:none; background-image:var(--xfa-unfocused-field-background); } .xfaSelect{ padding-inline:2px; } :is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){ flex:0 1 auto; } .xfaButton{ cursor:pointer; width:100%; height:100%; border:none; text-align:center; } .xfaLink{ width:100%; height:100%; position:absolute; top:0; left:0; } .xfaCheckbox, .xfaRadio{ width:100%; height:100%; flex:0 0 auto; border:none; } .xfaRich{ white-space:pre-wrap; width:100%; height:100%; } .xfaImage{ object-position:left top; object-fit:contain; width:100%; height:100%; } .xfaLrTb, .xfaRlTb, .xfaTb{ display:flex; flex-direction:column; align-items:stretch; } .xfaLr{ display:flex; flex-direction:row; align-items:stretch; } .xfaRl{ display:flex; flex-direction:row-reverse; align-items:stretch; } .xfaTb > div{ justify-content:left; } .xfaPosition{ position:relative; } .xfaArea{ position:relative; } .xfaValignMiddle{ display:flex; align-items:center; } .xfaTable{ display:flex; flex-direction:column; align-items:stretch; } .xfaTable .xfaRow{ display:flex; flex-direction:row; align-items:stretch; } .xfaTable .xfaRlRow{ display:flex; flex-direction:row-reverse; align-items:stretch; flex:1; } .xfaTable .xfaRlRow > div{ flex:1; } :is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){ background:initial; } @media print{ .xfaTextfield, .xfaSelect{ background:transparent; } .xfaSelect{ -webkit-appearance:none; appearance:none; text-indent:1px; text-overflow:""; } } .canvasWrapper svg{ transform:none; } .moving:is(.canvasWrapper svg){ z-index:100000; } [data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ transform:matrix(0, 1, -1, 0, 1, 0); } [data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ transform:matrix(-1, 0, 0, -1, 1, 1); } [data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ transform:matrix(0, -1, 1, 0, 0, 1); } .draw:is(.canvasWrapper svg){ position:absolute; mix-blend-mode:normal; } .draw[data-draw-rotation="90"]:is(.canvasWrapper svg){ transform:rotate(90deg); } .draw[data-draw-rotation="180"]:is(.canvasWrapper svg){ transform:rotate(180deg); } .draw[data-draw-rotation="270"]:is(.canvasWrapper svg){ transform:rotate(270deg); } .highlight:is(.canvasWrapper svg){ --blend-mode:multiply; } @media screen and (forced-colors: active){ .highlight:is(.canvasWrapper svg){ --blend-mode:difference; } } .highlight:is(.canvasWrapper svg){ position:absolute; mix-blend-mode:var(--blend-mode); } .highlight:is(.canvasWrapper svg):not(.free){ fill-rule:evenodd; } .highlightOutline:is(.canvasWrapper svg){ position:absolute; mix-blend-mode:normal; fill-rule:evenodd; fill:none; } .highlightOutline.hovered:is(.canvasWrapper svg):not(.free):not(.selected){ stroke:var(--hover-outline-color); stroke-width:var(--outline-width); } .highlightOutline.selected:is(.canvasWrapper svg):not(.free) .mainOutline{ stroke:var(--outline-around-color); stroke-width:calc( var(--outline-width) + 2 * var(--outline-around-width) ); } .highlightOutline.selected:is(.canvasWrapper svg):not(.free) .secondaryOutline{ stroke:var(--outline-color); stroke-width:var(--outline-width); } .highlightOutline.free.hovered:is(.canvasWrapper svg):not(.selected){ stroke:var(--hover-outline-color); stroke-width:calc(2 * var(--outline-width)); } .highlightOutline.free.selected:is(.canvasWrapper svg) .mainOutline{ stroke:var(--outline-around-color); stroke-width:calc( 2 * (var(--outline-width) + var(--outline-around-width)) ); } .highlightOutline.free.selected:is(.canvasWrapper svg) .secondaryOutline{ stroke:var(--outline-color); stroke-width:calc(2 * var(--outline-width)); } .toggle-button{ --button-background-color:color-mix(in srgb, currentColor 7%, transparent); --button-background-color-hover:color-mix( in srgb, currentColor 14%, transparent ); --button-background-color-active:color-mix( in srgb, currentColor 21%, transparent ); --color-accent-primary:#0060df; --color-accent-primary-hover:#0250bb; --color-accent-primary-active:#054096; --border-radius-circle:9999px; --border-width:1px; --size-item-small:16px; --size-item-large:32px; --color-canvas:white; --background-color-canvas:var(--color-canvas); --border-color-interactive:#8f8f9d; --border-color-interactive-hover:var(--border-color-interactive); --border-color-interactive-active:var(--border-color-interactive); } @media (prefers-color-scheme: dark){ .toggle-button{ --color-accent-primary:#0df; --color-accent-primary-hover:#80ebff; --color-accent-primary-active:#aaf2ff; --color-canvas:#1c1b22; --border-color-interactive:#f9f9fa; } } @media (forced-colors: active){ .toggle-button{ --color-accent-primary:ButtonText; --color-accent-primary-hover:SelectedItem; --color-accent-primary-active:SelectedItem; --button-background-color:ButtonFace; --border-color-interactive:ButtonText; --border-color-interactive-hover:SelectedItem; --border-color-interactive-active:ButtonText; --color-canvas:ButtonText; --background-color-canvas:Canvas; } } .toggle-button{ --toggle-background-color:var(--button-background-color); --toggle-background-color-hover:var(--button-background-color-hover); --toggle-background-color-active:var(--button-background-color-active); --toggle-background-color-pressed:var(--color-accent-primary); --toggle-background-color-pressed-hover:var(--color-accent-primary-hover); --toggle-background-color-pressed-active:var(--color-accent-primary-active); --toggle-border-color:var(--border-color-interactive); --toggle-border-color-hover:var(--toggle-border-color); --toggle-border-color-active:var(--toggle-border-color); --toggle-border-radius:var(--border-radius-circle); --toggle-border-width:var(--border-width); --toggle-height:var(--size-item-small); --toggle-width:var(--size-item-large); --toggle-dot-background-color:var(--toggle-border-color); --toggle-dot-background-color-hover:var(--toggle-dot-background-color); --toggle-dot-background-color-active:var(--toggle-dot-background-color); --toggle-dot-background-color-on-pressed:var(--background-color-canvas); --toggle-dot-margin:1px; --toggle-dot-height:calc( var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) ); --toggle-dot-width:var(--toggle-dot-height); --toggle-dot-transform-x:calc( var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width) ); --input-width:var(--toggle-width); -webkit-appearance:none; appearance:none; padding:0; border:var(--toggle-border-width) solid var(--toggle-border-color); height:var(--toggle-height); width:var(--toggle-width); border-radius:var(--toggle-border-radius); background-color:var(--toggle-background-color); box-sizing:border-box; } .toggle-button:focus-visible{ outline:var(--focus-outline); outline-offset:var(--focus-outline-offset); } .toggle-button:enabled:hover{ background-color:var(--toggle-background-color-hover); border-color:var(--toggle-border-color); } .toggle-button:enabled:hover:active{ background-color:var(--toggle-background-color-active); border-color:var(--toggle-border-color); } .toggle-button::before{ display:block; content:""; background-color:var(--toggle-dot-background-color); height:var(--toggle-dot-height); width:var(--toggle-dot-width); margin:var(--toggle-dot-margin); border-radius:var(--toggle-border-radius); translate:0; } .toggle-button[aria-pressed="true"]{ background-color:var(--toggle-background-color-pressed); border-color:transparent; } .toggle-button[aria-pressed="true"]:enabled:hover{ background-color:var(--toggle-background-color-pressed-hover); border-color:transparent; } .toggle-button[aria-pressed="true"]:enabled:hover:active{ background-color:var(--toggle-background-color-pressed-active); border-color:transparent; } .toggle-button[aria-pressed="true"]::before{ translate:var(--toggle-dot-transform-x); background-color:var(--toggle-dot-background-color-on-pressed); } .toggle-button[aria-pressed="true"]:enabled:hover::before,.toggle-button[aria-pressed="true"]:enabled:hover:active::before{ background-color:var(--toggle-dot-background-color-on-pressed); } .toggle-button[aria-pressed="true"]:-moz-locale-dir(rtl)::before,[dir="rtl"] .toggle-button[aria-pressed="true"]::before{ translate:calc(-1 * var(--toggle-dot-transform-x)); } @media (prefers-reduced-motion: no-preference){ .toggle-button::before{ transition:translate 100ms; } } @media (prefers-contrast){ .toggle-button:enabled:hover{ border-color:var(--toggle-border-color-hover); } .toggle-button:enabled:hover:active{ border-color:var(--toggle-border-color-active); } .toggle-button[aria-pressed="true"]:enabled{ border-color:var(--toggle-border-color); position:relative; } .toggle-button[aria-pressed="true"]:enabled:hover{ border-color:var(--toggle-border-color-hover); } .toggle-button[aria-pressed="true"]:enabled:hover:active{ background-color:var(--toggle-dot-background-color-active); border-color:var(--toggle-dot-background-color-hover); } .toggle-button:enabled:hover::before, .toggle-button:enabled:hover:active::before{ background-color:var(--toggle-dot-background-color-hover); } } @media (forced-colors){ .toggle-button{ --toggle-dot-background-color:var(--color-accent-primary); --toggle-dot-background-color-hover:var(--color-accent-primary-hover); --toggle-dot-background-color-active:var(--color-accent-primary-active); --toggle-dot-background-color-on-pressed:var(--button-background-color); --toggle-border-color-hover:var(--border-color-interactive-hover); --toggle-border-color-active:var(--border-color-interactive-active); } .toggle-button[aria-pressed="true"]:enabled::after{ border:1px solid var(--button-background-color); content:""; position:absolute; height:var(--toggle-height); width:var(--toggle-width); display:block; border-radius:var(--toggle-border-radius); inset:-2px; } .toggle-button[aria-pressed="true"]:enabled:hover:active::after{ border-color:var(--toggle-border-color-active); } } :root{ --clear-signature-button-icon:url('editor-toolbar-delete.svg'); --signature-bg:#f9f9fb; --signature-hover-bg:#f0f0f4; --button-signature-bg:transparent; --button-signature-color:var(--main-color); --button-signature-active-bg:#cfcfd8; --button-signature-active-border:none; --button-signature-active-color:var(--button-signature-color); --button-signature-border:none; --button-signature-hover-bg:#e0e0e6; --button-signature-hover-color:var(--button-signature-color); } @media (prefers-color-scheme: dark){ :root{ --signature-bg:#2b2a33; --signature-hover-bg:var(--signature-bg); --button-signature-active-bg:#5b5b66; --button-signature-hover-bg:#52525e; } } @media screen and (forced-colors: active){ :root{ --signature-bg:HighlightText; --signature-hover-bg:var(--signature-bg); --button-signature-bg:HighlightText; --button-signature-color:ButtonText; --button-signature-active-bg:ButtonText; --button-signature-active-color:HighlightText; --button-signature-border:1px solid ButtonText; --button-signature-hover-bg:Highlight; --button-signature-hover-color:HighlightText; } } .signatureDialog{ --primary-color:var(--text-primary-color); --border-color:#8f8f9d; --open-link-fg:var(--link-fg-color); --open-link-hover-fg:var(--link-hover-fg-color); } @media screen and (forced-colors: active){ .signatureDialog{ --primary-color:ButtonText; --border-color:ButtonText; --open-link-fg:ButtonText; --open-link-hover-fg:ButtonText; } } .signatureDialog{ width:570px; max-width:100%; min-width:300px; padding:16px 0; } .signatureDialog .mainContainer{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; } :is(.signatureDialog .mainContainer) span:not([role="sectionhead"]){ font-size:13px; font-style:normal; font-weight:400; line-height:normal; } :is(.signatureDialog .mainContainer) .title{ margin-inline-start:16px; } .signatureDialog .inputWithClearButton{ --button-dimension:24px; --clear-button-icon:url('messageBar_closingButton.svg'); width:100%; position:relative; display:flex; align-items:center; justify-content:center; } :is(.signatureDialog .inputWithClearButton) > input{ width:100%; height:32px; padding-inline:8px calc(4px + var(--button-dimension)); box-sizing:border-box; border-radius:4px; border:1px solid var(--border-color); } :is(.signatureDialog .inputWithClearButton) .clearInputButton{ position:absolute; inset-block-start:4px; inset-inline-end:4px; display:inline-block; width:var(--button-dimension); height:var(--button-dimension); background-color:var(--input-text-fg-color); -webkit-mask-size:cover; mask-size:cover; -webkit-mask-image:var(--clear-button-icon); mask-image:var(--clear-button-icon); padding:0; border:0; } #addSignatureDialog{ --secondary-color:var(--text-secondary-color); --bg-hover:#e0e0e6; --tab-top-line-active-color:#0060df; --tab-top-line-active-hover-color:var(--tab-text-hover-color); --tab-top-line-hover-color:#8f8f9d; --tab-top-line-inactive-color:#cfcfd8; --tab-bottom-line-active-color:var(--tab-top-line-inactive-color); --tab-bottom-line-hover-color:var(--tab-top-line-inactive-color); --tab-bottom-line-inactive-color:var(--tab-top-line-inactive-color); --tab-bg:var(--dialog-bg-color); --tab-bg-active-color:var(--tab-bg); --tab-bg-active-hover-color:var(--bg-hover); --tab-bg-hover:var(--bg-hover); --tab-panel-border:none; --tab-panel-border-radius:4px; --tab-text-color:var(--primary-color); --tab-text-active-color:var(--tab-top-line-active-color); --tab-text-active-hover-color:var(--tab-text-hover-color); --tab-text-hover-color:var(--tab-text-color); --signature-placeholder-color:var(--secondary-color); --signature-draw-placeholder-color:var(--primary-color); --signature-color:var(--primary-color); --clear-signature-button-border-width:0; --clear-signature-button-border-style:solid; --clear-signature-button-border-color:transparent; --clear-signature-button-border-disabled-color:transparent; --clear-signature-button-color:var(--primary-color); --clear-signature-button-hover-color:var(--clear-signature-button-color); --clear-signature-button-active-color:var(--clear-signature-button-color); --clear-signature-button-disabled-color:var(--clear-signature-button-color); --clear-signature-button-focus-color:var(--clear-signature-button-color); --clear-signature-button-bg:var(--dialog-bg-color); --clear-signature-button-bg-hover:var(--bg-hover); --clear-signature-button-bg-active:#cfcfd8; --clear-signature-button-bg-focus:#f0f0f4; --clear-signature-button-bg-disabled:color-mix( in srgb, #f0f0f4, transparent 40% ); --save-warning-color:var(--secondary-color); --thickness-bg:var(--dialog-bg-color); --thickness-label-color:var(--primary-color); --thickness-slider-color:var(--primary-color); --draw-cursor:url('cursor-editorInk.svg') 0 16, pointer; } @media (prefers-color-scheme: dark){ #addSignatureDialog{ --dialog-bg-color:#42414d; --bg-hover:#52525e; --primary-color:#fbfbfe; --secondary-color:#cfcfd8; --tab-top-line-active-color:#0df; --tab-top-line-inactive-color:#8f8f9d; --clear-signature-button-bg-active:#5b5b66; --clear-signature-button-bg-focus:#2b2a33; --clear-signature-button-bg-disabled:color-mix( in srgb, #2b2a33, transparent 40% ); } } @media screen and (forced-colors: active){ #addSignatureDialog{ --secondary-color:ButtonText; --bg:HighlightText; --bg-hover:var(--bg); --tab-top-line-active-color:ButtonText; --tab-top-line-active-hover-color:HighlightText; --tab-top-line-hover-color:SelectedItem; --tab-top-line-inactive-color:ButtonText; --tab-bottom-line-active-color:var(--tab-top-line-active-color); --tab-bottom-line-hover-color:var(--tab-top-line-hover-color); --tab-bg:var(--bg); --tab-bg-active-color:SelectedItem; --tab-bg-active-hover-color:SelectedItem; --tab-panel-border:1px solid ButtonText; --tab-panel-border-radius:8px; --tab-text-color:ButtonText; --tab-text-active-color:HighlightText; --tab-text-active-hover-color:HighlightText; --tab-text-hover-color:SelectedItem; --signature-color:ButtonText; --clear-signature-button-border-width:1px; --clear-signature-button-border-style:solid; --clear-signature-button-border-color:ButtonText; --clear-signature-button-border-disabled-color:GrayText; --clear-signature-button-color:ButtonText; --clear-signature-button-hover-color:HighlightText; --clear-signature-button-active-color:SelectedItem; --clear-signature-button-focus-color:CanvasText; --clear-signature-button-disabled-color:GrayText; --clear-signature-button-bg:var(--bg); --clear-signature-button-bg-hover:SelectedItem; --clear-signature-button-bg-active:var(--bg); --clear-signature-button-bg-focus:var(--bg); --clear-signature-button-bg-disabled:var(--bg); --thickness-bg:Canvas; --thickness-label-color:CanvasText; --thickness-slider-color:ButtonText; } } #addSignatureDialog #addSignatureDialogLabel{ overflow:hidden; position:absolute; inset:0; width:0; height:0; } #addSignatureDialog.waiting::after{ content:""; cursor:wait; position:absolute; inset:0; width:100%; height:100%; } :is(#addSignatureDialog .mainContainer) [role="tablist"]{ width:100%; display:flex; align-items:flex-start; gap:0; } :is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]{ flex:1 0 0; align-self:stretch; background-color:var(--tab-bg); padding-inline:0; cursor:default; border-inline:0; border-block-width:1px; border-block-style:solid; border-block-start-color:var(--tab-top-line-inactive-color); border-block-end-color:var(--tab-bottom-line-inactive-color); border-radius:0; font:menu; font-size:13px; font-style:normal; line-height:normal; font-weight:400; color:var(--tab-text-color); } :is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover{ border-block-start-width:2px; border-block-start-color:var(--tab-top-line-hover-color); border-block-end-color:var(--tab-bottom-line-hover-color); background-color:var(--tab-bg-hover); color:var(--tab-text-hover-color); } :is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):focus-visible{ outline:2px solid var(--tab-top-line-active-color); outline-offset:-2px; } [aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]){ border-block-start-width:2px; border-block-start-color:var(--tab-top-line-active-color); border-block-end-color:var(--tab-bottom-line-active-color); background-color:var(--tab-bg-active-color); font-weight:590; color:var(--tab-text-active-color); } [aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover{ border-block-start-color:var(--tab-top-line-active-hover-color); background-color:var(--tab-bg-active-hover-color); color:var(--tab-text-active-hover-color); } :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer{ width:100%; height:auto; display:flex; flex-direction:column; align-items:flex-end; align-self:stretch; gap:12px; padding-inline:16px; box-sizing:border-box; } :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]{ position:relative; width:100%; height:220px; background-color:var(--signature-bg); border:var(--tab-panel-border); border-radius:var(--tab-panel-border-radius); } :is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ position:absolute; inset:0; width:100%; height:100%; background-color:transparent; } #addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ display:none; } #addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; text-align:center; color:var(--signature-color); background-color:transparent; border-radius:var(--tab-panel-border-radius); font-family:"Brush script", "Apple Chancery", "Segoe script", "Freestyle Script", "Palace Script MT", "Brush Script MT", TK, cursive, serif; font-size:44px; font-style:italic; font-weight:400; } :is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::placeholder{ color:var(--signature-placeholder-color); text-align:center; font:menu; font-style:normal; font-weight:274; font-size:44px; line-height:normal; } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ display:none; } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > span{ position:absolute; top:0; left:0; width:100%; height:100%; display:grid; align-items:center; justify-content:center; background-color:transparent; color:var(--signature-placeholder-color); -webkit-user-select:none; user-select:none; } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ stroke:var(--signature-color); fill:none; stroke-opacity:1; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; } :is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg):hover{ cursor:var(--draw-cursor); } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness{ position:absolute; width:100%; inset-block-end:0; display:grid; align-items:center; justify-content:center; pointer-events:none; } :is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > span{ color:var(--signature-draw-placeholder-color); } :is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div{ width:auto; height:auto; display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 8px; margin:0; background-color:var(--thickness-bg); border-radius:4px 4px 0 0; pointer-events:auto; } :is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > label{ color:var(--thickness-label-color); } :is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input{ width:100px; height:14px; background-color:transparent; } :is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-runnable-track,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-track,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-progress{ background-color:var(--thickness-slider-color); } :is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-thumb,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-thumb{ background-color:var(--thickness-bg); } :is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input{ border-radius:4.5px; border:0; color:var(--signature-color); } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ display:none; } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ stroke:none; stroke-width:0; fill:var(--signature-color); fill-opacity:1; } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; } :is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) span{ color:var(--signature-placeholder-color); } :is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a{ color:var(--open-link-fg); text-decoration:underline; cursor:pointer; } :is(:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a):hover{ color:var(--open-link-hover-fg); } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureFilePicker{ visibility:hidden; position:relative; width:0; height:0; } [data-selected="type"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureTypeContainer,[data-selected="draw"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureDrawContainer,[data-selected="image"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureImageContainer{ display:block; } :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; align-self:stretch; } :is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer{ display:flex; align-items:flex-end; gap:16px; align-self:stretch; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:1 0 0; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer):has(input:disabled) > label{ opacity:0.4; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer) > label{ width:auto; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton{ display:flex; height:32px; padding:4px 8px; align-items:center; background-color:var(--clear-signature-button-bg); border-width:var(--clear-signature-button-border-width); border-style:var(--clear-signature-button-border-style); border-color:var(--clear-signature-button-border-color); border-radius:4px; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span{ display:flex; height:24px; align-items:center; gap:4px; flex-shrink:0; color:var(--clear-signature-button-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span)::after{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--clear-signature-button-icon); mask-image:var(--clear-signature-button-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--clear-signature-button-color); flex-shrink:0; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover{ background-color:var(--clear-signature-button-bg-hover); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span{ color:var(--clear-signature-button-hover-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span)::after{ background-color:var(--clear-signature-button-hover-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active{ background-color:var(--clear-signature-button-bg-active); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span{ color:var(--clear-signature-button-active-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span)::after{ background-color:var(--clear-signature-button-active-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible{ background-color:var(--clear-signature-button-bg-focus); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span{ color:var(--clear-signature-button-focus-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span)::after{ background-color:var(--clear-signature-button-focus-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled{ background-color:var(--clear-signature-button-bg-disabled); border-color:var(--clear-signature-button-border-disabled-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span{ color:var(--clear-signature-button-disabled-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span)::after{ background-color:var( --clear-signature-button-disabled-color ); } :is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer{ display:grid; grid-template-columns:max-content auto; gap:4px; width:100%; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input{ margin:0; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input):disabled + label{ opacity:0.4; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > label{ -webkit-user-select:none; user-select:none; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer):not(.fullStorage) #addSignatureSaveWarning{ display:none; } .fullStorage:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) #addSignatureSaveWarning{ display:block; opacity:1; color:var(--save-warning-color); font-size:11px; } #editSignatureDescriptionDialog .mainContainer{ padding-inline:16px; box-sizing:border-box; } :is(#editSignatureDescriptionDialog .mainContainer) .title{ margin-inline-start:0; } :is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView{ width:auto; display:flex; justify-content:flex-end; align-items:flex-start; gap:12px; align-self:stretch; } :is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) #editSignatureDescriptionContainer{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:1 1 auto; } :is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg{ width:210px; height:180px; padding:8px; background-color:var(--signature-bg); } :is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path{ stroke:var(--button-signature-color); stroke-width:1px; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; vector-effect:non-scaling-stroke; fill:none; } .contours:is(:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path){ fill:var(--button-signature-color); stroke-width:0.5px; } #editorSignatureParamsToolbar{ padding:8px; } #editorSignatureParamsToolbar #addSignatureDoorHanger{ gap:8px; padding:2px; } :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer{ height:32px; display:flex; justify-content:space-between; align-items:center; align-self:stretch; gap:8px; } :is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button{ border:var(--button-signature-border); border-radius:4px; background-color:var(--button-signature-bg); color:var(--button-signature-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):hover{ background-color:var(--button-signature-hover-bg); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active{ border:var(--button-signature-active-border); background-color:var(--button-signature-active-bg); color:var(--button-signature-active-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active::before{ background-color:var(--button-signature-active-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible{ outline:var(--focus-ring-outline); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible::before{ background-color:var(--button-signature-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .deleteButton)::before{ -webkit-mask-image:var(--clear-signature-button-icon); mask-image:var(--clear-signature-button-icon); } :is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton{ width:auto; height:100%; min-height:var(--menuitem-height); aspect-ratio:unset; display:flex; align-items:center; justify-content:flex-start; outline:none; border-radius:4px; box-sizing:border-box; font:message-box; position:relative; flex:1 1 auto; padding:0; gap:8px; text-align:start; white-space:normal; cursor:default; overflow:hidden; } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg{ display:inline-block; height:100%; aspect-ratio:1; background-color:var(--signature-bg); flex:none; padding:4px; box-sizing:border-box; border:none; border-radius:4px; } :is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path{ stroke:var(--button-signature-color); stroke-width:1px; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; vector-effect:non-scaling-stroke; fill:none; } .contours:is(:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path){ fill:var(--button-signature-color); stroke-width:0.5px; } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is(:hover,:active) > svg{ border-radius:4px 0 0 4px; background-color:var(--signature-hover-bg); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):hover > span{ color:var(--button-signature-hover-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):active{ background-color:var(--button-signature-active-bg); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is([disabled="disabled"],[disabled]){ opacity:0.5; pointer-events:none; } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > span{ height:auto; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; font:menu; font-size:13px; font-style:normal; font-weight:400; line-height:normal; overflow:hidden; } .editDescription.altText{ --alt-text-add-image:url('editor-toolbar-edit.svg') !important; } .editDescription.altText::before{ width:16px !important; height:16px !important; } :root{ --outline-width:2px; --outline-color:#0060df; --outline-around-width:1px; --outline-around-color:#f0f0f4; --hover-outline-around-color:var(--outline-around-color); --focus-outline:solid var(--outline-width) var(--outline-color); --unfocus-outline:solid var(--outline-width) transparent; --focus-outline-around:solid var(--outline-around-width) var(--outline-around-color); --hover-outline-color:#8f8f9d; --hover-outline:solid var(--outline-width) var(--hover-outline-color); --hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color); --freetext-line-height:1.35; --freetext-padding:2px; --resizer-bg-color:var(--outline-color); --resizer-size:6px; --resizer-shift:calc( 0px - (var(--outline-width) + var(--resizer-size)) / 2 - var(--outline-around-width) ); --editorFreeText-editing-cursor:text; --editorInk-editing-cursor:url('cursor-editorInk.svg') 0 16, pointer; --editorHighlight-editing-cursor:url('cursor-editorTextHighlight.svg') 24 24, text; --editorFreeHighlight-editing-cursor:url('cursor-editorFreeHighlight.svg') 1 18, pointer; --new-alt-text-warning-image:url('altText_warning.svg'); } .visuallyHidden{ position:absolute; top:0; left:0; border:0; margin:0; padding:0; width:0; height:0; overflow:hidden; white-space:nowrap; font-size:0; } .textLayer.highlighting{ cursor:var(--editorFreeHighlight-editing-cursor); } .textLayer.highlighting:not(.free) span{ cursor:var(--editorHighlight-editing-cursor); } [role="img"]:is(.textLayer.highlighting:not(.free) span){ cursor:var(--editorFreeHighlight-editing-cursor); } .textLayer.highlighting.free span{ cursor:var(--editorFreeHighlight-editing-cursor); } :is(#viewerContainer.pdfPresentationMode:fullscreen,.annotationEditorLayer.disabled) .noAltTextBadge{ display:none !important; } @media (min-resolution: 1.1dppx){ :root{ --editorFreeText-editing-cursor:url('cursor-editorFreeText.svg') 0 16, text; } } @media screen and (forced-colors: active){ :root{ --outline-color:CanvasText; --outline-around-color:ButtonFace; --resizer-bg-color:ButtonText; --hover-outline-color:Highlight; --hover-outline-around-color:SelectedItemText; } } [data-editor-rotation="90"]{ transform:rotate(90deg); } [data-editor-rotation="180"]{ transform:rotate(180deg); } [data-editor-rotation="270"]{ transform:rotate(270deg); } .annotationEditorLayer{ background:transparent; position:absolute; inset:0; font-size:calc(100px * var(--total-scale-factor)); transform-origin:0 0; cursor:auto; } .annotationEditorLayer .selectedEditor{ z-index:100000 !important; } .annotationEditorLayer.drawing *{ pointer-events:none !important; } .annotationEditorLayer.waiting{ content:""; cursor:wait; position:absolute; inset:0; width:100%; height:100%; } .annotationEditorLayer.disabled{ pointer-events:none; } .annotationEditorLayer.freetextEditing{ cursor:var(--editorFreeText-editing-cursor); } .annotationEditorLayer.inkEditing{ cursor:var(--editorInk-editing-cursor); } .annotationEditorLayer .draw{ box-sizing:border-box; } .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor){ position:absolute; background:transparent; z-index:1; transform-origin:0 0; cursor:auto; max-width:100%; max-height:100%; border:var(--unfocus-outline); } .draggable.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)){ cursor:move; } .selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)){ border:var(--focus-outline); outline:var(--focus-outline-around); } .selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor))::before{ content:""; position:absolute; inset:0; border:var(--focus-outline-around); pointer-events:none; } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor){ border:var(--hover-outline); outline:var(--hover-outline-around); } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor)::before{ content:""; position:absolute; inset:0; border:var(--focus-outline-around); } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ --editor-toolbar-delete-image:url('editor-toolbar-delete.svg'); --editor-toolbar-bg-color:#f0f0f4; --editor-toolbar-highlight-image:url('toolbarButton-editorHighlight.svg'); --editor-toolbar-fg-color:#2e2e56; --editor-toolbar-border-color:#8f8f9d; --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color); --editor-toolbar-hover-bg-color:#e0e0e6; --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color); --editor-toolbar-hover-outline:none; --editor-toolbar-focus-outline-color:#0060df; --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2); --editor-toolbar-vert-offset:6px; --editor-toolbar-height:28px; --editor-toolbar-padding:2px; --alt-text-done-color:#2ac3a2; --alt-text-warning-color:#0090ed; --alt-text-hover-done-color:var(--alt-text-done-color); --alt-text-hover-warning-color:var(--alt-text-warning-color); } @media (prefers-color-scheme: dark){ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ --editor-toolbar-bg-color:#2b2a33; --editor-toolbar-fg-color:#fbfbfe; --editor-toolbar-hover-bg-color:#52525e; --editor-toolbar-focus-outline-color:#0df; --alt-text-done-color:#54ffbd; --alt-text-warning-color:#80ebff; } } @media screen and (forced-colors: active){ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ --editor-toolbar-bg-color:ButtonFace; --editor-toolbar-fg-color:ButtonText; --editor-toolbar-border-color:ButtonText; --editor-toolbar-hover-border-color:AccentColor; --editor-toolbar-hover-bg-color:ButtonFace; --editor-toolbar-hover-fg-color:AccentColor; --editor-toolbar-hover-outline:2px solid var(--editor-toolbar-hover-border-color); --editor-toolbar-focus-outline-color:ButtonBorder; --editor-toolbar-shadow:none; --alt-text-done-color:var(--editor-toolbar-fg-color); --alt-text-warning-color:var(--editor-toolbar-fg-color); --alt-text-hover-done-color:var(--editor-toolbar-hover-fg-color); --alt-text-hover-warning-color:var(--editor-toolbar-hover-fg-color); } } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ display:flex; width:-moz-fit-content; width:fit-content; height:var(--editor-toolbar-height); flex-direction:column; justify-content:center; align-items:center; cursor:default; pointer-events:auto; box-sizing:content-box; padding:var(--editor-toolbar-padding); position:absolute; inset-inline-end:0; inset-block-start:calc(100% + var(--editor-toolbar-vert-offset)); border-radius:6px; background-color:var(--editor-toolbar-bg-color); border:1px solid var(--editor-toolbar-border-color); box-shadow:var(--editor-toolbar-shadow); } .hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ display:none; } :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar):has(:focus-visible){ border-color:transparent; } [dir="ltr"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ transform-origin:100% 0; } [dir="rtl"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ transform-origin:0 0; } :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons{ display:flex; justify-content:center; align-items:center; gap:0; height:100%; } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) button{ padding:0; } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .divider{ width:0; height:calc( 2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height) ); border-left:1px solid var(--editor-toolbar-border-color); border-right:none; display:inline-block; margin-inline:2px; } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .highlightButton{ width:var(--editor-toolbar-height); } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .highlightButton)::before{ content:""; -webkit-mask-image:var(--editor-toolbar-highlight-image); mask-image:var(--editor-toolbar-highlight-image); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; display:inline-block; background-color:var(--editor-toolbar-fg-color); width:100%; height:100%; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .highlightButton):hover::before{ background-color:var(--editor-toolbar-hover-fg-color); } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .delete{ width:var(--editor-toolbar-height); } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .delete)::before{ content:""; -webkit-mask-image:var(--editor-toolbar-delete-image); mask-image:var(--editor-toolbar-delete-image); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; display:inline-block; background-color:var(--editor-toolbar-fg-color); width:100%; height:100%; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .delete):hover::before{ background-color:var(--editor-toolbar-hover-fg-color); } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > *{ height:var(--editor-toolbar-height); } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider){ border:none; background-color:transparent; cursor:pointer; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover{ border-radius:2px; background-color:var(--editor-toolbar-hover-bg-color); color:var(--editor-toolbar-hover-fg-color); outline:var(--editor-toolbar-hover-outline); outline-offset:1px; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover:active{ outline:none; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):focus-visible{ border-radius:2px; outline:2px solid var(--editor-toolbar-focus-outline-color); } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText{ --alt-text-add-image:url('altText_add.svg'); --alt-text-done-image:url('altText_done.svg'); display:flex; align-items:center; justify-content:center; width:max-content; padding-inline:8px; pointer-events:all; font:menu; font-weight:590; font-size:12px; color:var(--editor-toolbar-fg-color); } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):disabled{ pointer-events:none; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ content:""; -webkit-mask-image:var(--alt-text-add-image); mask-image:var(--alt-text-add-image); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; display:inline-block; width:12px; height:13px; background-color:var(--editor-toolbar-fg-color); margin-inline-end:4px; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ background-color:var(--editor-toolbar-hover-fg-color); } .done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ -webkit-mask-image:var(--alt-text-done-image); mask-image:var(--alt-text-done-image); } .new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ width:16px; height:16px; -webkit-mask-image:var(--new-alt-text-warning-image); mask-image:var(--new-alt-text-warning-image); background-color:var(--alt-text-warning-color); -webkit-mask-size:cover; mask-size:cover; } .new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ background-color:var(--alt-text-hover-warning-color); } .new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ -webkit-mask-image:var(--alt-text-done-image); mask-image:var(--alt-text-done-image); background-color:var(--alt-text-done-color); } .new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ background-color:var(--alt-text-hover-done-color); } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip{ display:none; word-wrap:anywhere; } .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ --alt-text-tooltip-bg:#f0f0f4; --alt-text-tooltip-fg:#15141a; --alt-text-tooltip-border:#8f8f9d; --alt-text-tooltip-shadow:0px 2px 6px 0px rgb(58 57 68 / 0.2); } @media (prefers-color-scheme: dark){ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ --alt-text-tooltip-bg:#1c1b22; --alt-text-tooltip-fg:#fbfbfe; --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a; } } @media screen and (forced-colors: active){ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ --alt-text-tooltip-bg:Canvas; --alt-text-tooltip-fg:CanvasText; --alt-text-tooltip-border:CanvasText; --alt-text-tooltip-shadow:none; } } .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; position:absolute; top:calc(100% + 2px); inset-inline-start:0; padding-block:2px 3px; padding-inline:3px; max-width:300px; width:max-content; height:auto; font-size:12px; border:0.5px solid var(--alt-text-tooltip-border); background:var(--alt-text-tooltip-bg); box-shadow:var(--alt-text-tooltip-shadow); color:var(--alt-text-tooltip-fg); pointer-events:none; } .annotationEditorLayer .freeTextEditor{ padding:calc(var(--freetext-padding) * var(--total-scale-factor)); width:auto; height:auto; touch-action:none; } .annotationEditorLayer .freeTextEditor .internal{ background:transparent; border:none; inset:0; overflow:visible; white-space:nowrap; font:10px sans-serif; line-height:var(--freetext-line-height); -webkit-user-select:none; user-select:none; } .annotationEditorLayer .freeTextEditor .overlay{ position:absolute; display:none; background:transparent; inset:0; width:100%; height:100%; } .annotationEditorLayer freeTextEditor .overlay.enabled{ display:block; } .annotationEditorLayer .freeTextEditor .internal:empty::before{ content:attr(default-content); color:gray; } .annotationEditorLayer .freeTextEditor .internal:focus{ outline:none; -webkit-user-select:auto; user-select:auto; } .annotationEditorLayer .inkEditor{ width:100%; height:100%; } .annotationEditorLayer .inkEditor.editing{ cursor:inherit; } .annotationEditorLayer .inkEditor .inkEditorCanvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; } .annotationEditorLayer .stampEditor{ width:auto; height:auto; } :is(.annotationEditorLayer .stampEditor) canvas{ position:absolute; width:100%; height:100%; margin:0; top:0; left:0; } :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ --no-alt-text-badge-border-color:#f0f0f4; --no-alt-text-badge-bg-color:#cfcfd8; --no-alt-text-badge-fg-color:#5b5b66; } @media (prefers-color-scheme: dark){ :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ --no-alt-text-badge-border-color:#52525e; --no-alt-text-badge-bg-color:#fbfbfe; --no-alt-text-badge-fg-color:#15141a; } } @media screen and (forced-colors: active){ :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ --no-alt-text-badge-border-color:ButtonText; --no-alt-text-badge-bg-color:ButtonFace; --no-alt-text-badge-fg-color:ButtonText; } } :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ position:absolute; inset-inline-end:5px; inset-block-end:5px; display:inline-flex; width:32px; height:32px; padding:3px; justify-content:center; align-items:center; pointer-events:none; z-index:1; border-radius:2px; border:1px solid var(--no-alt-text-badge-border-color); background:var(--no-alt-text-badge-bg-color); } :is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--new-alt-text-warning-image); mask-image:var(--new-alt-text-warning-image); -webkit-mask-size:cover; mask-size:cover; background-color:var(--no-alt-text-badge-fg-color); } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers{ position:absolute; inset:0; } .hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers){ display:none; } :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer{ width:var(--resizer-size); height:var(--resizer-size); background:content-box var(--resizer-bg-color); border:var(--focus-outline-around); border-radius:2px; position:absolute; } .topLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:var(--resizer-shift); left:var(--resizer-shift); } .topMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:var(--resizer-shift); left:calc(50% + var(--resizer-shift)); } .topRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:var(--resizer-shift); right:var(--resizer-shift); } .middleRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:calc(50% + var(--resizer-shift)); right:var(--resizer-shift); } .bottomRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ bottom:var(--resizer-shift); right:var(--resizer-shift); } .bottomMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ bottom:var(--resizer-shift); left:calc(50% + var(--resizer-shift)); } .bottomLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ bottom:var(--resizer-shift); left:var(--resizer-shift); } .middleLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:calc(50% + var(--resizer-shift)); left:var(--resizer-shift); } .topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ cursor:nwse-resize; } .topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ cursor:ns-resize; } .topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ cursor:nesw-resize; } .middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ cursor:ew-resize; } .topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ cursor:nesw-resize; } .topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ cursor:ew-resize; } .topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ cursor:nwse-resize; } .middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ cursor:ns-resize; } :is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar{ rotate:270deg; } [dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar){ inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset)); inset-block-start:0; } [dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar){ inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset)); inset-block-start:0; } :is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="180"],[data-main-rotation="90"] [data-editor-rotation="90"],[data-main-rotation="180"] [data-editor-rotation="0"],[data-main-rotation="270"] [data-editor-rotation="270"])) .editToolbar{ rotate:180deg; inset-inline-end:100%; inset-block-start:calc(0pc - var(--editor-toolbar-vert-offset)); } :is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar{ rotate:90deg; } [dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar){ inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset)); inset-block-start:100%; } [dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar){ inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset)); inset-block-start:0; } .dialog.altText::backdrop{ -webkit-mask:url(#alttext-manager-mask); mask:url(#alttext-manager-mask); } .dialog.altText.positioned{ margin:0; } .dialog.altText #altTextContainer{ width:300px; height:-moz-fit-content; height:fit-content; display:inline-flex; flex-direction:column; align-items:flex-start; gap:16px; } :is(.dialog.altText #altTextContainer) #overallDescription{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; align-self:stretch; } :is(:is(.dialog.altText #altTextContainer) #overallDescription) span{ align-self:stretch; } :is(:is(.dialog.altText #altTextContainer) #overallDescription) .title{ font-size:13px; font-style:normal; font-weight:590; } :is(.dialog.altText #altTextContainer) #addDescription{ display:flex; flex-direction:column; align-items:stretch; gap:8px; } :is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea{ flex:1; padding-inline:24px 10px; } :is(:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea) textarea{ width:100%; min-height:75px; } :is(.dialog.altText #altTextContainer) #buttons{ display:flex; justify-content:flex-end; align-items:flex-start; gap:8px; align-self:stretch; } .dialog.newAltText{ --new-alt-text-ai-disclaimer-icon:url('altText_disclaimer.svg'); --new-alt-text-spinner-icon:url('altText_spinner.svg'); --preview-image-bg-color:#f0f0f4; --preview-image-border:none; } @media (prefers-color-scheme: dark){ .dialog.newAltText{ --preview-image-bg-color:#2b2a33; } } @media screen and (forced-colors: active){ .dialog.newAltText{ --preview-image-bg-color:ButtonFace; --preview-image-border:1px solid ButtonText; } } .dialog.newAltText{ width:80%; max-width:570px; min-width:300px; padding:0; } .dialog.newAltText.noAi #newAltTextDisclaimer,.dialog.newAltText.noAi #newAltTextCreateAutomatically{ display:none !important; } .dialog.newAltText.aiInstalling #newAltTextCreateAutomatically{ display:none !important; } .dialog.newAltText.aiInstalling #newAltTextDownloadModel{ display:flex !important; } .dialog.newAltText.error #newAltTextNotNow{ display:none !important; } .dialog.newAltText.error #newAltTextCancel{ display:inline-block !important; } .dialog.newAltText:not(.error) #newAltTextError{ display:none !important; } .dialog.newAltText #newAltTextContainer{ display:flex; width:auto; padding:16px; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:12px; flex:0 1 auto; line-height:normal; } :is(.dialog.newAltText #newAltTextContainer) #mainContent{ display:flex; justify-content:flex-end; align-items:flex-start; gap:12px; align-self:stretch; flex:1 1 auto; } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionAndSettings{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; flex:1 0 0; align-self:stretch; } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; align-self:stretch; flex:1 1 auto; } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer{ width:100%; height:70px; position:relative; } :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea{ width:100%; height:100%; padding:8px; } :is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::placeholder{ color:var(--text-secondary-color); } :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ display:none; position:absolute; width:16px; height:16px; inset-inline-start:8px; inset-block-start:8px; -webkit-mask-size:cover; mask-size:cover; background-color:var(--text-secondary-color); pointer-events:none; } .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::placeholder{ color:transparent; } .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ display:inline-block; -webkit-mask-image:var(--new-alt-text-spinner-icon); mask-image:var(--new-alt-text-spinner-icon); } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescription{ font-size:11px; } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer{ display:flex; flex-direction:row; align-items:flex-start; gap:4px; font-size:11px; } :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer)::before{ content:""; display:inline-block; width:17px; height:16px; -webkit-mask-image:var(--new-alt-text-ai-disclaimer-icon); mask-image:var(--new-alt-text-ai-disclaimer-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--text-secondary-color); flex:1 0 auto; } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel{ display:flex; align-items:center; gap:4px; align-self:stretch; } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--new-alt-text-spinner-icon); mask-image:var(--new-alt-text-spinner-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--text-secondary-color); } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview{ width:180px; aspect-ratio:1; display:flex; justify-content:center; align-items:center; flex:0 0 auto; background-color:var(--preview-image-bg-color); border:var(--preview-image-border); } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview) > canvas{ max-width:100%; max-height:100%; } .colorPicker{ --hover-outline-color:#0250bb; --selected-outline-color:#0060df; --swatch-border-color:#cfcfd8; } @media (prefers-color-scheme: dark){ .colorPicker{ --hover-outline-color:#80ebff; --selected-outline-color:#aaf2ff; --swatch-border-color:#52525e; } } @media screen and (forced-colors: active){ .colorPicker{ --hover-outline-color:Highlight; --selected-outline-color:var(--hover-outline-color); --swatch-border-color:ButtonText; } } .colorPicker .swatch{ width:16px; height:16px; border:1px solid var(--swatch-border-color); border-radius:100%; outline-offset:2px; box-sizing:border-box; forced-color-adjust:none; } .colorPicker button:is(:hover,.selected) > .swatch{ border:none; } .annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar{ rotate:0deg; } .annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar{ rotate:270deg; } .annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar{ rotate:180deg; } .annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar{ rotate:90deg; } .annotationEditorLayer .highlightEditor{ position:absolute; background:transparent; z-index:1; cursor:auto; max-width:100%; max-height:100%; border:none; outline:none; pointer-events:none; transform-origin:0 0; } :is(.annotationEditorLayer .highlightEditor):not(.free){ transform:none; } :is(.annotationEditorLayer .highlightEditor) .internal{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:auto; } .disabled:is(.annotationEditorLayer .highlightEditor) .internal{ pointer-events:none; } .selectedEditor:is(.annotationEditorLayer .highlightEditor) .internal{ cursor:pointer; } :is(.annotationEditorLayer .highlightEditor) .editToolbar{ --editor-toolbar-colorpicker-arrow-image:url('toolbarButton-menuArrow.svg'); transform-origin:center !important; } :is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker{ position:relative; width:auto; display:flex; justify-content:center; align-items:center; gap:4px; padding:4px; } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker)::after{ content:""; -webkit-mask-image:var(--editor-toolbar-colorpicker-arrow-image); mask-image:var(--editor-toolbar-colorpicker-arrow-image); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; display:inline-block; background-color:var(--editor-toolbar-fg-color); width:12px; height:12px; } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):hover::after{ background-color:var(--editor-toolbar-hover-fg-color); } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)){ background-color:var(--editor-toolbar-hover-bg-color); } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden))::after{ scale:-1; } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown{ position:absolute; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:11px; padding-block:8px; border-radius:6px; background-color:var(--editor-toolbar-bg-color); border:1px solid var(--editor-toolbar-border-color); box-shadow:var(--editor-toolbar-shadow); inset-block-start:calc(100% + 4px); width:calc(100% + 2 * var(--editor-toolbar-padding)); } :is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button{ width:100%; height:auto; border:none; cursor:pointer; display:flex; justify-content:center; align-items:center; background:none; } :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:active,:focus-visible){ outline:none; } :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ outline-offset:2px; } [aria-selected="true"]:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ outline:2px solid var(--selected-outline-color); } :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{ outline:2px solid var(--hover-outline-color); } .editorParamsToolbar:has(#highlightParamsToolbarContainer){ padding:unset; } #highlightParamsToolbarContainer{ gap:16px; padding-inline:10px; padding-block-end:12px; } #highlightParamsToolbarContainer .colorPicker{ display:flex; flex-direction:column; gap:8px; } :is(#highlightParamsToolbarContainer .colorPicker) .dropdown{ display:flex; justify-content:space-between; align-items:center; flex-direction:row; height:auto; } :is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button{ width:auto; height:auto; border:none; cursor:pointer; display:flex; justify-content:center; align-items:center; background:none; flex:0 0 auto; padding:0; } :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) .swatch{ width:24px; height:24px; } :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:active,:focus-visible){ outline:none; } [aria-selected="true"]:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) > .swatch{ outline:2px solid var(--selected-outline-color); } :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{ outline:2px solid var(--hover-outline-color); } #highlightParamsToolbarContainer #editorHighlightThickness{ display:flex; flex-direction:column; align-items:center; gap:4px; align-self:stretch; } :is(#highlightParamsToolbarContainer #editorHighlightThickness) .editorParamsLabel{ height:auto; align-self:stretch; } :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ display:flex; justify-content:space-between; align-items:center; align-self:stretch; --example-color:#bfbfc9; } @media (prefers-color-scheme: dark){ :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ --example-color:#80808e; } } @media screen and (forced-colors: active){ :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ --example-color:CanvasText; } } :is(:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) > .editorParamsSlider[disabled]){ opacity:0.4; } :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::before,:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{ content:""; width:8px; aspect-ratio:1; display:block; border-radius:100%; background-color:var(--example-color); } :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{ width:24px; } :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) .editorParamsSlider{ width:unset; height:14px; } #highlightParamsToolbarContainer #editorHighlightVisibility{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; align-self:stretch; } :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ --divider-color:#d7d7db; } @media (prefers-color-scheme: dark){ :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ --divider-color:#8f8f9d; } } @media screen and (forced-colors: active){ :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ --divider-color:CanvasText; } } :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ margin-block:4px; width:100%; height:1px; background-color:var(--divider-color); } :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .toggler{ display:flex; justify-content:space-between; align-items:center; align-self:stretch; } #altTextSettingsDialog{ padding:16px; } #altTextSettingsDialog #altTextSettingsContainer{ display:flex; width:573px; flex-direction:column; gap:16px; } :is(#altTextSettingsDialog #altTextSettingsContainer) .mainContainer{ gap:16px; } :is(#altTextSettingsDialog #altTextSettingsContainer) .description{ color:var(--text-secondary-color); } :is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings{ display:flex; flex-direction:column; gap:12px; } :is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) button{ width:-moz-fit-content; width:fit-content; } .download:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) #deleteModelButton{ display:none; } :is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings):not(.download) #downloadModelButton{ display:none; } :is(#altTextSettingsDialog #altTextSettingsContainer) #automaticAltText,:is(#altTextSettingsDialog #altTextSettingsContainer) #altTextEditor{ display:flex; flex-direction:column; gap:8px; } :is(#altTextSettingsDialog #altTextSettingsContainer) #createModelDescription,:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings,:is(#altTextSettingsDialog #altTextSettingsContainer) #showAltTextDialogDescription{ padding-inline-start:40px; } :is(#altTextSettingsDialog #altTextSettingsContainer) #automaticSettings{ display:flex; flex-direction:column; gap:16px; } :root{ --viewer-container-height:0; --pdfViewer-padding-bottom:0; --page-margin:1px auto -8px; --page-border:9px solid transparent; --spreadHorizontalWrapped-margin-LR:-3.5px; --loading-icon-delay:400ms; --focus-ring-color:#0060df; --focus-ring-outline:2px solid var(--focus-ring-color); } @media (prefers-color-scheme: dark){ :root{ --focus-ring-color:#0df; } } @media screen and (forced-colors: active){ :root{ --pdfViewer-padding-bottom:9px; --page-margin:8px auto -1px; --page-border:1px solid CanvasText; --spreadHorizontalWrapped-margin-LR:3.5px; --focus-ring-color:CanvasText; } } [data-main-rotation="90"]{ transform:rotate(90deg) translateY(-100%); } [data-main-rotation="180"]{ transform:rotate(180deg) translate(-100%, -100%); } [data-main-rotation="270"]{ transform:rotate(270deg) translateX(-100%); } #hiddenCopyElement, .hiddenCanvasElement{ position:absolute; top:0; left:0; width:0; height:0; display:none; } .pdfViewer{ --scale-factor:1; --page-bg-color:unset; padding-bottom:var(--pdfViewer-padding-bottom); --hcm-highlight-filter:none; --hcm-highlight-selected-filter:none; } @media screen and (forced-colors: active){ .pdfViewer{ --hcm-highlight-filter:invert(100%); } } .pdfViewer.copyAll{ cursor:wait; } .pdfViewer .canvasWrapper{ overflow:hidden; width:100%; height:100%; } :is(.pdfViewer .canvasWrapper) canvas{ position:absolute; top:0; left:0; margin:0; display:block; width:100%; height:100%; contain:content; } :is(:is(.pdfViewer .canvasWrapper) canvas) .structTree{ contain:strict; } .pdfViewer .page{ --user-unit:1; --total-scale-factor:calc(var(--scale-factor) * var(--user-unit)); --scale-round-x:1px; --scale-round-y:1px; direction:ltr; width:816px; height:1056px; margin:var(--page-margin); position:relative; overflow:visible; border:var(--page-border); background-clip:content-box; background-color:var(--page-bg-color, rgb(255 255 255)); } .pdfViewer .dummyPage{ position:relative; width:0; height:var(--viewer-container-height); } .pdfViewer.noUserSelect{ -webkit-user-select:none; user-select:none; } .pdfViewer.removePageBorders .page{ margin:0 auto 10px; border:none; } .pdfViewer.singlePageView{ display:inline-block; } .pdfViewer.singlePageView .page{ margin:0; border:none; } .pdfViewer:is(.scrollHorizontal, .scrollWrapped), .spread{ margin-inline:3.5px; text-align:center; } .pdfViewer.scrollHorizontal, .spread{ white-space:nowrap; } .pdfViewer.removePageBorders, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{ margin-inline:0; } .spread :is(.page, .dummyPage), .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){ display:inline-block; vertical-align:middle; } .spread .page, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{ margin-inline:var(--spreadHorizontalWrapped-margin-LR); } .pdfViewer.removePageBorders .spread .page, .pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page{ margin-inline:5px; } .pdfViewer .page.loadingIcon::after{ position:absolute; top:0; left:0; content:""; width:100%; height:100%; background:url('loading-icon.gif') center no-repeat; display:none; transition-property:display; transition-delay:var(--loading-icon-delay); z-index:5; contain:strict; } .pdfViewer .page.loading::after{ display:block; } .pdfViewer .page:not(.loading)::after{ transition-property:none; display:none; } .pdfPresentationMode .pdfViewer{ padding-bottom:0; } .pdfPresentationMode .spread{ margin:0; } .pdfPresentationMode .pdfViewer .page{ margin:0 auto; border:2px solid transparent; } /*!*********************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/katex/dist/katex.min.css?ngGlobalStyle ***! \*********************************************************************************************************************************************************************************************************************************************/ @font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url('KaTeX_AMS-Regular.woff2') format("woff2"),url('KaTeX_AMS-Regular.woff') format("woff"),url('KaTeX_AMS-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url('KaTeX_Caligraphic-Bold.woff2') format("woff2"),url('KaTeX_Caligraphic-Bold.woff') format("woff"),url('KaTeX_Caligraphic-Bold.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url('KaTeX_Caligraphic-Regular.woff2') format("woff2"),url('KaTeX_Caligraphic-Regular.woff') format("woff"),url('KaTeX_Caligraphic-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url('KaTeX_Fraktur-Bold.woff2') format("woff2"),url('KaTeX_Fraktur-Bold.woff') format("woff"),url('KaTeX_Fraktur-Bold.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url('KaTeX_Fraktur-Regular.woff2') format("woff2"),url('KaTeX_Fraktur-Regular.woff') format("woff"),url('KaTeX_Fraktur-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url('KaTeX_Main-Bold.woff2') format("woff2"),url('KaTeX_Main-Bold.woff') format("woff"),url('KaTeX_Main-Bold.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url('KaTeX_Main-BoldItalic.woff2') format("woff2"),url('KaTeX_Main-BoldItalic.woff') format("woff"),url('KaTeX_Main-BoldItalic.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url('KaTeX_Main-Italic.woff2') format("woff2"),url('KaTeX_Main-Italic.woff') format("woff"),url('KaTeX_Main-Italic.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url('KaTeX_Main-Regular.woff2') format("woff2"),url('KaTeX_Main-Regular.woff') format("woff"),url('KaTeX_Main-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url('KaTeX_Math-BoldItalic.woff2') format("woff2"),url('KaTeX_Math-BoldItalic.woff') format("woff"),url('KaTeX_Math-BoldItalic.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url('KaTeX_Math-Italic.woff2') format("woff2"),url('KaTeX_Math-Italic.woff') format("woff"),url('KaTeX_Math-Italic.ttf') format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url('KaTeX_SansSerif-Bold.woff2') format("woff2"),url('KaTeX_SansSerif-Bold.woff') format("woff"),url('KaTeX_SansSerif-Bold.ttf') format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url('KaTeX_SansSerif-Italic.woff2') format("woff2"),url('KaTeX_SansSerif-Italic.woff') format("woff"),url('KaTeX_SansSerif-Italic.ttf') format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url('KaTeX_SansSerif-Regular.woff2') format("woff2"),url('KaTeX_SansSerif-Regular.woff') format("woff"),url('KaTeX_SansSerif-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url('KaTeX_Script-Regular.woff2') format("woff2"),url('KaTeX_Script-Regular.woff') format("woff"),url('KaTeX_Script-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url('KaTeX_Size1-Regular.woff2') format("woff2"),url('KaTeX_Size1-Regular.woff') format("woff"),url('KaTeX_Size1-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url('KaTeX_Size2-Regular.woff2') format("woff2"),url('KaTeX_Size2-Regular.woff') format("woff"),url('KaTeX_Size2-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url('KaTeX_Size3-Regular.woff2') format("woff2"),url('KaTeX_Size3-Regular.woff') format("woff"),url('KaTeX_Size3-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url('KaTeX_Size4-Regular.woff2') format("woff2"),url('KaTeX_Size4-Regular.woff') format("woff"),url('KaTeX_Size4-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url('KaTeX_Typewriter-Regular.woff2') format("woff2"),url('KaTeX_Typewriter-Regular.woff') format("woff"),url('KaTeX_Typewriter-Regular.ttf') format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.47"}.katex .katex-mathml{border:0;clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo} /*!*****************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/prismjs/themes/prism-okaidia.css?ngGlobalStyle ***! \*****************************************************************************************************************************************************************************************************************************************************/ /** * okaidia theme for JavaScript, CSS and HTML * Loosely based on Monokai textmate theme by http://www.monokai.nl/ * @author ocodia */ code[class*="language-"], pre[class*="language-"] { color: #f8f8f2; background: none; text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; tab-size: 4; hyphens: none; } /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0.3em; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #272822; } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #8292a2; } .token.punctuation { color: #f8f8f2; } .token.namespace { opacity: .7; } .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: #f92672; } .token.boolean, .token.number { color: #ae81ff; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a6e22e; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { color: #f8f8f2; } .token.atrule, .token.attr-value, .token.function, .token.class-name { color: #e6db74; } .token.keyword { color: #66d9ef; } .token.regex, .token.important { color: #fd971f; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./projects/aca-content/src/lib/ui/application.scss?ngGlobalStyle ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* stylelint-disable scss/no-global-function-names */ /* stylelint-disable */ /* stylelint-enable */ /* stylelint-disable font-family-no-missing-generic-family-keyword */ /* stylelint-disable value-keyword-case */ /* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-class-pattern */ /* stylelint-disable scss/no-global-function-names */ /* stylelint-disable scss/no-global-function-names */ :root { --theme-background-color: #fafafa; --theme-text-color: rgba(0, 0, 0, 0.54); --theme-sidenav-text-color: rgba(0, 0, 0, 0.87); --theme-sidenav-hovered-text-color: rgba(0, 0, 0, 0.87); --theme-tab-active-text-color: rgba(0, 0, 0, 0.87); --theme-text-bold-color: rgba(0, 0, 0, 0.87); --theme-title-color: rgba(0, 0, 0, 0.87); --theme-border-color: rgba(0, 0, 0, 0.07); --theme-card-background-color: white; --theme-foreground-text-color: rgba(0, 0, 0, 0.72); --theme-foreground-text-bold-color: rgba(0, 0, 0, 0.87); --theme-secondary-text-color: rgba(0, 0, 0, 0.54); --theme-dialog-background-color: white; --theme-header-text-color: rgba(0, 0, 0, 0.87); --new-button-font-size: 0.9rem; --theme-grey-text-background-color: rgba(33, 33, 33, 0.05); --theme-grey-background-color: rgba(33, 33, 33, 0.12); --theme-grey-hover-background-color: rgba(33, 33, 33, 0.24); --theme-blue-button-color: #1b7af4; --theme-info-snackbar-background: #1f74db; --theme-warning-snackbar-background: #8c7012; --theme-blue-checkbox-color: #1b7af4; --theme-blue-active-table-row-color: rgba(45, 127, 249, 0.16); --theme-content-color: #4b5563; --theme-dropdown-color: rgb(237.25, 237.25, 237.25); --theme-dropdown-background-hover: rgb(224.5, 224.5, 224.5); --theme-grey-divider-color: rgba(0, 0, 0, 0.22); --theme-pagination-background-color: #fafafa; --theme-about-panel-border-color: rgba(33, 33, 33, 0.12); --theme-about-panel-background-color: white; --theme-about-panel-title-color: rgba(0, 0, 0, 0.87); --theme-datetimepicker-font-color: rgba(0, 0, 0, 0.87); --theme-datetimepicker-selected-date-background: #2254b2; --theme-white-background: #fff; --theme-datetimepicker-cell-focus-border: #1f74db; --theme-sidenav-background-color: #fafafa; --theme-selected-text-color: #212121; --theme-selected-background-color: rgba(45, 127, 249, 0.14); --theme-selected-text-background: rgba(33, 33, 33, 0.12); --theme-hover-background-color: rgba(33, 33, 33, 0.05); --theme-action-button-text-color: rgba(89.25, 89.25, 89.25, 0.87); --theme-page-layout-header-background-color: white; --theme-search-chip-icon-color: #757575; --theme-disabled-chip-background-color: #f5f5f5; --theme-secondary-text: rgba(0, 0, 0, 0.54); --theme-search-highlight-background-color: #ffd180; --theme-text-light-color: rgba(33, 35, 40, 0.7); --theme-card-background-grey-color: rgb(248, 248, 248); --theme-light-grey-1-color: #d5d5d5; --theme-light-grey-2-color: #d9d9d9; --theme-light-grey-3-color: #dedede; --theme-user-profile-background-color: #595959; --theme-app-blue-folder: #2a7de1; --theme-login-button-bg-color: #5654ac; } html { --mat-ripple-color: rgba(0, 0, 0, 0.1); } html { --mat-option-selected-state-label-text-color: #2d7ff9; --mat-option-label-text-color: rgba(0, 0, 0, 0.87); --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04); } .mat-accent { --mat-option-selected-state-label-text-color: #00754a; --mat-option-label-text-color: rgba(0, 0, 0, 0.87); --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04); } .mat-warn { --mat-option-selected-state-label-text-color: #b8082a; --mat-option-label-text-color: rgba(0, 0, 0, 0.87); --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04); } html { --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87); } html { --mat-full-pseudo-checkbox-selected-icon-color: #00754a; --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0; } html { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #00754a; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0; } .mat-primary { --mat-full-pseudo-checkbox-selected-icon-color: #2d7ff9; --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0; } .mat-primary { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #2d7ff9; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0; } .mat-accent { --mat-full-pseudo-checkbox-selected-icon-color: #00754a; --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0; } .mat-accent { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #00754a; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0; } .mat-warn { --mat-full-pseudo-checkbox-selected-icon-color: #b8082a; --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0; } .mat-warn { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #b8082a; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0; } html { --mat-app-background-color: #fafafa; --mat-app-text-color: rgba(0, 0, 0, 0.87); --mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } html { --mat-option-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-option-label-text-line-height: 20px; --mat-option-label-text-size: 14px; --mat-option-label-text-tracking: normal; --mat-option-label-text-weight: 400; } html { --mat-optgroup-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-optgroup-label-text-line-height: 20px; --mat-optgroup-label-text-size: 14px; --mat-optgroup-label-text-tracking: normal; --mat-optgroup-label-text-weight: 400; } html { --mdc-elevated-card-container-shape: 4px; } html { --mdc-outlined-card-container-shape: 4px; --mdc-outlined-card-outline-width: 1px; } html { --mdc-elevated-card-container-color: white; --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); } html { --mdc-outlined-card-container-color: white; --mdc-outlined-card-outline-color: rgba(0, 0, 0, 0.12); --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); } html { --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54); } html { --mat-card-title-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-card-title-text-line-height: 32px; --mat-card-title-text-size: 20px; --mat-card-title-text-tracking: normal; --mat-card-title-text-weight: 400; --mat-card-subtitle-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-card-subtitle-text-line-height: 24px; --mat-card-subtitle-text-size: 14px; --mat-card-subtitle-text-tracking: normal; --mat-card-subtitle-text-weight: 500; } html { --mdc-linear-progress-active-indicator-height: 4px; --mdc-linear-progress-track-height: 4px; --mdc-linear-progress-track-shape: 0; } .mat-mdc-progress-bar { --mdc-linear-progress-active-indicator-color: #2d7ff9; --mdc-linear-progress-track-color: rgba(45, 127, 249, 0.25); } .mat-mdc-progress-bar.mat-accent { --mdc-linear-progress-active-indicator-color: #00754a; --mdc-linear-progress-track-color: rgba(0, 117, 74, 0.25); } .mat-mdc-progress-bar.mat-warn { --mdc-linear-progress-active-indicator-color: #b8082a; --mdc-linear-progress-track-color: rgba(184, 8, 42, 0.25); } html { --mdc-plain-tooltip-container-shape: 4px; --mdc-plain-tooltip-supporting-text-line-height: 16px; } html { --mdc-plain-tooltip-container-color: #616161; --mdc-plain-tooltip-supporting-text-color: #fff; } html { --mdc-plain-tooltip-supporting-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-plain-tooltip-supporting-text-size: 12px; --mdc-plain-tooltip-supporting-text-weight: 400; --mdc-plain-tooltip-supporting-text-tracking: normal; } html { --mdc-filled-text-field-active-indicator-height: 1px; --mdc-filled-text-field-focus-active-indicator-height: 2px; --mdc-filled-text-field-container-shape: 4px; } html { --mdc-outlined-text-field-outline-width: 1px; --mdc-outlined-text-field-focus-outline-width: 2px; --mdc-outlined-text-field-container-shape: 4px; } html { --mdc-filled-text-field-caret-color: #2d7ff9; --mdc-filled-text-field-focus-active-indicator-color: #2d7ff9; --mdc-filled-text-field-focus-label-text-color: rgba(45, 127, 249, 0.87); --mdc-filled-text-field-container-color: rgb(244.8, 244.8, 244.8); --mdc-filled-text-field-disabled-container-color: rgb(249.9, 249.9, 249.9); --mdc-filled-text-field-label-text-color: rgba(0, 0, 0, 0.6); --mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6); --mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mdc-filled-text-field-input-text-color: rgba(0, 0, 0, 0.87); --mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38); --mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6); --mdc-filled-text-field-error-hover-label-text-color: #b8082a; --mdc-filled-text-field-error-focus-label-text-color: #b8082a; --mdc-filled-text-field-error-label-text-color: #b8082a; --mdc-filled-text-field-error-caret-color: #b8082a; --mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, 0.42); --mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, 0.06); --mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, 0.87); --mdc-filled-text-field-error-active-indicator-color: #b8082a; --mdc-filled-text-field-error-focus-active-indicator-color: #b8082a; --mdc-filled-text-field-error-hover-active-indicator-color: #b8082a; } html { --mdc-outlined-text-field-caret-color: #2d7ff9; --mdc-outlined-text-field-focus-outline-color: #2d7ff9; --mdc-outlined-text-field-focus-label-text-color: rgba(45, 127, 249, 0.87); --mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, 0.6); --mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6); --mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, 0.87); --mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38); --mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6); --mdc-outlined-text-field-error-caret-color: #b8082a; --mdc-outlined-text-field-error-focus-label-text-color: #b8082a; --mdc-outlined-text-field-error-label-text-color: #b8082a; --mdc-outlined-text-field-error-hover-label-text-color: #b8082a; --mdc-outlined-text-field-outline-color: rgba(0, 0, 0, 0.38); --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, 0.06); --mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, 0.87); --mdc-outlined-text-field-error-focus-outline-color: #b8082a; --mdc-outlined-text-field-error-hover-outline-color: #b8082a; --mdc-outlined-text-field-error-outline-color: #b8082a; } html { --mat-form-field-focus-select-arrow-color: rgba(45, 127, 249, 0.87); --mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, 0.38); --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87); --mat-form-field-error-text-color: #b8082a; --mat-form-field-select-option-text-color: inherit; --mat-form-field-select-disabled-option-text-color: GrayText; --mat-form-field-leading-icon-color: unset; --mat-form-field-disabled-leading-icon-color: unset; --mat-form-field-trailing-icon-color: unset; --mat-form-field-disabled-trailing-icon-color: unset; --mat-form-field-error-focus-trailing-icon-color: unset; --mat-form-field-error-hover-trailing-icon-color: unset; --mat-form-field-error-trailing-icon-color: unset; --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54); --mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, 0.38); --mat-form-field-hover-state-layer-opacity: 0.04; --mat-form-field-focus-state-layer-opacity: 0.08; } .mat-mdc-form-field.mat-accent { --mdc-filled-text-field-caret-color: #00754a; --mdc-filled-text-field-focus-active-indicator-color: #00754a; --mdc-filled-text-field-focus-label-text-color: rgba(0, 117, 74, 0.87); } .mat-mdc-form-field.mat-accent { --mdc-outlined-text-field-caret-color: #00754a; --mdc-outlined-text-field-focus-outline-color: #00754a; --mdc-outlined-text-field-focus-label-text-color: rgba(0, 117, 74, 0.87); } .mat-mdc-form-field.mat-accent { --mat-form-field-focus-select-arrow-color: rgba(0, 117, 74, 0.87); } .mat-mdc-form-field.mat-warn { --mdc-filled-text-field-caret-color: #b8082a; --mdc-filled-text-field-focus-active-indicator-color: #b8082a; --mdc-filled-text-field-focus-label-text-color: rgba(184, 8, 42, 0.87); } .mat-mdc-form-field.mat-warn { --mdc-outlined-text-field-caret-color: #b8082a; --mdc-outlined-text-field-focus-outline-color: #b8082a; --mdc-outlined-text-field-focus-label-text-color: rgba(184, 8, 42, 0.87); } .mat-mdc-form-field.mat-warn { --mat-form-field-focus-select-arrow-color: rgba(184, 8, 42, 0.87); } html { --mat-form-field-container-height: 56px; --mat-form-field-filled-label-display: block; --mat-form-field-container-vertical-padding: 16px; --mat-form-field-filled-with-label-container-padding-top: 24px; --mat-form-field-filled-with-label-container-padding-bottom: 8px; } html { --mdc-filled-text-field-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-filled-text-field-label-text-size: 14px; --mdc-filled-text-field-label-text-tracking: normal; --mdc-filled-text-field-label-text-weight: 400; } html { --mdc-outlined-text-field-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-outlined-text-field-label-text-size: 14px; --mdc-outlined-text-field-label-text-tracking: normal; --mdc-outlined-text-field-label-text-weight: 400; } html { --mat-form-field-container-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-form-field-container-text-line-height: 20px; --mat-form-field-container-text-size: 14px; --mat-form-field-container-text-tracking: normal; --mat-form-field-container-text-weight: 400; --mat-form-field-outlined-label-text-populated-size: 14px; --mat-form-field-subscript-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-form-field-subscript-text-line-height: 20px; --mat-form-field-subscript-text-size: 12px; --mat-form-field-subscript-text-tracking: normal; --mat-form-field-subscript-text-weight: 400; } html { --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } html { --mat-select-panel-background-color: white; --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87); --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38); --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6); --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54); --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38); --mat-select-focused-arrow-color: rgba(45, 127, 249, 0.87); --mat-select-invalid-arrow-color: rgba(184, 8, 42, 0.87); } html .mat-mdc-form-field.mat-accent { --mat-select-panel-background-color: white; --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87); --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38); --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6); --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54); --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38); --mat-select-focused-arrow-color: rgba(0, 117, 74, 0.87); --mat-select-invalid-arrow-color: rgba(184, 8, 42, 0.87); } html .mat-mdc-form-field.mat-warn { --mat-select-panel-background-color: white; --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87); --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38); --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6); --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54); --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38); --mat-select-focused-arrow-color: rgba(184, 8, 42, 0.87); --mat-select-invalid-arrow-color: rgba(184, 8, 42, 0.87); } html { --mat-select-arrow-transform: translateY(-8px); } html { --mat-select-trigger-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-select-trigger-text-line-height: 20px; --mat-select-trigger-text-size: 14px; --mat-select-trigger-text-tracking: normal; --mat-select-trigger-text-weight: 400; } html { --mat-autocomplete-container-shape: 4px; --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } html { --mat-autocomplete-background-color: white; } html { --mdc-dialog-container-shape: 4px; } html { --mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); --mat-dialog-container-max-width: 80vw; --mat-dialog-container-small-max-width: 80vw; --mat-dialog-container-min-width: 0; --mat-dialog-actions-alignment: start; --mat-dialog-actions-padding: 8px; --mat-dialog-content-padding: 20px 24px; --mat-dialog-with-actions-content-padding: 20px 24px; --mat-dialog-headline-padding: 0 24px 9px; } html { --mdc-dialog-container-color: white; --mdc-dialog-subhead-color: rgba(0, 0, 0, 0.87); --mdc-dialog-supporting-text-color: rgba(0, 0, 0, 0.6); } html { --mdc-dialog-subhead-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-dialog-subhead-line-height: 32px; --mdc-dialog-subhead-size: 20px; --mdc-dialog-subhead-weight: 400; --mdc-dialog-subhead-tracking: normal; --mdc-dialog-supporting-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-dialog-supporting-text-line-height: 20px; --mdc-dialog-supporting-text-size: 14px; --mdc-dialog-supporting-text-weight: 400; --mdc-dialog-supporting-text-tracking: normal; } .mat-mdc-standard-chip { --mdc-chip-container-shape-radius: 16px; --mdc-chip-with-avatar-avatar-shape-radius: 14px; --mdc-chip-with-avatar-avatar-size: 28px; --mdc-chip-with-icon-icon-size: 18px; --mdc-chip-outline-width: 0; --mdc-chip-outline-color: transparent; --mdc-chip-disabled-outline-color: transparent; --mdc-chip-focus-outline-color: transparent; --mdc-chip-hover-state-layer-opacity: 0.04; --mdc-chip-with-avatar-disabled-avatar-opacity: 1; --mdc-chip-flat-selected-outline-width: 0; --mdc-chip-selected-hover-state-layer-opacity: 0.04; --mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1; --mdc-chip-with-icon-disabled-icon-opacity: 1; } .mat-mdc-standard-chip { --mat-chip-disabled-container-opacity: 0.4; --mat-chip-trailing-action-opacity: 0.54; --mat-chip-trailing-action-focus-opacity: 1; --mat-chip-trailing-action-state-layer-color: transparent; --mat-chip-selected-trailing-action-state-layer-color: transparent; --mat-chip-trailing-action-hover-state-layer-opacity: 0; --mat-chip-trailing-action-focus-state-layer-opacity: 0; } .mat-mdc-standard-chip { --mdc-chip-disabled-label-text-color: #212121; --mdc-chip-elevated-container-color: rgb(224.4, 224.4, 224.4); --mdc-chip-elevated-selected-container-color: rgb(224.4, 224.4, 224.4); --mdc-chip-elevated-disabled-container-color: rgb(224.4, 224.4, 224.4); --mdc-chip-flat-disabled-selected-container-color: rgb(224.4, 224.4, 224.4); --mdc-chip-focus-state-layer-color: black; --mdc-chip-hover-state-layer-color: black; --mdc-chip-selected-hover-state-layer-color: black; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: black; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: #212121; --mdc-chip-selected-label-text-color: #212121; --mdc-chip-with-icon-icon-color: #212121; --mdc-chip-with-icon-disabled-icon-color: #212121; --mdc-chip-with-icon-selected-icon-color: #212121; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121; --mdc-chip-with-trailing-icon-trailing-icon-color: #212121; } .mat-mdc-standard-chip { --mat-chip-selected-disabled-trailing-icon-color: #212121; --mat-chip-selected-trailing-icon-color: #212121; } .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary { --mdc-chip-disabled-label-text-color: white; --mdc-chip-elevated-container-color: #2d7ff9; --mdc-chip-elevated-selected-container-color: #2d7ff9; --mdc-chip-elevated-disabled-container-color: #2d7ff9; --mdc-chip-flat-disabled-selected-container-color: #2d7ff9; --mdc-chip-focus-state-layer-color: black; --mdc-chip-hover-state-layer-color: black; --mdc-chip-selected-hover-state-layer-color: black; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: black; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: white; --mdc-chip-selected-label-text-color: white; --mdc-chip-with-icon-icon-color: white; --mdc-chip-with-icon-disabled-icon-color: white; --mdc-chip-with-icon-selected-icon-color: white; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white; --mdc-chip-with-trailing-icon-trailing-icon-color: white; } .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary { --mat-chip-selected-disabled-trailing-icon-color: white; --mat-chip-selected-trailing-icon-color: white; } .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent { --mdc-chip-disabled-label-text-color: white; --mdc-chip-elevated-container-color: #00754a; --mdc-chip-elevated-selected-container-color: #00754a; --mdc-chip-elevated-disabled-container-color: #00754a; --mdc-chip-flat-disabled-selected-container-color: #00754a; --mdc-chip-focus-state-layer-color: black; --mdc-chip-hover-state-layer-color: black; --mdc-chip-selected-hover-state-layer-color: black; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: black; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: white; --mdc-chip-selected-label-text-color: white; --mdc-chip-with-icon-icon-color: white; --mdc-chip-with-icon-disabled-icon-color: white; --mdc-chip-with-icon-selected-icon-color: white; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white; --mdc-chip-with-trailing-icon-trailing-icon-color: white; } .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent { --mat-chip-selected-disabled-trailing-icon-color: white; --mat-chip-selected-trailing-icon-color: white; } .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn { --mdc-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-elevated-container-color: #b8082a; --mdc-chip-elevated-selected-container-color: #b8082a; --mdc-chip-elevated-disabled-container-color: #b8082a; --mdc-chip-flat-disabled-selected-container-color: #b8082a; --mdc-chip-focus-state-layer-color: black; --mdc-chip-hover-state-layer-color: black; --mdc-chip-selected-hover-state-layer-color: black; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: black; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-selected-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87); } .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn { --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87); } .mat-mdc-chip.mat-mdc-standard-chip { --mdc-chip-container-height: 32px; } .mat-mdc-standard-chip { --mdc-chip-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-chip-label-text-line-height: 24px; --mdc-chip-label-text-size: 14px; --mdc-chip-label-text-tracking: normal; --mdc-chip-label-text-weight: 500; } html { --mdc-switch-disabled-selected-icon-opacity: 0.38; --mdc-switch-disabled-track-opacity: 0.12; --mdc-switch-disabled-unselected-icon-opacity: 0.38; --mdc-switch-handle-height: 20px; --mdc-switch-handle-shape: 10px; --mdc-switch-handle-width: 20px; --mdc-switch-selected-icon-size: 18px; --mdc-switch-track-height: 14px; --mdc-switch-track-shape: 7px; --mdc-switch-track-width: 36px; --mdc-switch-unselected-icon-size: 18px; --mdc-switch-selected-focus-state-layer-opacity: 0.12; --mdc-switch-selected-hover-state-layer-opacity: 0.04; --mdc-switch-selected-pressed-state-layer-opacity: 0.1; --mdc-switch-unselected-focus-state-layer-opacity: 0.12; --mdc-switch-unselected-hover-state-layer-opacity: 0.04; --mdc-switch-unselected-pressed-state-layer-opacity: 0.1; } html .mat-mdc-slide-toggle { --mat-switch-disabled-selected-handle-opacity: 0.38; --mat-switch-disabled-unselected-handle-opacity: 0.38; --mat-switch-unselected-handle-size: 20px; --mat-switch-selected-handle-size: 20px; --mat-switch-pressed-handle-size: 20px; --mat-switch-with-icon-handle-size: 20px; --mat-switch-selected-handle-horizontal-margin: 0; --mat-switch-selected-with-icon-handle-horizontal-margin: 0; --mat-switch-selected-pressed-handle-horizontal-margin: 0; --mat-switch-unselected-handle-horizontal-margin: 0; --mat-switch-unselected-with-icon-handle-horizontal-margin: 0; --mat-switch-unselected-pressed-handle-horizontal-margin: 0; --mat-switch-visible-track-opacity: 1; --mat-switch-hidden-track-opacity: 1; --mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1); --mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1); --mat-switch-track-outline-width: 1px; --mat-switch-track-outline-color: transparent; --mat-switch-selected-track-outline-width: 1px; --mat-switch-selected-track-outline-color: transparent; --mat-switch-disabled-unselected-track-outline-width: 1px; --mat-switch-disabled-unselected-track-outline-color: transparent; } html { --mdc-switch-selected-focus-state-layer-color: #1668e6; --mdc-switch-selected-handle-color: #1668e6; --mdc-switch-selected-hover-state-layer-color: #1668e6; --mdc-switch-selected-pressed-state-layer-color: #1668e6; --mdc-switch-selected-focus-handle-color: #06318c; --mdc-switch-selected-hover-handle-color: #06318c; --mdc-switch-selected-pressed-handle-color: #06318c; --mdc-switch-selected-focus-track-color: #6ba6fa; --mdc-switch-selected-hover-track-color: #6ba6fa; --mdc-switch-selected-pressed-track-color: #6ba6fa; --mdc-switch-selected-track-color: #6ba6fa; --mdc-switch-disabled-selected-handle-color: #424242; --mdc-switch-disabled-selected-icon-color: #fff; --mdc-switch-disabled-selected-track-color: #424242; --mdc-switch-disabled-unselected-handle-color: #424242; --mdc-switch-disabled-unselected-icon-color: #fff; --mdc-switch-disabled-unselected-track-color: #424242; --mdc-switch-handle-surface-color: #fff; --mdc-switch-selected-icon-color: #fff; --mdc-switch-unselected-focus-handle-color: #212121; --mdc-switch-unselected-focus-state-layer-color: #424242; --mdc-switch-unselected-focus-track-color: #e0e0e0; --mdc-switch-unselected-handle-color: #616161; --mdc-switch-unselected-hover-handle-color: #212121; --mdc-switch-unselected-hover-state-layer-color: #424242; --mdc-switch-unselected-hover-track-color: #e0e0e0; --mdc-switch-unselected-icon-color: #fff; --mdc-switch-unselected-pressed-handle-color: #212121; --mdc-switch-unselected-pressed-state-layer-color: #424242; --mdc-switch-unselected-pressed-track-color: #e0e0e0; --mdc-switch-unselected-track-color: #e0e0e0; --mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); } html { --mdc-switch-disabled-label-text-color: rgba(0, 0, 0, 0.38); } html .mat-mdc-slide-toggle { --mat-switch-label-text-color: rgba(0, 0, 0, 0.87); } html .mat-mdc-slide-toggle.mat-accent { --mdc-switch-selected-focus-state-layer-color: #30932f; --mdc-switch-selected-handle-color: #30932f; --mdc-switch-selected-hover-state-layer-color: #30932f; --mdc-switch-selected-pressed-state-layer-color: #30932f; --mdc-switch-selected-focus-handle-color: #166d15; --mdc-switch-selected-hover-handle-color: #166d15; --mdc-switch-selected-pressed-handle-color: #166d15; --mdc-switch-selected-focus-track-color: #72b971; --mdc-switch-selected-hover-track-color: #72b971; --mdc-switch-selected-pressed-track-color: #72b971; --mdc-switch-selected-track-color: #72b971; } html .mat-mdc-slide-toggle.mat-warn { --mdc-switch-selected-focus-state-layer-color: #b10725; --mdc-switch-selected-handle-color: #b10725; --mdc-switch-selected-hover-state-layer-color: #b10725; --mdc-switch-selected-pressed-state-layer-color: #b10725; --mdc-switch-selected-focus-handle-color: #91020f; --mdc-switch-selected-hover-handle-color: #91020f; --mdc-switch-selected-pressed-handle-color: #91020f; --mdc-switch-selected-focus-track-color: #cd526a; --mdc-switch-selected-hover-track-color: #cd526a; --mdc-switch-selected-pressed-track-color: #cd526a; --mdc-switch-selected-track-color: #cd526a; } html { --mdc-switch-state-layer-size: 40px; } html .mat-mdc-slide-toggle { --mat-switch-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-switch-label-text-line-height: 24px; --mat-switch-label-text-size: 14px; --mat-switch-label-text-tracking: normal; --mat-switch-label-text-weight: 500; } html { --mdc-radio-disabled-selected-icon-opacity: 0.38; --mdc-radio-disabled-unselected-icon-opacity: 0.38; --mdc-radio-state-layer-size: 40px; } .mat-mdc-radio-button.mat-primary { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #2d7ff9; --mdc-radio-selected-hover-icon-color: #2d7ff9; --mdc-radio-selected-icon-color: #2d7ff9; --mdc-radio-selected-pressed-icon-color: #2d7ff9; } .mat-mdc-radio-button.mat-primary { --mat-radio-ripple-color: black; --mat-radio-checked-ripple-color: #2d7ff9; --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38); --mat-radio-label-text-color: rgba(0, 0, 0, 0.87); } .mat-mdc-radio-button.mat-accent { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #00754a; --mdc-radio-selected-hover-icon-color: #00754a; --mdc-radio-selected-icon-color: #00754a; --mdc-radio-selected-pressed-icon-color: #00754a; } .mat-mdc-radio-button.mat-accent { --mat-radio-ripple-color: black; --mat-radio-checked-ripple-color: #00754a; --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38); --mat-radio-label-text-color: rgba(0, 0, 0, 0.87); } .mat-mdc-radio-button.mat-warn { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #b8082a; --mdc-radio-selected-hover-icon-color: #b8082a; --mdc-radio-selected-icon-color: #b8082a; --mdc-radio-selected-pressed-icon-color: #b8082a; } .mat-mdc-radio-button.mat-warn { --mat-radio-ripple-color: black; --mat-radio-checked-ripple-color: #b8082a; --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38); --mat-radio-label-text-color: rgba(0, 0, 0, 0.87); } html { --mdc-radio-state-layer-size: 40px; } html { --mat-radio-touch-target-display: block; } html { --mat-radio-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-radio-label-text-line-height: 24px; --mat-radio-label-text-size: 14px; --mat-radio-label-text-tracking: normal; --mat-radio-label-text-weight: 500; } html { --mdc-slider-active-track-height: 6px; --mdc-slider-active-track-shape: 9999px; --mdc-slider-handle-height: 20px; --mdc-slider-handle-shape: 50%; --mdc-slider-handle-width: 20px; --mdc-slider-inactive-track-height: 4px; --mdc-slider-inactive-track-shape: 9999px; --mdc-slider-with-overlap-handle-outline-width: 1px; --mdc-slider-with-tick-marks-active-container-opacity: 0.6; --mdc-slider-with-tick-marks-container-shape: 50%; --mdc-slider-with-tick-marks-container-size: 2px; --mdc-slider-with-tick-marks-inactive-container-opacity: 0.6; --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); } html { --mat-slider-value-indicator-width: auto; --mat-slider-value-indicator-height: 32px; --mat-slider-value-indicator-caret-display: block; --mat-slider-value-indicator-border-radius: 4px; --mat-slider-value-indicator-padding: 0 12px; --mat-slider-value-indicator-text-transform: none; --mat-slider-value-indicator-container-transform: translateX(-50%); } html { --mdc-slider-handle-color: #2d7ff9; --mdc-slider-focus-handle-color: #2d7ff9; --mdc-slider-hover-handle-color: #2d7ff9; --mdc-slider-active-track-color: #2d7ff9; --mdc-slider-inactive-track-color: #2d7ff9; --mdc-slider-with-tick-marks-inactive-container-color: #2d7ff9; --mdc-slider-with-tick-marks-active-container-color: white; --mdc-slider-disabled-active-track-color: #000; --mdc-slider-disabled-handle-color: #000; --mdc-slider-disabled-inactive-track-color: #000; --mdc-slider-label-container-color: #000; --mdc-slider-label-label-text-color: #fff; --mdc-slider-with-overlap-handle-outline-color: #fff; --mdc-slider-with-tick-marks-disabled-container-color: #000; } html { --mat-slider-ripple-color: #2d7ff9; --mat-slider-hover-state-layer-color: rgba(45, 127, 249, 0.05); --mat-slider-focus-state-layer-color: rgba(45, 127, 249, 0.2); --mat-slider-value-indicator-opacity: 0.6; } html .mat-accent { --mdc-slider-handle-color: #00754a; --mdc-slider-focus-handle-color: #00754a; --mdc-slider-hover-handle-color: #00754a; --mdc-slider-active-track-color: #00754a; --mdc-slider-inactive-track-color: #00754a; --mdc-slider-with-tick-marks-inactive-container-color: #00754a; --mdc-slider-with-tick-marks-active-container-color: white; } html .mat-accent { --mat-slider-ripple-color: #00754a; --mat-slider-hover-state-layer-color: rgba(0, 117, 74, 0.05); --mat-slider-focus-state-layer-color: rgba(0, 117, 74, 0.2); } html .mat-warn { --mdc-slider-handle-color: #b8082a; --mdc-slider-focus-handle-color: #b8082a; --mdc-slider-hover-handle-color: #b8082a; --mdc-slider-active-track-color: #b8082a; --mdc-slider-inactive-track-color: #b8082a; --mdc-slider-with-tick-marks-inactive-container-color: #b8082a; --mdc-slider-with-tick-marks-active-container-color: rgba(0, 0, 0, 0.87); } html .mat-warn { --mat-slider-ripple-color: #b8082a; --mat-slider-hover-state-layer-color: rgba(184, 8, 42, 0.05); --mat-slider-focus-state-layer-color: rgba(184, 8, 42, 0.2); } html { --mdc-slider-label-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-slider-label-label-text-size: 14px; --mdc-slider-label-label-text-line-height: 24px; --mdc-slider-label-label-text-tracking: normal; --mdc-slider-label-label-text-weight: 500; } html { --mat-menu-container-shape: 4px; --mat-menu-divider-bottom-spacing: 0; --mat-menu-divider-top-spacing: 0; --mat-menu-item-spacing: 16px; --mat-menu-item-icon-size: 24px; --mat-menu-item-leading-spacing: 16px; --mat-menu-item-trailing-spacing: 16px; --mat-menu-item-with-icon-leading-spacing: 16px; --mat-menu-item-with-icon-trailing-spacing: 16px; --mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } html { --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87); --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87); --mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-menu-container-color: white; --mat-menu-divider-color: rgba(0, 0, 0, 0.12); } html { --mat-menu-item-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-menu-item-label-text-size: 14px; --mat-menu-item-label-text-tracking: normal; --mat-menu-item-label-text-line-height: 20px; --mat-menu-item-label-text-weight: 400; } html { --mdc-list-list-item-container-shape: 0; --mdc-list-list-item-leading-avatar-shape: 50%; --mdc-list-list-item-container-color: transparent; --mdc-list-list-item-selected-container-color: transparent; --mdc-list-list-item-leading-avatar-color: transparent; --mdc-list-list-item-leading-icon-size: 24px; --mdc-list-list-item-leading-avatar-size: 40px; --mdc-list-list-item-trailing-icon-size: 24px; --mdc-list-list-item-disabled-state-layer-color: transparent; --mdc-list-list-item-disabled-state-layer-opacity: 0; --mdc-list-list-item-disabled-label-text-opacity: 0.38; --mdc-list-list-item-disabled-leading-icon-opacity: 0.38; --mdc-list-list-item-disabled-trailing-icon-opacity: 0.38; } html { --mat-list-active-indicator-color: transparent; --mat-list-active-indicator-shape: 4px; } html { --mdc-list-list-item-label-text-color: rgba(0, 0, 0, 0.87); --mdc-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54); --mdc-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-disabled-label-text-color: black; --mdc-list-list-item-disabled-leading-icon-color: black; --mdc-list-list-item-disabled-trailing-icon-color: black; --mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87); --mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.38); --mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87); --mdc-list-list-item-hover-state-layer-color: black; --mdc-list-list-item-hover-state-layer-opacity: 0.04; --mdc-list-list-item-focus-state-layer-color: black; --mdc-list-list-item-focus-state-layer-opacity: 0.12; } .mdc-list-item__start, .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #2d7ff9; --mdc-radio-selected-hover-icon-color: #2d7ff9; --mdc-radio-selected-icon-color: #2d7ff9; --mdc-radio-selected-pressed-icon-color: #2d7ff9; } .mat-accent .mdc-list-item__start, .mat-accent .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #00754a; --mdc-radio-selected-hover-icon-color: #00754a; --mdc-radio-selected-icon-color: #00754a; --mdc-radio-selected-pressed-icon-color: #00754a; } .mat-warn .mdc-list-item__start, .mat-warn .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: black; --mdc-radio-disabled-unselected-icon-color: black; --mdc-radio-unselected-hover-icon-color: #212121; --mdc-radio-unselected-focus-icon-color: #212121; --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); --mdc-radio-selected-focus-icon-color: #b8082a; --mdc-radio-selected-hover-icon-color: #b8082a; --mdc-radio-selected-icon-color: #b8082a; --mdc-radio-selected-pressed-icon-color: #b8082a; } .mat-mdc-list-option { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #2d7ff9; --mdc-checkbox-selected-hover-icon-color: #2d7ff9; --mdc-checkbox-selected-icon-color: #2d7ff9; --mdc-checkbox-selected-pressed-icon-color: #2d7ff9; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #2d7ff9; --mdc-checkbox-selected-hover-state-layer-color: #2d7ff9; --mdc-checkbox-selected-pressed-state-layer-color: #2d7ff9; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } .mat-mdc-list-option.mat-accent { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #00754a; --mdc-checkbox-selected-hover-icon-color: #00754a; --mdc-checkbox-selected-icon-color: #00754a; --mdc-checkbox-selected-pressed-icon-color: #00754a; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #00754a; --mdc-checkbox-selected-hover-state-layer-color: #00754a; --mdc-checkbox-selected-pressed-state-layer-color: #00754a; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } .mat-mdc-list-option.mat-warn { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #b8082a; --mdc-checkbox-selected-hover-icon-color: #b8082a; --mdc-checkbox-selected-icon-color: #b8082a; --mdc-checkbox-selected-pressed-icon-color: #b8082a; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #b8082a; --mdc-checkbox-selected-hover-state-layer-color: #b8082a; --mdc-checkbox-selected-pressed-state-layer-color: #b8082a; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text, .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start, .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text, .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start { color: #2d7ff9; } .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start, .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content, .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end { opacity: 1; } html { --mdc-list-list-item-one-line-container-height: 48px; --mdc-list-list-item-two-line-container-height: 64px; --mdc-list-list-item-three-line-container-height: 88px; } html { --mat-list-list-item-leading-icon-start-space: 16px; --mat-list-list-item-leading-icon-end-space: 32px; } .mdc-list-item__start, .mdc-list-item__end { --mdc-radio-state-layer-size: 40px; } .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line { height: 56px; } .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines { height: 72px; } html { --mdc-list-list-item-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-list-list-item-label-text-line-height: 20px; --mdc-list-list-item-label-text-size: 14px; --mdc-list-list-item-label-text-tracking: normal; --mdc-list-list-item-label-text-weight: 400; --mdc-list-list-item-supporting-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-list-list-item-supporting-text-line-height: 24px; --mdc-list-list-item-supporting-text-size: 14px; --mdc-list-list-item-supporting-text-tracking: normal; --mdc-list-list-item-supporting-text-weight: 500; --mdc-list-list-item-trailing-supporting-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-list-list-item-trailing-supporting-text-line-height: 20px; --mdc-list-list-item-trailing-supporting-text-size: 12px; --mdc-list-list-item-trailing-supporting-text-tracking: normal; --mdc-list-list-item-trailing-supporting-text-weight: 400; } .mdc-list-group__subheader { font: 400 16px / 28px Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; letter-spacing: normal; } html { --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87); --mat-paginator-container-background-color: white; --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54); --mat-paginator-disabled-icon-color: rgba(0, 0, 0, 0.12); } html { --mat-paginator-container-size: 56px; --mat-paginator-form-field-container-height: 40px; --mat-paginator-form-field-container-vertical-padding: 8px; --mat-paginator-touch-target-display: block; } html { --mat-paginator-container-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-paginator-container-text-line-height: 20px; --mat-paginator-container-text-size: 12px; --mat-paginator-container-text-tracking: normal; --mat-paginator-container-text-weight: 400; --mat-paginator-select-trigger-text-size: 12px; } html { --mdc-secondary-navigation-tab-container-height: 48px; } html { --mdc-tab-indicator-active-indicator-height: 2px; --mdc-tab-indicator-active-indicator-shape: 0; } html { --mat-tab-header-divider-color: transparent; --mat-tab-header-divider-height: 0; } .mat-mdc-tab-group, .mat-mdc-tab-nav-bar { --mdc-tab-indicator-active-indicator-color: #2d7ff9; } .mat-mdc-tab-group, .mat-mdc-tab-nav-bar { --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38); --mat-tab-header-pagination-icon-color: black; --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-label-text-color: #2d7ff9; --mat-tab-header-active-ripple-color: #2d7ff9; --mat-tab-header-inactive-ripple-color: #2d7ff9; --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-focus-label-text-color: #2d7ff9; --mat-tab-header-active-hover-label-text-color: #2d7ff9; --mat-tab-header-active-focus-indicator-color: #2d7ff9; --mat-tab-header-active-hover-indicator-color: #2d7ff9; } .mat-mdc-tab-group.mat-accent, .mat-mdc-tab-nav-bar.mat-accent { --mdc-tab-indicator-active-indicator-color: #00754a; } .mat-mdc-tab-group.mat-accent, .mat-mdc-tab-nav-bar.mat-accent { --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38); --mat-tab-header-pagination-icon-color: black; --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-label-text-color: #00754a; --mat-tab-header-active-ripple-color: #00754a; --mat-tab-header-inactive-ripple-color: #00754a; --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-focus-label-text-color: #00754a; --mat-tab-header-active-hover-label-text-color: #00754a; --mat-tab-header-active-focus-indicator-color: #00754a; --mat-tab-header-active-hover-indicator-color: #00754a; } .mat-mdc-tab-group.mat-warn, .mat-mdc-tab-nav-bar.mat-warn { --mdc-tab-indicator-active-indicator-color: #b8082a; } .mat-mdc-tab-group.mat-warn, .mat-mdc-tab-nav-bar.mat-warn { --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38); --mat-tab-header-pagination-icon-color: black; --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-label-text-color: #b8082a; --mat-tab-header-active-ripple-color: #b8082a; --mat-tab-header-inactive-ripple-color: #b8082a; --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6); --mat-tab-header-active-focus-label-text-color: #b8082a; --mat-tab-header-active-hover-label-text-color: #b8082a; --mat-tab-header-active-focus-indicator-color: #b8082a; --mat-tab-header-active-hover-indicator-color: #b8082a; } .mat-mdc-tab-group.mat-background-primary, .mat-mdc-tab-nav-bar.mat-background-primary { --mat-tab-header-with-background-background-color: #2d7ff9; --mat-tab-header-with-background-foreground-color: white; } .mat-mdc-tab-group.mat-background-accent, .mat-mdc-tab-nav-bar.mat-background-accent { --mat-tab-header-with-background-background-color: #00754a; --mat-tab-header-with-background-foreground-color: white; } .mat-mdc-tab-group.mat-background-warn, .mat-mdc-tab-nav-bar.mat-background-warn { --mat-tab-header-with-background-background-color: #b8082a; --mat-tab-header-with-background-foreground-color: rgba(0, 0, 0, 0.87); } .mat-mdc-tab-header { --mdc-secondary-navigation-tab-container-height: 48px; } .mat-mdc-tab-header { --mat-tab-header-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-tab-header-label-text-size: 14px; --mat-tab-header-label-text-tracking: normal; --mat-tab-header-label-text-line-height: 14px; --mat-tab-header-label-text-weight: 500; } html { --mdc-checkbox-disabled-selected-checkmark-color: #fff; --mdc-checkbox-selected-focus-state-layer-opacity: 0.16; --mdc-checkbox-selected-hover-state-layer-opacity: 0.04; --mdc-checkbox-selected-pressed-state-layer-opacity: 0.16; --mdc-checkbox-unselected-focus-state-layer-opacity: 0.16; --mdc-checkbox-unselected-hover-state-layer-opacity: 0.04; --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.16; } html { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #00754a; --mdc-checkbox-selected-hover-icon-color: #00754a; --mdc-checkbox-selected-icon-color: #00754a; --mdc-checkbox-selected-pressed-icon-color: #00754a; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #00754a; --mdc-checkbox-selected-hover-state-layer-color: #00754a; --mdc-checkbox-selected-pressed-state-layer-color: #00754a; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } html { --mat-checkbox-disabled-label-color: rgba(0, 0, 0, 0.38); --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87); } .mat-mdc-checkbox.mat-primary { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #2d7ff9; --mdc-checkbox-selected-hover-icon-color: #2d7ff9; --mdc-checkbox-selected-icon-color: #2d7ff9; --mdc-checkbox-selected-pressed-icon-color: #2d7ff9; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #2d7ff9; --mdc-checkbox-selected-hover-state-layer-color: #2d7ff9; --mdc-checkbox-selected-pressed-state-layer-color: #2d7ff9; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } .mat-mdc-checkbox.mat-warn { --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #b8082a; --mdc-checkbox-selected-hover-icon-color: #b8082a; --mdc-checkbox-selected-icon-color: #b8082a; --mdc-checkbox-selected-pressed-icon-color: #b8082a; --mdc-checkbox-unselected-focus-icon-color: #212121; --mdc-checkbox-unselected-hover-icon-color: #212121; --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #b8082a; --mdc-checkbox-selected-hover-state-layer-color: #b8082a; --mdc-checkbox-selected-pressed-state-layer-color: #b8082a; --mdc-checkbox-unselected-focus-state-layer-color: black; --mdc-checkbox-unselected-hover-state-layer-color: black; --mdc-checkbox-unselected-pressed-state-layer-color: black; } html { --mdc-checkbox-state-layer-size: 40px; } html { --mat-checkbox-touch-target-display: block; } html { --mat-checkbox-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-checkbox-label-text-line-height: 24px; --mat-checkbox-label-text-size: 14px; --mat-checkbox-label-text-tracking: normal; --mat-checkbox-label-text-weight: 500; } html { --mdc-text-button-container-shape: 4px; --mdc-text-button-keep-touch-target: false; } html { --mdc-filled-button-container-shape: 4px; --mdc-filled-button-keep-touch-target: false; } html { --mdc-protected-button-container-shape: 4px; --mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } html { --mdc-outlined-button-keep-touch-target: false; --mdc-outlined-button-outline-width: 1px; --mdc-outlined-button-container-shape: 4px; } html { --mat-text-button-horizontal-padding: 8px; --mat-text-button-with-icon-horizontal-padding: 8px; --mat-text-button-icon-spacing: 8px; --mat-text-button-icon-offset: 0; } html { --mat-filled-button-horizontal-padding: 16px; --mat-filled-button-icon-spacing: 8px; --mat-filled-button-icon-offset: -4px; } html { --mat-protected-button-horizontal-padding: 16px; --mat-protected-button-icon-spacing: 8px; --mat-protected-button-icon-offset: -4px; } html { --mat-outlined-button-horizontal-padding: 15px; --mat-outlined-button-icon-spacing: 8px; --mat-outlined-button-icon-offset: -4px; } html { --mdc-text-button-label-text-color: black; --mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, 0.38); } html { --mat-text-button-state-layer-color: black; --mat-text-button-disabled-state-layer-color: black; --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-text-button-hover-state-layer-opacity: 0.04; --mat-text-button-focus-state-layer-opacity: 0.12; --mat-text-button-pressed-state-layer-opacity: 0.12; } html { --mdc-filled-button-container-color: white; --mdc-filled-button-label-text-color: black; --mdc-filled-button-disabled-container-color: rgba(0, 0, 0, 0.12); --mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, 0.38); } html { --mat-filled-button-state-layer-color: black; --mat-filled-button-disabled-state-layer-color: black; --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-filled-button-hover-state-layer-opacity: 0.04; --mat-filled-button-focus-state-layer-opacity: 0.12; --mat-filled-button-pressed-state-layer-opacity: 0.12; } html { --mdc-protected-button-container-color: white; --mdc-protected-button-label-text-color: black; --mdc-protected-button-disabled-container-color: rgba(0, 0, 0, 0.12); --mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, 0.38); } html { --mat-protected-button-state-layer-color: black; --mat-protected-button-disabled-state-layer-color: black; --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-protected-button-hover-state-layer-opacity: 0.04; --mat-protected-button-focus-state-layer-opacity: 0.12; --mat-protected-button-pressed-state-layer-opacity: 0.12; } html { --mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, 0.12); --mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, 0.38); --mdc-outlined-button-label-text-color: black; --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12); } html { --mat-outlined-button-state-layer-color: black; --mat-outlined-button-disabled-state-layer-color: black; --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-outlined-button-hover-state-layer-opacity: 0.04; --mat-outlined-button-focus-state-layer-opacity: 0.12; --mat-outlined-button-pressed-state-layer-opacity: 0.12; } .mat-mdc-button.mat-primary { --mdc-text-button-label-text-color: #2d7ff9; } .mat-mdc-button.mat-primary { --mat-text-button-state-layer-color: #2d7ff9; --mat-text-button-ripple-color: rgba(45, 127, 249, 0.1); } .mat-mdc-button.mat-accent { --mdc-text-button-label-text-color: #00754a; } .mat-mdc-button.mat-accent { --mat-text-button-state-layer-color: #00754a; --mat-text-button-ripple-color: rgba(0, 117, 74, 0.1); } .mat-mdc-button.mat-warn { --mdc-text-button-label-text-color: #b8082a; } .mat-mdc-button.mat-warn { --mat-text-button-state-layer-color: #b8082a; --mat-text-button-ripple-color: rgba(184, 8, 42, 0.1); } .mat-mdc-unelevated-button.mat-primary { --mdc-filled-button-container-color: #2d7ff9; --mdc-filled-button-label-text-color: white; } .mat-mdc-unelevated-button.mat-primary { --mat-filled-button-state-layer-color: white; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1); } .mat-mdc-unelevated-button.mat-accent { --mdc-filled-button-container-color: #00754a; --mdc-filled-button-label-text-color: white; } .mat-mdc-unelevated-button.mat-accent { --mat-filled-button-state-layer-color: white; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1); } .mat-mdc-unelevated-button.mat-warn { --mdc-filled-button-container-color: #b8082a; --mdc-filled-button-label-text-color: black; } .mat-mdc-unelevated-button.mat-warn { --mat-filled-button-state-layer-color: black; --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1); } .mat-mdc-raised-button.mat-primary { --mdc-protected-button-container-color: #2d7ff9; --mdc-protected-button-label-text-color: white; } .mat-mdc-raised-button.mat-primary { --mat-protected-button-state-layer-color: white; --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1); } .mat-mdc-raised-button.mat-accent { --mdc-protected-button-container-color: #00754a; --mdc-protected-button-label-text-color: white; } .mat-mdc-raised-button.mat-accent { --mat-protected-button-state-layer-color: white; --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1); } .mat-mdc-raised-button.mat-warn { --mdc-protected-button-container-color: #b8082a; --mdc-protected-button-label-text-color: black; } .mat-mdc-raised-button.mat-warn { --mat-protected-button-state-layer-color: black; --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1); } .mat-mdc-outlined-button.mat-primary { --mdc-outlined-button-label-text-color: #2d7ff9; --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12); } .mat-mdc-outlined-button.mat-primary { --mat-outlined-button-state-layer-color: #2d7ff9; --mat-outlined-button-ripple-color: rgba(45, 127, 249, 0.1); } .mat-mdc-outlined-button.mat-accent { --mdc-outlined-button-label-text-color: #00754a; --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12); } .mat-mdc-outlined-button.mat-accent { --mat-outlined-button-state-layer-color: #00754a; --mat-outlined-button-ripple-color: rgba(0, 117, 74, 0.1); } .mat-mdc-outlined-button.mat-warn { --mdc-outlined-button-label-text-color: #b8082a; --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12); } .mat-mdc-outlined-button.mat-warn { --mat-outlined-button-state-layer-color: #b8082a; --mat-outlined-button-ripple-color: rgba(184, 8, 42, 0.1); } html { --mdc-text-button-container-height: 36px; } html { --mdc-filled-button-container-height: 36px; } html { --mdc-protected-button-container-height: 36px; } html { --mdc-outlined-button-container-height: 36px; } html { --mat-text-button-touch-target-display: block; } html { --mat-filled-button-touch-target-display: block; } html { --mat-protected-button-touch-target-display: block; } html { --mat-outlined-button-touch-target-display: block; } html { --mdc-text-button-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-text-button-label-text-size: 14px; --mdc-text-button-label-text-tracking: normal; --mdc-text-button-label-text-weight: 500; --mdc-text-button-label-text-transform: none; } html { --mdc-filled-button-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-filled-button-label-text-size: 14px; --mdc-filled-button-label-text-tracking: normal; --mdc-filled-button-label-text-weight: 500; --mdc-filled-button-label-text-transform: none; } html { --mdc-protected-button-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-protected-button-label-text-size: 14px; --mdc-protected-button-label-text-tracking: normal; --mdc-protected-button-label-text-weight: 500; --mdc-protected-button-label-text-transform: none; } html { --mdc-outlined-button-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-outlined-button-label-text-size: 14px; --mdc-outlined-button-label-text-tracking: normal; --mdc-outlined-button-label-text-weight: 500; --mdc-outlined-button-label-text-transform: none; } html { --mdc-icon-button-icon-size: 24px; } html { --mdc-icon-button-icon-color: inherit; --mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, 0.38); } html { --mat-icon-button-state-layer-color: black; --mat-icon-button-disabled-state-layer-color: black; --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1); --mat-icon-button-hover-state-layer-opacity: 0.04; --mat-icon-button-focus-state-layer-opacity: 0.12; --mat-icon-button-pressed-state-layer-opacity: 0.12; } html .mat-mdc-icon-button.mat-primary { --mdc-icon-button-icon-color: #2d7ff9; } html .mat-mdc-icon-button.mat-primary { --mat-icon-button-state-layer-color: #2d7ff9; --mat-icon-button-ripple-color: rgba(45, 127, 249, 0.1); } html .mat-mdc-icon-button.mat-accent { --mdc-icon-button-icon-color: #00754a; } html .mat-mdc-icon-button.mat-accent { --mat-icon-button-state-layer-color: #00754a; --mat-icon-button-ripple-color: rgba(0, 117, 74, 0.1); } html .mat-mdc-icon-button.mat-warn { --mdc-icon-button-icon-color: #b8082a; } html .mat-mdc-icon-button.mat-warn { --mat-icon-button-state-layer-color: #b8082a; --mat-icon-button-ripple-color: rgba(184, 8, 42, 0.1); } html { --mat-icon-button-touch-target-display: block; } .mat-mdc-icon-button.mat-mdc-button-base { --mdc-icon-button-state-layer-size: 48px; width: var(--mdc-icon-button-state-layer-size); height: var(--mdc-icon-button-state-layer-size); padding: 12px; } html { --mdc-fab-container-shape: 50%; --mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); } html { --mdc-fab-small-container-shape: 50%; --mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); } html { --mdc-extended-fab-container-height: 48px; --mdc-extended-fab-container-shape: 24px; --mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); } html { --mdc-fab-container-color: white; } html { --mat-fab-foreground-color: black; --mat-fab-state-layer-color: black; --mat-fab-disabled-state-layer-color: black; --mat-fab-ripple-color: rgba(0, 0, 0, 0.1); --mat-fab-hover-state-layer-opacity: 0.04; --mat-fab-focus-state-layer-opacity: 0.12; --mat-fab-pressed-state-layer-opacity: 0.12; --mat-fab-disabled-state-container-color: rgba(0, 0, 0, 0.12); --mat-fab-disabled-state-foreground-color: rgba(0, 0, 0, 0.38); } html { --mdc-fab-small-container-color: white; } html { --mat-fab-small-foreground-color: black; --mat-fab-small-state-layer-color: black; --mat-fab-small-disabled-state-layer-color: black; --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1); --mat-fab-small-hover-state-layer-opacity: 0.04; --mat-fab-small-focus-state-layer-opacity: 0.12; --mat-fab-small-pressed-state-layer-opacity: 0.12; --mat-fab-small-disabled-state-container-color: rgba(0, 0, 0, 0.12); --mat-fab-small-disabled-state-foreground-color: rgba(0, 0, 0, 0.38); } html .mat-mdc-fab.mat-primary { --mdc-fab-container-color: #2d7ff9; } html .mat-mdc-fab.mat-primary { --mat-fab-foreground-color: white; --mat-fab-state-layer-color: white; --mat-fab-ripple-color: rgba(255, 255, 255, 0.1); } html .mat-mdc-fab.mat-accent { --mdc-fab-container-color: #00754a; } html .mat-mdc-fab.mat-accent { --mat-fab-foreground-color: white; --mat-fab-state-layer-color: white; --mat-fab-ripple-color: rgba(255, 255, 255, 0.1); } html .mat-mdc-fab.mat-warn { --mdc-fab-container-color: #b8082a; } html .mat-mdc-fab.mat-warn { --mat-fab-foreground-color: black; --mat-fab-state-layer-color: black; --mat-fab-ripple-color: rgba(0, 0, 0, 0.1); } html .mat-mdc-mini-fab.mat-primary { --mdc-fab-small-container-color: #2d7ff9; } html .mat-mdc-mini-fab.mat-primary { --mat-fab-small-foreground-color: white; --mat-fab-small-state-layer-color: white; --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1); } html .mat-mdc-mini-fab.mat-accent { --mdc-fab-small-container-color: #00754a; } html .mat-mdc-mini-fab.mat-accent { --mat-fab-small-foreground-color: white; --mat-fab-small-state-layer-color: white; --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1); } html .mat-mdc-mini-fab.mat-warn { --mdc-fab-small-container-color: #b8082a; } html .mat-mdc-mini-fab.mat-warn { --mat-fab-small-foreground-color: black; --mat-fab-small-state-layer-color: black; --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1); } html { --mat-fab-touch-target-display: block; } html { --mat-fab-small-touch-target-display: block; } html { --mdc-extended-fab-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-extended-fab-label-text-size: 14px; --mdc-extended-fab-label-text-tracking: normal; --mdc-extended-fab-label-text-weight: 500; } html { --mdc-snackbar-container-shape: 4px; } html { --mdc-snackbar-container-color: #333333; --mdc-snackbar-supporting-text-color: rgba(255, 255, 255, 0.87); } html { --mat-snack-bar-button-color: #cfe0ff; } html { --mdc-snackbar-supporting-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mdc-snackbar-supporting-text-line-height: 24px; --mdc-snackbar-supporting-text-size: 14px; --mdc-snackbar-supporting-text-weight: 500; } html { --mat-table-row-item-outline-width: 1px; } html { --mat-table-background-color: white; --mat-table-header-headline-color: rgba(0, 0, 0, 0.87); --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87); --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12); } html { --mat-table-header-container-height: 56px; --mat-table-footer-container-height: 52px; --mat-table-row-item-container-height: 52px; } html { --mat-table-header-headline-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-table-header-headline-line-height: 24px; --mat-table-header-headline-size: 14px; --mat-table-header-headline-weight: 500; --mat-table-header-headline-tracking: normal; --mat-table-row-item-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-table-row-item-label-text-line-height: 24px; --mat-table-row-item-label-text-size: 14px; --mat-table-row-item-label-text-weight: 500; --mat-table-row-item-label-text-tracking: normal; --mat-table-footer-supporting-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-table-footer-supporting-text-line-height: 24px; --mat-table-footer-supporting-text-size: 14px; --mat-table-footer-supporting-text-weight: 500; --mat-table-footer-supporting-text-tracking: normal; } html { --mdc-circular-progress-active-indicator-width: 4px; --mdc-circular-progress-size: 48px; } html { --mdc-circular-progress-active-indicator-color: #2d7ff9; } html .mat-accent { --mdc-circular-progress-active-indicator-color: #00754a; } html .mat-warn { --mdc-circular-progress-active-indicator-color: #b8082a; } html { --mat-badge-container-shape: 50%; --mat-badge-container-size: unset; --mat-badge-small-size-container-size: unset; --mat-badge-large-size-container-size: unset; --mat-badge-legacy-container-size: 22px; --mat-badge-legacy-small-size-container-size: 16px; --mat-badge-legacy-large-size-container-size: 28px; --mat-badge-container-offset: -11px 0; --mat-badge-small-size-container-offset: -8px 0; --mat-badge-large-size-container-offset: -14px 0; --mat-badge-container-overlap-offset: -11px; --mat-badge-small-size-container-overlap-offset: -8px; --mat-badge-large-size-container-overlap-offset: -14px; --mat-badge-container-padding: 0; --mat-badge-small-size-container-padding: 0; --mat-badge-large-size-container-padding: 0; } html { --mat-badge-background-color: #2d7ff9; --mat-badge-text-color: white; --mat-badge-disabled-state-background-color: #b9b9b9; --mat-badge-disabled-state-text-color: rgba(0, 0, 0, 0.38); } .mat-badge-accent { --mat-badge-background-color: #00754a; --mat-badge-text-color: white; } .mat-badge-warn { --mat-badge-background-color: #b8082a; --mat-badge-text-color: rgba(0, 0, 0, 0.87); } html { --mat-badge-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-badge-line-height: 22px; --mat-badge-text-size: 12px; --mat-badge-text-weight: 600; --mat-badge-small-size-text-size: 9px; --mat-badge-small-size-line-height: 16px; --mat-badge-large-size-text-size: 24px; --mat-badge-large-size-line-height: 28px; } html { --mat-bottom-sheet-container-shape: 4px; } html { --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87); --mat-bottom-sheet-container-background-color: white; } html { --mat-bottom-sheet-container-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-bottom-sheet-container-text-line-height: 24px; --mat-bottom-sheet-container-text-size: 14px; --mat-bottom-sheet-container-text-tracking: normal; --mat-bottom-sheet-container-text-weight: 500; } html { --mat-legacy-button-toggle-height: 36px; --mat-legacy-button-toggle-shape: 2px; --mat-legacy-button-toggle-focus-state-layer-opacity: 1; } html { --mat-standard-button-toggle-shape: 4px; --mat-standard-button-toggle-hover-state-layer-opacity: 0.04; --mat-standard-button-toggle-focus-state-layer-opacity: 0.12; } html { --mat-legacy-button-toggle-text-color: rgba(0, 0, 0, 0.38); --mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, 0.12); --mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.54); --mat-legacy-button-toggle-selected-state-background-color: #e0e0e0; --mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26); --mat-legacy-button-toggle-disabled-state-background-color: #eeeeee; --mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd; } html { --mat-standard-button-toggle-text-color: rgba(0, 0, 0, 0.87); --mat-standard-button-toggle-background-color: white; --mat-standard-button-toggle-state-layer-color: black; --mat-standard-button-toggle-selected-state-background-color: #e0e0e0; --mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26); --mat-standard-button-toggle-disabled-state-background-color: white; --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd; --mat-standard-button-toggle-divider-color: rgb(224.4, 224.4, 224.4); } html { --mat-standard-button-toggle-height: 48px; } html { --mat-legacy-button-toggle-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-legacy-button-toggle-label-text-line-height: 20px; --mat-legacy-button-toggle-label-text-size: 14px; --mat-legacy-button-toggle-label-text-tracking: normal; --mat-legacy-button-toggle-label-text-weight: 400; } html { --mat-standard-button-toggle-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-standard-button-toggle-label-text-line-height: 20px; --mat-standard-button-toggle-label-text-size: 14px; --mat-standard-button-toggle-label-text-tracking: normal; --mat-standard-button-toggle-label-text-weight: 400; } html { --mat-datepicker-calendar-container-shape: 4px; --mat-datepicker-calendar-container-touch-shape: 4px; --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } html { --mat-datepicker-calendar-date-selected-state-text-color: white; --mat-datepicker-calendar-date-selected-state-background-color: #2d7ff9; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(45, 127, 249, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: white; --mat-datepicker-calendar-date-focus-state-background-color: rgba(45, 127, 249, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(45, 127, 249, 0.3); --mat-datepicker-toggle-active-state-icon-color: #2d7ff9; --mat-datepicker-calendar-date-in-range-state-background-color: rgba(45, 127, 249, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032); --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-period-button-text-color: black; --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12); --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54); --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.38); --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, 0.18); --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-outline-color: transparent; --mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, 0.38); --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.24); --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87); --mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, 0.38); --mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, 0.38); --mat-datepicker-calendar-container-background-color: white; --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87); } .mat-datepicker-content.mat-accent { --mat-datepicker-calendar-date-selected-state-text-color: white; --mat-datepicker-calendar-date-selected-state-background-color: #00754a; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(0, 117, 74, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: white; --mat-datepicker-calendar-date-focus-state-background-color: rgba(0, 117, 74, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(0, 117, 74, 0.3); --mat-datepicker-calendar-date-in-range-state-background-color: rgba(0, 117, 74, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032); } .mat-datepicker-content.mat-warn { --mat-datepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-selected-state-background-color: #b8082a; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(184, 8, 42, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-focus-state-background-color: rgba(184, 8, 42, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(184, 8, 42, 0.3); --mat-datepicker-calendar-date-in-range-state-background-color: rgba(184, 8, 42, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032); } .mat-datepicker-toggle-active.mat-accent { --mat-datepicker-toggle-active-state-icon-color: #00754a; } .mat-datepicker-toggle-active.mat-warn { --mat-datepicker-toggle-active-state-icon-color: #b8082a; } .mat-calendar-controls { --mat-icon-button-touch-target-display: none; } .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base { --mdc-icon-button-state-layer-size: 40px; width: var(--mdc-icon-button-state-layer-size); height: var(--mdc-icon-button-state-layer-size); padding: 8px; } html { --mat-datepicker-calendar-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-datepicker-calendar-text-size: 13px; --mat-datepicker-calendar-body-label-text-size: 14px; --mat-datepicker-calendar-body-label-text-weight: 500; --mat-datepicker-calendar-period-button-text-size: 14px; --mat-datepicker-calendar-period-button-text-weight: 500; --mat-datepicker-calendar-header-text-size: 11px; --mat-datepicker-calendar-header-text-weight: 400; } html { --mat-divider-width: 1px; } html { --mat-divider-color: rgba(0, 0, 0, 0.12); } html { --mat-expansion-container-shape: 4px; --mat-expansion-legacy-header-indicator-display: inline-block; --mat-expansion-header-indicator-display: none; } html { --mat-expansion-container-background-color: white; --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87); --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12); --mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, 0.26); --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87); --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54); --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54); } html { --mat-expansion-header-collapsed-state-height: 48px; --mat-expansion-header-expanded-state-height: 64px; } html { --mat-expansion-header-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-expansion-header-text-size: 14px; --mat-expansion-header-text-weight: 500; --mat-expansion-header-text-line-height: inherit; --mat-expansion-header-text-tracking: inherit; --mat-expansion-container-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-expansion-container-text-line-height: 24px; --mat-expansion-container-text-size: 14px; --mat-expansion-container-text-tracking: normal; --mat-expansion-container-text-weight: 500; } html { --mat-grid-list-tile-header-primary-text-size: 14px; --mat-grid-list-tile-header-secondary-text-size: 12px; --mat-grid-list-tile-footer-primary-text-size: 14px; --mat-grid-list-tile-footer-secondary-text-size: 12px; } html { --mat-icon-color: inherit; } .mat-icon.mat-primary { --mat-icon-color: #2d7ff9; } .mat-icon.mat-accent { --mat-icon-color: #00754a; } .mat-icon.mat-warn { --mat-icon-color: #b8082a; } html { --mat-sidenav-container-shape: 0; --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); --mat-sidenav-container-width: auto; } html { --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12); --mat-sidenav-container-background-color: white; --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87); --mat-sidenav-content-background-color: #fafafa; --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87); --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6); } html { --mat-stepper-header-icon-foreground-color: white; --mat-stepper-header-selected-state-icon-background-color: #2d7ff9; --mat-stepper-header-selected-state-icon-foreground-color: white; --mat-stepper-header-done-state-icon-background-color: #2d7ff9; --mat-stepper-header-done-state-icon-foreground-color: white; --mat-stepper-header-edit-state-icon-background-color: #2d7ff9; --mat-stepper-header-edit-state-icon-foreground-color: white; --mat-stepper-container-color: white; --mat-stepper-line-color: rgba(0, 0, 0, 0.12); --mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, 0.04); --mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, 0.04); --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54); --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54); --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-error-state-label-text-color: #b8082a; --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54); --mat-stepper-header-error-state-icon-foreground-color: #b8082a; --mat-stepper-header-error-state-icon-background-color: transparent; } html .mat-step-header.mat-accent { --mat-stepper-header-icon-foreground-color: white; --mat-stepper-header-selected-state-icon-background-color: #00754a; --mat-stepper-header-selected-state-icon-foreground-color: white; --mat-stepper-header-done-state-icon-background-color: #00754a; --mat-stepper-header-done-state-icon-foreground-color: white; --mat-stepper-header-edit-state-icon-background-color: #00754a; --mat-stepper-header-edit-state-icon-foreground-color: white; } html .mat-step-header.mat-warn { --mat-stepper-header-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-selected-state-icon-background-color: #b8082a; --mat-stepper-header-selected-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-done-state-icon-background-color: #b8082a; --mat-stepper-header-done-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-edit-state-icon-background-color: #b8082a; --mat-stepper-header-edit-state-icon-foreground-color: rgba(0, 0, 0, 0.87); } html { --mat-stepper-header-height: 72px; } html { --mat-stepper-container-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-stepper-header-label-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-stepper-header-label-text-size: 14px; --mat-stepper-header-label-text-weight: 500; --mat-stepper-header-error-state-label-text-size: 14px; --mat-stepper-header-selected-state-label-text-size: 14px; --mat-stepper-header-selected-state-label-text-weight: 400; } html { --mat-sort-arrow-color: rgb(117.3, 117.3, 117.3); } html { --mat-toolbar-container-background-color: whitesmoke; --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87); } .mat-toolbar.mat-primary { --mat-toolbar-container-background-color: #2d7ff9; --mat-toolbar-container-text-color: white; } .mat-toolbar.mat-accent { --mat-toolbar-container-background-color: #00754a; --mat-toolbar-container-text-color: white; } .mat-toolbar.mat-warn { --mat-toolbar-container-background-color: #b8082a; --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87); } html { --mat-toolbar-standard-height: 64px; --mat-toolbar-mobile-height: 56px; } html { --mat-toolbar-title-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-toolbar-title-text-line-height: 32px; --mat-toolbar-title-text-size: 20px; --mat-toolbar-title-text-tracking: normal; --mat-toolbar-title-text-weight: 400; } html { --mat-tree-container-background-color: white; --mat-tree-node-text-color: rgba(0, 0, 0, 0.87); } html { --mat-tree-node-min-height: 48px; } html { --mat-tree-node-text-font: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --mat-tree-node-text-size: 14px; --mat-tree-node-text-weight: 500; } html { --mat-timepicker-container-shape: 4px; --mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } html { --mat-timepicker-container-background-color: white; } :root { --theme-primary-color: #2d7ff9; --theme-primary-color-default-contrast: white; --theme-header-text-color: white; --adf-theme-primary-50: #eaf2ff; --adf-theme-primary-100: #cfe0ff; --adf-theme-primary-300: #6ba6fa; --adf-theme-primary-900: #06318c; --theme-warn-color: #b8082a; --theme-warn-color-a700: #c95100; --theme-warn-color-default-contrast: rgba(0, 0, 0, 0.87); --theme-accent-color: #00754a; --theme-accent-color-a200: #00754a; --theme-accent-color-default-contrast: white; --theme-accent-500: #359b34; --adf-theme-foreground-base-color: black; --adf-theme-foreground-base-color-065: rgba(0, 0, 0, 0.65); --adf-theme-foreground-base-color-045: rgba(0, 0, 0, 0.45); --adf-theme-foreground-disabled-text-color: rgba(0, 0, 0, 0.38); --adf-theme-foreground-divider-color: rgba(0, 0, 0, 0.12); --adf-theme-foreground-icon-color: rgba(0, 0, 0, 0.54); --adf-theme-foreground-icon-color-054: rgba(0, 0, 0, 0.54); --adf-theme-foreground-secondary-text-color: rgba(0, 0, 0, 0.54); --adf-theme-foreground-text-color: rgba(0, 0, 0, 0.87); --adf-theme-foreground-text-color-087: rgba(0, 0, 0, 0.87); --adf-theme-foreground-text-color-075: rgba(0, 0, 0, 0.75); --adf-theme-foreground-text-color-064: rgba(0, 0, 0, 0.64); --adf-theme-foreground-text-color-054: rgba(0, 0, 0, 0.54); --adf-theme-foreground-text-color-040: rgba(0, 0, 0, 0.4); --adf-theme-foreground-text-color-027: rgba(0, 0, 0, 0.27); --adf-theme-foreground-text-color-025: rgba(0, 0, 0, 0.25); --adf-theme-foreground-text-color-014: rgba(0, 0, 0, 0.14); --adf-theme-foreground-text-color-007: rgba(0, 0, 0, 0.07); --adf-theme-background-card-color: white; --adf-theme-background-card-color-087: rgba(255, 255, 255, 0.87); --theme-background-color: #fafafa; --adf-theme-background-dialog-color: white; --adf-theme-background-hover-color: rgba(0, 0, 0, 0.04); --adf-theme-background-selected-button-color: #e0e0e0; --adf-theme-background-status-bar-color: #e0e0e0; --adf-theme-background-unselected-chip-color: #e0e0e0; --theme-font-family: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; --theme-font-weight: normal; --theme-body-1-font-size: 14px; --theme-body-2-font-size: 14px; --theme-body-1-line-height: 24px; --theme-display-1-font-size: 34px; --theme-display-3-font-size: 56px; --theme-display-4-font-size: 112px; --theme-caption-font-size: 12px; --theme-title-font-size: 20px; --theme-subheading-1-font-size: 14px; --theme-subheading-2-font-size: 16px; --theme-button-font-size: 14px; --theme-headline-font-size: 24px; --theme-headline-line-height: 32px; --theme-adf-icon-1-font-size: 24px; --theme-adf-picture-1-font-size: 16px; --theme-adf-task-footer-font-size: 12px; --theme-adf-task-title-font-size: 14px; --adf-theme-mat-grey-color-a200: #eeeeee; --adf-theme-mat-grey-color-a400: #bdbdbd; --adf-theme-mat-grey-color-50: #fafafa; --adf-theme-spacing: 8px; --adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12); --adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698); --adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7); --adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24); --adf-error-color: #ba1b1b; --adf-secondary-button-background: rgba(33, 33, 33, 0.0509803922); --adf-secondary-modal-text-color: #212121; --adf-disabled-button-background: rgba(0, 0, 0, 0.12); --adf-chip-border-color: #757575; --adf-sidenav-active-text-color: rgb(0, 48, 100); --adf-accessibility-tooltip-background-color: #2f3033; --adf-pdf-viewer-annotation-tooltip-color: rgb(255, 235, 107); } .mat-datetimepicker-calendar-header { background-color: #2d7ff9; } .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected { background-color: #2d7ff9; color: white; } .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-disabled > .mat-datetimepicker-calendar-body-selected { background-color: rgba(45, 127, 249, 0.4); } .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:not(.mat-datetimepicker-calendar-body-selected) { border-color: #2d7ff9; } .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today.mat-datetimepicker-calendar-body-selected { box-shadow: inset 0 0 0 1px white; } .mat-datetimepicker-clock-center { background-color: #2d7ff9; } .mat-datetimepicker-clock-hand { background-color: #2d7ff9; } .mat-datetimepicker-clock-hand::before { background-color: #2d7ff9; } .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected { background-color: rgb(69.7916666667, 142.1111111111, 249.7083333333); } .adf-content-node-selector-content-list .adf-content-selector-modified-cell { display: none; } .adf-content-node-selector-content-list .adf-content-selector-modifier-cell { display: none; } adf-pagination.adf-pagination { height: 32px; line-height: 24px; padding: 16px 0; } adf-pagination.adf-pagination .adf-pagination__block { flex: none; padding: 0; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 0.25px; } adf-pagination.adf-pagination .adf-pagination__block.adf-pagination__range-block { padding: 0 24px; } adf-pagination.adf-pagination .adf-pagination__perpage-block { flex: auto; padding-right: 24px; } adf-pagination.adf-pagination .adf-pagination__actualinfo-block { padding-right: 12px; } adf-pagination.adf-pagination .adf-pagination__previous-button { margin: 0 12px 0 0; } adf-pagination.adf-pagination .adf-pagination__next-button { margin: 0; } adf-pagination.adf-pagination .adf-pagination__controls-block { padding-right: 24px; } .mat-mdc-icon-button:focus-visible, .mat-mdc-button:focus-visible, .mat-mdc-checkbox:focus-visible, .mat-mdc-raised-button:focus-visible { outline: 2px solid var(--theme-blue-button-color); border-radius: 4px; } .mat-mdc-icon-button .mat-ripple, .mat-mdc-icon-button .mdc-icon-button__ripple, .mat-mdc-button .mat-ripple, .mat-mdc-button .mdc-icon-button__ripple, .mat-mdc-checkbox .mat-ripple, .mat-mdc-checkbox .mdc-icon-button__ripple, .mat-mdc-raised-button .mat-ripple, .mat-mdc-raised-button .mdc-icon-button__ripple { display: none; } .mat-mdc-icon-button.cdk-keyboard-focused .mat-button-focus-overlay, .mat-mdc-button.cdk-keyboard-focused .mat-button-focus-overlay, .mat-mdc-checkbox.cdk-keyboard-focused .mat-button-focus-overlay, .mat-mdc-raised-button.cdk-keyboard-focused .mat-button-focus-overlay { display: none; } .mat-mdc-icon-button .mdc-checkbox__native-control:focus-visible ~ .mat-mdc-checkbox-ripple, .mat-mdc-button .mdc-checkbox__native-control:focus-visible ~ .mat-mdc-checkbox-ripple, .mat-mdc-checkbox .mdc-checkbox__native-control:focus-visible ~ .mat-mdc-checkbox-ripple, .mat-mdc-raised-button .mdc-checkbox__native-control:focus-visible ~ .mat-mdc-checkbox-ripple { outline: 2px solid var(--theme-blue-button-color); border-radius: 4px; height: 22px; width: 22px; left: calc(50% - 11px); top: calc(50% - 10px); display: block; } .mat-mdc-icon-button .mdc-checkbox__native-control:focus-visible ~ .mdc-checkbox__background, .mat-mdc-button .mdc-checkbox__native-control:focus-visible ~ .mdc-checkbox__background, .mat-mdc-checkbox .mdc-checkbox__native-control:focus-visible ~ .mdc-checkbox__background, .mat-mdc-raised-button .mdc-checkbox__native-control:focus-visible ~ .mdc-checkbox__background { opacity: 0.57; } .mdc-checkbox__ripple { display: none; } .mat-mdc-form-field-focus-overlay { --mat-form-field-state-layer-color: transparent; } .mdc-menu-surface.mat-mdc-autocomplete-panel:is(div), .mdc-menu-surface.mat-mdc-select-panel:is(div) { padding: 0; } .adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg { fill: var(--theme-blue-button-color); } .mat-mdc-list-base .mat-mdc-list-option .mdc-list-item__content { border: 2px solid transparent; border-radius: 4px; } .mat-mdc-list-base .mat-mdc-list-option:focus-visible { background-color: var(--theme-white-background); } .mat-mdc-list-base .mat-mdc-list-option:focus-visible .mdc-list-item__content { border: 2px solid var(--theme-blue-button-color); border-radius: 4px; } .adf-search-user-button.mat-mdc-button, .app-search-button { line-height: 36px; border: 2px solid transparent; border-radius: 4px; } .adf-search-user-button.mat-mdc-button:focus-visible, .app-search-button:focus-visible { outline: none; border: 2px solid var(--theme-blue-button-color); border-radius: 4px; } .mat-mdc-menu-content .mat-mdc-menu-item { border: 2px solid transparent; border-radius: 4px; } .mat-mdc-menu-content .mat-mdc-menu-item .mat-ripple { display: none; } .mat-mdc-menu-content .mat-mdc-menu-item:focus-visible { border: 2px solid var(--theme-blue-button-color); border-radius: 4px; background-color: var(--theme-white-background); } .mat-mdc-menu-content .mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]) { background-color: var(--theme-white-background); } .adf-toolbar-title { padding: 2px; } .mat-mdc-option.cdk-keyboard-focused .mat-mdc-option-ripple { outline: 2px solid var(--theme-blue-button-color); border-radius: 4px; } .mat-mdc-slide-toggle .mdc-form-field button.mdc-switch.mdc-switch--selected .mdc-switch__handle, .mat-mdc-slide-toggle .mdc-form-field button.mdc-switch.mdc-switch--unselected .mdc-switch__handle { width: 15px; height: 15px; transform: translate(20%, 50%); background-color: #484a4d; } .mat-mdc-slide-toggle .mdc-form-field .mdc-switch .mdc-switch__track { border-radius: 15px; height: 20px; } .mat-mdc-slide-toggle .mdc-form-field .mdc-switch__handle-track { top: -15px; } .mat-mdc-slide-toggle .mdc-form-field .mdc-switch__ripple { display: none; } .mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-form-field .mdc-switch .mdc-switch__track::after { background-color: var(--theme-blue-button-color); } .mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-form-field .mdc-switch .mdc-switch__shadow { background-color: var(--theme-primary-color-default-contrast); } .mat-mdc-slide-toggle.cdk-keyboard-focused .mdc-form-field .mdc-switch .mdc-switch__track { outline: 2px solid var(--theme-blue-button-color); } .mat-mdc-outlined-button.cdk-keyboard-focused .mat-mdc-button-ripple.mat-ripple, .mat-mdc-unelevated-button.cdk-keyboard-focused .mat-mdc-button-ripple.mat-ripple { outline: 2px solid var(--theme-blue-button-color); inset: -4px; } .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content { outline: 2px solid var(--theme-datetimepicker-cell-focus-border); } .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) { background-color: var(--theme-datetimepicker-cell-background); } .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected { background-color: var(--theme-datetimepicker-selected-date-background); } .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected { background-color: var(--theme-about-panel-border-color); color: var(--theme-datetimepicker-font-color); } .mat-expansion-panel .mat-expansion-panel-header { box-sizing: border-box; border: 2px solid transparent; } .mat-expansion-panel .mat-expansion-panel-header .mat-mdc-button-base.mat-mdc-button { outline: none; border: 2px solid transparent; border-radius: 4px; } .mat-expansion-panel .mat-expansion-panel-header .mat-mdc-button-base.mat-mdc-button:focus-visible { border: 2px solid var(--theme-blue-button-color); border-radius: 4px; background-color: var(--theme-white-background); } .mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]) { background-color: var(--theme-white-background); border: 2px solid var(--theme-blue-button-color); border-radius: 4px; } .adf-error-snackbar { background-color: #ba1b1b; } .adf-error-snackbar .mat-mdc-simple-snack-bar, .adf-error-snackbar .mat-mdc-snack-bar-action { color: var(--theme-white-background); } .mat-mdc-button-base.adf-filter-button { margin-left: -2px; } .adf-pagination__perpage-block, .adf-pagination__actualinfo-block { /* stylelint-disable-next-line no-descending-specificity */ } .adf-pagination__perpage-block .mat-mdc-icon-button, .adf-pagination__actualinfo-block .mat-mdc-icon-button { left: 3px; } .adf-pagination__perpage-block .mat-mdc-icon-button:focus-visible, .adf-pagination__actualinfo-block .mat-mdc-icon-button:focus-visible { outline: none; } .adf-pagination__perpage-block .mat-mdc-icon-button.cdk-keyboard-focused .mat-icon, .adf-pagination__actualinfo-block .mat-mdc-icon-button.cdk-keyboard-focused .mat-icon { outline: 2px solid var(--theme-blue-button-color); border-radius: 4px; } adf-about { /* custom ADF About Component Theme */ background-color: var(--theme-about-panel-background-color); overflow: auto; } adf-about .mdc-data-table__header-cell { color: var(--adf-theme-foreground-text-color-064); font-size: 12px; font-weight: 500; } adf-about .mat-accordion { box-shadow: none; border: none; } adf-about .mat-accordion.adf-about-panel .mat-expansion-panel { box-shadow: none; border-radius: 12px; margin: 24px; width: 95%; border: 1px solid var(--theme-about-panel-border-color); } adf-about .mat-expansion-panel-header { height: 80px; line-height: 32px; } adf-about mat-panel-title { font-style: normal; font-weight: 700; font-size: 14px; line-height: 24px; } /* stylelint-disable-next-line */ .mat-elevation-z0, .mat-mdc-elevation-specific.mat-elevation-z0 { box-shadow: var(--mat-app-elevation-shadow-level-0, none); } .mat-elevation-z1, .mat-mdc-elevation-specific.mat-elevation-z1 { box-shadow: var(--mat-app-elevation-shadow-level-1, none); } .mat-elevation-z2, .mat-mdc-elevation-specific.mat-elevation-z2 { box-shadow: var(--mat-app-elevation-shadow-level-2, none); } .mat-elevation-z3, .mat-mdc-elevation-specific.mat-elevation-z3 { box-shadow: var(--mat-app-elevation-shadow-level-3, none); } .mat-elevation-z4, .mat-mdc-elevation-specific.mat-elevation-z4 { box-shadow: var(--mat-app-elevation-shadow-level-4, none); } .mat-elevation-z5, .mat-mdc-elevation-specific.mat-elevation-z5 { box-shadow: var(--mat-app-elevation-shadow-level-5, none); } .mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 { box-shadow: var(--mat-app-elevation-shadow-level-6, none); } .mat-elevation-z7, .mat-mdc-elevation-specific.mat-elevation-z7 { box-shadow: var(--mat-app-elevation-shadow-level-7, none); } .mat-elevation-z8, .mat-mdc-elevation-specific.mat-elevation-z8 { box-shadow: var(--mat-app-elevation-shadow-level-8, none); } .mat-elevation-z9, .mat-mdc-elevation-specific.mat-elevation-z9 { box-shadow: var(--mat-app-elevation-shadow-level-9, none); } .mat-elevation-z10, .mat-mdc-elevation-specific.mat-elevation-z10 { box-shadow: var(--mat-app-elevation-shadow-level-10, none); } .mat-elevation-z11, .mat-mdc-elevation-specific.mat-elevation-z11 { box-shadow: var(--mat-app-elevation-shadow-level-11, none); } .mat-elevation-z12, .mat-mdc-elevation-specific.mat-elevation-z12 { box-shadow: var(--mat-app-elevation-shadow-level-12, none); } .mat-elevation-z13, .mat-mdc-elevation-specific.mat-elevation-z13 { box-shadow: var(--mat-app-elevation-shadow-level-13, none); } .mat-elevation-z14, .mat-mdc-elevation-specific.mat-elevation-z14 { box-shadow: var(--mat-app-elevation-shadow-level-14, none); } .mat-elevation-z15, .mat-mdc-elevation-specific.mat-elevation-z15 { box-shadow: var(--mat-app-elevation-shadow-level-15, none); } .mat-elevation-z16, .mat-mdc-elevation-specific.mat-elevation-z16 { box-shadow: var(--mat-app-elevation-shadow-level-16, none); } .mat-elevation-z17, .mat-mdc-elevation-specific.mat-elevation-z17 { box-shadow: var(--mat-app-elevation-shadow-level-17, none); } .mat-elevation-z18, .mat-mdc-elevation-specific.mat-elevation-z18 { box-shadow: var(--mat-app-elevation-shadow-level-18, none); } .mat-elevation-z19, .mat-mdc-elevation-specific.mat-elevation-z19 { box-shadow: var(--mat-app-elevation-shadow-level-19, none); } .mat-elevation-z20, .mat-mdc-elevation-specific.mat-elevation-z20 { box-shadow: var(--mat-app-elevation-shadow-level-20, none); } .mat-elevation-z21, .mat-mdc-elevation-specific.mat-elevation-z21 { box-shadow: var(--mat-app-elevation-shadow-level-21, none); } .mat-elevation-z22, .mat-mdc-elevation-specific.mat-elevation-z22 { box-shadow: var(--mat-app-elevation-shadow-level-22, none); } .mat-elevation-z23, .mat-mdc-elevation-specific.mat-elevation-z23 { box-shadow: var(--mat-app-elevation-shadow-level-23, none); } .mat-elevation-z24, .mat-mdc-elevation-specific.mat-elevation-z24 { box-shadow: var(--mat-app-elevation-shadow-level-24, none); } /* stylelint-disable-next-line */ html { --mat-sys-on-surface: initial; } .mat-app-background { background-color: var(--mat-app-background-color, var(--mat-sys-background, transparent)); color: var(--mat-app-text-color, var(--mat-sys-on-background, inherit)); } :root { --mdc-filled-text-field-container-color: transparent; --mdc-text-button-label-text-color: inherit; --mat-toolbar-container-text-color: inherit; --mat-form-field-container-height: 47.5px; --mdc-checkbox-selected-icon-color: var(--theme-blue-checkbox-color); --mdc-checkbox-selected-hover-icon-color: var(--theme-blue-checkbox-color); --mdc-checkbox-selected-focus-icon-color: var(--theme-blue-checkbox-color); --mat-dialog-container-max-width: 100%; } :root { --mat-form-field-outlined-label-text-populated-size: 18px; } :root { --mdc-outlined-text-field-label-text-color: var(--theme-selected-text-color); } :root { --mdc-outlined-text-field-hover-label-text-color: var(--adf-theme-foreground-text-color); } :root { --mdc-outlined-text-field-disabled-input-text-color: var(--adf-theme-foreground-text-color-040); } :root { --mdc-outlined-text-field-disabled-label-text-color: var(--adf-theme-foreground-text-color-040); } :root { --mdc-outlined-text-field-disabled-outline-color: var(--adf-theme-foreground-text-color-040); } :root { --mat-form-field-subscript-text-size: 12px; } :root .mat-mdc-radio-button { --mdc-radio-selected-icon-color: var(--theme-blue-checkbox-color); } :root .mat-mdc-radio-button { --mdc-radio-selected-hover-icon-color: var(--theme-blue-checkbox-color); } :root .mat-mdc-radio-button { --mdc-radio-selected-focus-icon-color: var(--theme-blue-checkbox-color); } :root .mat-mdc-radio-button { --mdc-radio-selected-pressed-icon-color: var(--theme-blue-checkbox-color); } .adf-search-properties-form, .adf-search-date-range { --mat-form-field-outlined-label-text-populated-size: 14px; } .adf-search-properties-form .mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above, .adf-search-date-range .mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above { line-height: 18px; } .adf-property-readonly-value { color: var(--adf-theme-foreground-text-color-040); } .adf-property-readonly-value .adf-dateitem-editable-controls { color: var(--adf-theme-foreground-text-color-040); } .mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above { line-height: 22px; } mat-toolbar { color: var(--adf-theme-foreground-text-color-064); } .adf-name-location-cell-location.adf-datatable-cell-value { color: var(--theme-secondary-text); } .mat-mdc-checkbox .mdc-checkbox:has(div) { padding-right: 2px; } .mat-mdc-checkbox .mdc-form-field { height: auto; } .mat-mdc-checkbox .mdc-form-field .mdc-checkbox { padding: 0; margin-right: 2px; } .mat-mdc-checkbox .mdc-form-field .mdc-checkbox input { height: 24px; width: 24px; position: relative; } .mat-mdc-checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background { top: 1px; left: 0; height: 16px; width: 16px; } .mat-mdc-checkbox .mat-mdc-checkbox-touch-target { height: 24px; width: 24px; } .mdc-switch:is(button).mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle::after { background-color: transparent; } .mat-mdc-slide-toggle:is(mat-slide-toggle) .mdc-switch:enabled .mdc-switch__track::after { background-color: var(--theme-blue-button-color); } mat-slide-toggle .mdc-switch__icons { display: none; } mat-slide-toggle .mdc-switch--unselected.mdc-switch:enabled .mdc-switch__track::before, mat-slide-toggle .mdc-switch--unselected.mdc-switch:enabled:active .mdc-switch__track::before, mat-slide-toggle .mdc-switch--unselected.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before, mat-slide-toggle .mdc-switch--unselected.mdc-switch:enabled:hover:not(:focus:active) .mdc-switch__track::before { background: var(--adf-theme-foreground-disabled-text-color); } .mdc-list-item__primary-text { color: var(--adf-theme-foreground-text-color-087); } .mat-mdc-chip.mdc-evolution-chip.mat-mdc-standard-chip { height: auto; } .mat-mdc-chip.mdc-evolution-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label { white-space: normal; display: flex; } .mat-mdc-chip.mdc-evolution-chip.mat-mdc-standard-chip .mdc-evolution-chip__action.mat-mdc-chip-action .mdc-evolution-chip__graphic.mat-mdc-chip-graphic { padding: 0; } .mdc-dialog .mdc-dialog__title { margin-bottom: 20px; padding: 0; } .mdc-dialog .mdc-dialog__title::before { height: unset; } .mdc-dialog .mat-mdc-dialog-actions { padding: 8px 0; } .mdc-dialog .mat-mdc-slide-toggle .mdc-form-field { width: 36px; } .mdc-dialog .mdc-data-table__row:last-child .mdc-data-table__cell { border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .mdc-dialog .mdc-dialog__content { padding: 16px 0; color: var(--adf-theme-foreground-text-color-087); --mdc-dialog-supporting-text-color: var(--theme-primary-text); } .mdc-dialog .mat-mdc-dialog-surface { padding: 24px; } .mdc-dialog .mat-mdc-dialog-surface .mat-mdc-button { width: auto; } .mdc-dialog .mat-mdc-dialog-surface .mat-mdc-button .mdc-button__label { padding: 0 16px; } .mdc-floating-label, .mat-mdc-tab-list .mat-mdc-tab-labels .mat-mdc-tab, .mat-mdc-checkbox label, mat-toolbar.mat-toolbar.mat-toolbar-multiple-row, mat-toolbar.mat-toolbar.mat-toolbar-single-row { color: var(--theme-secondary-text); opacity: 1; } .adf-upload-dialog__header, .adf-upload-dialog__content { color: var(--theme-secondary-text); } .adf-version-list .adf-version-list-item-comment, .adf-version-list .adf-version-list-item-date { color: var(--theme-secondary-text); opacity: 1; } .adf-datatable-row .adf-datatable-checkbox .mat-mdc-checkbox label { display: none; } .adf-datatable-list .adf-datatable-row:is(adf-datatable-row):focus { outline: 1px solid var(--theme-blue-checkbox-color); } .adf-datatable-list .adf-datatable-row:is(adf-datatable-row) .adf-cell-value:focus { outline: 1px solid var(--theme-blue-checkbox-color); } .adf-datatable-list .adf-datatable-row:is(adf-datatable-row) .adf-datatable-cell-header:focus { outline: 1px solid var(--theme-blue-checkbox-color); } .adf-datatable-list .adf-datatable-row:is(adf-datatable-row) .adf-datatable-link:hover { color: var(--theme-blue-checkbox-color); } .adf-datatable-list .adf-datatable-body .adf-datatable-row:is(adf-datatable-row).adf-is-selected, .adf-datatable-list .adf-datatable-body .adf-datatable-row:is(adf-datatable-row).adf-is-selected:hover { background-color: var(--theme-blue-active-table-row-color); } .adf-property-field .adf-textitem-edit-icon.mat-icon { color: var(--theme-secondary-text); } .adf-property-field.adf-card-textitem-field:hover .adf-property-clear-value { color: var(--theme-secondary-text); } .adf-empty-content__icon { color: var(--theme-secondary-text); } .aca-details-tabs .mdc-tab__text-label { line-height: 19px; } mat-snack-bar-container .mat-mdc-button.mat-unthemed { --mdc-text-button-label-text-color: var(--theme-white-background); } .adf-warning-snackbar, .adf-info-snackbar, .adf-error-snackbar { --mat-mdc-snack-bar-button-color: var(--theme-white-background); --mdc-snackbar-supporting-text-color: var(--theme-white-background); --mdc-text-button-label-text-color: var(--theme-white-background); } .adf-warning-snackbar { --mdc-snackbar-container-color: var(--theme-warning-snackbar-background); } .adf-info-snackbar { --mdc-snackbar-container-color: var(--theme-info-snackbar-background); } .adf-error-snackbar { --mdc-snackbar-container-color: var(--theme-warn-color); } .mat-calendar .mat-calendar-period-button:is(button) { width: unset; height: unset; padding: 0 16px; margin: 0; } .mat-mdc-radio-button .mdc-radio:is(div) { padding: 0 5px 0 0; } .mdc-form-field > label:is(label) { padding-left: 3px; } .mdc-tab__ripple { display: none; } .mat-mdc-tab-labels { border-bottom: 1px solid var(--adf-theme-foreground-text-color-014); } .mat-mdc-tab-list .mat-mdc-tab-labels .mdc-tab--active { color: var(#212121); } .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label { color: var(--theme-tab-active-text-color); } adf-dynamic-component mat-icon.mat-icon.mat-menu-submenu-icon { color: var(--theme-text-color); } .mat-mdc-menu-item .mat-icon.mat-icon-no-color, .mat-mdc-menu-item .mat-icon.mat-mdc-menu-submenu-icon { color: var(--theme-text-color); } .mdc-menu-surface.mat-mdc-autocomplete-panel:is(div) { padding: 0; } .mdc-menu-surface.mat-mdc-autocomplete-panel:is(div) span { font-size: 16px; } .mdc-list-item.mdc-list-item--disabled .mdc-list-item__primary-text:is(div) { color: unset; } .mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs > .mat-mdc-tab-header .mat-mdc-tab:is(div) { min-width: 160px; } .adf-unsaved-changes-dialog .adf-unsaved-changes-dialog-actions-discard-changes-button:is(button) { background-color: var(--theme-blue-button-color); } .mat-mdc-form-field-infix { min-height: unset; } .mat-mdc-menu-submenu-icon { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); } .mat-mdc-form-field-hint-wrapper { /* stylelint-disable-next-line declaration-no-important */ padding-left: 0 !important; color: var(--adf-theme-foreground-secondary-text-color); } html, body { display: flex; flex-direction: column; flex: 1; height: 100%; overflow: hidden; min-height: 0; font-size: 14px; font-family: Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Open Sans", sans-serif; color: rgba(0, 0, 0, 0.87); margin: 0; } html > main, body > main { display: flex; flex-direction: column; flex: 1; height: 100%; overflow: hidden; min-height: 0; } [dir=rtl] mat-icon { transform: scale(-1, 1); } .adf-container-full-width { overflow: hidden; } app-root, app-shell, app-about, adf-layout-container, aca-search-results, ng-component { display: flex; flex-direction: column; flex: 1; height: 100%; overflow: hidden; min-height: 0; } @media screen and (max-width: 600px) { app-root, app-about, adf-layout-container, aca-search-results, ng-component { height: 100vh; } } .aca-sidebar { display: block; max-width: 368px; width: 368px; margin-bottom: 65px; border-top: 1px solid var(--theme-metadata-property-panel-border-color); border-bottom: 1px solid var(--theme-metadata-property-panel-border-color); } .aca-page-title { cursor: default; font-size: 20px; font-weight: 400; letter-spacing: 0.15px; line-height: 33px; margin: 0; color: var(--adf-theme-foreground-text-color-087); width: 100%; } .aca-header-container { display: flex; flex-direction: row; flex: 1; align-items: center; width: 100%; } /*!*************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/material-icons/iconfont/material-icons.css ***! \*************************************************************************************************************************************************************************************************************************************************/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; font-display: block; src: url('material-icons.woff2') format("woff2"), url('material-icons.woff') format("woff"); } .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "liga"; } @font-face { font-family: "Material Icons Outlined"; font-style: normal; font-weight: 400; font-display: block; src: url('material-icons-outlined.woff2') format("woff2"), url('material-icons-outlined.woff') format("woff"); } .material-icons-outlined { font-family: "Material Icons Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "liga"; } @font-face { font-family: "Material Icons Round"; font-style: normal; font-weight: 400; font-display: block; src: url('material-icons-round.woff2') format("woff2"), url('material-icons-round.woff') format("woff"); } .material-icons-round { font-family: "Material Icons Round"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "liga"; } @font-face { font-family: "Material Icons Sharp"; font-style: normal; font-weight: 400; font-display: block; src: url('material-icons-sharp.woff2') format("woff2"), url('material-icons-sharp.woff') format("woff"); } .material-icons-sharp { font-family: "Material Icons Sharp"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "liga"; } @font-face { font-family: "Material Icons Two Tone"; font-style: normal; font-weight: 400; font-display: block; src: url('material-icons-two-tone.woff2') format("woff2"), url('material-icons-two-tone.woff') format("woff"); } .material-icons-two-tone { font-family: "Material Icons Two Tone"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "liga"; } /*!**************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/open-sans/index.css ***! \**************************************************************************************************************************************************************************************************************************************/ /* open-sans-cyrillic-ext-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-cyrillic-ext-400-normal.woff2') format('woff2'), url('open-sans-cyrillic-ext-400-normal.woff') format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* open-sans-cyrillic-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-cyrillic-400-normal.woff2') format('woff2'), url('open-sans-cyrillic-400-normal.woff') format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* open-sans-greek-ext-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-greek-ext-400-normal.woff2') format('woff2'), url('open-sans-greek-ext-400-normal.woff') format('woff'); unicode-range: U+1F00-1FFF; } /* open-sans-greek-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-greek-400-normal.woff2') format('woff2'), url('open-sans-greek-400-normal.woff') format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* open-sans-hebrew-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-hebrew-400-normal.woff2') format('woff2'), url('open-sans-hebrew-400-normal.woff') format('woff'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } /* open-sans-math-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-math-400-normal.woff2') format('woff2'), url('open-sans-math-400-normal.woff') format('woff'); unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF; } /* open-sans-symbols-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-symbols-400-normal.woff2') format('woff2'), url('open-sans-symbols-400-normal.woff') format('woff'); unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF; } /* open-sans-vietnamese-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-vietnamese-400-normal.woff2') format('woff2'), url('open-sans-vietnamese-400-normal.woff') format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* open-sans-latin-ext-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-latin-ext-400-normal.woff2') format('woff2'), url('open-sans-latin-ext-400-normal.woff') format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* open-sans-latin-400-normal */ @font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('open-sans-latin-400-normal.woff2') format('woff2'), url('open-sans-latin-400-normal.woff') format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /*!********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/inter/300.css ***! \********************************************************************************************************************************************************************************************************************************/ /* inter-cyrillic-ext-300-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('inter-cyrillic-ext-300-normal.woff2') format('woff2'), url('inter-cyrillic-ext-300-normal.woff') format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* inter-cyrillic-300-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('inter-cyrillic-300-normal.woff2') format('woff2'), url('inter-cyrillic-300-normal.woff') format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* inter-greek-ext-300-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('inter-greek-ext-300-normal.woff2') format('woff2'), url('inter-greek-ext-300-normal.woff') format('woff'); unicode-range: U+1F00-1FFF; } /* inter-greek-300-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('inter-greek-300-normal.woff2') format('woff2'), url('inter-greek-300-normal.woff') format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* inter-vietnamese-300-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('inter-vietnamese-300-normal.woff2') format('woff2'), url('inter-vietnamese-300-normal.woff') format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* inter-latin-ext-300-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('inter-latin-ext-300-normal.woff2') format('woff2'), url('inter-latin-ext-300-normal.woff') format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* inter-latin-300-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('inter-latin-300-normal.woff2') format('woff2'), url('inter-latin-300-normal.woff') format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /*!********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/inter/400.css ***! \********************************************************************************************************************************************************************************************************************************/ /* inter-cyrillic-ext-400-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('inter-cyrillic-ext-400-normal.woff2') format('woff2'), url('inter-cyrillic-ext-400-normal.woff') format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* inter-cyrillic-400-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('inter-cyrillic-400-normal.woff2') format('woff2'), url('inter-cyrillic-400-normal.woff') format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* inter-greek-ext-400-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('inter-greek-ext-400-normal.woff2') format('woff2'), url('inter-greek-ext-400-normal.woff') format('woff'); unicode-range: U+1F00-1FFF; } /* inter-greek-400-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('inter-greek-400-normal.woff2') format('woff2'), url('inter-greek-400-normal.woff') format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* inter-vietnamese-400-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('inter-vietnamese-400-normal.woff2') format('woff2'), url('inter-vietnamese-400-normal.woff') format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* inter-latin-ext-400-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('inter-latin-ext-400-normal.woff2') format('woff2'), url('inter-latin-ext-400-normal.woff') format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* inter-latin-400-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('inter-latin-400-normal.woff2') format('woff2'), url('inter-latin-400-normal.woff') format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /*!********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/inter/500.css ***! \********************************************************************************************************************************************************************************************************************************/ /* inter-cyrillic-ext-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('inter-cyrillic-ext-500-normal.woff2') format('woff2'), url('inter-cyrillic-ext-500-normal.woff') format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* inter-cyrillic-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('inter-cyrillic-500-normal.woff2') format('woff2'), url('inter-cyrillic-500-normal.woff') format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* inter-greek-ext-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('inter-greek-ext-500-normal.woff2') format('woff2'), url('inter-greek-ext-500-normal.woff') format('woff'); unicode-range: U+1F00-1FFF; } /* inter-greek-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('inter-greek-500-normal.woff2') format('woff2'), url('inter-greek-500-normal.woff') format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* inter-vietnamese-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('inter-vietnamese-500-normal.woff2') format('woff2'), url('inter-vietnamese-500-normal.woff') format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* inter-latin-ext-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('inter-latin-ext-500-normal.woff2') format('woff2'), url('inter-latin-ext-500-normal.woff') format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* inter-latin-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('inter-latin-500-normal.woff2') format('woff2'), url('inter-latin-500-normal.woff') format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /*!********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/inter/600.css ***! \********************************************************************************************************************************************************************************************************************************/ /* inter-cyrillic-ext-600-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('inter-cyrillic-ext-600-normal.woff2') format('woff2'), url('inter-cyrillic-ext-600-normal.woff') format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* inter-cyrillic-600-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('inter-cyrillic-600-normal.woff2') format('woff2'), url('inter-cyrillic-600-normal.woff') format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* inter-greek-ext-600-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('inter-greek-ext-600-normal.woff2') format('woff2'), url('inter-greek-ext-600-normal.woff') format('woff'); unicode-range: U+1F00-1FFF; } /* inter-greek-600-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('inter-greek-600-normal.woff2') format('woff2'), url('inter-greek-600-normal.woff') format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* inter-vietnamese-600-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('inter-vietnamese-600-normal.woff2') format('woff2'), url('inter-vietnamese-600-normal.woff') format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* inter-latin-ext-600-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('inter-latin-ext-600-normal.woff2') format('woff2'), url('inter-latin-ext-600-normal.woff') format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* inter-latin-600-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('inter-latin-600-normal.woff2') format('woff2'), url('inter-latin-600-normal.woff') format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /*!********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/inter/700.css ***! \********************************************************************************************************************************************************************************************************************************/ /* inter-cyrillic-ext-700-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('inter-cyrillic-ext-700-normal.woff2') format('woff2'), url('inter-cyrillic-ext-700-normal.woff') format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* inter-cyrillic-700-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('inter-cyrillic-700-normal.woff2') format('woff2'), url('inter-cyrillic-700-normal.woff') format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* inter-greek-ext-700-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('inter-greek-ext-700-normal.woff2') format('woff2'), url('inter-greek-ext-700-normal.woff') format('woff'); unicode-range: U+1F00-1FFF; } /* inter-greek-700-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('inter-greek-700-normal.woff2') format('woff2'), url('inter-greek-700-normal.woff') format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* inter-vietnamese-700-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('inter-vietnamese-700-normal.woff2') format('woff2'), url('inter-vietnamese-700-normal.woff') format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* inter-latin-ext-700-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('inter-latin-ext-700-normal.woff2') format('woff2'), url('inter-latin-ext-700-normal.woff') format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* inter-latin-700-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('inter-latin-700-normal.woff2') format('woff2'), url('inter-latin-700-normal.woff') format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./app/src/styles.scss?ngGlobalStyle ***! \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* stylelint-disable declaration-no-important */ /* You can add global styles to this file, and also import other style files */ /* Modern UI typeface (Clean Corporate) */ body, html { height: 100%; color-scheme: light; } body { margin: 0; /* No `zoom`. The app used to run at `zoom: 0.8`, but that put the whole UI on a hidden 0.8 scale — every new page/menu had to be designed remembering that real px = design px × 0.8, which is a long-term footgun. Instead the compact density is now baked in as real CSS at the end of styles/_modern.scss ("Compact UI density"): component sizes/fonts are declared at the values the old zoom *rendered*, so the app looks identical but new work uses true px. */ } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./app/src/styles/_modern.scss?ngGlobalStyle ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* stylelint-disable declaration-no-important, selector-class-pattern, no-descending-specificity, font-family-no-missing-generic-family-keyword, selector-not-notation -- this is an OVERRIDE layer: it intentionally targets ADF/Material `.mat-*`/`.mdc-*` classes and uses `!important` to win over library styles without editing core. */ /* ========================================================================= ACA "Clean Corporate" modernization layer - Design tokens (radius / shadow / motion) - Inter typography - Header, sidenav, datatable, buttons, cards polish - Skeleton loaders + route fade (micro-interactions) - Login page redesign - Light/Dark theme (toggled via .aca-dark-theme on ) This file is loaded last (from app/src/styles.scss) so it can safely override ADF/Material without editing any core/library code. ========================================================================= */ /* ---- Dark Material color theme (built from the same brand palettes) ---- */ /* ========================================================================= 1. Design tokens ========================================================================= */ :root { --aca-color-primary: #2563eb; --aca-color-primary-hover: #1d4ed8; --aca-color-primary-soft: #eff6ff; --aca-color-success: #22c55e; --aca-color-warning: #f59e0b; --aca-color-danger: #ef4444; --aca-color-info: #3b82f6; --aca-text-primary: #111827; /* Navigation labels. Only the dark theme defined this, so in the light theme they fell back to Material's near-black; the reference draws them in a slate navy. */ --theme-sidenav-text-color: #202d49; /* Contrast ratios on the app surfaces, WCAG 2.2 AA (4.5:1 body, 3:1 graphics): secondary 7.6:1, muted 4.9:1 on white. The previous muted (#98a2b3) sat at 2.6:1 and carried real information — hints, units, codes and icons — on every screen. Hierarchy is carried by size and weight instead of by dropping below the threshold. */ --aca-text-secondary: #475467; --aca-text-muted: #667085; --aca-brand: var(--aca-color-primary); --aca-brand-strong: var(--aca-color-primary-hover); --aca-brand-gradient: linear-gradient(135deg, #2d7ff9 0%, #1156cf 100%); --aca-radius-lg: 14px; --aca-radius: 10px; --aca-radius-sm: 8px; --aca-radius-pill: 999px; --aca-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1); --aca-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06); --aca-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06); --aca-ease: cubic-bezier(0.4, 0, 0.2, 1); --aca-transition: 180ms var(--aca-ease); --aca-surface: #fff; --aca-surface-2: #f7f9fc; --aca-app-bg: #f7f9fc; --aca-hairline: #e5e7eb; --aca-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.24); --aca-font-family: "Inter", "Noto Sans Thai", "Leelawadee UI", "Tahoma", "Open Sans", sans-serif; --aca-space-1: 4px; --aca-space-2: 8px; --aca-space-3: 12px; --aca-space-4: 16px; --aca-space-5: 20px; --aca-space-6: 24px; --aca-space-8: 32px; --aca-control-height-sm: 36px; --aca-control-height: 40px; --aca-control-height-lg: 44px; --aca-sidenav-width: 300px; /* Text that sits on the brand colour. The dark theme lightens the brand, so white would drop to 2.4:1 there — this flips with it. */ --aca-on-primary: #fff; /* Status and file-type tones, as background/foreground/border triples. Defined as tokens because the dark theme has to invert them: a light tint with dark text is unreadable once the surface behind it goes dark. Every pair clears 4.5:1 against its own background in both themes. */ --aca-tone-blue-bg: #eff6ff; --aca-tone-blue-fg: #175cd3; --aca-tone-blue-line: #b2ddff; --aca-tone-green-bg: #ecfdf3; --aca-tone-green-fg: #027a48; --aca-tone-amber-bg: #fffaeb; --aca-tone-amber-fg: #b54708; --aca-tone-red-bg: #fef3f2; --aca-tone-red-fg: #b42318; --aca-tone-red-line: #fda29b; --aca-tone-purple-bg: #f4f3ff; --aca-tone-purple-fg: #6941c6; /* the tint a card or row border takes on hover */ --aca-accent-line: #c7d7fe; } /* ========================================================================= 2. Typography — Inter ========================================================================= */ html, body { font-family: var(--aca-font-family); letter-spacing: 0.1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--aca-app-bg); } .aca-page-title, .aca-sidenav-header-title-text, .adf-app-title { font-family: var(--aca-font-family); font-weight: 600; letter-spacing: 0.2px; } :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--aca-color-primary); outline-offset: 2px; box-shadow: var(--aca-focus-ring); } /* …but not inside a Material form field. The field already shows focus on its own notched outline, and the control it wraps is inset within that outline — so the ring above lands *inside* the field and reads as a second box drawn around the text. (MDC's own `outline: none` on the control wins over the zero-specificity rule above, which left the ring showing on its own.) */ .mat-mdc-form-field :where(input, textarea, select):focus-visible { outline: none; box-shadow: none; } /* Prettier, slimmer scrollbars */ * { scrollbar-width: thin; scrollbar-color: rgba(120, 130, 150, 0.45) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: rgba(120, 130, 150, 0.4); border-radius: var(--aca-radius-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(120, 130, 150, 0.65); background-clip: content-box; } /* ========================================================================= 3. Header / top toolbar ========================================================================= */ .adf-layout-header, .adf-sidenav-layout-header { background: var(--aca-surface) !important; border-bottom: 1px solid var(--aca-hairline); box-shadow: none !important; backdrop-filter: saturate(1.1); } .adf-layout-header .adf-app-title, .adf-layout-header .aca-page-title { font-weight: 600; } /* Header action icon buttons: soft circular hover */ .adf-layout-header .mat-mdc-icon-button { border-radius: var(--aca-radius-pill); transition: background-color var(--aca-transition), transform var(--aca-transition); } .adf-layout-header .mat-mdc-icon-button:hover { background-color: var(--theme-hover-background-color, rgba(16, 24, 40, 0.05)); transform: translateY(-1px); } /* Global search input — pill, soft background, modern placeholder */ .app-search-container .app-input-form-field { --mdc-filled-text-field-container-color: var(--aca-surface-2, #f7f9fc); --mdc-filled-text-field-focus-active-indicator-color: transparent; --mdc-filled-text-field-hover-active-indicator-color: transparent; --mdc-filled-text-field-active-indicator-color: transparent; border-radius: var(--aca-radius-pill, 999px); overflow: hidden; border: 1px solid var(--aca-hairline, #e5e7eb); } .app-search-container .app-search-input { letter-spacing: 0; } .app-search-container .aca-search-input--search-button .mat-icon { color: var(--aca-text-muted, #98a2b3); } /* ========================================================================= 4. Sidenav — modern app navigation (icons + clear hierarchy) ========================================================================= */ .adf-sidenav-layout-navigation, .aca-sidenav { border-right: 1px solid var(--aca-hairline); background: var(--theme-sidenav-background-color); } /* brand / logo area */ .aca-sidenav-header { padding: 20px 0 8px !important; } .aca-sidenav-header-title { padding: 0 20px !important; } .aca-sidenav-header-title-text { font-weight: 700 !important; font-size: 16.5px !important; letter-spacing: 0.2px !important; } .aca-sidenav__section { padding: 6px 0 12px; /* group headers (FILES / SAVED SEARCHES) — styled exactly like nav items: full height, leading icon, no expand chevron */ /* ── Collapsible sub-menus ────────────────────────────────────────────── ACA hard-codes [expanded]="true" on these panels so Material keeps them open. We drive open/closed from our own `.aca-submenu-open` class (toggled by SubmenuToggleService on a header click). Collapsed by default; auto-open when one of the panel's items is the active page. */ /* SIMPLEST, SAFEST collapse: when a panel is NOT open (no `.aca-submenu-open` class and not the active section) hide its content wrapper with `display:none`. When OPEN we override NOTHING — the panel renders exactly as stock Material does (expanded is force-bound to true), so its items remain fully clickable, identical to ACA's untouched menu. Earlier attempts (max-height / grid 0fr↔1fr with overflow) kept the subtree in the layer tree but clipped/displaced so the item subtree wasn't hit-testable — real mouse clicks fell through to the panel. `display:none` sidesteps all of that: collapsed = gone, open = stock. Two SEPARATE rules (not a comma list) so a `:has()`-unaware browser dropping one doesn't drop the other. `:not(.aca-submenu-open)` = user hasn't expanded it; `:not(:has(active))` = it isn't the section of the current page (which auto-opens). */ /* COLLAPSED: remove the content wrapper from the layer tree entirely. No resized/clipped container survives, so nothing can interfere with hit-testing of the panel below. */ /* OPEN: render the content as a PLAIN visible block. With the wrapper toggled out of display:none, Material otherwise leaves its grid row at 0fr and the content stays invisible (header would look dead), so we force it visible. Two SEPARATE rules so a `:has()`-unaware browser dropping one keeps the other. */ /* Pointer cursor over open sub-menu items. When a panel is force-opened (above), Chromium makes the `mat-expansion-panel` itself — not the child `.aca-action-button` painted inside it — the hit-test target over the content area (a known quirk of Material's expanded content-wrapper). The child's own `cursor: pointer` therefore never applies and the pointer stays an arrow over sub-menu items, unlike top-level items. Setting the cursor on the open panel (the actual hit target) restores the hand cursor. Scoped to the open states so collapsed panels are unaffected. */ /* chevron on the header showing the group is collapsible + its state */ /* nav item (leaf and child) — the reference's proportions: a 46px pill and a label a shade under the body size (the icon's own size is settled further down, under "Icons (glyph + box) across the shell") */ /* active item — soft brand pill, bolder brand icon + text */ } .aca-sidenav__section .aca-expansion-panel-header { height: 48px !important; margin-top: 2px; /* drop the right padding ACA reserves for the (now hidden) chevron so the header fills the same width as the other nav items */ padding: 0 !important; /* Material reserves 16px to the right of the title for the indicator */ } .aca-sidenav__section .aca-expansion-panel-header .mat-expansion-indicator { display: none !important; } .aca-sidenav__section .aca-expansion-panel-header .mat-content { margin-right: 0 !important; } .aca-sidenav__section .aca-expansion-panel-header .aca-expansion-panel-header-title, .aca-sidenav__section .aca-expansion-panel-header .mat-expansion-panel-header-title { margin-right: 0 !important; } .aca-sidenav__section .aca-expansion-panel-header .aca-action-button { height: 48px !important; line-height: 48px; margin: 3px 12px; width: calc(100% - 24px); border-radius: var(--aca-radius) !important; /* inject a leading icon for headers that have none (Saved searches) */ } .aca-sidenav__section .aca-expansion-panel-header .aca-action-button:not(:has(adf-icon))::before { content: "bookmark_border"; font-family: "Material Icons"; font-feature-settings: "liga"; text-rendering: optimizelegibility; letter-spacing: normal; font-weight: 400; font-size: 24px; line-height: 24px; height: 24px; width: 24px; margin-right: 16px; flex: none; color: var(--theme-secondary-text); opacity: 0.95; } .aca-sidenav__section .aca-expansion-panel-header .aca-action-button__label { text-transform: none; font-size: 15.5px !important; letter-spacing: 0.1px; font-weight: 600; color: var(--theme-sidenav-text-color); } .aca-sidenav__section .aca-expansion-panel-header:hover { background: transparent !important; } .aca-sidenav__section .aca-expansion-panel:not(.aca-submenu-open):not(:has(.aca-action-button--active)) .mat-expansion-panel-content-wrapper { display: none !important; } .aca-sidenav__section .aca-expansion-panel.aca-submenu-open .mat-expansion-panel-content-wrapper, .aca-sidenav__section .aca-expansion-panel.aca-submenu-open .mat-expansion-panel-content { display: block !important; grid-template-rows: none !important; height: auto !important; visibility: visible !important; overflow: visible !important; } .aca-sidenav__section .aca-expansion-panel:has(.aca-action-button--active) .mat-expansion-panel-content-wrapper, .aca-sidenav__section .aca-expansion-panel:has(.aca-action-button--active) .mat-expansion-panel-content { display: block !important; grid-template-rows: none !important; height: auto !important; visibility: visible !important; overflow: visible !important; } .aca-sidenav__section .aca-expansion-panel.aca-submenu-open, .aca-sidenav__section .aca-expansion-panel.aca-submenu-open .mat-expansion-panel-content, .aca-sidenav__section .aca-expansion-panel:has(.aca-action-button--active), .aca-sidenav__section .aca-expansion-panel:has(.aca-action-button--active) .mat-expansion-panel-content { cursor: pointer; } .aca-sidenav__section .aca-expansion-panel-header .aca-action-button::after { content: "expand_more"; font-family: "Material Icons"; font-feature-settings: "liga"; text-rendering: optimizelegibility; letter-spacing: normal; font-weight: 400; font-size: 22px; line-height: 1; height: 22px; width: 22px; margin-left: auto; flex: none; color: var(--theme-secondary-text); opacity: 0.6; /* ACA's own sidenav stylesheet rotates this same pseudo-element by 226deg for its border-drawn arrow; ours is a glyph, so the angle has to be taken back or the chevron renders as a bent corner. */ transform: rotate(-90deg) !important; /* collapsed → points right */ transition: transform 0.24s ease; } .aca-sidenav__section .aca-expansion-panel.aca-submenu-open .aca-expansion-panel-header .aca-action-button::after, .aca-sidenav__section .aca-expansion-panel:has(.aca-action-button--active) .aca-expansion-panel-header .aca-action-button::after { transform: rotate(0deg) !important; /* open → points down */ } .aca-sidenav__section .aca-action-button { display: flex; align-items: center; height: 46px !important; line-height: 46px; margin: 2px 12px; padding: 0 14px; width: calc(100% - 24px); border-radius: 12px; color: var(--theme-sidenav-text-color); font-size: 14.5px; font-weight: 500; transition: background-color var(--aca-transition), color var(--aca-transition); /* Normalise icon width so labels line up regardless of whether the icon sits in a mat-button (leaf items) or a plain header span. */ /* `.aca-hovered` mirrors `:hover` for sub-menu child items: the forced-open mat-expansion-panel swallows the pointer so children never match `:hover`, so ExpandMenuComponent sets this class on the child under the cursor. */ } .aca-sidenav__section .aca-action-button adf-icon, .aca-sidenav__section .aca-action-button mat-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; height: 24px; width: 24px; min-width: 24px; margin-right: 16px; flex: none; color: var(--theme-secondary-text); opacity: 0.95; transition: color var(--aca-transition); } .aca-sidenav__section .aca-action-button adf-icon mat-icon { margin-right: 0; } .aca-sidenav__section .aca-action-button .action-button__label, .aca-sidenav__section .aca-action-button .aca-action-button__label { font-size: 14.5px; font-weight: 500; letter-spacing: 0.1px; } .aca-sidenav__section .aca-action-button:hover, .aca-sidenav__section .aca-action-button.aca-hovered { background: var(--theme-hover-background-color, rgba(16, 24, 40, 0.06)); } .aca-sidenav__section .aca-action-button:hover mat-icon, .aca-sidenav__section .aca-action-button:hover adf-icon, .aca-sidenav__section .aca-action-button.aca-hovered mat-icon, .aca-sidenav__section .aca-action-button.aca-hovered adf-icon { opacity: 1; } .aca-sidenav__section .aca-action-button--active { background: var(--theme-selected-background-color) !important; border-radius: 12px !important; font-weight: 600; box-shadow: none; } .aca-sidenav__section .aca-action-button--active .action-button__label, .aca-sidenav__section .aca-action-button--active .aca-action-button__label { color: var(--aca-brand); font-weight: 600; } .aca-sidenav__section .aca-action-button--active adf-icon, .aca-sidenav__section .aca-action-button--active mat-icon { color: var(--aca-brand) !important; opacity: 1; } /* Even, compact spacing — ACA defaults to a 32px gap under each top-level nav item (designed for a single "Files" menu); reset it so our multiple top-level items sit evenly and look the same size. */ .aca-sidenav .aca-sidenav__section .aca-sidenav__section__actions__item:has(span) { margin-bottom: 7px !important; } .aca-sidenav .aca-sidenav__section__actions { margin-bottom: 6px; } /* Footer (profile + version) pinned to the bottom edge — always, regardless of how long the menu is. The footer is rendered OUTSIDE the scrolling menu area (see sidenav.component.html: `.aca-sidenav__footer`), so it never scrolls. For this to hold, the sidenav must fill the drawer's viewport height and scroll INTERNALLY (in `.aca-sidenav__section`) rather than growing to content height and letting the outer `.mat-drawer-inner-container` scroll — the latter left the footer floating mid-list when the menu was short and scrolling away when long. The height chain is forced down to the sidenav and scoped to the navigation drawer (`.adf-layout-container-sidenav`) so no other Material drawer is touched. */ .adf-layout-container-sidenav .mat-drawer-inner-container { overflow: hidden; } .adf-layout-container-sidenav .mat-drawer-inner-container > div, .adf-layout-container-sidenav adf-dynamic-component, .adf-layout-container-sidenav app-sidenav { display: flex; flex-direction: column; min-height: 0; height: 100%; } .aca-sidenav { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* scrolling menu area (takes all space above the footer). Block layout (not flex) so the group rows stack naturally and keep their intrinsic height — a flex column here lets `flex-shrink` squash the rows into each other once the list overflows. */ .aca-sidenav .aca-sidenav__section { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden auto; /* the reference leaves this much air between the brand bar and the first item */ padding-top: 40px; } .aca-sidenav .aca-sidenav__section .aca-sidenav__section__actions:last-child { margin-bottom: 0; } .aca-sidenav .aca-sidenav__bottom { position: relative; flex: 0 0 auto; min-height: auto; padding: 10px 0 4px; margin-top: 8px; overflow: visible; } /* The rule the reference draws between the document menu and the system one, inset to the pills' own gutter. Drawn on a pseudo-element rather than as this section's own border: a horizontal margin here would inset the section itself, and its items — which carry that same 16px gutter of their own — would then start 32px in, out of line with every item above the rule. */ .aca-sidenav .aca-sidenav__bottom::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 1px solid var(--aca-hairline); } /* pinned footer — flush to the bottom, never part of the scroll */ .aca-sidenav .aca-sidenav__footer { flex: 0 0 auto; padding-top: 10px; padding-bottom: 10px; background: var(--theme-sidenav-background-color); } /* storage allowance card, at the foot of the sidebar. Present only when the signed-in person actually has a quota — see storage-usage.component.ts. */ .aca-storage { display: block; margin: 4px 16px 8px; padding: 14px 14px 12px; border: 1px solid var(--aca-hairline); border-radius: 12px; background: var(--aca-surface); } .aca-storage__head { display: flex; align-items: center; gap: 6px; } .aca-storage__title { font-size: 13px; font-weight: 600; color: var(--theme-sidenav-text-color); } .aca-storage__info { font-size: 16px; width: 16px; height: 16px; color: var(--aca-text-muted); } .aca-storage__bar { height: 6px; margin: 10px 0 8px; border-radius: var(--aca-radius-pill); background: var(--aca-surface-2); overflow: hidden; } .aca-storage__fill { display: block; height: 100%; border-radius: inherit; background: var(--aca-color-primary); transition: width var(--aca-transition); /* A fraction of a percent rounds to a bar with nothing in it, which reads as "no data" rather than "barely any used". Anything above zero keeps a sliver; the figure beside the bar is the exact one either way. */ /* nearly out of room is worth seeing before the number is read */ } .aca-storage__fill--any { min-width: 6px; } .aca-storage__fill--full { background: var(--aca-tone-red-fg, #d92d20); } .aca-storage__text { margin: 0; font-size: 12px; color: var(--aca-text-secondary); } .aca-storage__link { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--aca-color-primary); text-decoration: none; } .aca-storage__link:hover { text-decoration: underline; } /* theme toggle row */ .aca-theme-row { display: flex; align-items: center; gap: 12px; height: 44px; margin: 2px 12px; padding: 0 14px; border-radius: 10px; cursor: pointer; color: var(--theme-sidenav-text-color); transition: background-color var(--aca-transition); } .aca-theme-row:hover { background: var(--theme-hover-background-color, rgba(16, 24, 40, 0.06)); } .aca-theme-row__icon { color: var(--theme-secondary-text); font-size: 22px; height: 22px; width: 22px; flex: none; } .aca-theme-row__label { flex: 1; font-size: 14.5px; font-weight: 500; } /* The identity itself lives in the header (see shell-header.component.scss); what stays here is what the header button and the menu share. */ .aca-profile { /* the uploaded picture stands in for the initials, at the same size */ } .aca-profile__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--aca-color-primary-soft); color: var(--aca-color-primary); font-size: 14px; font-weight: 700; letter-spacing: 0.3px; } .aca-profile__avatarimg { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--aca-color-primary-soft); } .aca-profile__chev { flex: none; color: var(--theme-secondary-text); font-size: 20px; height: 20px; width: 20px; } /* profile dropdown menu (View profile / Language / Logout) */ .aca-profile-menu .aca-profile-menu__head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; cursor: default; border-bottom: 1px solid var(--aca-hairline); } .aca-profile-menu .aca-profile-menu__id { min-width: 0; } .aca-profile-menu .aca-profile-menu__name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aca-profile-menu .aca-profile-menu__sub { font-size: 12px; color: var(--theme-secondary-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dark-mode toggle row inside the profile menu (aligned like a menu item) */ .aca-profile-menu__toggle { display: flex; align-items: center; height: 44px; padding: 0 16px; cursor: pointer; } .aca-profile-menu__toggle mat-icon { margin-right: 16px; color: var(--theme-secondary-text); flex: none; } .aca-profile-menu__toggle span { flex: 1; font-size: 14px; } .aca-profile-menu__toggle mat-slide-toggle { flex: none; margin-left: 8px; } .aca-profile-menu__toggle:hover { background: var(--theme-hover-background-color, rgba(16, 24, 40, 0.06)); } /* logout button */ .aca-logout-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 24px); height: 46px; margin: 6px 12px 4px; padding: 0 16px; border: none; border-radius: 10px; background: #16233a; color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background-color var(--aca-transition), transform var(--aca-transition); } .aca-logout-btn mat-icon { font-size: 20px; height: 20px; width: 20px; } .aca-logout-btn:hover { background: #1f3358; transform: translateY(-1px); } .aca-dark-theme .aca-logout-btn { background: rgba(255, 255, 255, 0.1); } .aca-dark-theme .aca-logout-btn:hover { background: rgba(255, 255, 255, 0.18); } /* version row (footer) */ .aca-version { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 4px 12px 2px; padding: 6px 12px; border: none; background: transparent; border-radius: 10px; cursor: pointer; font: inherit; color: var(--theme-secondary-text); transition: background-color var(--aca-transition); } .aca-version:hover { background: var(--theme-hover-background-color, rgba(16, 24, 40, 0.06)); } .aca-version__icon { font-size: 18px; height: 18px; width: 18px; flex: none; opacity: 0.8; } .aca-version__label { font-size: 12.5px; font-weight: 500; } .aca-version__new { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--aca-brand); background: var(--theme-selected-background-color, rgba(45, 127, 249, 0.12)); padding: 2px 8px; border-radius: 999px; } /* ---- Changelog dialog ---- */ .aca-changelog-panel .mat-mdc-dialog-surface { padding: 0 !important; overflow: hidden; } .aca-changelog__hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--aca-brand-gradient); color: #fff; } .aca-changelog__hero mat-icon { font-size: 34px; height: 34px; width: 34px; opacity: 0.9; } .aca-changelog__eyebrow { margin: 0 0 2px; text-transform: uppercase; letter-spacing: 1.4px; font-size: 11px; font-weight: 700; opacity: 0.85; } .aca-changelog__title { margin: 0; font-size: 22px; font-weight: 700; } .aca-changelog__sub { margin: 4px 0 0; font-size: 13px; opacity: 0.9; } .aca-changelog__body { padding: 18px 24px !important; max-height: 56vh; } .aca-changelog__release { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--aca-hairline); } .aca-changelog__release:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .aca-changelog__rel-head { display: flex; align-items: center; gap: 10px; } .aca-changelog__badge { font-size: 12px; font-weight: 700; color: var(--aca-brand); background: var(--theme-selected-background-color, rgba(45, 127, 249, 0.12)); padding: 2px 9px; border-radius: 999px; } .aca-changelog__date { font-size: 12.5px; color: var(--theme-secondary-text); } .aca-changelog__rel-title { margin: 8px 0 6px; font-size: 15px; font-weight: 600; color: var(--theme-title-color, rgba(0, 0, 0, 0.87)); } .aca-changelog__list { list-style: none; margin: 0; padding: 0; } .aca-changelog__item { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--theme-foreground-text-color, rgba(0, 0, 0, 0.75)); } .aca-changelog__item mat-icon { font-size: 18px; height: 18px; width: 18px; flex: none; margin-top: 1px; } .aca-changelog__item--feature mat-icon { color: #2d7ff9; } .aca-changelog__item--improvement mat-icon { color: #f5a623; } .aca-changelog__item--fix mat-icon { color: #2bb673; } .aca-changelog__actions { padding: 12px 24px 18px !important; } /* ========================================================================= 5. Buttons — rounded, with micro-interaction lift ========================================================================= */ .mat-mdc-button, .mat-mdc-outlined-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button { border-radius: var(--aca-radius) !important; letter-spacing: 0.2px; transition: box-shadow var(--aca-transition), transform var(--aca-transition), background-color var(--aca-transition); } .mat-mdc-raised-button:not([disabled]):hover, .mat-mdc-unelevated-button:not([disabled]):hover { transform: translateY(-1px); box-shadow: var(--aca-shadow-md); } .mat-mdc-raised-button:not([disabled]):active, .mat-mdc-unelevated-button:not([disabled]):active { transform: translateY(0); } /* The "+ New / Create" call-to-action gets the brand gradient */ .app-create-menu button.mat-mdc-raised-button, .adf-toolbar .mat-mdc-raised-button.mat-primary { background-image: var(--aca-brand-gradient); color: #fff; box-shadow: var(--aca-shadow-sm); } /* ========================================================================= 6. Document list / datatable — smooth rows, soft selection ========================================================================= */ .adf-datatable-list { /* Branded column header — a distinct, identity-carrying band: soft brand-tinted background, a solid brand accent line underneath, and brand-coloured uppercase labels so the header clearly reads as "ours" and separates from the rows below. */ /* Recolour the default lime (#d9e021) folder thumbnails to the brand blue so they fit the Clean Corporate palette (flatten to black, then tint). */ /* selected row: soft brand fill + accent */ } .adf-datatable-list .adf-datatable-header { background: rgba(27, 122, 244, 0.06); border-bottom: 2px solid var(--aca-brand) !important; } .adf-datatable-list .adf-datatable-header .adf-datatable-row { border-bottom: 2px solid var(--aca-brand) !important; } .adf-datatable-list .adf-datatable-header .adf-datatable-cell-header .adf-datatable-cell-value, .adf-datatable-list .adf-datatable-header .adf-datatable-cell-header span { text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.8px; font-weight: 700; color: var(--aca-brand-strong); } .adf-datatable-list .adf-datatable-row:is(adf-datatable-row) { min-height: 52px; transition: background-color var(--aca-transition); } .adf-datatable-list .adf-datatable-row:is(adf-datatable-row) .adf-datatable-cell { height: 52px; } .adf-datatable-list .adf-datatable-row:is(adf-datatable-row):hover { background: var(--theme-hover-background-color, rgba(16, 24, 40, 0.05)); } .adf-datatable-list .adf-datatable-link { font-weight: 500; } .adf-datatable-list img[src*=ft_ic_folder], .adf-datatable-list img[src*=ft_ic_smart_folder], .adf-datatable-list img[src*=ft_ic_link_folder] { filter: brightness(0) saturate(100%) invert(39%) sepia(57%) saturate(3148%) hue-rotate(202deg) brightness(101%) contrast(94%); } .adf-datatable-list .adf-datatable-body .adf-datatable-row.adf-is-selected { background: var(--theme-selected-background-color); box-shadow: inset 3px 0 0 0 var(--aca-brand); } /* Page header / title */ .aca-page-title { font-size: 22px !important; font-weight: 600 !important; } /* ========================================================================= 6b. Browse pages (Personal Files, Libraries, …) — Dashboard-style layout: a clear header band, then the document list as a rounded card. ========================================================================= */ .aca-page-layout { background: var(--aca-app-bg); /* ---- Header: flat reference header on the page canvas (UI-01 … UI-20) ---- */ /* breadcrumb / selected-count = the page title */ /* pages without folder navigation use a plain .aca-page-title instead of a breadcrumb — same title treatment */ /* Two-tier title: the page name (breadcrumb root) is the big heading on its own line; the folder path sits underneath at a smaller size. */ /* root (page name) → big, full-width so the path wraps below it */ /* ADF styles the chevron with `font: var(--mat-sys-body-small)` — a shorthand, so it resets font-family along with the rest and the icon font the element's own class asks for is lost. The ligature then has nothing to resolve against and the path reads "Repository ch Data Dictionary che ACA", each word crushed into the icon's box. Naming the family again is enough; the class the element already carries says which one. */ /* folder path (everything after the root) → smaller, on the second line */ /* the header bar + toolbar must be transparent so the gradient shows through (the dark theme otherwise paints them dark) */ /* toolbar actions on the flat reference header. คลังเอกสาร moves this toolbar into its list toolbar, so `.aca-repo__listbarleft` is named alongside `.aca-content-header` throughout: the button treatment — including the leading icons, which are pseudo-elements rather than markup — is carried by these selectors and would be dropped by the move otherwise. */ /* primary action (Create) — filled brand button, as in the references */ /* secondary action (Upload) — outlined surface button */ /* give the Create / Upload menu buttons a leading icon (like the workflow "My Tasks" button) — they ship without one. */ /* ---- Content area + document-list card ---- */ } .aca-page-layout .aca-content-header { position: relative; height: auto !important; min-height: 0 !important; margin: 0; padding: 24px 28px 16px !important; border-radius: 0; background: transparent !important; border-bottom: none !important; box-shadow: none; color: var(--aca-text-primary); align-items: center; overflow: visible; } .aca-page-layout .aca-page-layout-header { position: relative; z-index: 1; padding-top: 0; } .aca-page-layout .aca-page-layout-header .adf-breadcrumb, .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item, .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item-anchor, .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item-current, .aca-page-layout .aca-page-layout-header .aca-page-title, .aca-page-layout .aca-page-layout-header .aca-toolbar-title { color: var(--aca-text-primary) !important; } .aca-page-layout .aca-page-layout-header mat-icon { color: var(--aca-text-secondary) !important; } .aca-page-layout .aca-page-layout-header .aca-page-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: 0.2px; } .aca-page-layout .aca-page-layout-header .adf-breadcrumb-container { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; } .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item:first-child { flex: 0 0 100%; margin-bottom: 2px; } .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item:first-child .adf-breadcrumb-item-anchor, .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item:first-child .adf-breadcrumb-item-current { font-size: 22px !important; font-weight: 700 !important; letter-spacing: 0.2px; } .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item:first-child .adf-breadcrumb-item-chevron { display: none !important; } .aca-page-layout .adf-breadcrumb-item-chevron.material-icons-outlined { font-family: "Material Icons Outlined"; } .aca-page-layout .adf-breadcrumb-item-chevron.material-icons { font-family: "Material Icons"; } .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item:not(:first-child) .adf-breadcrumb-item-anchor, .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item:not(:first-child) .adf-breadcrumb-item-current, .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item:not(:first-child) .adf-breadcrumb-item-chevron { color: var(--aca-text-secondary) !important; font-size: 13px !important; font-weight: 500 !important; } .aca-page-layout .aca-page-layout-header .adf-breadcrumb-item:not(:first-child) .adf-breadcrumb-item-chevron { opacity: 0.85; } .aca-page-layout .aca-content-header .aca-page-layout-header, .aca-page-layout .aca-content-header .aca-header-container, .aca-page-layout .aca-content-header mat-toolbar, .aca-page-layout .aca-content-header mat-toolbar.adf-toolbar, .aca-page-layout .aca-content-header .adf-toolbar, .aca-page-layout .aca-content-header .aca-toolbar { background: transparent !important; background-color: transparent !important; } .aca-page-layout .aca-content-header .mat-mdc-icon-button, .aca-page-layout .aca-repo__listbarleft .mat-mdc-icon-button { color: var(--aca-text-secondary) !important; } .aca-page-layout .aca-content-header .mat-mdc-unelevated-button.mat-primary, .aca-page-layout .aca-content-header button.mat-primary, .aca-page-layout .aca-repo__listbarleft .mat-mdc-unelevated-button.mat-primary, .aca-page-layout .aca-repo__listbarleft button.mat-primary { background: var(--aca-color-primary) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--aca-color-primary) !important; box-shadow: none !important; transition: background-color var(--aca-transition); } .aca-page-layout .aca-content-header .mat-mdc-unelevated-button.mat-primary:hover, .aca-page-layout .aca-content-header button.mat-primary:hover, .aca-page-layout .aca-repo__listbarleft .mat-mdc-unelevated-button.mat-primary:hover, .aca-page-layout .aca-repo__listbarleft button.mat-primary:hover { background: var(--aca-color-primary-hover) !important; border-color: var(--aca-color-primary-hover) !important; } .aca-page-layout .aca-content-header .mat-mdc-outlined-button, .aca-page-layout .aca-repo__listbarleft .mat-mdc-outlined-button { background: var(--aca-surface) !important; background-image: none !important; color: var(--aca-text-primary) !important; border: 1px solid var(--aca-hairline) !important; box-shadow: none !important; transition: background-color var(--aca-transition); } .aca-page-layout .aca-content-header .mat-mdc-outlined-button:hover, .aca-page-layout .aca-repo__listbarleft .mat-mdc-outlined-button:hover { background: var(--aca-surface-2) !important; } .aca-page-layout .aca-content-header .mat-mdc-unelevated-button.mat-primary .mdc-button__label, .aca-page-layout .aca-content-header .mat-mdc-outlined-button .mdc-button__label, .aca-page-layout .aca-repo__listbarleft .mat-mdc-unelevated-button.mat-primary .mdc-button__label, .aca-page-layout .aca-repo__listbarleft .mat-mdc-outlined-button .mdc-button__label { display: inline-flex; align-items: center; gap: 7px; } .aca-page-layout .aca-content-header .mat-mdc-unelevated-button.mat-primary .mdc-button__label::before, .aca-page-layout .aca-content-header .mat-mdc-outlined-button .mdc-button__label::before, .aca-page-layout .aca-repo__listbarleft .mat-mdc-unelevated-button.mat-primary .mdc-button__label::before, .aca-page-layout .aca-repo__listbarleft .mat-mdc-outlined-button .mdc-button__label::before { font-family: "Material Icons"; font-feature-settings: "liga"; text-rendering: optimizelegibility; letter-spacing: normal; font-weight: 400; font-size: 18px; line-height: 1; } .aca-page-layout .aca-content-header .mat-mdc-unelevated-button.mat-primary .mdc-button__label::before, .aca-page-layout .aca-repo__listbarleft .mat-mdc-unelevated-button.mat-primary .mdc-button__label::before { content: "add"; } .aca-page-layout .aca-content-header .mat-mdc-outlined-button .mdc-button__label::before, .aca-page-layout .aca-repo__listbarleft .mat-mdc-outlined-button .mdc-button__label::before { content: "file_upload"; } .aca-page-layout .aca-content-header .adf-toolbar-divider, .aca-page-layout .aca-repo__listbarleft .adf-toolbar-divider { background: var(--aca-hairline) !important; } .aca-page-layout .aca-page-layout-content { background: var(--aca-app-bg); border-top: none !important; padding: 18px 24px 22px; } .aca-page-layout .aca-page-layout-content .aca-main-content { background: var(--aca-surface); border: 1px solid var(--aca-hairline) !important; border-radius: var(--aca-radius-lg); box-shadow: var(--aca-shadow-sm); overflow: hidden; } /* keep the card surfaces correct in dark mode (hero stays gradient) */ .aca-dark-theme .aca-page-layout { background: var(--aca-app-bg); } .aca-dark-theme .aca-page-layout .aca-page-layout-content { background: var(--aca-app-bg); } .aca-dark-theme .aca-page-layout .aca-page-layout-content .aca-main-content { background: var(--aca-surface); } /* Breadcrumb a touch lighter */ .adf-breadcrumb .adf-breadcrumb-item-current .adf-breadcrumb-item-anchor { font-weight: 600; } /* ========================================================================= 7. Cards / surfaces (libraries, dashboard, dialogs) ========================================================================= */ .mat-mdc-card, .aca-card { border-radius: var(--aca-radius-lg) !important; box-shadow: var(--aca-shadow-sm) !important; border: 1px solid var(--aca-hairline); } .mat-mdc-dialog-surface, .cdk-overlay-pane .mat-mdc-menu-panel { border-radius: var(--aca-radius-lg) !important; box-shadow: var(--aca-shadow-lg) !important; } /* ========================================================================= 8. Micro-interactions — route fade-in + skeleton shimmer ========================================================================= */ @keyframes aca-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .adf-sidenav-layout-content > *:not(router-outlet) { animation: aca-fade-in 0.26s var(--aca-ease) both; } /* Custom routed pages: their host element defaults to display:inline and is not height-bounded, so their inner scroll container can't scroll (content is just clipped by the parent's overflow:hidden). Make the hosts fill the content area as flex columns so `.aca-dashboard` / `.aca-wf` (flex:1; overflow-y:auto) scroll. */ app-dashboard, app-workflow-tasks, app-workflow-start, app-workflow-builder { display: flex !important; flex-direction: column; flex: 1 1 auto; height: 100%; min-height: 0; overflow: hidden; } .aca-dashboard, .aca-wf { min-height: 0; } @keyframes aca-shimmer { 0% { background-position: -480px 0; } 100% { background-position: 480px 0; } } .aca-skeleton { border-radius: var(--aca-radius); background: linear-gradient(90deg, rgba(16, 24, 40, 0.06) 25%, rgba(16, 24, 40, 0.12) 37%, rgba(16, 24, 40, 0.06) 63%); background-size: 960px 100%; animation: aca-shimmer 1.4s ease-in-out infinite; } .adf-empty-content { min-height: 240px; padding: var(--aca-space-8); color: var(--aca-text-secondary); } .adf-empty-content__icon { color: var(--aca-color-primary); opacity: 0.9; } .adf-empty-content__title { color: var(--aca-text-primary); font-family: var(--aca-font-family); font-weight: 600; } .adf-empty-content__subtitle, .adf-empty-content__text { color: var(--aca-text-secondary); } .aca-page-layout-error { min-height: 240px; align-items: center; justify-content: center; padding: var(--aca-space-8); color: var(--aca-color-danger); background: var(--aca-surface); } /* Users who ask their operating system to reduce motion get a still interface. The token covers the styles written here; the blanket rule catches Material and ADF, whose transitions are not ours to edit. Durations collapse to 1ms rather than to none, because components that listen for transitionend need the event to arrive. */ @media (prefers-reduced-motion: reduce) { :root { --aca-transition: 1ms linear; } .aca-skeleton, .adf-sidenav-layout-content > *:not(router-outlet) { animation: none; } /* Progress indicators are the exception: they are how the screen says work is still running, so freezing them would read as a hung page, not as calm. */ *:not([class*=progress-spinner], [class*=progress-spinner] *, [class*=progress-bar], [class*=progress-bar] *), *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ========================================================================= 9. Login page redesign ========================================================================= Moved to app/src/app/components/login/app-login.component.scss, next to the markup it dresses. Nothing else in the application uses `.aca-auth`. ========================================================================= */ /* ========================================================================= 10. DARK THEME (applied when has .aca-dark-theme) ========================================================================= */ .aca-dark-theme { color-scheme: dark; /* Brand-aware surface tokens */ --aca-color-primary: #6ea8ff; --aca-color-primary-hover: #93bdff; --aca-color-primary-soft: rgba(110, 168, 255, 0.14); --aca-text-primary: rgba(255, 255, 255, 0.92); --aca-text-secondary: rgba(255, 255, 255, 0.66); --aca-text-muted: rgba(255, 255, 255, 0.46); --aca-surface: #1c2128; --aca-surface-2: #232a33; --aca-app-bg: #14171c; --aca-hairline: rgba(255, 255, 255, 0.1); --aca-focus-ring: 0 0 0 3px rgba(110, 168, 255, 0.32); /* The dark brand colour is light, so text on it has to be dark: white on #6ea8ff is 2.4:1, this is 7.8:1. */ --aca-on-primary: #0b1220; /* Tones inverted for a dark surface: a translucent tint of the hue instead of a pastel fill, with a light foreground. Measured against --aca-surface. */ --aca-tone-blue-bg: rgba(110, 168, 255, 0.16); --aca-tone-blue-fg: #93b4fd; --aca-tone-blue-line: rgba(110, 168, 255, 0.38); --aca-tone-green-bg: rgba(18, 183, 106, 0.16); --aca-tone-green-fg: #6ce9a6; --aca-tone-amber-bg: rgba(247, 144, 9, 0.16); --aca-tone-amber-fg: #fdb022; --aca-tone-red-bg: rgba(240, 68, 56, 0.16); --aca-tone-red-fg: #fda29b; --aca-tone-red-line: rgba(240, 68, 56, 0.45); --aca-tone-purple-bg: rgba(158, 119, 237, 0.16); --aca-tone-purple-fg: #d6bbfb; --aca-accent-line: rgba(110, 168, 255, 0.4); /* deeper, less glary hero gradient for dark mode */ --aca-brand-gradient: linear-gradient(135deg, #1f5fc2 0%, #0b3279 100%); background-color: var(--aca-app-bg); /* ACA "--theme-*" variable overrides */ --theme-background-color: #14171c; --theme-card-background-color: #1c2128; --theme-card-background-grey-color: #232a33; --theme-dialog-background-color: #1c2128; --theme-sidenav-background-color: #171b21; --theme-page-layout-header-background-color: #1c2128; --theme-pagination-background-color: #14171c; --theme-white-background: #1c2128; --theme-text-color: rgba(255, 255, 255, 0.6); --theme-text-bold-color: rgba(255, 255, 255, 0.92); --theme-title-color: rgba(255, 255, 255, 0.92); --theme-header-text-color: rgba(255, 255, 255, 0.92); --theme-foreground-text-color: rgba(255, 255, 255, 0.8); --theme-foreground-text-bold-color: rgba(255, 255, 255, 0.92); --theme-secondary-text-color: rgba(255, 255, 255, 0.6); --theme-secondary-text: rgba(255, 255, 255, 0.6); --theme-sidenav-text-color: rgba(255, 255, 255, 0.82); --theme-sidenav-hovered-text-color: #fff; --theme-tab-active-text-color: #fff; --theme-content-color: rgba(255, 255, 255, 0.72); --theme-text-light-color: rgba(255, 255, 255, 0.6); --theme-action-button-text-color: rgba(255, 255, 255, 0.62); --theme-selected-text-color: rgba(255, 255, 255, 0.92); --theme-border-color: rgba(255, 255, 255, 0.1); --theme-grey-divider-color: rgba(255, 255, 255, 0.12); --theme-hover-background-color: rgba(255, 255, 255, 0.06); --theme-grey-text-background-color: rgba(255, 255, 255, 0.05); --theme-grey-background-color: rgba(255, 255, 255, 0.12); --theme-grey-hover-background-color: rgba(255, 255, 255, 0.18); --theme-selected-background-color: rgba(45, 127, 249, 0.3); --theme-selected-text-background: rgba(255, 255, 255, 0.12); --theme-dropdown-color: #232a33; --theme-dropdown-background-hover: #2a323d; /* ADF "--adf-theme-*" variable overrides */ --adf-theme-foreground-text-color: rgba(255, 255, 255, 0.87); --adf-theme-foreground-text-color-087: rgba(255, 255, 255, 0.87); --adf-theme-foreground-text-color-064: rgba(255, 255, 255, 0.64); --adf-theme-foreground-text-color-040: rgba(255, 255, 255, 0.4); --adf-theme-foreground-text-color-025: rgba(255, 255, 255, 0.25); --adf-theme-foreground-text-color-014: rgba(255, 255, 255, 0.14); --adf-theme-foreground-text-color-007: rgba(255, 255, 255, 0.07); --adf-theme-foreground-secondary-text-color: rgba(255, 255, 255, 0.6); --adf-theme-foreground-disabled-text-color: rgba(255, 255, 255, 0.38); --adf-theme-foreground-divider-color: rgba(255, 255, 255, 0.12); --adf-theme-background-hover-color: rgba(255, 255, 255, 0.06); /* Re-color every Angular Material component for the dark palette (declared after the custom properties above, before nested selectors) */ /* Surface fills for the main shell regions */ /* Main content region + document list must go dark too, otherwise the (now light) text renders white-on-white. */ /* Dividers / row separators */ /* datatable header / sort / filter / columns / paginator icons — keep them clearly visible (light) in dark mode (folder thumbnails are , untouched) */ /* Breadcrumb / page title text */ } .aca-dark-theme { --mat-ripple-color: rgba(255, 255, 255, 0.1); } .aca-dark-theme { --mat-option-selected-state-label-text-color: #2d7ff9; --mat-option-label-text-color: white; --mat-option-hover-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-selected-state-layer-color: rgba(255, 255, 255, 0.08); } .aca-dark-theme .mat-accent { --mat-option-selected-state-label-text-color: #00754a; --mat-option-label-text-color: white; --mat-option-hover-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-selected-state-layer-color: rgba(255, 255, 255, 0.08); } .aca-dark-theme .mat-warn { --mat-option-selected-state-label-text-color: #b8082a; --mat-option-label-text-color: white; --mat-option-hover-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08); --mat-option-selected-state-layer-color: rgba(255, 255, 255, 0.08); } .aca-dark-theme { --mat-optgroup-label-text-color: white; } .aca-dark-theme { --mat-full-pseudo-checkbox-selected-icon-color: #00754a; --mat-full-pseudo-checkbox-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868; } .aca-dark-theme { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #00754a; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868; } .aca-dark-theme .mat-primary { --mat-full-pseudo-checkbox-selected-icon-color: #2d7ff9; --mat-full-pseudo-checkbox-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868; } .aca-dark-theme .mat-primary { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #2d7ff9; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868; } .aca-dark-theme .mat-accent { --mat-full-pseudo-checkbox-selected-icon-color: #00754a; --mat-full-pseudo-checkbox-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868; } .aca-dark-theme .mat-accent { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #00754a; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868; } .aca-dark-theme .mat-warn { --mat-full-pseudo-checkbox-selected-icon-color: #b8082a; --mat-full-pseudo-checkbox-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7); --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030; --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868; --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868; } .aca-dark-theme .mat-warn { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #b8082a; --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868; } .aca-dark-theme { --mat-app-background-color: #303030; --mat-app-text-color: white; --mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12); --mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mdc-elevated-card-container-shape: 4px; } .aca-dark-theme { --mdc-outlined-card-container-shape: 4px; --mdc-outlined-card-outline-width: 1px; } .aca-dark-theme { --mdc-elevated-card-container-color: #424242; --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mdc-outlined-card-container-color: #424242; --mdc-outlined-card-outline-color: rgba(255, 255, 255, 0.12); --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7); } .aca-dark-theme { --mdc-linear-progress-active-indicator-height: 4px; --mdc-linear-progress-track-height: 4px; --mdc-linear-progress-track-shape: 0; } .aca-dark-theme .mat-mdc-progress-bar { --mdc-linear-progress-active-indicator-color: #2d7ff9; --mdc-linear-progress-track-color: rgba(45, 127, 249, 0.25); } .aca-dark-theme .mat-mdc-progress-bar.mat-accent { --mdc-linear-progress-active-indicator-color: #00754a; --mdc-linear-progress-track-color: rgba(0, 117, 74, 0.25); } .aca-dark-theme .mat-mdc-progress-bar.mat-warn { --mdc-linear-progress-active-indicator-color: #b8082a; --mdc-linear-progress-track-color: rgba(184, 8, 42, 0.25); } .aca-dark-theme { --mdc-plain-tooltip-container-shape: 4px; --mdc-plain-tooltip-supporting-text-line-height: 16px; } .aca-dark-theme { --mdc-plain-tooltip-container-color: #616161; --mdc-plain-tooltip-supporting-text-color: #fff; } .aca-dark-theme { --mdc-filled-text-field-active-indicator-height: 1px; --mdc-filled-text-field-focus-active-indicator-height: 2px; --mdc-filled-text-field-container-shape: 4px; } .aca-dark-theme { --mdc-outlined-text-field-outline-width: 1px; --mdc-outlined-text-field-focus-outline-width: 2px; --mdc-outlined-text-field-container-shape: 4px; } .aca-dark-theme { --mdc-filled-text-field-caret-color: #2d7ff9; --mdc-filled-text-field-focus-active-indicator-color: #2d7ff9; --mdc-filled-text-field-focus-label-text-color: rgba(45, 127, 249, 0.87); --mdc-filled-text-field-container-color: rgb(73.56, 73.56, 73.56); --mdc-filled-text-field-disabled-container-color: rgb(69.78, 69.78, 69.78); --mdc-filled-text-field-label-text-color: rgba(255, 255, 255, 0.6); --mdc-filled-text-field-hover-label-text-color: rgba(255, 255, 255, 0.6); --mdc-filled-text-field-disabled-label-text-color: rgba(255, 255, 255, 0.38); --mdc-filled-text-field-input-text-color: rgba(255, 255, 255, 0.87); --mdc-filled-text-field-disabled-input-text-color: rgba(255, 255, 255, 0.38); --mdc-filled-text-field-input-text-placeholder-color: rgba(255, 255, 255, 0.6); --mdc-filled-text-field-error-hover-label-text-color: #b8082a; --mdc-filled-text-field-error-focus-label-text-color: #b8082a; --mdc-filled-text-field-error-label-text-color: #b8082a; --mdc-filled-text-field-error-caret-color: #b8082a; --mdc-filled-text-field-active-indicator-color: rgba(255, 255, 255, 0.42); --mdc-filled-text-field-disabled-active-indicator-color: rgba(255, 255, 255, 0.06); --mdc-filled-text-field-hover-active-indicator-color: rgba(255, 255, 255, 0.87); --mdc-filled-text-field-error-active-indicator-color: #b8082a; --mdc-filled-text-field-error-focus-active-indicator-color: #b8082a; --mdc-filled-text-field-error-hover-active-indicator-color: #b8082a; } .aca-dark-theme { --mdc-outlined-text-field-caret-color: #2d7ff9; --mdc-outlined-text-field-focus-outline-color: #2d7ff9; --mdc-outlined-text-field-focus-label-text-color: rgba(45, 127, 249, 0.87); --mdc-outlined-text-field-label-text-color: rgba(255, 255, 255, 0.6); --mdc-outlined-text-field-hover-label-text-color: rgba(255, 255, 255, 0.6); --mdc-outlined-text-field-disabled-label-text-color: rgba(255, 255, 255, 0.38); --mdc-outlined-text-field-input-text-color: rgba(255, 255, 255, 0.87); --mdc-outlined-text-field-disabled-input-text-color: rgba(255, 255, 255, 0.38); --mdc-outlined-text-field-input-text-placeholder-color: rgba(255, 255, 255, 0.6); --mdc-outlined-text-field-error-caret-color: #b8082a; --mdc-outlined-text-field-error-focus-label-text-color: #b8082a; --mdc-outlined-text-field-error-label-text-color: #b8082a; --mdc-outlined-text-field-error-hover-label-text-color: #b8082a; --mdc-outlined-text-field-outline-color: rgba(255, 255, 255, 0.38); --mdc-outlined-text-field-disabled-outline-color: rgba(255, 255, 255, 0.06); --mdc-outlined-text-field-hover-outline-color: rgba(255, 255, 255, 0.87); --mdc-outlined-text-field-error-focus-outline-color: #b8082a; --mdc-outlined-text-field-error-hover-outline-color: #b8082a; --mdc-outlined-text-field-error-outline-color: #b8082a; } .aca-dark-theme { --mat-form-field-focus-select-arrow-color: rgba(45, 127, 249, 0.87); --mat-form-field-disabled-input-text-placeholder-color: rgba(255, 255, 255, 0.38); --mat-form-field-state-layer-color: rgba(255, 255, 255, 0.87); --mat-form-field-error-text-color: #b8082a; --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87); --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38); --mat-form-field-leading-icon-color: unset; --mat-form-field-disabled-leading-icon-color: unset; --mat-form-field-trailing-icon-color: unset; --mat-form-field-disabled-trailing-icon-color: unset; --mat-form-field-error-focus-trailing-icon-color: unset; --mat-form-field-error-hover-trailing-icon-color: unset; --mat-form-field-error-trailing-icon-color: unset; --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.54); --mat-form-field-disabled-select-arrow-color: rgba(255, 255, 255, 0.38); --mat-form-field-hover-state-layer-opacity: 0.08; --mat-form-field-focus-state-layer-opacity: 0.24; } .aca-dark-theme .mat-mdc-form-field.mat-accent { --mdc-filled-text-field-caret-color: #00754a; --mdc-filled-text-field-focus-active-indicator-color: #00754a; --mdc-filled-text-field-focus-label-text-color: rgba(0, 117, 74, 0.87); } .aca-dark-theme .mat-mdc-form-field.mat-accent { --mdc-outlined-text-field-caret-color: #00754a; --mdc-outlined-text-field-focus-outline-color: #00754a; --mdc-outlined-text-field-focus-label-text-color: rgba(0, 117, 74, 0.87); } .aca-dark-theme .mat-mdc-form-field.mat-accent { --mat-form-field-focus-select-arrow-color: rgba(0, 117, 74, 0.87); } .aca-dark-theme .mat-mdc-form-field.mat-warn { --mdc-filled-text-field-caret-color: #b8082a; --mdc-filled-text-field-focus-active-indicator-color: #b8082a; --mdc-filled-text-field-focus-label-text-color: rgba(184, 8, 42, 0.87); } .aca-dark-theme .mat-mdc-form-field.mat-warn { --mdc-outlined-text-field-caret-color: #b8082a; --mdc-outlined-text-field-focus-outline-color: #b8082a; --mdc-outlined-text-field-focus-label-text-color: rgba(184, 8, 42, 0.87); } .aca-dark-theme .mat-mdc-form-field.mat-warn { --mat-form-field-focus-select-arrow-color: rgba(184, 8, 42, 0.87); } .aca-dark-theme { --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mat-select-panel-background-color: #424242; --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, 0.87); --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, 0.38); --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.6); --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.54); --mat-select-disabled-arrow-color: rgba(255, 255, 255, 0.38); --mat-select-focused-arrow-color: rgba(45, 127, 249, 0.87); --mat-select-invalid-arrow-color: rgba(184, 8, 42, 0.87); } .aca-dark-theme .mat-mdc-form-field.mat-accent { --mat-select-panel-background-color: #424242; --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, 0.87); --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, 0.38); --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.6); --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.54); --mat-select-disabled-arrow-color: rgba(255, 255, 255, 0.38); --mat-select-focused-arrow-color: rgba(0, 117, 74, 0.87); --mat-select-invalid-arrow-color: rgba(184, 8, 42, 0.87); } .aca-dark-theme .mat-mdc-form-field.mat-warn { --mat-select-panel-background-color: #424242; --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, 0.87); --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, 0.38); --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.6); --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.54); --mat-select-disabled-arrow-color: rgba(255, 255, 255, 0.38); --mat-select-focused-arrow-color: rgba(184, 8, 42, 0.87); --mat-select-invalid-arrow-color: rgba(184, 8, 42, 0.87); } .aca-dark-theme { --mat-autocomplete-container-shape: 4px; --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mat-autocomplete-background-color: #424242; } .aca-dark-theme { --mdc-dialog-container-shape: 4px; } .aca-dark-theme { --mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); --mat-dialog-container-max-width: 80vw; --mat-dialog-container-small-max-width: 80vw; --mat-dialog-container-min-width: 0; --mat-dialog-actions-alignment: start; --mat-dialog-actions-padding: 8px; --mat-dialog-content-padding: 20px 24px; --mat-dialog-with-actions-content-padding: 20px 24px; --mat-dialog-headline-padding: 0 24px 9px; } .aca-dark-theme { --mdc-dialog-container-color: #424242; --mdc-dialog-subhead-color: rgba(255, 255, 255, 0.87); --mdc-dialog-supporting-text-color: rgba(255, 255, 255, 0.6); } .aca-dark-theme .mat-mdc-standard-chip { --mdc-chip-container-shape-radius: 16px; --mdc-chip-with-avatar-avatar-shape-radius: 14px; --mdc-chip-with-avatar-avatar-size: 28px; --mdc-chip-with-icon-icon-size: 18px; --mdc-chip-outline-width: 0; --mdc-chip-outline-color: transparent; --mdc-chip-disabled-outline-color: transparent; --mdc-chip-focus-outline-color: transparent; --mdc-chip-hover-state-layer-opacity: 0.04; --mdc-chip-with-avatar-disabled-avatar-opacity: 1; --mdc-chip-flat-selected-outline-width: 0; --mdc-chip-selected-hover-state-layer-opacity: 0.04; --mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1; --mdc-chip-with-icon-disabled-icon-opacity: 1; } .aca-dark-theme .mat-mdc-standard-chip { --mat-chip-disabled-container-opacity: 0.4; --mat-chip-trailing-action-opacity: 0.54; --mat-chip-trailing-action-focus-opacity: 1; --mat-chip-trailing-action-state-layer-color: transparent; --mat-chip-selected-trailing-action-state-layer-color: transparent; --mat-chip-trailing-action-hover-state-layer-opacity: 0; --mat-chip-trailing-action-focus-state-layer-opacity: 0; } .aca-dark-theme .mat-mdc-standard-chip { --mdc-chip-disabled-label-text-color: #fafafa; --mdc-chip-elevated-container-color: rgb(88.68, 88.68, 88.68); --mdc-chip-elevated-selected-container-color: rgb(88.68, 88.68, 88.68); --mdc-chip-elevated-disabled-container-color: rgb(88.68, 88.68, 88.68); --mdc-chip-flat-disabled-selected-container-color: rgb(88.68, 88.68, 88.68); --mdc-chip-focus-state-layer-color: white; --mdc-chip-hover-state-layer-color: white; --mdc-chip-selected-hover-state-layer-color: white; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: white; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: #fafafa; --mdc-chip-selected-label-text-color: #fafafa; --mdc-chip-with-icon-icon-color: #fafafa; --mdc-chip-with-icon-disabled-icon-color: #fafafa; --mdc-chip-with-icon-selected-icon-color: #fafafa; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #fafafa; --mdc-chip-with-trailing-icon-trailing-icon-color: #fafafa; } .aca-dark-theme .mat-mdc-standard-chip { --mat-chip-selected-disabled-trailing-icon-color: #fafafa; --mat-chip-selected-trailing-icon-color: #fafafa; } .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary { --mdc-chip-disabled-label-text-color: white; --mdc-chip-elevated-container-color: #2d7ff9; --mdc-chip-elevated-selected-container-color: #2d7ff9; --mdc-chip-elevated-disabled-container-color: #2d7ff9; --mdc-chip-flat-disabled-selected-container-color: #2d7ff9; --mdc-chip-focus-state-layer-color: white; --mdc-chip-hover-state-layer-color: white; --mdc-chip-selected-hover-state-layer-color: white; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: white; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: white; --mdc-chip-selected-label-text-color: white; --mdc-chip-with-icon-icon-color: white; --mdc-chip-with-icon-disabled-icon-color: white; --mdc-chip-with-icon-selected-icon-color: white; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white; --mdc-chip-with-trailing-icon-trailing-icon-color: white; } .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary { --mat-chip-selected-disabled-trailing-icon-color: white; --mat-chip-selected-trailing-icon-color: white; } .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent { --mdc-chip-disabled-label-text-color: white; --mdc-chip-elevated-container-color: #00754a; --mdc-chip-elevated-selected-container-color: #00754a; --mdc-chip-elevated-disabled-container-color: #00754a; --mdc-chip-flat-disabled-selected-container-color: #00754a; --mdc-chip-focus-state-layer-color: white; --mdc-chip-hover-state-layer-color: white; --mdc-chip-selected-hover-state-layer-color: white; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: white; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: white; --mdc-chip-selected-label-text-color: white; --mdc-chip-with-icon-icon-color: white; --mdc-chip-with-icon-disabled-icon-color: white; --mdc-chip-with-icon-selected-icon-color: white; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white; --mdc-chip-with-trailing-icon-trailing-icon-color: white; } .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent { --mat-chip-selected-disabled-trailing-icon-color: white; --mat-chip-selected-trailing-icon-color: white; } .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn { --mdc-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-elevated-container-color: #b8082a; --mdc-chip-elevated-selected-container-color: #b8082a; --mdc-chip-elevated-disabled-container-color: #b8082a; --mdc-chip-flat-disabled-selected-container-color: #b8082a; --mdc-chip-focus-state-layer-color: white; --mdc-chip-hover-state-layer-color: white; --mdc-chip-selected-hover-state-layer-color: white; --mdc-chip-focus-state-layer-opacity: 0.12; --mdc-chip-selected-focus-state-layer-color: white; --mdc-chip-selected-focus-state-layer-opacity: 0.12; --mdc-chip-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-selected-label-text-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mdc-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87); } .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .aca-dark-theme .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn { --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87); --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87); } .aca-dark-theme { --mdc-switch-disabled-selected-icon-opacity: 0.38; --mdc-switch-disabled-track-opacity: 0.12; --mdc-switch-disabled-unselected-icon-opacity: 0.38; --mdc-switch-handle-height: 20px; --mdc-switch-handle-shape: 10px; --mdc-switch-handle-width: 20px; --mdc-switch-selected-icon-size: 18px; --mdc-switch-track-height: 14px; --mdc-switch-track-shape: 7px; --mdc-switch-track-width: 36px; --mdc-switch-unselected-icon-size: 18px; --mdc-switch-selected-focus-state-layer-opacity: 0.12; --mdc-switch-selected-hover-state-layer-opacity: 0.04; --mdc-switch-selected-pressed-state-layer-opacity: 0.1; --mdc-switch-unselected-focus-state-layer-opacity: 0.12; --mdc-switch-unselected-hover-state-layer-opacity: 0.04; --mdc-switch-unselected-pressed-state-layer-opacity: 0.1; } .aca-dark-theme .mat-mdc-slide-toggle { --mat-switch-disabled-selected-handle-opacity: 0.38; --mat-switch-disabled-unselected-handle-opacity: 0.38; --mat-switch-unselected-handle-size: 20px; --mat-switch-selected-handle-size: 20px; --mat-switch-pressed-handle-size: 20px; --mat-switch-with-icon-handle-size: 20px; --mat-switch-selected-handle-horizontal-margin: 0; --mat-switch-selected-with-icon-handle-horizontal-margin: 0; --mat-switch-selected-pressed-handle-horizontal-margin: 0; --mat-switch-unselected-handle-horizontal-margin: 0; --mat-switch-unselected-with-icon-handle-horizontal-margin: 0; --mat-switch-unselected-pressed-handle-horizontal-margin: 0; --mat-switch-visible-track-opacity: 1; --mat-switch-hidden-track-opacity: 1; --mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1); --mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1); --mat-switch-track-outline-width: 1px; --mat-switch-track-outline-color: transparent; --mat-switch-selected-track-outline-width: 1px; --mat-switch-selected-track-outline-color: transparent; --mat-switch-disabled-unselected-track-outline-width: 1px; --mat-switch-disabled-unselected-track-outline-color: transparent; } .aca-dark-theme { --mdc-switch-selected-focus-state-layer-color: #6ba6fa; --mdc-switch-selected-handle-color: #6ba6fa; --mdc-switch-selected-hover-state-layer-color: #6ba6fa; --mdc-switch-selected-pressed-state-layer-color: #6ba6fa; --mdc-switch-selected-focus-handle-color: #a6c6ff; --mdc-switch-selected-hover-handle-color: #a6c6ff; --mdc-switch-selected-pressed-handle-color: #a6c6ff; --mdc-switch-selected-focus-track-color: #1668e6; --mdc-switch-selected-hover-track-color: #1668e6; --mdc-switch-selected-pressed-track-color: #1668e6; --mdc-switch-selected-track-color: #1668e6; --mdc-switch-disabled-selected-handle-color: #000; --mdc-switch-disabled-selected-icon-color: #212121; --mdc-switch-disabled-selected-track-color: #f5f5f5; --mdc-switch-disabled-unselected-handle-color: #000; --mdc-switch-disabled-unselected-icon-color: #212121; --mdc-switch-disabled-unselected-track-color: #f5f5f5; --mdc-switch-handle-surface-color: #fff; --mdc-switch-selected-icon-color: #212121; --mdc-switch-unselected-focus-handle-color: #fafafa; --mdc-switch-unselected-focus-state-layer-color: #f5f5f5; --mdc-switch-unselected-focus-track-color: #616161; --mdc-switch-unselected-handle-color: #9e9e9e; --mdc-switch-unselected-hover-handle-color: #fafafa; --mdc-switch-unselected-hover-state-layer-color: #f5f5f5; --mdc-switch-unselected-hover-track-color: #616161; --mdc-switch-unselected-icon-color: #212121; --mdc-switch-unselected-pressed-handle-color: #fafafa; --mdc-switch-unselected-pressed-state-layer-color: #f5f5f5; --mdc-switch-unselected-pressed-track-color: #616161; --mdc-switch-unselected-track-color: #616161; --mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mdc-switch-disabled-label-text-color: rgba(255, 255, 255, 0.5); } .aca-dark-theme .mat-mdc-slide-toggle { --mat-switch-label-text-color: white; } .aca-dark-theme .mat-mdc-slide-toggle.mat-accent { --mdc-switch-selected-focus-state-layer-color: #72b971; --mdc-switch-selected-handle-color: #72b971; --mdc-switch-selected-hover-state-layer-color: #72b971; --mdc-switch-selected-pressed-state-layer-color: #72b971; --mdc-switch-selected-focus-handle-color: #9acd9a; --mdc-switch-selected-hover-handle-color: #9acd9a; --mdc-switch-selected-pressed-handle-color: #9acd9a; --mdc-switch-selected-focus-track-color: #30932f; --mdc-switch-selected-hover-track-color: #30932f; --mdc-switch-selected-pressed-track-color: #30932f; --mdc-switch-selected-track-color: #30932f; } .aca-dark-theme .mat-mdc-slide-toggle.mat-warn { --mdc-switch-selected-focus-state-layer-color: #cd526a; --mdc-switch-selected-handle-color: #cd526a; --mdc-switch-selected-hover-state-layer-color: #cd526a; --mdc-switch-selected-pressed-state-layer-color: #cd526a; --mdc-switch-selected-focus-handle-color: #dc8495; --mdc-switch-selected-hover-handle-color: #dc8495; --mdc-switch-selected-pressed-handle-color: #dc8495; --mdc-switch-selected-focus-track-color: #b10725; --mdc-switch-selected-hover-track-color: #b10725; --mdc-switch-selected-pressed-track-color: #b10725; --mdc-switch-selected-track-color: #b10725; } .aca-dark-theme { --mdc-radio-disabled-selected-icon-opacity: 0.38; --mdc-radio-disabled-unselected-icon-opacity: 0.38; --mdc-radio-state-layer-size: 40px; } .aca-dark-theme .mat-mdc-radio-button.mat-primary { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #2d7ff9; --mdc-radio-selected-hover-icon-color: #2d7ff9; --mdc-radio-selected-icon-color: #2d7ff9; --mdc-radio-selected-pressed-icon-color: #2d7ff9; } .aca-dark-theme .mat-mdc-radio-button.mat-primary { --mat-radio-ripple-color: white; --mat-radio-checked-ripple-color: #2d7ff9; --mat-radio-disabled-label-color: rgba(255, 255, 255, 0.5); --mat-radio-label-text-color: white; } .aca-dark-theme .mat-mdc-radio-button.mat-accent { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #00754a; --mdc-radio-selected-hover-icon-color: #00754a; --mdc-radio-selected-icon-color: #00754a; --mdc-radio-selected-pressed-icon-color: #00754a; } .aca-dark-theme .mat-mdc-radio-button.mat-accent { --mat-radio-ripple-color: white; --mat-radio-checked-ripple-color: #00754a; --mat-radio-disabled-label-color: rgba(255, 255, 255, 0.5); --mat-radio-label-text-color: white; } .aca-dark-theme .mat-mdc-radio-button.mat-warn { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #b8082a; --mdc-radio-selected-hover-icon-color: #b8082a; --mdc-radio-selected-icon-color: #b8082a; --mdc-radio-selected-pressed-icon-color: #b8082a; } .aca-dark-theme .mat-mdc-radio-button.mat-warn { --mat-radio-ripple-color: white; --mat-radio-checked-ripple-color: #b8082a; --mat-radio-disabled-label-color: rgba(255, 255, 255, 0.5); --mat-radio-label-text-color: white; } .aca-dark-theme { --mdc-slider-active-track-height: 6px; --mdc-slider-active-track-shape: 9999px; --mdc-slider-handle-height: 20px; --mdc-slider-handle-shape: 50%; --mdc-slider-handle-width: 20px; --mdc-slider-inactive-track-height: 4px; --mdc-slider-inactive-track-shape: 9999px; --mdc-slider-with-overlap-handle-outline-width: 1px; --mdc-slider-with-tick-marks-active-container-opacity: 0.6; --mdc-slider-with-tick-marks-container-shape: 50%; --mdc-slider-with-tick-marks-container-size: 2px; --mdc-slider-with-tick-marks-inactive-container-opacity: 0.6; --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mat-slider-value-indicator-width: auto; --mat-slider-value-indicator-height: 32px; --mat-slider-value-indicator-caret-display: block; --mat-slider-value-indicator-border-radius: 4px; --mat-slider-value-indicator-padding: 0 12px; --mat-slider-value-indicator-text-transform: none; --mat-slider-value-indicator-container-transform: translateX(-50%); } .aca-dark-theme { --mdc-slider-handle-color: #2d7ff9; --mdc-slider-focus-handle-color: #2d7ff9; --mdc-slider-hover-handle-color: #2d7ff9; --mdc-slider-active-track-color: #2d7ff9; --mdc-slider-inactive-track-color: #2d7ff9; --mdc-slider-with-tick-marks-inactive-container-color: #2d7ff9; --mdc-slider-with-tick-marks-active-container-color: white; --mdc-slider-disabled-active-track-color: #fff; --mdc-slider-disabled-handle-color: #fff; --mdc-slider-disabled-inactive-track-color: #fff; --mdc-slider-label-container-color: #fff; --mdc-slider-label-label-text-color: #000; --mdc-slider-with-overlap-handle-outline-color: #fff; --mdc-slider-with-tick-marks-disabled-container-color: #fff; } .aca-dark-theme { --mat-slider-ripple-color: #2d7ff9; --mat-slider-hover-state-layer-color: rgba(45, 127, 249, 0.05); --mat-slider-focus-state-layer-color: rgba(45, 127, 249, 0.2); --mat-slider-value-indicator-opacity: 0.9; } .aca-dark-theme .mat-accent { --mdc-slider-handle-color: #00754a; --mdc-slider-focus-handle-color: #00754a; --mdc-slider-hover-handle-color: #00754a; --mdc-slider-active-track-color: #00754a; --mdc-slider-inactive-track-color: #00754a; --mdc-slider-with-tick-marks-inactive-container-color: #00754a; --mdc-slider-with-tick-marks-active-container-color: white; } .aca-dark-theme .mat-accent { --mat-slider-ripple-color: #00754a; --mat-slider-hover-state-layer-color: rgba(0, 117, 74, 0.05); --mat-slider-focus-state-layer-color: rgba(0, 117, 74, 0.2); } .aca-dark-theme .mat-warn { --mdc-slider-handle-color: #b8082a; --mdc-slider-focus-handle-color: #b8082a; --mdc-slider-hover-handle-color: #b8082a; --mdc-slider-active-track-color: #b8082a; --mdc-slider-inactive-track-color: #b8082a; --mdc-slider-with-tick-marks-inactive-container-color: #b8082a; --mdc-slider-with-tick-marks-active-container-color: rgba(0, 0, 0, 0.87); } .aca-dark-theme .mat-warn { --mat-slider-ripple-color: #b8082a; --mat-slider-hover-state-layer-color: rgba(184, 8, 42, 0.05); --mat-slider-focus-state-layer-color: rgba(184, 8, 42, 0.2); } .aca-dark-theme { --mat-menu-container-shape: 4px; --mat-menu-divider-bottom-spacing: 0; --mat-menu-divider-top-spacing: 0; --mat-menu-item-spacing: 16px; --mat-menu-item-icon-size: 24px; --mat-menu-item-leading-spacing: 16px; --mat-menu-item-trailing-spacing: 16px; --mat-menu-item-with-icon-leading-spacing: 16px; --mat-menu-item-with-icon-trailing-spacing: 16px; --mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mat-menu-item-label-text-color: white; --mat-menu-item-icon-color: white; --mat-menu-item-hover-state-layer-color: rgba(255, 255, 255, 0.08); --mat-menu-item-focus-state-layer-color: rgba(255, 255, 255, 0.08); --mat-menu-container-color: #424242; --mat-menu-divider-color: rgba(255, 255, 255, 0.12); } .aca-dark-theme { --mdc-list-list-item-container-shape: 0; --mdc-list-list-item-leading-avatar-shape: 50%; --mdc-list-list-item-container-color: transparent; --mdc-list-list-item-selected-container-color: transparent; --mdc-list-list-item-leading-avatar-color: transparent; --mdc-list-list-item-leading-icon-size: 24px; --mdc-list-list-item-leading-avatar-size: 40px; --mdc-list-list-item-trailing-icon-size: 24px; --mdc-list-list-item-disabled-state-layer-color: transparent; --mdc-list-list-item-disabled-state-layer-opacity: 0; --mdc-list-list-item-disabled-label-text-opacity: 0.38; --mdc-list-list-item-disabled-leading-icon-opacity: 0.38; --mdc-list-list-item-disabled-trailing-icon-opacity: 0.38; } .aca-dark-theme { --mat-list-active-indicator-color: transparent; --mat-list-active-indicator-shape: 4px; } .aca-dark-theme { --mdc-list-list-item-label-text-color: white; --mdc-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7); --mdc-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-disabled-label-text-color: white; --mdc-list-list-item-disabled-leading-icon-color: white; --mdc-list-list-item-disabled-trailing-icon-color: white; --mdc-list-list-item-hover-label-text-color: white; --mdc-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.5); --mdc-list-list-item-focus-label-text-color: white; --mdc-list-list-item-hover-state-layer-color: white; --mdc-list-list-item-hover-state-layer-opacity: 0.08; --mdc-list-list-item-focus-state-layer-color: white; --mdc-list-list-item-focus-state-layer-opacity: 0.24; } .aca-dark-theme .mdc-list-item__start, .aca-dark-theme .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #2d7ff9; --mdc-radio-selected-hover-icon-color: #2d7ff9; --mdc-radio-selected-icon-color: #2d7ff9; --mdc-radio-selected-pressed-icon-color: #2d7ff9; } .aca-dark-theme .mat-accent .mdc-list-item__start, .aca-dark-theme .mat-accent .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #00754a; --mdc-radio-selected-hover-icon-color: #00754a; --mdc-radio-selected-icon-color: #00754a; --mdc-radio-selected-pressed-icon-color: #00754a; } .aca-dark-theme .mat-warn .mdc-list-item__start, .aca-dark-theme .mat-warn .mdc-list-item__end { --mdc-radio-disabled-selected-icon-color: white; --mdc-radio-disabled-unselected-icon-color: white; --mdc-radio-unselected-hover-icon-color: #eeeeee; --mdc-radio-unselected-focus-icon-color: #eeeeee; --mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, 0.54); --mdc-radio-selected-focus-icon-color: #b8082a; --mdc-radio-selected-hover-icon-color: #b8082a; --mdc-radio-selected-icon-color: #b8082a; --mdc-radio-selected-pressed-icon-color: #b8082a; } .aca-dark-theme .mat-mdc-list-option { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #2d7ff9; --mdc-checkbox-selected-hover-icon-color: #2d7ff9; --mdc-checkbox-selected-icon-color: #2d7ff9; --mdc-checkbox-selected-pressed-icon-color: #2d7ff9; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #2d7ff9; --mdc-checkbox-selected-hover-state-layer-color: #2d7ff9; --mdc-checkbox-selected-pressed-state-layer-color: #2d7ff9; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .aca-dark-theme .mat-mdc-list-option.mat-accent { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #00754a; --mdc-checkbox-selected-hover-icon-color: #00754a; --mdc-checkbox-selected-icon-color: #00754a; --mdc-checkbox-selected-pressed-icon-color: #00754a; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #00754a; --mdc-checkbox-selected-hover-state-layer-color: #00754a; --mdc-checkbox-selected-pressed-state-layer-color: #00754a; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .aca-dark-theme .mat-mdc-list-option.mat-warn { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #b8082a; --mdc-checkbox-selected-hover-icon-color: #b8082a; --mdc-checkbox-selected-icon-color: #b8082a; --mdc-checkbox-selected-pressed-icon-color: #b8082a; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #b8082a; --mdc-checkbox-selected-hover-state-layer-color: #b8082a; --mdc-checkbox-selected-pressed-state-layer-color: #b8082a; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .aca-dark-theme .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text, .aca-dark-theme .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start, .aca-dark-theme .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text, .aca-dark-theme .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start { color: #2d7ff9; } .aca-dark-theme .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start, .aca-dark-theme .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content, .aca-dark-theme .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end { opacity: 1; } .aca-dark-theme { --mat-paginator-container-text-color: rgba(255, 255, 255, 0.87); --mat-paginator-container-background-color: #424242; --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.54); --mat-paginator-disabled-icon-color: rgba(255, 255, 255, 0.12); } .aca-dark-theme { --mdc-secondary-navigation-tab-container-height: 48px; } .aca-dark-theme { --mdc-tab-indicator-active-indicator-height: 2px; --mdc-tab-indicator-active-indicator-shape: 0; } .aca-dark-theme { --mat-tab-header-divider-color: transparent; --mat-tab-header-divider-height: 0; } .aca-dark-theme .mat-mdc-tab-group, .aca-dark-theme .mat-mdc-tab-nav-bar { --mdc-tab-indicator-active-indicator-color: #2d7ff9; } .aca-dark-theme .mat-mdc-tab-group, .aca-dark-theme .mat-mdc-tab-nav-bar { --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, 0.5); --mat-tab-header-pagination-icon-color: white; --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-label-text-color: #2d7ff9; --mat-tab-header-active-ripple-color: #2d7ff9; --mat-tab-header-inactive-ripple-color: #2d7ff9; --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-focus-label-text-color: #2d7ff9; --mat-tab-header-active-hover-label-text-color: #2d7ff9; --mat-tab-header-active-focus-indicator-color: #2d7ff9; --mat-tab-header-active-hover-indicator-color: #2d7ff9; } .aca-dark-theme .mat-mdc-tab-group.mat-accent, .aca-dark-theme .mat-mdc-tab-nav-bar.mat-accent { --mdc-tab-indicator-active-indicator-color: #00754a; } .aca-dark-theme .mat-mdc-tab-group.mat-accent, .aca-dark-theme .mat-mdc-tab-nav-bar.mat-accent { --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, 0.5); --mat-tab-header-pagination-icon-color: white; --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-label-text-color: #00754a; --mat-tab-header-active-ripple-color: #00754a; --mat-tab-header-inactive-ripple-color: #00754a; --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-focus-label-text-color: #00754a; --mat-tab-header-active-hover-label-text-color: #00754a; --mat-tab-header-active-focus-indicator-color: #00754a; --mat-tab-header-active-hover-indicator-color: #00754a; } .aca-dark-theme .mat-mdc-tab-group.mat-warn, .aca-dark-theme .mat-mdc-tab-nav-bar.mat-warn { --mdc-tab-indicator-active-indicator-color: #b8082a; } .aca-dark-theme .mat-mdc-tab-group.mat-warn, .aca-dark-theme .mat-mdc-tab-nav-bar.mat-warn { --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, 0.5); --mat-tab-header-pagination-icon-color: white; --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-label-text-color: #b8082a; --mat-tab-header-active-ripple-color: #b8082a; --mat-tab-header-inactive-ripple-color: #b8082a; --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, 0.6); --mat-tab-header-active-focus-label-text-color: #b8082a; --mat-tab-header-active-hover-label-text-color: #b8082a; --mat-tab-header-active-focus-indicator-color: #b8082a; --mat-tab-header-active-hover-indicator-color: #b8082a; } .aca-dark-theme .mat-mdc-tab-group.mat-background-primary, .aca-dark-theme .mat-mdc-tab-nav-bar.mat-background-primary { --mat-tab-header-with-background-background-color: #2d7ff9; --mat-tab-header-with-background-foreground-color: white; } .aca-dark-theme .mat-mdc-tab-group.mat-background-accent, .aca-dark-theme .mat-mdc-tab-nav-bar.mat-background-accent { --mat-tab-header-with-background-background-color: #00754a; --mat-tab-header-with-background-foreground-color: white; } .aca-dark-theme .mat-mdc-tab-group.mat-background-warn, .aca-dark-theme .mat-mdc-tab-nav-bar.mat-background-warn { --mat-tab-header-with-background-background-color: #b8082a; --mat-tab-header-with-background-foreground-color: rgba(0, 0, 0, 0.87); } .aca-dark-theme { --mdc-checkbox-disabled-selected-checkmark-color: #fff; --mdc-checkbox-selected-focus-state-layer-opacity: 0.16; --mdc-checkbox-selected-hover-state-layer-opacity: 0.04; --mdc-checkbox-selected-pressed-state-layer-opacity: 0.16; --mdc-checkbox-unselected-focus-state-layer-opacity: 0.16; --mdc-checkbox-unselected-hover-state-layer-opacity: 0.04; --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.16; } .aca-dark-theme { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #00754a; --mdc-checkbox-selected-hover-icon-color: #00754a; --mdc-checkbox-selected-icon-color: #00754a; --mdc-checkbox-selected-pressed-icon-color: #00754a; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #00754a; --mdc-checkbox-selected-hover-state-layer-color: #00754a; --mdc-checkbox-selected-pressed-state-layer-color: #00754a; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .aca-dark-theme { --mat-checkbox-disabled-label-color: rgba(255, 255, 255, 0.5); --mat-checkbox-label-text-color: white; } .aca-dark-theme .mat-mdc-checkbox.mat-primary { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: white; --mdc-checkbox-selected-focus-icon-color: #2d7ff9; --mdc-checkbox-selected-hover-icon-color: #2d7ff9; --mdc-checkbox-selected-icon-color: #2d7ff9; --mdc-checkbox-selected-pressed-icon-color: #2d7ff9; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #2d7ff9; --mdc-checkbox-selected-hover-state-layer-color: #2d7ff9; --mdc-checkbox-selected-pressed-state-layer-color: #2d7ff9; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .aca-dark-theme .mat-mdc-checkbox.mat-warn { --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, 0.38); --mdc-checkbox-selected-checkmark-color: black; --mdc-checkbox-selected-focus-icon-color: #b8082a; --mdc-checkbox-selected-hover-icon-color: #b8082a; --mdc-checkbox-selected-icon-color: #b8082a; --mdc-checkbox-selected-pressed-icon-color: #b8082a; --mdc-checkbox-unselected-focus-icon-color: #eeeeee; --mdc-checkbox-unselected-hover-icon-color: #eeeeee; --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.54); --mdc-checkbox-selected-focus-state-layer-color: #b8082a; --mdc-checkbox-selected-hover-state-layer-color: #b8082a; --mdc-checkbox-selected-pressed-state-layer-color: #b8082a; --mdc-checkbox-unselected-focus-state-layer-color: white; --mdc-checkbox-unselected-hover-state-layer-color: white; --mdc-checkbox-unselected-pressed-state-layer-color: white; } .aca-dark-theme { --mdc-text-button-container-shape: 4px; --mdc-text-button-keep-touch-target: false; } .aca-dark-theme { --mdc-filled-button-container-shape: 4px; --mdc-filled-button-keep-touch-target: false; } .aca-dark-theme { --mdc-protected-button-container-shape: 4px; --mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mdc-outlined-button-keep-touch-target: false; --mdc-outlined-button-outline-width: 1px; --mdc-outlined-button-container-shape: 4px; } .aca-dark-theme { --mat-text-button-horizontal-padding: 8px; --mat-text-button-with-icon-horizontal-padding: 8px; --mat-text-button-icon-spacing: 8px; --mat-text-button-icon-offset: 0; } .aca-dark-theme { --mat-filled-button-horizontal-padding: 16px; --mat-filled-button-icon-spacing: 8px; --mat-filled-button-icon-offset: -4px; } .aca-dark-theme { --mat-protected-button-horizontal-padding: 16px; --mat-protected-button-icon-spacing: 8px; --mat-protected-button-icon-offset: -4px; } .aca-dark-theme { --mat-outlined-button-horizontal-padding: 15px; --mat-outlined-button-icon-spacing: 8px; --mat-outlined-button-icon-offset: -4px; } .aca-dark-theme { --mdc-text-button-label-text-color: white; --mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, 0.5); } .aca-dark-theme { --mat-text-button-state-layer-color: white; --mat-text-button-disabled-state-layer-color: white; --mat-text-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-text-button-hover-state-layer-opacity: 0.08; --mat-text-button-focus-state-layer-opacity: 0.24; --mat-text-button-pressed-state-layer-opacity: 0.24; } .aca-dark-theme { --mdc-filled-button-container-color: #424242; --mdc-filled-button-label-text-color: white; --mdc-filled-button-disabled-container-color: rgba(255, 255, 255, 0.12); --mdc-filled-button-disabled-label-text-color: rgba(255, 255, 255, 0.5); } .aca-dark-theme { --mat-filled-button-state-layer-color: white; --mat-filled-button-disabled-state-layer-color: white; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-filled-button-hover-state-layer-opacity: 0.08; --mat-filled-button-focus-state-layer-opacity: 0.24; --mat-filled-button-pressed-state-layer-opacity: 0.24; } .aca-dark-theme { --mdc-protected-button-container-color: #424242; --mdc-protected-button-label-text-color: white; --mdc-protected-button-disabled-container-color: rgba(255, 255, 255, 0.12); --mdc-protected-button-disabled-label-text-color: rgba(255, 255, 255, 0.5); } .aca-dark-theme { --mat-protected-button-state-layer-color: white; --mat-protected-button-disabled-state-layer-color: white; --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-protected-button-hover-state-layer-opacity: 0.08; --mat-protected-button-focus-state-layer-opacity: 0.24; --mat-protected-button-pressed-state-layer-opacity: 0.24; } .aca-dark-theme { --mdc-outlined-button-disabled-outline-color: rgba(255, 255, 255, 0.12); --mdc-outlined-button-disabled-label-text-color: rgba(255, 255, 255, 0.5); --mdc-outlined-button-label-text-color: white; --mdc-outlined-button-outline-color: rgba(255, 255, 255, 0.12); } .aca-dark-theme { --mat-outlined-button-state-layer-color: white; --mat-outlined-button-disabled-state-layer-color: white; --mat-outlined-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-outlined-button-hover-state-layer-opacity: 0.08; --mat-outlined-button-focus-state-layer-opacity: 0.24; --mat-outlined-button-pressed-state-layer-opacity: 0.24; } .aca-dark-theme .mat-mdc-button.mat-primary { --mdc-text-button-label-text-color: #2d7ff9; } .aca-dark-theme .mat-mdc-button.mat-primary { --mat-text-button-state-layer-color: #2d7ff9; --mat-text-button-ripple-color: rgba(45, 127, 249, 0.1); } .aca-dark-theme .mat-mdc-button.mat-accent { --mdc-text-button-label-text-color: #00754a; } .aca-dark-theme .mat-mdc-button.mat-accent { --mat-text-button-state-layer-color: #00754a; --mat-text-button-ripple-color: rgba(0, 117, 74, 0.1); } .aca-dark-theme .mat-mdc-button.mat-warn { --mdc-text-button-label-text-color: #b8082a; } .aca-dark-theme .mat-mdc-button.mat-warn { --mat-text-button-state-layer-color: #b8082a; --mat-text-button-ripple-color: rgba(184, 8, 42, 0.1); } .aca-dark-theme .mat-mdc-unelevated-button.mat-primary { --mdc-filled-button-container-color: #2d7ff9; --mdc-filled-button-label-text-color: white; } .aca-dark-theme .mat-mdc-unelevated-button.mat-primary { --mat-filled-button-state-layer-color: white; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1); } .aca-dark-theme .mat-mdc-unelevated-button.mat-accent { --mdc-filled-button-container-color: #00754a; --mdc-filled-button-label-text-color: white; } .aca-dark-theme .mat-mdc-unelevated-button.mat-accent { --mat-filled-button-state-layer-color: white; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1); } .aca-dark-theme .mat-mdc-unelevated-button.mat-warn { --mdc-filled-button-container-color: #b8082a; --mdc-filled-button-label-text-color: black; } .aca-dark-theme .mat-mdc-unelevated-button.mat-warn { --mat-filled-button-state-layer-color: black; --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1); } .aca-dark-theme .mat-mdc-raised-button.mat-primary { --mdc-protected-button-container-color: #2d7ff9; --mdc-protected-button-label-text-color: white; } .aca-dark-theme .mat-mdc-raised-button.mat-primary { --mat-protected-button-state-layer-color: white; --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1); } .aca-dark-theme .mat-mdc-raised-button.mat-accent { --mdc-protected-button-container-color: #00754a; --mdc-protected-button-label-text-color: white; } .aca-dark-theme .mat-mdc-raised-button.mat-accent { --mat-protected-button-state-layer-color: white; --mat-protected-button-ripple-color: rgba(255, 255, 255, 0.1); } .aca-dark-theme .mat-mdc-raised-button.mat-warn { --mdc-protected-button-container-color: #b8082a; --mdc-protected-button-label-text-color: black; } .aca-dark-theme .mat-mdc-raised-button.mat-warn { --mat-protected-button-state-layer-color: black; --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1); } .aca-dark-theme .mat-mdc-outlined-button.mat-primary { --mdc-outlined-button-label-text-color: #2d7ff9; --mdc-outlined-button-outline-color: rgba(255, 255, 255, 0.12); } .aca-dark-theme .mat-mdc-outlined-button.mat-primary { --mat-outlined-button-state-layer-color: #2d7ff9; --mat-outlined-button-ripple-color: rgba(45, 127, 249, 0.1); } .aca-dark-theme .mat-mdc-outlined-button.mat-accent { --mdc-outlined-button-label-text-color: #00754a; --mdc-outlined-button-outline-color: rgba(255, 255, 255, 0.12); } .aca-dark-theme .mat-mdc-outlined-button.mat-accent { --mat-outlined-button-state-layer-color: #00754a; --mat-outlined-button-ripple-color: rgba(0, 117, 74, 0.1); } .aca-dark-theme .mat-mdc-outlined-button.mat-warn { --mdc-outlined-button-label-text-color: #b8082a; --mdc-outlined-button-outline-color: rgba(255, 255, 255, 0.12); } .aca-dark-theme .mat-mdc-outlined-button.mat-warn { --mat-outlined-button-state-layer-color: #b8082a; --mat-outlined-button-ripple-color: rgba(184, 8, 42, 0.1); } .aca-dark-theme { --mdc-icon-button-icon-size: 24px; } .aca-dark-theme { --mdc-icon-button-icon-color: inherit; --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5); } .aca-dark-theme { --mat-icon-button-state-layer-color: white; --mat-icon-button-disabled-state-layer-color: white; --mat-icon-button-ripple-color: rgba(255, 255, 255, 0.1); --mat-icon-button-hover-state-layer-opacity: 0.08; --mat-icon-button-focus-state-layer-opacity: 0.24; --mat-icon-button-pressed-state-layer-opacity: 0.24; } .aca-dark-theme .mat-mdc-icon-button.mat-primary { --mdc-icon-button-icon-color: #2d7ff9; } .aca-dark-theme .mat-mdc-icon-button.mat-primary { --mat-icon-button-state-layer-color: #2d7ff9; --mat-icon-button-ripple-color: rgba(45, 127, 249, 0.1); } .aca-dark-theme .mat-mdc-icon-button.mat-accent { --mdc-icon-button-icon-color: #00754a; } .aca-dark-theme .mat-mdc-icon-button.mat-accent { --mat-icon-button-state-layer-color: #00754a; --mat-icon-button-ripple-color: rgba(0, 117, 74, 0.1); } .aca-dark-theme .mat-mdc-icon-button.mat-warn { --mdc-icon-button-icon-color: #b8082a; } .aca-dark-theme .mat-mdc-icon-button.mat-warn { --mat-icon-button-state-layer-color: #b8082a; --mat-icon-button-ripple-color: rgba(184, 8, 42, 0.1); } .aca-dark-theme { --mdc-fab-container-shape: 50%; --mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mdc-fab-small-container-shape: 50%; --mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mdc-extended-fab-container-height: 48px; --mdc-extended-fab-container-shape: 24px; --mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mdc-fab-container-color: #424242; } .aca-dark-theme { --mat-fab-foreground-color: white; --mat-fab-state-layer-color: white; --mat-fab-disabled-state-layer-color: white; --mat-fab-ripple-color: rgba(255, 255, 255, 0.1); --mat-fab-hover-state-layer-opacity: 0.08; --mat-fab-focus-state-layer-opacity: 0.24; --mat-fab-pressed-state-layer-opacity: 0.24; --mat-fab-disabled-state-container-color: rgba(255, 255, 255, 0.12); --mat-fab-disabled-state-foreground-color: rgba(255, 255, 255, 0.5); } .aca-dark-theme { --mdc-fab-small-container-color: #424242; } .aca-dark-theme { --mat-fab-small-foreground-color: white; --mat-fab-small-state-layer-color: white; --mat-fab-small-disabled-state-layer-color: white; --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1); --mat-fab-small-hover-state-layer-opacity: 0.08; --mat-fab-small-focus-state-layer-opacity: 0.24; --mat-fab-small-pressed-state-layer-opacity: 0.24; --mat-fab-small-disabled-state-container-color: rgba(255, 255, 255, 0.12); --mat-fab-small-disabled-state-foreground-color: rgba(255, 255, 255, 0.5); } .aca-dark-theme .mat-mdc-fab.mat-primary { --mdc-fab-container-color: #2d7ff9; } .aca-dark-theme .mat-mdc-fab.mat-primary { --mat-fab-foreground-color: white; --mat-fab-state-layer-color: white; --mat-fab-ripple-color: rgba(255, 255, 255, 0.1); } .aca-dark-theme .mat-mdc-fab.mat-accent { --mdc-fab-container-color: #00754a; } .aca-dark-theme .mat-mdc-fab.mat-accent { --mat-fab-foreground-color: white; --mat-fab-state-layer-color: white; --mat-fab-ripple-color: rgba(255, 255, 255, 0.1); } .aca-dark-theme .mat-mdc-fab.mat-warn { --mdc-fab-container-color: #b8082a; } .aca-dark-theme .mat-mdc-fab.mat-warn { --mat-fab-foreground-color: black; --mat-fab-state-layer-color: black; --mat-fab-ripple-color: rgba(0, 0, 0, 0.1); } .aca-dark-theme .mat-mdc-mini-fab.mat-primary { --mdc-fab-small-container-color: #2d7ff9; } .aca-dark-theme .mat-mdc-mini-fab.mat-primary { --mat-fab-small-foreground-color: white; --mat-fab-small-state-layer-color: white; --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1); } .aca-dark-theme .mat-mdc-mini-fab.mat-accent { --mdc-fab-small-container-color: #00754a; } .aca-dark-theme .mat-mdc-mini-fab.mat-accent { --mat-fab-small-foreground-color: white; --mat-fab-small-state-layer-color: white; --mat-fab-small-ripple-color: rgba(255, 255, 255, 0.1); } .aca-dark-theme .mat-mdc-mini-fab.mat-warn { --mdc-fab-small-container-color: #b8082a; } .aca-dark-theme .mat-mdc-mini-fab.mat-warn { --mat-fab-small-foreground-color: black; --mat-fab-small-state-layer-color: black; --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1); } .aca-dark-theme { --mdc-snackbar-container-shape: 4px; } .aca-dark-theme { --mdc-snackbar-container-color: rgb(217.2, 217.2, 217.2); --mdc-snackbar-supporting-text-color: rgba(66, 66, 66, 0.87); } .aca-dark-theme { --mat-snack-bar-button-color: #1b7af4; } .aca-dark-theme { --mat-table-row-item-outline-width: 1px; } .aca-dark-theme { --mat-table-background-color: #424242; --mat-table-header-headline-color: white; --mat-table-row-item-label-text-color: white; --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12); } .aca-dark-theme { --mdc-circular-progress-active-indicator-width: 4px; --mdc-circular-progress-size: 48px; } .aca-dark-theme { --mdc-circular-progress-active-indicator-color: #2d7ff9; } .aca-dark-theme .mat-accent { --mdc-circular-progress-active-indicator-color: #00754a; } .aca-dark-theme .mat-warn { --mdc-circular-progress-active-indicator-color: #b8082a; } .aca-dark-theme { --mat-badge-container-shape: 50%; --mat-badge-container-size: unset; --mat-badge-small-size-container-size: unset; --mat-badge-large-size-container-size: unset; --mat-badge-legacy-container-size: 22px; --mat-badge-legacy-small-size-container-size: 16px; --mat-badge-legacy-large-size-container-size: 28px; --mat-badge-container-offset: -11px 0; --mat-badge-small-size-container-offset: -8px 0; --mat-badge-large-size-container-offset: -14px 0; --mat-badge-container-overlap-offset: -11px; --mat-badge-small-size-container-overlap-offset: -8px; --mat-badge-large-size-container-overlap-offset: -14px; --mat-badge-container-padding: 0; --mat-badge-small-size-container-padding: 0; --mat-badge-large-size-container-padding: 0; } .aca-dark-theme { --mat-badge-background-color: #2d7ff9; --mat-badge-text-color: white; --mat-badge-disabled-state-background-color: rgb(110.1, 110.1, 110.1); --mat-badge-disabled-state-text-color: rgba(255, 255, 255, 0.5); } .aca-dark-theme .mat-badge-accent { --mat-badge-background-color: #00754a; --mat-badge-text-color: white; } .aca-dark-theme .mat-badge-warn { --mat-badge-background-color: #b8082a; --mat-badge-text-color: rgba(0, 0, 0, 0.87); } .aca-dark-theme { --mat-bottom-sheet-container-shape: 4px; } .aca-dark-theme { --mat-bottom-sheet-container-text-color: white; --mat-bottom-sheet-container-background-color: #424242; } .aca-dark-theme { --mat-legacy-button-toggle-height: 36px; --mat-legacy-button-toggle-shape: 2px; --mat-legacy-button-toggle-focus-state-layer-opacity: 1; } .aca-dark-theme { --mat-standard-button-toggle-shape: 4px; --mat-standard-button-toggle-hover-state-layer-opacity: 0.04; --mat-standard-button-toggle-focus-state-layer-opacity: 0.12; } .aca-dark-theme { --mat-legacy-button-toggle-text-color: rgba(255, 255, 255, 0.5); --mat-legacy-button-toggle-state-layer-color: rgba(255, 255, 255, 0.12); --mat-legacy-button-toggle-selected-state-text-color: rgba(255, 255, 255, 0.7); --mat-legacy-button-toggle-selected-state-background-color: #212121; --mat-legacy-button-toggle-disabled-state-text-color: rgba(255, 255, 255, 0.3); --mat-legacy-button-toggle-disabled-state-background-color: black; --mat-legacy-button-toggle-disabled-selected-state-background-color: #424242; } .aca-dark-theme { --mat-standard-button-toggle-text-color: white; --mat-standard-button-toggle-background-color: #424242; --mat-standard-button-toggle-state-layer-color: white; --mat-standard-button-toggle-selected-state-background-color: #212121; --mat-standard-button-toggle-selected-state-text-color: white; --mat-standard-button-toggle-disabled-state-text-color: rgba(255, 255, 255, 0.3); --mat-standard-button-toggle-disabled-state-background-color: #424242; --mat-standard-button-toggle-disabled-selected-state-text-color: white; --mat-standard-button-toggle-disabled-selected-state-background-color: #424242; --mat-standard-button-toggle-divider-color: rgb(88.68, 88.68, 88.68); } .aca-dark-theme { --mat-datepicker-calendar-container-shape: 4px; --mat-datepicker-calendar-container-touch-shape: 4px; --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mat-datepicker-calendar-date-selected-state-text-color: white; --mat-datepicker-calendar-date-selected-state-background-color: #2d7ff9; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(45, 127, 249, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: white; --mat-datepicker-calendar-date-focus-state-background-color: rgba(45, 127, 249, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(45, 127, 249, 0.3); --mat-datepicker-toggle-active-state-icon-color: #2d7ff9; --mat-datepicker-calendar-date-in-range-state-background-color: rgba(45, 127, 249, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032); --mat-datepicker-toggle-icon-color: white; --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7); --mat-datepicker-calendar-period-button-text-color: white; --mat-datepicker-calendar-period-button-icon-color: white; --mat-datepicker-calendar-navigation-button-icon-color: white; --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12); --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7); --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.5); --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(255, 255, 255, 0.3); --mat-datepicker-calendar-date-text-color: white; --mat-datepicker-calendar-date-outline-color: transparent; --mat-datepicker-calendar-date-disabled-state-text-color: rgba(255, 255, 255, 0.5); --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.24); --mat-datepicker-range-input-separator-color: white; --mat-datepicker-range-input-disabled-state-separator-color: rgba(255, 255, 255, 0.5); --mat-datepicker-range-input-disabled-state-text-color: rgba(255, 255, 255, 0.5); --mat-datepicker-calendar-container-background-color: #424242; --mat-datepicker-calendar-container-text-color: white; } .aca-dark-theme .mat-datepicker-content.mat-accent { --mat-datepicker-calendar-date-selected-state-text-color: white; --mat-datepicker-calendar-date-selected-state-background-color: #00754a; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(0, 117, 74, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: white; --mat-datepicker-calendar-date-focus-state-background-color: rgba(0, 117, 74, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(0, 117, 74, 0.3); --mat-datepicker-calendar-date-in-range-state-background-color: rgba(0, 117, 74, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032); } .aca-dark-theme .mat-datepicker-content.mat-warn { --mat-datepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-selected-state-background-color: #b8082a; --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(184, 8, 42, 0.4); --mat-datepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87); --mat-datepicker-calendar-date-focus-state-background-color: rgba(184, 8, 42, 0.3); --mat-datepicker-calendar-date-hover-state-background-color: rgba(184, 8, 42, 0.3); --mat-datepicker-calendar-date-in-range-state-background-color: rgba(184, 8, 42, 0.2); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5; --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032); } .aca-dark-theme .mat-datepicker-toggle-active.mat-accent { --mat-datepicker-toggle-active-state-icon-color: #00754a; } .aca-dark-theme .mat-datepicker-toggle-active.mat-warn { --mat-datepicker-toggle-active-state-icon-color: #b8082a; } .aca-dark-theme { --mat-divider-width: 1px; } .aca-dark-theme { --mat-divider-color: rgba(255, 255, 255, 0.12); } .aca-dark-theme { --mat-expansion-container-shape: 4px; --mat-expansion-legacy-header-indicator-display: inline-block; --mat-expansion-header-indicator-display: none; } .aca-dark-theme { --mat-expansion-container-background-color: #424242; --mat-expansion-container-text-color: white; --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12); --mat-expansion-header-hover-state-layer-color: rgba(255, 255, 255, 0.04); --mat-expansion-header-focus-state-layer-color: rgba(255, 255, 255, 0.04); --mat-expansion-header-disabled-state-text-color: rgba(255, 255, 255, 0.3); --mat-expansion-header-text-color: white; --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7); --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7); } .aca-dark-theme { --mat-icon-color: inherit; } .aca-dark-theme .mat-icon.mat-primary { --mat-icon-color: #2d7ff9; } .aca-dark-theme .mat-icon.mat-accent { --mat-icon-color: #00754a; } .aca-dark-theme .mat-icon.mat-warn { --mat-icon-color: #b8082a; } .aca-dark-theme { --mat-sidenav-container-shape: 0; --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); --mat-sidenav-container-width: auto; } .aca-dark-theme { --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12); --mat-sidenav-container-background-color: #424242; --mat-sidenav-container-text-color: white; --mat-sidenav-content-background-color: #303030; --mat-sidenav-content-text-color: white; --mat-sidenav-scrim-color: rgba(189, 189, 189, 0.6); } .aca-dark-theme { --mat-stepper-header-icon-foreground-color: white; --mat-stepper-header-selected-state-icon-background-color: #2d7ff9; --mat-stepper-header-selected-state-icon-foreground-color: white; --mat-stepper-header-done-state-icon-background-color: #2d7ff9; --mat-stepper-header-done-state-icon-foreground-color: white; --mat-stepper-header-edit-state-icon-background-color: #2d7ff9; --mat-stepper-header-edit-state-icon-foreground-color: white; --mat-stepper-container-color: #424242; --mat-stepper-line-color: rgba(255, 255, 255, 0.12); --mat-stepper-header-hover-state-layer-color: rgba(255, 255, 255, 0.04); --mat-stepper-header-focus-state-layer-color: rgba(255, 255, 255, 0.04); --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7); --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7); --mat-stepper-header-selected-state-label-text-color: white; --mat-stepper-header-error-state-label-text-color: #b8082a; --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7); --mat-stepper-header-error-state-icon-foreground-color: #b8082a; --mat-stepper-header-error-state-icon-background-color: transparent; } .aca-dark-theme .mat-step-header.mat-accent { --mat-stepper-header-icon-foreground-color: white; --mat-stepper-header-selected-state-icon-background-color: #00754a; --mat-stepper-header-selected-state-icon-foreground-color: white; --mat-stepper-header-done-state-icon-background-color: #00754a; --mat-stepper-header-done-state-icon-foreground-color: white; --mat-stepper-header-edit-state-icon-background-color: #00754a; --mat-stepper-header-edit-state-icon-foreground-color: white; } .aca-dark-theme .mat-step-header.mat-warn { --mat-stepper-header-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-selected-state-icon-background-color: #b8082a; --mat-stepper-header-selected-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-done-state-icon-background-color: #b8082a; --mat-stepper-header-done-state-icon-foreground-color: rgba(0, 0, 0, 0.87); --mat-stepper-header-edit-state-icon-background-color: #b8082a; --mat-stepper-header-edit-state-icon-foreground-color: rgba(0, 0, 0, 0.87); } .aca-dark-theme { --mat-sort-arrow-color: rgb(198.3, 198.3, 198.3); } .aca-dark-theme { --mat-toolbar-container-background-color: #212121; --mat-toolbar-container-text-color: white; } .aca-dark-theme .mat-toolbar.mat-primary { --mat-toolbar-container-background-color: #2d7ff9; --mat-toolbar-container-text-color: white; } .aca-dark-theme .mat-toolbar.mat-accent { --mat-toolbar-container-background-color: #00754a; --mat-toolbar-container-text-color: white; } .aca-dark-theme .mat-toolbar.mat-warn { --mat-toolbar-container-background-color: #b8082a; --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87); } .aca-dark-theme { --mat-tree-container-background-color: #424242; --mat-tree-node-text-color: white; } .aca-dark-theme { --mat-timepicker-container-shape: 4px; --mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .aca-dark-theme { --mat-timepicker-container-background-color: #424242; } .aca-dark-theme .adf-layout-header, .aca-dark-theme .adf-sidenav-layout-header { background: var(--aca-surface) !important; } .aca-dark-theme .adf-sidenav-layout-content, .aca-dark-theme .app-page-layout, .aca-dark-theme adf-document-list, .aca-dark-theme .adf-document-list, .aca-dark-theme .adf-datatable-list, .aca-dark-theme .adf-datatable, .aca-dark-theme .adf-datatable-body, .aca-dark-theme .aca-page-layout-header, .aca-dark-theme .mat-mdc-paginator, .aca-dark-theme mat-toolbar.adf-toolbar { background-color: var(--aca-app-bg) !important; } .aca-dark-theme .adf-datatable-row, .aca-dark-theme .adf-datatable-cell, .aca-dark-theme .adf-datatable-cell-header, .aca-dark-theme .adf-datatable-header { background-color: transparent !important; color: var(--adf-theme-foreground-text-color-087); } .aca-dark-theme .adf-datatable-list .adf-datatable-row:hover, .aca-dark-theme .adf-datatable-body .adf-datatable-row:hover { background: var(--theme-hover-background-color) !important; } .aca-dark-theme .adf-datatable-row, .aca-dark-theme .adf-datatable-cell { border-color: var(--adf-theme-foreground-divider-color) !important; } .aca-dark-theme .adf-datatable-header mat-icon, .aca-dark-theme .adf-datatable-header .adf-icon mat-icon, .aca-dark-theme .adf-datatable-list .adf-datatable-cell-header mat-icon, .aca-dark-theme .adf-datatable mat-icon:not(.adf-datatable-selected), .aca-dark-theme .mat-mdc-paginator mat-icon, .aca-dark-theme .aca-page-layout-content .mat-mdc-icon-button mat-icon { color: rgba(255, 255, 255, 0.7) !important; } .aca-dark-theme .mat-mdc-card, .aca-dark-theme .aca-card { background: var(--aca-surface); border-color: var(--aca-hairline); } .aca-dark-theme .aca-page-title, .aca-dark-theme .adf-breadcrumb-item-anchor { color: var(--adf-theme-foreground-text-color-087) !important; } /* ============================================================ In-layout document view (app-file-preview-page, route /preview/:id) Opening a file renders here, inside the content area (sidebar stays), laid out like a document detail screen: header + preview + info. ============================================================ */ app-file-preview-page { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; } .aca-docview { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--aca-surface); } /* Header bar */ .aca-docview__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--aca-hairline); } .aca-docview__id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .aca-docview__titlerow { display: flex; align-items: center; gap: 12px; min-width: 0; } .aca-docview__type-icon { flex: 0 0 auto; color: var(--aca-brand); width: 28px; height: 28px; font-size: 28px; } .aca-docview__name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--adf-theme-foreground-text-color, #101828); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aca-docview__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; /* one line box for the whole row, so icons and text share a centre line */ line-height: 16px; font-size: 12px; color: var(--aca-text-secondary); } .aca-docview__bar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; } .aca-docview__bar-divider { width: 1px; height: 22px; margin: 0 6px; background: var(--aca-hairline); } /* Tab strip */ .aca-docview__tabs { flex: 0 0 auto; display: flex; gap: 28px; padding: 0 20px; border-bottom: 1px solid var(--aca-hairline); } .aca-docview__tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--adf-theme-foreground-text-color, #101828); opacity: 0.5; background: none; border: none; cursor: pointer; font-family: inherit; transition: opacity 0.15s ease; } .aca-docview__tab:hover { opacity: 0.85; } .aca-docview__tab--active { opacity: 1; color: var(--aca-brand); } .aca-docview__tab--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--aca-brand); } /* Body: preview + info */ .aca-docview__body { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: 16px; padding: 16px; background: var(--aca-surface-2); } /* The document stays on the left whichever tab is open, so the column beside it holds the tab strip and whichever panel it switches. */ .aca-docview__side { flex: 0 0 var(--aca-docview-side, 460px); width: var(--aca-docview-side, 460px); min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--aca-hairline); border-radius: var(--aca-radius-lg); background: var(--aca-surface); box-shadow: var(--aca-shadow-sm); overflow: hidden; } .aca-docview__sidepanel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 24px 30px; } /* the screens in these two panels lay themselves out for a full page, so inside this column they are told to stack — the media queries in their own files measure the window, which says nothing about the width left here */ .aca-docview__side .aca-ver, .aca-docview__side .aca-perm__main { grid-template-columns: minmax(0, 1fr); } .aca-docview__side .aca-ver__side { position: static; } .aca-docview__side .aca-ver__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } .aca-docview__side .aca-ver__panes, .aca-docview__side .aca-acl__foot { flex-wrap: wrap; } .aca-docview__side .aca-fields__th--actions { width: auto; } /* the version card needs more width than this column has, so it scrolls inside itself rather than pushing the column sideways */ .aca-docview__side .aca-ver__card { overflow-x: auto; } /* the cards sit in a narrower column, so they give back some of their padding. The rights tab widens the column for itself, so it keeps its own. */ .aca-docview__side .aca-ver__card, .aca-docview__side .aca-ver__side, .aca-docview:not(.aca-docview--wide) .aca-docview__side .aca-acl__card { padding: 16px 16px 18px; } .aca-docview:not(.aca-docview--wide) .aca-docview__side .aca-acl__td, .aca-docview:not(.aca-docview--wide) .aca-docview__side .aca-acl__th { padding-left: 10px; padding-right: 10px; } /* the full-width controls in the version details count their own padding */ .aca-docview__side .aca-ver__comparewith, .aca-docview__side .aca-ver__wide { box-sizing: border-box; max-width: 100%; } /* the tab strip belongs to the column now, and stays put while it scrolls */ .aca-docview__side .aca-docview__tabs { position: sticky; top: 0; z-index: 1; gap: 14px; padding: 0 18px; background: var(--aca-surface); } .aca-docview__side .aca-docview__tab { gap: 6px; font-size: 12.5px; white-space: nowrap; } .aca-docview__side .aca-docview__tab .mat-icon { font-size: 16px; width: 16px; height: 16px; } .aca-docview__main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--aca-hairline); border-radius: var(--aca-radius-lg); background: var(--aca-surface); box-shadow: var(--aca-shadow-sm); overflow: hidden; } @media screen and (width <= 1500px) { .aca-docview { --aca-docview-side: 400px; } } /* the rights table carries five columns and a version carries its facts two to a row; neither reads at the width the other tabs are happy with, so those two tabs borrow from the preview */ .aca-docview--wide { --aca-docview-side: 660px; } @media screen and (width <= 1500px) { .aca-docview--wide { --aca-docview-side: 540px; } } /* too narrow to stand side by side: the document goes above its details */ @media screen and (width <= 1100px) { .aca-docview__body { flex-direction: column; overflow-y: auto; } .aca-docview__main { flex: 0 0 auto; min-height: 46vh; } .aca-docview__side { flex: 1 1 auto; width: auto; } } .aca-docview__preview { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 20px; background: var(--aca-surface-2); } .aca-docview__preview adf-alfresco-viewer, .aca-docview__preview .adf-viewer, .aca-docview__preview .adf-alfresco-viewer { position: absolute !important; inset: 0; display: block; width: 100% !important; height: 100% !important; } /* Smaller text when previewing plain-text / code files (.ftl, .txt, .js, …) in the document view — ADF's `
` renders quite large. */
.aca-docview__preview .adf-txt-viewer-content {
  font-size: 12px;
  line-height: 1.5;
}

/* ADF's viewer content container grows past the (bounded) layout area, so the
   text scroll-view extended ~120px below the footer — the bottom of long files
   ended up hidden behind it. Bound the container to its parent so the scroll
   region stays inside the preview and nothing slips under the footer. */
.aca-docview__preview .adf-viewer-render-content-container {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* The PDF studio is a full workbench — it fills the preview edge to edge, so
   the padded frame drops its padding and the studio sits flush. */
.aca-docview__preview--studio {
  padding: 0;
}

.aca-docview__preview app-pdf-studio {
  position: absolute;
  inset: 0;
  display: block;
}

.aca-docview__file-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid var(--aca-hairline);
}

.aca-docview__file-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aca-docview__file-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--adf-theme-foreground-text-color, #101828);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aca-docview__file-size {
  font-size: 12px;
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.5;
}

.aca-docview__file-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
}

/* Information column */
.aca-docview__info {
  min-width: 0;
}

.aca-docview__info-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--aca-text-primary);
}
.aca-docview__info-title .mat-icon {
  font-size: 17px;
  width: 17px;
  height: 17px;
  color: var(--aca-text-muted);
}

/* who made the change, under the date it happened */
.aca-docview__by {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--aca-text-muted);
}

.aca-docview__hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--aca-text-muted);
}

.aca-docview__field {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 10px;
  padding: 7px 0;
}

.aca-docview__label {
  font-size: 13px;
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.55;
}

.aca-docview__value {
  font-size: 14px;
  color: var(--adf-theme-foreground-text-color, #101828);
  word-break: break-word;
}

.aca-docview__value--user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aca-docview__avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #14a06f;
}

.aca-docview__title-box {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aca-docview__title-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--adf-theme-foreground-text-color, #101828);
  word-break: break-word;
}

.aca-docview__section {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--aca-hairline);
}

.aca-docview__section-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.6;
}

.aca-docview__info adf-tag-node-list,
.aca-docview__info adf-node-comments {
  display: block;
}

/* Document view — Version field + editable tags */
.aca-docview__value--version {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aca-docview__version-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--aca-radius-pill);
  background: var(--aca-surface-2);
  border: 1px solid var(--aca-hairline);
  font-size: 13px;
  font-weight: 700;
  color: var(--adf-theme-foreground-text-color, #101828);
}

.aca-docview__version-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  border-radius: var(--aca-radius-pill);
  background: var(--aca-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.aca-docview__version-btn:hover {
  background: var(--aca-brand-strong);
}

.aca-docview__version-btn mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: #fff !important;
}

.aca-docview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.aca-docview__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  border-radius: var(--aca-radius-pill);
  background: var(--aca-surface-2);
  border: 1px solid var(--aca-hairline);
  font-size: 13px;
  color: var(--adf-theme-foreground-text-color, #101828);
}

.aca-docview__tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}

.aca-docview__tag-remove:hover {
  opacity: 1;
  background: var(--aca-hairline);
}

.aca-docview__tag-remove mat-icon {
  font-size: 15px;
  width: 15px;
  height: 15px;
}

.aca-docview__tags-empty {
  font-size: 13px;
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.45;
}

.aca-docview__tag-add {
  display: flex;
  align-items: center;
  gap: 4px;
}

.aca-docview__tag-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
  background: var(--aca-surface);
  color: var(--adf-theme-foreground-text-color, #101828);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

.aca-docview__tag-input:focus {
  border-color: var(--aca-brand);
}

.aca-docview__tag-input::placeholder {
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.4;
}

/* =========================================================================
   Document view — permissions (UI-19) and version history (UI-20)

   Both tabs host an ADF component that owns all the behaviour: the ACL, the
   inheritance toggle, the add-permission dialog, the version history, upload,
   restore and delete. Nothing here replaces any of that; it restyles ADF's own
   markup and adds the chrome the reference asks for around it.
   ========================================================================= */
/* ---- permissions: the rights, then what they mean ---- */
.aca-docview__sidepanel--permissions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aca-perm__main {
  min-width: 0;
}

.aca-perm__about {
  padding: 20px 22px 22px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius-lg);
  background: var(--aca-surface);
  box-shadow: var(--aca-shadow-sm);
}

.aca-perm__abouttitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--aca-text-primary);
}
.aca-perm__abouttitle .mat-icon {
  flex: none;
  font-size: 22px;
  width: 22px;
  height: 22px;
  color: var(--aca-text-secondary);
}

.aca-perm__kind {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}

.aca-perm__kindicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
}
.aca-perm__kindicon .mat-icon {
  font-size: 22px;
  width: 22px;
  height: 22px;
}
.aca-perm__kindicon--inherit {
  background: var(--aca-tone-blue-bg);
  color: var(--aca-tone-blue-fg);
}
.aca-perm__kindicon--direct {
  background: var(--aca-tone-green-bg);
  color: var(--aca-tone-green-fg);
}

.aca-perm__kindtext {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--aca-text-secondary);
}
.aca-perm__kindtext strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--aca-text-primary);
}

.aca-perm__learn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--aca-hairline);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aca-text-secondary);
  text-decoration: none;
}
.aca-perm__learn span {
  flex: 1 1 auto;
  min-width: 0;
}
.aca-perm__learn .mat-icon {
  flex: none;
  font-size: 19px;
  width: 19px;
  height: 19px;
  color: var(--aca-text-muted);
}
.aca-perm__learn:hover {
  color: var(--aca-color-primary);
}
.aca-perm__learn:hover .mat-icon {
  color: var(--aca-color-primary);
}

.aca-perm__order {
  padding: 16px 18px;
  border-radius: var(--aca-radius);
  background: var(--aca-tone-blue-bg);
}
.aca-perm__order h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--aca-text-primary);
}
.aca-perm__order h4 .mat-icon {
  flex: none;
  font-size: 19px;
  width: 19px;
  height: 19px;
  color: var(--aca-tone-blue-fg);
}
.aca-perm__order ol {
  counter-reset: aca-perm-step;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aca-perm__order li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 11px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--aca-text-secondary);
}
.aca-perm__order li:last-child {
  margin-bottom: 0;
}
.aca-perm__order li::before {
  counter-increment: aca-perm-step;
  content: counter(aca-perm-step);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--aca-tone-blue-fg);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ---- version history: the summary strip ---- */
.aca-docview__sidepanel--history {
  display: block;
}

/* Narrow screens (WCAG 1.4.10 Reflow). The document view is two fixed columns
   and a single-row header, neither of which survives a phone: the information
   column is wider than the viewport, so its right-hand edge — the version
   badge, the add-tag button — was simply cut off and unreachable, and the
   header squeezed the file name to nothing between the icon and the actions.
   Below 900px the panel stacks and the header wraps to two rows. */
@media screen and (width <= 900px) {
  .aca-docview__bar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .aca-docview__id {
    flex: 1 1 100%;
  }
  .aca-docview__name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .aca-docview__tabs {
    gap: 20px;
    overflow-x: auto;
  }
  .aca-docview__body {
    overflow-y: auto;
  }
  .aca-docview__main {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--aca-hairline);
  }
  .aca-docview__preview {
    min-height: 320px;
  }
  .aca-docview__info {
    flex: 0 0 auto;
    width: auto;
    overflow-y: visible;
  }
}
/* ============================================================
   Admin Tools pages (users / groups / audit)
   ============================================================ */
app-audit-log,
app-document-upload,
app-all-documents,
app-favorites-page,
app-trash-page,
app-document-search,
app-copy-move,
app-users-page,
app-groups-page,
app-settings,
app-document-expiry,
app-email-templates,
app-approvals,
app-my-tasks,
app-workflow-builder,
app-watermark-settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* A screen rendered inside another one is not the page: the page it sits in
   owns the height and does the scrolling, so the embedded copy grows with its
   content instead of trying to fill and clip a viewport of its own. Without
   this the settings page grew past the layout's fixed height and everything
   below the fold was unreachable — the container above it hides its overflow,
   so nothing could scroll to it. */
.aca-set__card--flush app-document-expiry,
.aca-set__card--flush app-email-templates,
.aca-set__card--flush app-metadata-fields,
.aca-set__card--flush app-users-page,
.aca-set__card--flush app-groups-page,
.aca-set__card--flush app-audit-log,
.aca-set__card--flush app-workflow-builder,
.aca-set__card--flush app-watermark-settings {
  display: block;
  height: auto;
  overflow: visible;
}

.aca-set__card--flush .aca-admin {
  height: auto;
  overflow: visible;
  scrollbar-gutter: auto;
}

.aca-admin {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--aca-app-bg);
  /* Reserve the scrollbar gutter on BOTH sides so the page stays horizontally
     symmetric — otherwise the vertical scrollbar eats ~10px on the right only,
     shifting the content left and making the left/right margins look unequal. */
  scrollbar-gutter: stable both-edges;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 24px 32px;
  box-sizing: border-box;
}

.aca-admin__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  margin-bottom: 18px;
  border-radius: var(--aca-radius-lg);
  background: var(--aca-brand-gradient);
  color: #fff;
  box-shadow: var(--aca-shadow-md);
}

.aca-admin__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.8;
}

.aca-admin__title {
  margin: 4px 0;
  font-size: 24px;
  font-weight: 800;
}

.aca-admin__sub {
  margin: 0;
  font-size: 13.5px;
  opacity: 0.85;
}

.aca-admin__add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--aca-radius-pill);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.aca-admin__add:hover {
  background: rgba(255, 255, 255, 0.15);
}

.aca-admin__add mat-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.aca-admin__card {
  background: var(--aca-surface);
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius-lg);
  box-shadow: var(--aca-shadow-sm);
  overflow: hidden;
}

.aca-admin__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--aca-hairline);
}

.aca-admin__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
}

.aca-admin__search mat-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.4;
}

.aca-admin__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
}

.aca-admin__count {
  flex: 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.55;
}

.aca-admin__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.aca-admin__table th {
  text-align: left;
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.5;
  border-bottom: 1px solid var(--aca-hairline);
}

.aca-admin__table td {
  padding: 11px 18px;
  border-bottom: 1px solid var(--aca-hairline);
  vertical-align: middle;
}

.aca-admin__table tbody tr:last-child td {
  border-bottom: none;
}

.aca-admin__table tbody tr:hover {
  background: var(--theme-hover-background-color, rgba(16, 24, 40, 0.03));
}

.aca-admin__th-actions,
.aca-admin__actions {
  text-align: right;
  white-space: nowrap;
}

.aca-admin__user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aca-admin__avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--aca-brand);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.aca-admin__avatar--group {
  background: #6b7a90;
}

.aca-admin__avatar--group mat-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.aca-admin__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  opacity: 0.85;
}

.aca-admin__nowrap {
  white-space: nowrap;
}

.aca-admin__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--aca-radius-pill);
  font-size: 12px;
  font-weight: 600;
}

/* Document-expiry status pill (management page) */
.aca-expiry-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: var(--aca-radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.aca-expiry-badge mat-icon {
  font-size: 15px;
  width: 15px;
  height: 15px;
}

.aca-expiry-badge--expired {
  background: #fde8e8;
  color: #b8082a;
}

.aca-expiry-badge--soon {
  background: #fef3d7;
  color: #8c7012;
}

.aca-expiry-badge--active {
  background: #e7f3e7;
  color: #227f21;
}

/* Set-expiry dialog */
.aca-expiry-dialog__name {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--adf-theme-foreground-text-color, #101828);
}

.aca-expiry-dialog__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-secondary-text);
}

.aca-expiry-dialog__date {
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
  color: var(--adf-theme-foreground-text-color, #101828);
}

.aca-expiry-dialog__hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--theme-secondary-text);
}

/* Email-template dialog */
.aca-tpl-dialog {
  min-width: 460px;
  max-width: 100%;
}

.aca-tpl-dialog__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-secondary-text);
}

.aca-tpl-dialog__input,
.aca-tpl-dialog__textarea {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 9px 12px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
  color: var(--adf-theme-foreground-text-color, #101828);
  resize: vertical;
}

.aca-tpl-dialog__placeholders {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--theme-secondary-text);
}

.aca-tpl-dialog__chip {
  font: inherit;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 8px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius-pill);
  background: var(--theme-grey-text-background-color, rgba(33, 33, 33, 0.05));
  color: var(--aca-brand-strong);
  cursor: pointer;
}

.aca-tpl-dialog__chip:hover {
  background: rgba(27, 122, 244, 0.1);
}

.aca-admin__badge--on {
  background: rgba(20, 160, 111, 0.14);
  color: #0f7a52;
}

.aca-admin__badge--off {
  background: rgba(16, 24, 40, 0.08);
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.75;
}

.aca-admin__danger:hover mat-icon {
  color: #d23f3f !important;
}

.aca-admin__empty,
.aca-admin__loading {
  text-align: center;
  padding: 28px;
  color: var(--aca-text-secondary);
}

.aca-admin__empty--pad {
  padding: 36px 24px;
}

/* Audit app chips */
.aca-admin__apps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.aca-admin__app-chip {
  padding: 6px 14px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.aca-admin__app-chip--active {
  background: var(--aca-brand);
  color: #fff;
  border-color: var(--aca-brand);
}

.aca-admin__app-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.aca-admin__app-off {
  font-size: 11px;
  opacity: 0.7;
}

.aca-admin__values {
  font-size: 12.5px;
  opacity: 0.85;
  word-break: break-word;
}

/* Admin dialogs (user / group) */
.aca-admin-dialog__title {
  display: flex;
  align-items: center;
  gap: 10px;
  /* clear space below the title so the first field's floating label never
     crowds it. */
  margin-bottom: 44px !important;
  padding-bottom: 0;
  font-size: 20px;
}

.aca-admin-dialog__body {
  /* override mat-dialog-content's display:block so the gap actually applies */
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  min-width: 460px;
  /* scroll the dialog when content (e.g. the group results) is tall, instead of
     squeezing inner boxes. */
  max-height: 80vh;
  overflow-y: auto;
}

/* More top padding than the global 5px rule (higher specificity wins) so the
   first field's floating label isn't clipped once the body can scroll. */
.mat-mdc-dialog-container .mat-mdc-dialog-title + .mat-mdc-dialog-content.aca-admin-dialog__body {
  padding-top: 22px !important;
}

/* Full-width fields; the reserved subscript keeps floating labels from
   overlapping the field above. */
.aca-admin-dialog__body .mat-mdc-form-field {
  width: 100%;
}

/* Thai labels have upper vowel marks (ื ่ ้) that the floating label's tight
   overflow:hidden box clips — making them look cut by the outline. Let the label
   show its full height, and back it with the dialog colour so the outline line
   never shows through. */
.aca-admin-dialog__body .mdc-floating-label,
.aca-admin-dialog__body .mat-mdc-form-field-infix .mdc-floating-label {
  overflow: visible !important;
  line-height: 1.35 !important;
}

/* Bulletproof: remove the outline's top border under the label region, and back
   the floated label with the dialog colour. Even if the notch mis-sizes, no
   border line can ever cross the label text. */
.aca-admin-dialog__body .mdc-notched-outline__notch {
  overflow: visible;
  border-top-color: transparent !important;
}

.aca-admin-dialog__body .mdc-text-field--outlined .mdc-floating-label--float-above {
  background-color: var(--aca-surface);
  padding: 0 6px;
  border-radius: 3px;
  z-index: 1;
}

.aca-admin-dialog__body .mat-mdc-form-field-subscript-wrapper {
  min-height: 2px;
}

.aca-admin-dialog__row {
  display: flex;
  gap: 16px;
}

.aca-admin-dialog__row mat-form-field {
  flex: 1 1 0;
  min-width: 0;
}

.aca-admin-dialog__full {
  width: 100%;
}

/* "เปิดใช้งานบัญชี" toggle: keep it on one line, aligned left. */
.aca-admin-dialog__body mat-slide-toggle {
  align-self: flex-start;
  margin: 2px 0 4px;
}

.aca-admin-dialog__body mat-slide-toggle .mdc-form-field {
  width: auto;
  white-space: nowrap;
}

.aca-admin-dialog__body mat-slide-toggle label {
  width: auto;
  white-space: nowrap;
  padding-left: 8px;
}

.aca-admin-dialog__error {
  margin: 4px 0 0;
  color: #d23f3f;
  font-size: 13px;
}

.aca-admin-dialog__actions {
  padding: 8px 0 4px;
}

/* Small top padding on dialog content that immediately follows a title.
   Material zeroes this with a same-specificity rule loaded later, so override
   it with !important. */
.mat-mdc-dialog-container .mat-mdc-dialog-title + .mat-mdc-dialog-content {
  padding-top: 5px !important;
  padding-bottom: 10px !important;
}

/* Admin Users: group tags in the table + group-membership dialog */
.aca-admin__grouptags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.aca-admin__grouptag {
  display: inline-block;
  max-width: 160px;
  padding: 2px 9px;
  border-radius: var(--aca-radius-pill);
  background: var(--aca-surface-2);
  border: 1px solid var(--aca-hairline);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aca-admin__grouptag--more {
  background: transparent;
  font-weight: 600;
  opacity: 0.7;
}

.aca-admin__grouptag--none {
  opacity: 0.4;
}

.aca-admin-groups__add {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.aca-admin-groups__add .mat-mdc-form-field {
  flex: 1 1 auto;
}

.aca-admin-groups__add button {
  margin-top: 6px;
  white-space: nowrap;
}

.aca-admin-groups__heading {
  margin: 4px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.55;
}

.aca-admin-groups__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aca-admin-groups__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
  background: var(--aca-surface-2);
  font-size: 14px;
}

.aca-admin-groups__chip > mat-icon {
  flex: 0 0 auto;
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: #6b7a90;
}

.aca-admin-groups__chip > span,
.aca-admin-groups__chip {
  min-width: 0;
}

.aca-admin-groups__remove {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
}

.aca-admin-groups__remove:hover {
  opacity: 1;
  background: rgba(210, 63, 63, 0.12);
  color: #d23f3f;
}

.aca-admin-groups__remove mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.aca-admin-groups__empty {
  padding: 14px;
  text-align: center;
  opacity: 0.5;
  font-size: 13px;
}

/* Inline group search results (create-user dialog) — rendered in flow, not in a
   CDK overlay, which keeps positioning simple and robust regardless of any app
   scaling. */
.aca-admin-groups__results {
  margin: 2px 0 12px;
  max-height: 320px;
  /* don't let the flex column squeeze this box below its content/max-height */
  flex: 0 0 auto;
  overflow-y: auto;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
  background: var(--aca-surface);
}

.aca-admin-groups__result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--aca-hairline);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: inherit;
  text-align: left;
}

.aca-admin-groups__result:last-child {
  border-bottom: none;
}

.aca-admin-groups__result:hover {
  background: var(--theme-hover-background-color, rgba(16, 24, 40, 0.04));
}

.aca-admin-groups__result > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aca-admin-groups__result mat-icon {
  flex: 0 0 auto;
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: #6b7a90;
}

.aca-admin-groups__result-add {
  margin-left: auto;
  color: var(--aca-brand) !important;
  opacity: 0.75;
}

.aca-admin-groups__noresult {
  padding: 14px;
  text-align: center;
  opacity: 0.5;
  font-size: 13px;
}

/* Group members dialog — member type label */
.aca-admin-members__type {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: var(--aca-radius-pill);
  background: var(--aca-surface);
  border: 1px solid var(--aca-hairline);
  opacity: 0.7;
  white-space: nowrap;
}

.aca-admin-groups__chip .aca-admin-members__type + .aca-admin-groups__remove {
  margin-left: 4px;
}

/* Audit Log — filters toolbar + export */
.aca-admin__toolbar--col {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.aca-admin__auditfilters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.aca-admin__auditfilters .aca-admin__search {
  max-width: 280px;
}

.aca-admin__datefld {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
  font-size: 13px;
  color: var(--adf-theme-foreground-text-color, #101828);
  opacity: 0.9;
}

.aca-admin__datefld input[type=date] {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  color-scheme: light dark;
}

.aca-admin__chipbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.aca-admin__chipbtn:hover {
  background: var(--theme-hover-background-color, rgba(16, 24, 40, 0.04));
}

.aca-admin__chipbtn mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.aca-admin__export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 9px 16px;
  border: none;
  border-radius: var(--aca-radius);
  background: var(--aca-brand);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.aca-admin__export:hover {
  background: var(--aca-brand-strong);
}

.aca-admin__export:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.aca-admin__export mat-icon {
  font-size: 19px;
  width: 19px;
  height: 19px;
}

/* =========================================================================
   Compact UI density — bakes in the look the old `body { zoom: 0.8 }` gave,
   but as REAL px so there's no hidden 0.8 scale to remember when building new
   pages/menus. Each value below is what the old zoom *rendered* (measured), so
   the app looks the same while new work uses true coordinates.

   Targets (rendered under zoom 0.8): table row 46, sidenav item 38, blue
   header 110, sidenav width 256, icon 19px, nav label 12.5, table cell 11,
   header cell 9.5, hero title 20, buttons 30. Everything here is scoped to ADF
   /ACA shell components, so custom pages you build are unaffected.
   ========================================================================= */
/* ---- Shell width ----

   ADF's outer `mat-sidenav` is 320px and offsets the content by that width via
   `.adf-container-full-width`'s left margin. Both are pinned to our column width
   so no gap is left between the navigation and the content.

   Below ADF's `stepOver` (600px) the navigation becomes an overlay drawer and
   ADF drops its own offset. Ours has to go with it — an `!important` margin that
   survives into the mobile layout pushes every page a column-width off-screen. */
@media screen and (width >= 600px) {
  mat-sidenav.adf-layout-container-sidenav,
  .adf-layout-container mat-sidenav.mat-drawer,
  .adf-sidenav-layout-navigation,
  .aca-sidenav {
    width: var(--aca-sidenav-width) !important;
    min-width: var(--aca-sidenav-width) !important;
    max-width: var(--aca-sidenav-width) !important;
  }
  .adf-layout-container .adf-container-full-width {
    margin-left: var(--aca-sidenav-width) !important;
  }
}
/* On a narrow viewport the drawer overlays the content, so it must not reserve
   space, and the brand block in the top bar gives its width back to the search. */
@media screen and (width < 600px) {
  .adf-layout-container .adf-container-full-width {
    margin-left: 0 !important;
  }
}
/* =========================================================================
   Collapsed navigation — the icon rail

   ADF's own `layout.toggleMenu()` sets the layout's `hideSidenav` on a desktop
   width, which closes the drawer outright: the navigation vanishes, labels and
   icons together, and the only way back is the same button on a bar that no
   longer says what it does. The header calls its own collapse instead (see
   shell-header.component.ts) and this is what that collapse looks like: the
   column narrows to the icons, every label is dropped, and each item keeps its
   `title` so the name is still one hover away.
   ========================================================================= */
body.aca-nav-rail {
  --aca-sidenav-width: 72px;
}

/* ---- items become centred icons ---- */
body.aca-nav-rail .aca-sidenav .action-button__label,
body.aca-nav-rail .aca-sidenav .aca-action-button__label,
body.aca-nav-rail .aca-sidenav .aca-theme-row__label,
body.aca-nav-rail .aca-sidenav .aca-version__label {
  display: none;
}

/* the row, the item and the button all collapse onto the same 72px column, so
   the icon lands on the rail's centre line rather than at an inherited indent */
body.aca-nav-rail .aca-sidenav .aca-sidenav__section__actions {
  padding-left: 8px;
  padding-right: 8px;
}

body.aca-nav-rail .aca-sidenav .aca-expansion-panel-item {
  display: block;
  margin: 0;
  padding: 0;
}

/* the compact-density rules below set the pill's gutter and the icon's trailing
   margin with `!important`, so the rail has to answer in kind */
body.aca-nav-rail .aca-sidenav .aca-sidenav__section .aca-action-button,
body.aca-nav-rail .aca-sidenav .aca-action-button {
  display: flex;
  justify-content: center;
  gap: 0;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

body.aca-nav-rail .aca-sidenav .aca-action-button adf-icon,
body.aca-nav-rail .aca-sidenav .aca-sidenav__section .aca-action-button mat-icon,
body.aca-nav-rail .aca-sidenav .aca-sidenav__section .aca-action-button adf-icon mat-icon {
  margin-right: 0 !important;
}

/* Material wraps the icon and the label together; with the label gone the
   wrapper still has to centre what is left */
body.aca-nav-rail .aca-sidenav .aca-action-button .mdc-button__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* the expansion chevron has nothing left to label — it is a pseudo-element on
   the group header, not Material's own indicator — and the panel body indents
   its children off the rail, so both are squared up */
body.aca-nav-rail .aca-sidenav .mat-expansion-indicator,
body.aca-nav-rail .aca-sidenav .aca-expansion-panel-header .aca-action-button::after {
  display: none;
}

body.aca-nav-rail .aca-sidenav .aca-expansion-panel-header {
  padding-left: 0;
  padding-right: 0;
}

body.aca-nav-rail .aca-sidenav .aca-expansion-panel-body {
  padding-left: 0;
}

/* ---- footer: a 72px column has no room for the storage card's numbers ---- */
body.aca-nav-rail .aca-sidenav .aca-storage {
  display: none;
}

body.aca-nav-rail .aca-sidenav .aca-theme-row {
  justify-content: center;
  gap: 0;
  margin-left: 8px;
  margin-right: 8px;
  padding: 0;
}

/* ---- Typography (text only; never the icon glyph elements) ---- */
/* File/document list text — bumped up from the original compact 11px/9.5px for
   readability (the lists looked too small). Row height (below) leaves room. */
.adf-datatable-cell .adf-datatable-cell-value,
.adf-datatable-cell-value {
  font-size: 13px !important;
}

.adf-datatable-cell-header .adf-datatable-cell-value {
  font-size: 11.5px !important;
}

.aca-sidenav .aca-sidenav__section .aca-action-button .aca-action-button__label,
.aca-sidenav .aca-sidenav__section .aca-action-button .action-button__label,
.aca-sidenav .aca-action-button__label,
.aca-sidenav .action-button__label {
  font-size: 14px !important;
}

.mat-mdc-button .mdc-button__label,
.mat-mdc-raised-button .mdc-button__label,
.mat-mdc-unelevated-button .mdc-button__label,
.mat-mdc-outlined-button .mdc-button__label,
.mat-mdc-menu-item .mdc-list-item__primary-text,
.mat-mdc-list-item .mdc-list-item__primary-text,
.mat-mdc-option .mdc-list-item__primary-text,
.mat-mdc-tab .mdc-tab__text-label {
  font-size: 12.5px !important;
}

.mat-mdc-input-element,
.mat-mdc-form-field input,
.mat-mdc-floating-label {
  font-size: 12.5px !important;
}

.mat-mdc-dialog-title {
  font-size: 16px !important;
}

.mat-mdc-dialog-content {
  font-size: 12.5px !important;
}

/* Fit all three info-drawer tabs (Properties / Comments / Permissions) in the
   narrow panel without Material's overflow pagination arrows: let the tabs share
   the width evenly, drop their min-width, and tighten padding + label size. */
adf-info-drawer .mat-mdc-tab-header .mat-mdc-tab.mdc-tab {
  min-width: 0 !important;
  flex-grow: 1 !important;
  padding: 0 6px !important;
}

adf-info-drawer .mat-mdc-tab .mdc-tab__text-label {
  font-size: 11px !important;
}

/* Keep the Permissions tab's permission-list inside the narrow drawer instead of
   overflowing past the card: contain the datatable's scroll containers, let the
   columns shrink proportionally (so the user/group name keeps the most room) and
   ellipsis-truncate cell text. Scoped to the info drawer only. */
adf-info-drawer adf-permission-list .adf-local-permission-container,
adf-info-drawer adf-permission-list .adf-datatable,
adf-info-drawer adf-permission-list .adf-datatable-permission,
adf-info-drawer adf-permission-list .adf-datatable-header,
adf-info-drawer adf-permission-list .adf-datatable-body {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

adf-info-drawer adf-permission-list .adf-datatable-row {
  width: 100% !important;
  min-width: 0 !important;
}

adf-info-drawer adf-permission-list .adf-datatable-cell,
adf-info-drawer adf-permission-list .adf-datatable-cell-header {
  min-width: 0 !important;
  overflow: hidden !important;
}

adf-info-drawer adf-permission-list .adf-datatable-cell-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

adf-info-drawer adf-permission-list .adf-datatable-cell-header .adf-datatable-cell-value {
  font-size: 11px;
}

/* Compact the permission rows: smaller user/group name + role text (default 14px)
   and a smaller avatar circle, so the content reads cleanly inside its cells. */
adf-info-drawer adf-permission-list .adf-user-name-column,
adf-info-drawer adf-permission-list .mat-mdc-select-min-line {
  font-size: 12px !important;
}

/* Smaller avatar circle. The icon's blue circle is the mat-icon's own box, and it
   was 50px wide because of 10px content-box padding — switch to border-box and drop
   the padding so the 28px actually applies. */
adf-info-drawer adf-permission-list .adf-group-icon,
adf-info-drawer adf-permission-list .adf-user-icon {
  box-sizing: border-box !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 28px !important;
}

/* Let the role dropdown use the full width of its (narrow) column so the role text
   reads inside the box instead of being clipped to a tiny strip: tighten the cell
   padding, make the role content cell + form-field fill, and shrink the form-field's
   own horizontal padding. */
adf-info-drawer adf-permission-list .adf-datatable-body .adf-datatable-cell {
  padding-left: 3px !important;
  padding-right: 3px !important;
}

adf-info-drawer adf-permission-list .adf-user-role-column {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

adf-info-drawer adf-permission-list .adf-role-selector-field {
  width: 100% !important;
  max-width: 100% !important;
}

adf-info-drawer adf-permission-list .adf-role-selector-field .mat-mdc-text-field-wrapper {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* When a permission row is selected the avatar is swapped for an SVG check icon
   (`.adf-people-select-icon`), which renders at 40px. Shrink it (and its inner svg)
   to match the 28px avatar. The extra ancestor class is needed to outrank ADF's
   own selector. */
adf-info-drawer adf-permission-list .adf-authority-icon-column .adf-people-select-icon.adf-datatable-selected,
adf-info-drawer adf-permission-list .adf-authority-icon-column .adf-people-select-icon.adf-datatable-selected svg {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}

/* The per-row delete button is a 48px icon-button that spilled ~25px past the card
   edge; shrink it to fit its narrow column. */
adf-info-drawer adf-permission-list .adf-datatable-body .mat-mdc-icon-button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
}

adf-info-drawer adf-permission-list .adf-datatable-body .mat-mdc-icon-button .mat-mdc-button-touch-target {
  width: 30px !important;
  height: 30px !important;
}

/* Narrow the "Users and Groups" column so the role + delete columns get room
   (this is what makes the full role text fit and keeps the delete icon in frame).
   Cap both the body cell and its header so the columns stay aligned. */
adf-info-drawer adf-permission-list .adf-datatable-cell:has(.adf-user-name-column) {
  flex: 0 1 120px !important;
  max-width: 120px !important;
}

adf-info-drawer adf-permission-list .adf-datatable-header .adf-datatable-cell-header:nth-child(2) {
  flex: 0 1 120px !important;
  max-width: 120px !important;
}

/* Larger text in the right-panel Properties / Metadata form (info drawer).
   Its field labels and values render at the compact 12.5px; bump them for
   readability. Scoped to `adf-info-drawer` so other forms (search, dialogs,
   the full document view) are unaffected. */
adf-info-drawer .adf-property-label,
adf-info-drawer .adf-property-value,
adf-info-drawer .adf-property-value input,
adf-info-drawer .adf-property .mat-mdc-input-element {
  font-size: 14px !important;
}

/* ---- Layout heights / spacing ---- */
.adf-datatable-body .adf-datatable-row,
.adf-datatable-list .adf-datatable-row {
  min-height: 46px !important;
}

.adf-datatable-body .adf-datatable-row .adf-datatable-cell {
  height: 46px !important;
}

/* The header row is an `adf-datatable-row` like any other, so the 56px body-row
   minimum further down applies to it too. Pinning the cells to 36px did not
   undo that — it only parked the labels in the top 36px of a 56px row, hard
   against the top border with the rest of the row empty beneath them. The row
   gets a height of its own instead (48px, the height of the filter buttons it
   carries, so nothing is clipped), and the cells fill it so their labels
   centre. */
.adf-datatable-list .adf-datatable-header .adf-datatable-row,
adf-document-list .adf-datatable-list .adf-datatable-header .adf-datatable-row {
  min-height: 48px !important;
  height: 48px !important;
}

.adf-datatable-header .adf-datatable-cell-header {
  min-height: 0 !important;
  height: 100% !important;
}

/* A `mat-icon` shrunk below 24px keeps its 24px `` child, and the icon's
   own `overflow: hidden` then crops it: the header's filter funnels were losing
   their bottom-right eighth, which read as the glyph being cut by the row's
   bottom border. Scale the drawing with the box it was given. */
.adf-datatable-header .mat-icon svg {
  width: 100%;
  height: 100%;
}

.aca-sidenav .aca-sidenav__section .aca-expansion-panel-header,
.aca-sidenav .aca-sidenav__section .aca-expansion-panel-header .aca-action-button,
.aca-sidenav .aca-sidenav__section .aca-action-button {
  height: 46px !important;
  line-height: 46px !important;
}

.adf-pagination {
  min-height: 40px !important;
}

/* ---- Icons (glyph + box) across the shell ---- */
.aca-sidenav .aca-action-button mat-icon,
.aca-sidenav .aca-action-button adf-icon mat-icon,
.adf-datatable-cell mat-icon,
.adf-toolbar mat-icon,
.aca-content-header mat-icon,
.adf-breadcrumb mat-icon {
  font-size: 19px !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
}

/* ---- Toolbar / action-bar buttons (36 → 30) ---- */
.adf-toolbar .mat-mdc-button,
.adf-toolbar .mat-mdc-raised-button,
.adf-toolbar .mat-mdc-outlined-button,
.aca-content-header .mat-mdc-button,
.aca-content-header .mat-mdc-raised-button,
.aca-content-header .mat-mdc-outlined-button {
  height: 30px !important;
  line-height: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================================
   10. Document list — modern row cards and visible inline actions
   ========================================================================= */
.adf-document-list,
.adf-datatable-list {
  background: transparent;
}

.adf-datatable-list .adf-datatable-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0;
}

.adf-datatable-list .adf-datatable-row {
  min-height: 58px !important;
  background: var(--aca-surface) !important;
  border: 1px solid var(--aca-hairline) !important;
  border-radius: var(--aca-radius) !important;
  box-shadow: var(--aca-shadow-sm) !important;
  transition: box-shadow var(--aca-transition), transform var(--aca-transition), border-color var(--aca-transition);
}

.adf-datatable-list .adf-datatable-row:hover {
  transform: translateY(-1px);
  border-color: var(--aca-color-primary) !important;
  box-shadow: var(--aca-shadow-md) !important;
}

.adf-datatable-list .adf-datatable-row.adf-is-selected {
  border-color: var(--aca-color-primary) !important;
  box-shadow: inset 3px 0 0 0 var(--aca-brand), var(--aca-shadow-md) !important;
}

.adf-datatable-list .adf-datatable-row .adf-datatable-cell {
  height: 58px !important;
  padding: 0 12px;
  border-bottom: none !important;
}

.adf-datatable-list .adf-datatable-row .adf-datatable-cell:first-child {
  padding-left: 18px;
}

.adf-datatable-list .adf-datatable-row .adf-datatable-cell:last-child {
  padding-right: 18px;
}

.adf-datatable-list .adf-datatable-cell .adf-datatable-cell-value {
  font-size: 13px;
  color: var(--aca-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adf-datatable-list .adf-datatable-cell .adf-datatable-cell-value.adf-text-muted,
.adf-datatable-list .adf-datatable-cell .adf-datatable-cell-value .adf-text-muted,
.adf-datatable-list .adf-datatable-cell .adf-datatable-cell-value .adf-cell-secondary {
  color: var(--aca-text-secondary);
  font-size: 12px;
}

.adf-datatable-list .adf-datatable-cell .adf-datatable-cell-value .adf-datatable-link {
  color: var(--aca-brand-strong);
  font-weight: 600;
}

/* Keep row actions visible at all times, not just on hover */
.adf-datatable-list .adf-datatable-hide-actions-without-hover {
  opacity: 1 !important;
}

.adf-datatable-list .adf-actions-column {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.adf-datatable-list .adf-actions-column .mat-mdc-icon-button {
  color: var(--aca-text-muted);
}

.adf-datatable-list .adf-actions-column .mat-mdc-icon-button:hover {
  color: var(--aca-color-primary);
  background: var(--aca-surface-2);
}

/* File thumbnail / icon sits in a 40px card for visual parity */
.adf-datatable-list .adf-datatable-cell--image .adf-cell-value,
.adf-datatable-list .adf-datatable-cell--image .adf-datatable-cell-value {
  display: flex;
  align-items: center;
}

.adf-datatable-list .adf-datatable-cell--image img,
.adf-datatable-list .adf-datatable-cell--image .adf-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--aca-radius);
  object-fit: contain;
}

.adf-datatable-list .adf-datatable-cell--image .adf-icon mat-icon {
  font-size: 40px;
  width: 40px;
  height: 40px;
  color: var(--aca-color-primary);
}

/* Starred/favorite column */
.adf-datatable-list .adf-favorite-action .mat-mdc-icon-button,
.adf-datatable-list .adf-datatable-cell .mat-icon.star {
  color: var(--aca-brand);
}

.adf-datatable-list .adf-favorite-action .mat-mdc-icon-button:hover {
  color: var(--aca-brand-strong);
}

/* Pagination as a floating card at the bottom */
.adf-datatable-list + .adf-pagination,
.adf-document-list + .adf-pagination,
.adf-documentlist-pagination {
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--aca-surface);
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
  box-shadow: var(--aca-shadow-sm);
}

/* Gallery / card view (thumbnails) */
.adf-datatable-gallery-thumbnails .adf-datatable-list .adf-datatable-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.adf-datatable-gallery-thumbnails .adf-datatable-list .adf-datatable-row {
  flex-direction: column;
  height: auto;
  min-height: 220px;
  padding: 18px;
  gap: 10px;
}

.adf-datatable-gallery-thumbnails .adf-datatable-list .adf-datatable-row .adf-datatable-cell {
  height: auto !important;
  padding: 0;
  justify-content: center;
}

.adf-datatable-gallery-thumbnails .adf-datatable-list .adf-datatable-cell--image img,
.adf-datatable-gallery-thumbnails .adf-datatable-list .adf-datatable-cell--image .adf-icon {
  width: 64px;
  height: 64px;
}

.adf-datatable-gallery-thumbnails .adf-datatable-list .adf-datatable-cell--image .adf-icon mat-icon {
  font-size: 64px;
  width: 64px;
  height: 64px;
}

.adf-datatable-gallery-thumbnails .adf-datatable-list .adf-datatable-cell .adf-datatable-cell-value {
  text-align: center;
  white-space: normal;
}

/* =========================================================================
   14. Reference shell alignment (UI-01 … UI-20)

   The mockups share one shell: a full-width top bar carrying the brand, the
   nav toggle, the global search pill and the header actions; below it a 300px
   navigation column with 46px pill items and a bordered profile card pinned to
   the bottom. Everything here aligns the existing ADF/ACA shell with that
   reference instead of introducing a second shell.
   ========================================================================= */
/* The brand now lives in the top bar (`.aca-shell-header__brand`), so the
   sidenav's own logo row would repeat it. */
.aca-sidenav .aca-sidenav-header,
.app-sidenav-header {
  display: none !important;
}

/* Nav items: 46px pill, 16px gutter, brand accent bar when active. */
.aca-sidenav .aca-sidenav__section .aca-action-button {
  position: relative;
  margin: 0 16px !important;
  width: calc(100% - 32px) !important;
  padding: 0 20px 0 15px !important;
  border-radius: var(--aca-radius) !important;
}

/* ADF's  wrapper is a 24px flex box. Sizing the  inside it
   to 26px without sizing the wrapper leaves a flex item wider than its
   container, so it is shrunk and then clipped by Material's own
   `overflow: hidden` — which is what sliced the cloud off the first menu item.
   The wrapper is sized to match and neither box is allowed to shrink. */
.aca-sidenav .aca-sidenav__section .aca-action-button adf-icon {
  flex: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-right: 24px;
  overflow: visible;
}

.aca-sidenav .aca-sidenav__section .aca-action-button mat-icon,
.aca-sidenav .aca-sidenav__section .aca-action-button adf-icon mat-icon {
  flex: none;
  overflow: visible !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  /* The gap to the label belongs on the  wrapper. Put it here and the
     icon becomes a 40px-wide flex item centred in a 26px box, which pushes it
     7px outside the wrapper — straight into the clip of Material's
     `.mdc-button__label` — and the glyph loses its left edge. */
  margin-right: 0;
  color: var(--aca-text-secondary);
}

.aca-sidenav .aca-sidenav__section .aca-action-button__label,
.aca-sidenav .aca-sidenav__section .action-button__label {
  font-weight: 500;
  color: var(--theme-sidenav-text-color);
}

.aca-sidenav .aca-sidenav__section .aca-action-button--active {
  background: var(--aca-color-primary-soft) !important;
  border-radius: var(--aca-radius) !important;
}

.aca-sidenav .aca-sidenav__section .aca-action-button--active .aca-action-button__label,
.aca-sidenav .aca-sidenav__section .aca-action-button--active .action-button__label {
  color: var(--aca-color-primary);
  font-weight: 600;
}

/* "จัดการระบบ" is an expandable group, so Material dresses its row as a panel
   header — a lighter grey, a size of its own — and it read as disabled next to
   the items above it. It is a navigation row like any other. */
.aca-sidenav .aca-sidenav__section .aca-expansion-panel-header .aca-action-button {
  height: 46px !important;
  line-height: 46px;
  /* A leaf item's own 16px margin is what holds it off the drawer's edge. The
     header's button sits inside a wrapper that already provides that gutter, so
     the two stacked and the row started 16px further in than everything above
     it — icon, label and pill all out of line. The wrapper's gutter is enough.
     `!important` because the rule that sets that margin carries it too. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* ACA paints every `.aca-expansion-panel-item` label in the lighter colour it
   uses for submenu children, and the group's own header row is wrapped in one
   too — hence `.aca-expansion-panel-item` here, to answer that rule rather than
   tie. The children below it keep the lighter colour, as they should. */
.aca-sidenav .aca-sidenav__section .aca-expansion-panel-header .aca-expansion-panel-item .aca-action-button__label,
.aca-sidenav .aca-sidenav__section .aca-expansion-panel-header .aca-expansion-panel-item .action-button__label {
  font-size: 14px !important;
  font-weight: 500;
  color: var(--theme-sidenav-text-color);
}

/* the version/changelog row is reachable from the header overflow menu */
.aca-sidenav .aca-version {
  display: none !important;
}

/* =========================================================================
   คลังเอกสาร (repository) — the ADF file list, dressed like เอกสารทั้งหมด

   Everything on that screen is ADF's: the context menu, create and upload, the
   column chooser, sorting, selection, drag-and-drop upload and pagination. None
   of it is reimplemented here — this only restyles the markup ADF renders, the
   same way the permissions and version tabs were handled.

   Scoped to the route rather than to `aca-files`, because ACA shares that one
   component across several screens this application does not intend to change.
   The route is published on  by ShellHeaderComponent.
   ========================================================================= */
/* The date column renders a full Thai date ("28 ส.ค. 2569 16:14"). ADF's preset
   sizes it for a relative time, and its `adf-no-grow-cell` pins the column at
   100px — narrow enough to cut the year off. That class is dropped from the
   column in app.custom.extensions.json and the sizing is set here instead, so
   the column has room wherever it appears, not only on คลังเอกสาร. */
.adf-datatable-cell.aca-date-cell,
.adf-datatable-cell-header.aca-date-cell {
  flex: 0 0 172px !important;
  min-width: 172px !important;
}

/* คลังเอกสาร and เอกสารล่าสุด share this treatment: both are ADF file lists, and
   a user moving between them should not feel they have changed product. The
   repository-only parts (the Create / Upload toolbar move, the breadcrumb) are
   guarded inside by the classes only that screen renders. */
body[data-aca-route^="/repository"],
body[data-aca-route^="/recent-files"] {
  /* ---- header ----
     The page title is now the  above the list, so this row is
     the breadcrumb path plus the Create / Upload toolbar, and the breadcrumb
     reads as a path rather than as a second heading. */
  /* Create and Upload move into the list toolbar, so this row is the path. */
  /* The page title is the  above the list, so the breadcrumb is
     just the path. Section 10 promotes the first crumb to a 22px/700 heading on
     its own line (with !important), so these have to mirror that selector —
     among !important rules specificity still decides, and a shorter selector
     would lose however many !importants it carried. */
  /* the chevron is needed again now that the path is one line */
  /* ---- spacing: close the gap the stacked paddings left above the table ---- */
  /* the layout already indents; .aca-repo supplies the page gutter */
  /* ---- the list, as a card ----
     The card is the content block, so the toolbar row sits inside it with the
     table — the same shape เอกสารทั้งหมด has. */
  /* ---- header row ---- */
  /* ---- rows ----

     Section 10 turns every ADF row into a floating card, with `!important`
     throughout. เอกสารทั้งหมด uses flat rows separated by a hairline, so on this
     screen the card treatment is unwound in kind. */
  /* body rows only: the header is an `adf-datatable-row` too, and letting it
     take the body's height and separators is what pushed its labels out of
     line with the row they sit in. */
  /* the file-type icon, sized and boxed like the one on เอกสารทั้งหมด */
  /* ---- pagination ---- */
  /* ---- header cells: ADF's own sort links and filter funnels stay functional,
         but read as the quiet header row on เอกสารทั้งหมด rather than as links ---- */
  /* ---- pagination row ---- */
  /* ---- selection checkboxes stay visible instead of appearing on hover ----
     ADF hides them with `.adf-datatable-hover-only { visibility: hidden }`;
     the checkbox itself is unchanged, so selection behaves as it always did. */
  /* ---- the column chooser now lives in the list toolbar ----
     Its own button is kept in the DOM and still owns the panel — the toolbar
     button forwards a click to it — but is taken out of the header row so the
     control is not offered twice. */
  /* ---- header filters: ADF's own funnels, made legible ---- */
  /* ---- card layout ----
     A layout change only: the rows stay ADF's own `adf-datatable-row` elements,
     so the context menu, selection and double-click navigation keep working and
     only the box they are drawn in changes. ADF 8.5 has no display mode of its
     own, and rendering the cards ourselves would have cost the right-click
     actions, since the context-menu directive resolves its target from data
     table rows. ADF writes inline widths onto cells for column resizing, which
     is why these carry !important. */
  /* ---- the Create / Upload toolbar, once moved into the list toolbar ----
     Material's toolbar is 56px tall by default, which would make the whole row
     taller than the controls sitting in it. */
  /* ---- toolbar buttons: the create/upload pair reads as our primary pair ---- */
}
body[data-aca-route^="/repository"] .aca-page-layout-header,
body[data-aca-route^="/recent-files"] .aca-page-layout-header {
  padding: 0 0 12px;
  border-bottom: 0;
  background: transparent;
}
body[data-aca-route^="/repository"] .aca-header-container,
body[data-aca-route^="/recent-files"] .aca-header-container {
  align-items: center;
  gap: 12px;
}
body[data-aca-route^="/repository"] .aca-page-layout-header .adf-breadcrumb-item:first-child,
body[data-aca-route^="/recent-files"] .aca-page-layout-header .adf-breadcrumb-item:first-child {
  flex: 0 1 auto;
  margin-bottom: 0;
}
body[data-aca-route^="/repository"] .aca-page-layout-header .adf-breadcrumb-item:first-child .adf-breadcrumb-item-anchor,
body[data-aca-route^="/repository"] .aca-page-layout-header .adf-breadcrumb-item:first-child .adf-breadcrumb-item-current,
body[data-aca-route^="/recent-files"] .aca-page-layout-header .adf-breadcrumb-item:first-child .adf-breadcrumb-item-anchor,
body[data-aca-route^="/recent-files"] .aca-page-layout-header .adf-breadcrumb-item:first-child .adf-breadcrumb-item-current {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}
body[data-aca-route^="/repository"] .aca-page-layout-header .adf-breadcrumb-item:not(:first-child) .adf-breadcrumb-item-anchor,
body[data-aca-route^="/repository"] .aca-page-layout-header .adf-breadcrumb-item:not(:first-child) .adf-breadcrumb-item-current,
body[data-aca-route^="/recent-files"] .aca-page-layout-header .adf-breadcrumb-item:not(:first-child) .adf-breadcrumb-item-anchor,
body[data-aca-route^="/recent-files"] .aca-page-layout-header .adf-breadcrumb-item:not(:first-child) .adf-breadcrumb-item-current {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--aca-text-secondary);
}
body[data-aca-route^="/repository"] .aca-page-layout-header .adf-breadcrumb-item:first-child .adf-breadcrumb-item-chevron,
body[data-aca-route^="/recent-files"] .aca-page-layout-header .adf-breadcrumb-item:first-child .adf-breadcrumb-item-chevron {
  display: inline-flex !important;
}
body[data-aca-route^="/repository"] .aca-page-layout-content,
body[data-aca-route^="/recent-files"] .aca-page-layout-content {
  padding-top: 0;
}
body[data-aca-route^="/repository"] .aca-page-layout,
body[data-aca-route^="/repository"] .aca-page-layout-content,
body[data-aca-route^="/recent-files"] .aca-page-layout,
body[data-aca-route^="/recent-files"] .aca-page-layout-content {
  padding-left: 0;
  padding-right: 0;
}
body[data-aca-route^="/repository"] .aca-main-content,
body[data-aca-route^="/recent-files"] .aca-main-content {
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius-lg);
  background: var(--aca-surface);
  box-shadow: var(--aca-shadow-sm);
  overflow: hidden;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-list,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-list {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header {
  position: relative;
  background: var(--aca-surface-2);
  border-bottom: 1px solid var(--aca-hairline);
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-datatable-cell-header-content,
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-datatable-cell-value,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-datatable-cell-header-content,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-datatable-cell-value {
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--aca-text-secondary);
  text-transform: none;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-list .adf-datatable-body,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-list .adf-datatable-body {
  gap: 0;
  padding: 0;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-list .adf-datatable-body .adf-datatable-row,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-list .adf-datatable-body .adf-datatable-row {
  min-height: 56px !important;
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid var(--aca-hairline) !important;
  border-radius: 0 !important;
  background: var(--aca-surface) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color var(--aca-transition);
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-list .adf-datatable-body .adf-datatable-row:last-child,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-list .adf-datatable-body .adf-datatable-row:last-child {
  border-bottom: 0 !important;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-list .adf-datatable-body .adf-datatable-row:hover,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-list .adf-datatable-body .adf-datatable-row:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--aca-hairline) !important;
  background: var(--aca-surface-2) !important;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-list .adf-datatable-body .adf-datatable-row.adf-is-selected,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-list .adf-datatable-body .adf-datatable-row.adf-is-selected {
  border-color: var(--aca-hairline) !important;
  box-shadow: inset 3px 0 0 0 var(--aca-color-primary) !important;
  background: var(--aca-color-primary-soft) !important;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-body .adf-datatable-cell-value,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-body .adf-datatable-cell-value {
  font-size: 12.5px;
  color: var(--aca-text-primary);
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-cell--image img,
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-cell--image .adf-datatable-cell-value img,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-cell--image img,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-cell--image .adf-datatable-cell-value img {
  width: 30px;
  height: 30px;
}
body[data-aca-route^="/repository"] adf-pagination,
body[data-aca-route^="/recent-files"] adf-pagination {
  border-top: 1px solid var(--aca-hairline);
  background: var(--aca-surface);
}
body[data-aca-route^="/repository"] adf-pagination .adf-pagination__block,
body[data-aca-route^="/repository"] adf-pagination .adf-pagination__range,
body[data-aca-route^="/repository"] adf-pagination .adf-pagination__max-items,
body[data-aca-route^="/recent-files"] adf-pagination .adf-pagination__block,
body[data-aca-route^="/recent-files"] adf-pagination .adf-pagination__range,
body[data-aca-route^="/recent-files"] adf-pagination .adf-pagination__max-items {
  font-size: 12.5px;
  color: var(--aca-text-secondary);
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-datatable-cell-header .adf-datatable-cell-value,
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-sorting-icon,
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-datatable-cell-header span,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-datatable-cell-header .adf-datatable-cell-value,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-sorting-icon,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-datatable-cell-header span {
  color: var(--aca-text-secondary) !important;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-filter-button .mat-icon,
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-datatable-cell-header button .mat-icon,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-filter-button .mat-icon,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-datatable-cell-header button .mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--aca-text-muted);
}
body[data-aca-route^="/repository"] adf-pagination .adf-pagination__block,
body[data-aca-route^="/recent-files"] adf-pagination .adf-pagination__block {
  min-height: 48px;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-body .adf-datatable-hover-only,
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-datatable-hover-only,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-body .adf-datatable-hover-only,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-datatable-hover-only {
  visibility: visible !important;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header [data-automation-id=adf-datatable-main-menu-button],
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header [data-automation-id=adf-datatable-main-menu-button] {
  position: absolute;
  right: 8px;
  opacity: 0 !important;
  pointer-events: none;
}
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-filter-button,
body[data-aca-route^="/repository"] adf-document-list .adf-datatable-header .adf-datatable-cell-header button,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-filter-button,
body[data-aca-route^="/recent-files"] adf-document-list .adf-datatable-header .adf-datatable-cell-header button {
  opacity: 1;
  visibility: visible;
}
body[data-aca-route^="/repository"] .aca-repo--grid,
body[data-aca-route^="/recent-files"] .aca-repo--grid {
  /* the table scrolls sideways in row mode; cards wrap instead */
  /* one line per field inside the card */
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-header,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-header {
  display: none !important;
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-list,
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body-container,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-list,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body-container {
  overflow-x: hidden !important;
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body adf-datatable-row.adf-datatable-row,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body adf-datatable-row.adf-datatable-row {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  /* a fixed card box: the cells stack, and whatever does not fit is
     clipped rather than spilling over the card below it */
  height: 196px !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 14px;
  margin: 0 !important;
  border: 1px solid var(--aca-hairline) !important;
  border-bottom: 1px solid var(--aca-hairline) !important;
  border-radius: var(--aca-radius-lg) !important;
  background: var(--aca-surface);
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body adf-datatable-row.adf-datatable-row:hover,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body adf-datatable-row.adf-datatable-row:hover {
  background: var(--aca-surface);
  box-shadow: var(--aca-shadow-sm);
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: 22px;
  flex: none !important;
  justify-content: flex-start;
  padding: 0 !important;
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell--image,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell--image {
  margin-bottom: 6px;
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell--image,
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell--text:first-of-type,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell--image,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell--text:first-of-type {
  max-height: none;
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell--text .adf-datatable-cell-value,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-cell--text .adf-datatable-cell-value {
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-aca-route^="/repository"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-checkbox,
body[data-aca-route^="/recent-files"] .aca-repo--grid adf-document-list .adf-datatable-body .adf-datatable-checkbox {
  position: absolute;
  top: 10px;
  right: 10px;
}
body[data-aca-route^="/repository"] .aca-repo__listbarleft aca-toolbar,
body[data-aca-route^="/repository"] .aca-repo__listbarleft mat-toolbar,
body[data-aca-route^="/repository"] .aca-repo__listbarleft .adf-toolbar .mat-toolbar,
body[data-aca-route^="/repository"] .aca-repo__listbarleft .adf-toolbar-title,
body[data-aca-route^="/recent-files"] .aca-repo__listbarleft aca-toolbar,
body[data-aca-route^="/recent-files"] .aca-repo__listbarleft mat-toolbar,
body[data-aca-route^="/recent-files"] .aca-repo__listbarleft .adf-toolbar .mat-toolbar,
body[data-aca-route^="/recent-files"] .aca-repo__listbarleft .adf-toolbar-title {
  min-height: 36px !important;
  height: 36px;
  padding: 0;
  background: transparent;
}
body[data-aca-route^="/repository"] aca-toolbar .adf-toolbar-title,
body[data-aca-route^="/repository"] aca-toolbar .mat-mdc-button-base,
body[data-aca-route^="/recent-files"] aca-toolbar .adf-toolbar-title,
body[data-aca-route^="/recent-files"] aca-toolbar .mat-mdc-button-base {
  font-size: 12.5px;
  font-weight: 600;
}

/* ── the upload progress dialog ───────────────────────────────────────────────
   ADF gives this panel no background of its own, so whatever sits at the foot
   of the sidebar — the storage card — reads straight through it. It is given a
   surface here, and the same card treatment as the rest of the application. */
.adf-upload-dialog {
  /* clear of the navigation, so it never lands on the storage card below it */
  left: calc(var(--aca-sidenav-width) + 16px) !important;
  bottom: 16px !important;
  width: min(420px, 100vw - var(--aca-sidenav-width) - 32px) !important;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius-lg);
  background: var(--aca-surface) !important;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18) !important;
  overflow: hidden;
  font-family: var(--aca-font-family);
}

.adf-upload-dialog__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--aca-hairline);
  background: var(--aca-surface-2);
}

.adf-upload-dialog__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--aca-text-primary);
}

.adf-upload-dialog__header-button .mat-icon {
  color: var(--aca-text-secondary);
}

.adf-upload-dialog__content {
  max-height: 260px;
  overflow-y: auto;
  background: var(--aca-surface);
}

.adf-upload-dialog .adf-file-uploading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--aca-hairline);
}

.adf-upload-dialog .adf-file-uploading-row:last-child {
  border-bottom: 0;
}

.adf-upload-dialog .adf-file-uploading-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--aca-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adf-upload-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--aca-hairline);
  background: var(--aca-surface-2);
}

/* the "stop uploading?" confirmation shares the panel, so it needs the surface too */
.adf-upload-dialog__confirmation {
  padding: 14px 16px;
  background: var(--aca-surface);
}

.adf-upload-dialog__confirmation--title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--aca-text-primary);
}

.adf-upload-dialog__confirmation--text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--aca-text-secondary);
}

/* on a phone the navigation is a drawer over the content, so there is no rail
   to clear and the dialog takes the width it can get */
@media screen and (width <= 900px) {
  .adf-upload-dialog {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }
}
/* ── the document view, laid out as the reference draws it ───────────────────
   A breadcrumb trail and labelled actions in the header, the document on its
   own sheet at the left, and the panel beside it given room to breathe: the
   rows of the details tab are wide apart, and each section is separated rather
   than stacked flush against the next. */
.aca-docview__crumb-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--aca-font-family);
  font-size: 12px;
  line-height: 16px;
  color: var(--aca-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.aca-docview__crumb-link:hover {
  color: var(--aca-color-primary);
  text-decoration: underline;
}

/* Material sizes every .mat-icon at 24px; a class of its own is the same
   weight and loses on order, so the trail's icons are matched through their
   container to size them down to the text they sit in. */
.aca-docview__crumb .mat-icon {
  flex: none;
  align-self: center;
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  color: var(--aca-text-muted);
}

.aca-docview__crumb-here {
  display: inline-block;
  line-height: 16px;
  color: var(--aca-text-primary);
  font-weight: 600;
}

/* every item in the trail is one 16px box, so nothing rides above the rest */
.aca-docview__crumb > * {
  height: 16px;
  align-self: center;
}

/* the labelled actions in the header */
.aca-docview__act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--aca-hairline);
  border-radius: var(--aca-radius);
  background: var(--aca-surface);
  font-family: var(--aca-font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aca-text-primary);
  white-space: nowrap;
  cursor: pointer;
}

.aca-docview__act .mat-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: var(--aca-text-secondary);
}

.aca-docview__act:hover:not(:disabled) {
  border-color: var(--aca-color-primary);
  background: var(--aca-color-primary-soft);
}

.aca-docview__act:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- the details tab ---- */
.aca-docview__filecard {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--aca-hairline);
}

.aca-docview__filetile {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--aca-color-primary-soft);
  color: var(--aca-color-primary);
}

.aca-docview__filetile .mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.aca-docview__filetext {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.aca-docview__filename {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--aca-text-primary);
  overflow-wrap: anywhere;
}

.aca-docview__filesub {
  font-size: 12px;
  color: var(--aca-text-secondary);
}

.aca-docview__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--aca-color-primary);
  border-radius: var(--aca-radius);
  background: var(--aca-color-primary);
  color: var(--aca-on-primary);
  font-family: var(--aca-font-family);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.aca-docview__primary .mat-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.aca-docview__primary:hover {
  background: var(--aca-color-primary-hover);
}

/* one section per idea, kept apart from the next */
.aca-docview__block {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--aca-hairline);
}

.aca-docview__block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.aca-docview__blocktitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--aca-text-primary);
}

.aca-docview__blocktitle .mat-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: var(--aca-text-muted);
}

/* label on the left, value on the right, with room between the rows */
.aca-docview__rows {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 16px 18px;
  margin: 0;
  align-items: baseline;
}

.aca-docview__rows dt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 12.5px;
  color: var(--aca-text-secondary);
  white-space: nowrap;
}

.aca-docview__rows dt .mat-icon {
  flex: none;
  font-size: 17px;
  width: 17px;
  height: 17px;
  color: var(--aca-text-muted);
}

.aca-docview__rows dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: var(--aca-text-primary);
  overflow-wrap: anywhere;
}

.aca-docview__rows dd.aca-docview__who {
  gap: 9px;
}

.aca-docview__link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--aca-font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aca-color-primary);
  text-align: left;
  cursor: pointer;
}

.aca-docview__link:hover {
  text-decoration: underline;
}

.aca-docview__tab .mat-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/*# sourceMappingURL=styles.css.map*/