@vitrosoftware/common-ui-ts 1.1.24 → 1.1.27

package/css/std/controls/pdf-viewer/pdf-viewer.css

@@ -17,6 +17,10 @@ html[dir='ltr'] select, html[dir='ltr'] span, html[dir='ltr'] div, html[dir='ltr
     font-family: 'InterRegular' !important;
 }
 
+#mainContainer {
+    background: #F7F9FC;
+}
+
 #viewerContainer {
     margin-right: 4px;
 }
@@ -32,21 +36,22 @@ html[dir='ltr'] select, html[dir='ltr'] span, html[dir='ltr'] div, html[dir='ltr
 }
 
 #viewerContainer::-webkit-scrollbar-thumb {
-    background: #BDBDBD;
+    background: #E4E6EC;
     border-radius: 4px;
 }
 
 #viewerContainer::-webkit-scrollbar-thumb:hover {
-    background: #828282;
+    background: #E4E6EC;
 }
 
 #loadingBar .progress {
-    background-color: #ff5b2d;
+    background-color: #3274E0;
 }
 
 #loadingBar {
-    border-bottom: 1px solid #e0e0e0;
-    background: #F5F6FA;
+    border-bottom: 1px solid #E4E6EC;
+    background: #FFF;
+    width: 100%;
 }
 
 #toolbarContainer, .findbar, .secondaryToolbar, .editorParamsToolbar {
@@ -60,8 +65,8 @@ html[dir='ltr'] select, html[dir='ltr'] span, html[dir='ltr'] div, html[dir='ltr
 }
 
 #toolbarContainer, .findbar, .secondaryToolbar, .editorParamsToolbar {
-    box-shadow: none; 
-    border-bottom: 1px solid #e0e0e0;
+    box-shadow: none;
+    border-bottom: 1px solid #E4E6EC;
 }
 
 #sidebarContainer {
@@ -69,35 +74,72 @@ html[dir='ltr'] select, html[dir='ltr'] span, html[dir='ltr'] div, html[dir='ltr
 }
 
 #sidebarContent {
-    background: #E0E0E0;
+    background: #E4E6EC;
     box-shadow: none;
-    border-right: 1px solid #e0e0e0;
+    border-right: 1px solid #E4E6EC;
 }
 
 input#pageNumber {
-    border-radius: 8px;
-    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    margin: 0;
+    margin-top: 1px;
+    border: 1px solid #C0CAD5;
 }
 
 .horizontalToolbarSeparator {
-    background: #e0e0e0;
+    background: #E4E6EC;
+    margin: 0;
 }
 
-.toolbarButton.toggled, .splitToolbarButton.toggled > .toolbarButton.toggled, .secondaryToolbarButton.toggled {
-    background: #BDBDBD;
-    color: #222d44;
+.secondaryToolbarButton {
+    font-size: 14px !important;
+    height: 37px;
+    padding: 0;
+    padding-left: 44px !important;
+    padding-right: 8px;
+}
+
+.secondaryToolbarButton > span {
+    padding: 0 !important;
+}
+
+.secondaryToolbarButton:hover,
+.secondaryToolbarButton:focus-visible {
+    background: #F3F8FF;
+    color: #222D44;
+}
+
+.toolbarButton.toggled,
+.splitToolbarButton.toggled > .toolbarButton.toggled,
+.secondaryToolbarButton.toggled {
+    background-color: #DCEEFF !important;
 }
 
 .toolbarButton.toggled::before, .secondaryToolbarButton.toggled::before {
     background: #4F4F4F;
 }
 
-.toolbarButton::before, .secondaryToolbarButton::before, .dropdownToolbarButton::after, .treeItemToggler::before {
-    background: #4F4F4F;
+.toolbarButton::before,
+.secondaryToolbarButton::before,
+.dropdownToolbarButton::after,
+.treeItemToggler::before {
+    background: #4A556C;
     opacity: 1;
+    top: calc(50% - 8px);
+}
+
+.toolbarButton:hover,
+.toolbarButton:focus-visible,
+.splitToolbarButton > .toolbarButton:hover, 
+.splitToolbarButton > .toolbarButton:focus-visible, 
+.dropdownToolbarButton:hover {
+    background-color: #F3F8FF;
 }
 
-.toolbarButton:hover::before, .toolbarButton:focus-visible::before, .secondaryToolbarButton:hover::before, .secondaryToolbarButton:focus-visible::before {
+.toolbarButton:hover::before, 
+.toolbarButton:focus-visible::before, 
+.secondaryToolbarButton:hover::before, 
+.secondaryToolbarButton:focus-visible::before {
     background: #4F4F4F;
     opacity: 1;
 }
@@ -117,16 +159,18 @@ input#pageNumber {
 }
 
 #thumbnailView::-webkit-scrollbar-thumb {
-    background: #BDBDBD;
+    background: #E4E6EC;
     border-radius: 4px;
 }
 
 #thumbnailView::-webkit-scrollbar-thumb:hover {
-    background: #828282;
+    background: #E4E6EC;
 }
 
+a:focus > .thumbnail > .thumbnailSelectionRing,
+.thumbnail:hover > .thumbnailSelectionRing,
 .thumbnail.selected > .thumbnailSelectionRing {
-    background-color: #BDBDBD;
+    background-color: #8E98A3;
 }
 
 .dropdownToolbarButton > select {
@@ -134,43 +178,92 @@ input#pageNumber {
 }
 
 [dir="ltr"] .secondaryToolbar, [dir="ltr"] .editorParamsToolbar {
-    box-shadow: 0 4px 16px rgba(0,0,0,.1);
-    border-radius: 8px;
+    margin: 0;
+    padding: 0;
+    margin-top: 5px;
+    border-radius: 4px;
+    width: 261px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+#secondaryToolbarButtonContainer {
+    min-height: 26px;
+    max-height: calc(0 - 40px);
+    overflow-y: auto;
+    max-width: unset;
+    margin-bottom: 0;
 }
 
 [dir="ltr"] .doorHangerRight:after {
-    right: 14px;
+    content: '';
+    border: none;
+    height: 11px;
+    width: 16px;
+    margin: 0;
+    display: block;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 16 11%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z%27 fill=%27white%27/%3E%3C/svg%3E%0A");
+    background-size: 100%;
 }
 
 [dir="ltr"] .doorHangerRight:before {
     display: none;
 }
 
+.body__sidebar-content::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+.body__sidebar-content::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 8px;
+}
+
+.body__sidebar-content::-webkit-scrollbar-thumb {
+    background: #E4E6EC;
+    border-radius: 4px;
+}
+
+.body__sidebar-content::-webkit-scrollbar-thumb:hover {
+    background: #E4E6EC;
+}
+
 .dlg-overlay {
-    background: rgba(34, 45, 68, .2);
+    background: #222D44;
+    opacity: 0.2;
 }
 
 .compare-dlg-wrap {
-    font-family: 'GraphikRegular';
+    font-family: 'InterRegular';
     background: #fff;
-    padding: 24px;
-    border-radius: 8px;
+    border-radius: 4px;
     width: 600px;
     border: none;
     user-select: none;
 }
 
 .compare-dlg-header, .compare-panel_header {
-    font-size: 18px;
+    font-size: 20px;
     line-height: 24px;
     font-weight: 500;
     background: transparent;
     border-bottom: none;
     padding: 0;
+    padding: 20px 16px;
+    border-bottom: 1px solid #E4E6EC;
 }
 
-.compare-panel_header {
-    margin-bottom: 12px;
+.compare-dlg-body {
+    padding: 12px 16px;
+}
+
+.compare-dlg_doc-a-wrap, 
+.compare-dlg_doc-b-wrap {
+    height: 175px;
+}
+
+.field-grp:has(.select.active) > label {
+    color: #3274E0;
 }
 
 .compare-dlg-footer {
@@ -178,6 +271,8 @@ input#pageNumber {
     padding: 0;
     display: flex;
     justify-content: flex-end;
+    padding: 16px;
+    border-top: 1px solid #E4E6EC;
 }
 
 .close {
@@ -186,50 +281,53 @@ input#pageNumber {
 }
 
 .compare-dlg-wrap .close {
-    width: 32px;
-    height: 32px;
-    top: -24px;
-    right: -72px;
+    width: 24px;
+    height: 24px;
+    top: 0;
+    right: -42px;
 }
 
 .close::before, .close::after  {
     display: none;
 }
 
-.select {
+.field-grp {
     position: relative;
+    padding: 0 !important;
+    margin-bottom: 22px;
 }
 
-.select:before {
-    content: '';
+.field-grp label {
+    color: #4A556C;
+    padding: 0 6px;
+    background: #fff;
+    width: fit-content;
     position: absolute;
-    border: 2px solid #0097ff;
-    border-radius: 10px;
-    left: -5px;
-    right: -5px;
-    top: -5px;
-    bottom: -5px;
-    opacity: 0;
-    visibility: hidden;
-    transition: .1s;
+    top: -10px;
+    left: 10px;
+    z-index: 1000;
 }
 
-.select.active:before {
-    opacity: .2;
-    visibility: visible;
+.select {
+    position: relative;
+    border: 1px solid #C0CAD5;
+    border-radius: 4px;
+    height: 40px;
+    background: #fff;
+    display: flex;
+    align-items: center;
 }
 
 .select > input {
-    width: 100%;
-    height: 32px;
-    border-radius: 8px;
     border: none;
-    background: #fff;
     cursor: pointer;
-    position: relative;
-    font-size: 10pt;
-    padding: 0 12px 0 12px;
     box-sizing: border-box;
+    color: #222D44;
+    font-size: 14px;
+    line-height: 16px;
+    padding: 8px 16px;
+    height: 100%;
+    background: transparent;
 }
 
 .select > input:disabled {
@@ -240,21 +338,28 @@ input#pageNumber {
 .select::after {
     content: '';
     display: block;
-    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 12 8' style='enable-background:new 0 0 12 8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23BDBDBD;stroke-width:1;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpolyline class='st0' points='0.7,0.7 6,6.5 11.3,0.7 '/%3E%3C/svg%3E%0A");
-    width: 12px;
-    height: 12px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.5 9L12 16.5L4.5 9' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    width: 24px;
+    height: 24px;
     position: absolute;
-    top: calc(50% - 5px);
-    right: 12px;
+    top: calc(50% - 12px);
+    right: 16px;
     background-size: 100%;
     background-position: center;
     background-repeat: no-repeat;
-    transition: all .3s ease;
 }
 
 .select.active::after {
     transform: rotate(-180deg);
-    transition: all .3s ease;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.5 9L12 16.5L4.5 9' stroke='%233274E0' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.select.active {
+    border-color: #3274E0;
+}
+
+.select.active label {
+    color: #3274E0;
 }
 
 .select ul {
@@ -263,8 +368,8 @@ input#pageNumber {
     padding: 0;
     margin: 0;
     list-style: none;
-    border-radius: 8px;
-    font-size: 10pt;
+    border-radius: 4px;
+    font-size: 14px;
     max-height: 100px;
     overflow-y: auto;
 }
@@ -275,9 +380,9 @@ input#pageNumber {
     position: absolute;
     background: #fff;
     width: 100%;
-    border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0,0,0,.1);
-    top: calc(100% + 6px);
+    border-radius: 4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    top: calc(100% + 4px);
     left: 0;
     z-index: 10000;
 }
@@ -287,18 +392,19 @@ input#pageNumber {
 }
 
 .select ul > li {
-    line-height: 24px;
-    padding: 0 8px;
+    line-height: 16px;
+    padding: 8px 12px;
     cursor: pointer;
 }
 
 .select ul > li:hover {
-    background: #F5F6FA;
+    background: #F3F8FF;
 }
 
 #toolbarViewerMiddle .select {
     min-width: 165px;
-    margin: 2px 6px 0;
+    margin: 0 6px;
+    height: 30px;
 }
 
 #toolbarViewerMiddle .select > input:disabled {
@@ -329,71 +435,49 @@ input#pageNumber {
 }
 
 .select ul::-webkit-scrollbar-thumb {
-    background: #e0e0e0;
+    background: #E4E6EC;
     border-radius: 2px;
     height: 20px;
 }
 
 .select ul::-webkit-scrollbar-thumb:hover {
-    background: #BDBDBD;
+    background: #E4E6EC;
 }
 
 .compare-dlg-wrap .uk-button {
-    font-family: 'GraphikRegular';
-    font-size: 14px;
+    font-family: 'InterMedium';
     outline: none;
-    height: 32px;
-    font-weight: 500;
-    border-radius: 8px;
+    font-size: 18px;
+    line-height: 27px;
     cursor: pointer;
-    transition: all 0.3s ease 0s;
-    position: relative;
-    border-radius: 8px;
-    padding: 0;
     background: #fff;
-    color: #0097ff;
-    border: 1px solid #0097ff;
-    text-transform: none;
     display: flex;
     align-items: center;
-    width: fit-content;
-    min-width: 96px;
     justify-content: center;
-    margin-left: 8px;
+    margin-left: 12px;
     margin-right: 0;
+    padding: 8px 34px;
+    border-radius: 4px;
+    border: none;
+    text-transform: none;
 }
 
+.compare-dlg-wrap .uk-button:active,
+.compare-dlg-wrap .uk-button:focus,
 .compare-dlg-wrap .uk-button:hover {
-    -webkit-transition: background-color 0.3s ease;
-    transition: background-color 0.3s ease;
-}
-
-.compare-dlg-wrap .uk-button-primary:active, .compare-dlg-wrap .uk-button-primary:focus, .compare-dlg-wrap .uk-button-primary:hover {
-    background: rgba(0, 151, 255, .8);
-    border-color: transparent;
-}
-
-.compare-dlg-wrap .uk-button:active:before {
-    opacity: .2;
-    visibility: visible;
+    background: #F3F8FF;
+    border: none;
 }
 
-.compare-dlg-wrap .uk-button:before {
-    content: '';
-    position: absolute;
-    border: 2px solid #0097ff;
-    border-radius: 10px;
-    left: -5px;
-    right: -5px;
-    top: -5px;
-    bottom: -5px;
-    opacity: 0;
-    visibility: hidden;
-    transition: .1s;
+.compare-dlg-wrap .uk-button-primary:active, 
+.compare-dlg-wrap .uk-button-primary:focus, 
+.compare-dlg-wrap .uk-button-primary:hover {
+    background: #3274E0;
+    border: none;
 }
 
 .compare-dlg-wrap .uk-button-primary {
-    background: #0097ff;
+    background: #347FDE;
     color: #fff;
 }
 
@@ -402,14 +486,19 @@ input#pageNumber {
 }
 
 .compare-dlg-wrap .wrap-inner-bg {
-    background: #F5F6FA;
-    border-radius: 8px;
+    background: #fff;
     border: none;
+    padding: 0;
 }
 
-
 .compare-viewer-title {
-    background: #222d44;
+    background: #4A556C;
+    padding: 0 16px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    font-weight: unset;
+    font-family: 'InterMedium';
 }
 
 .compare-viewer-title .close {
@@ -421,14 +510,13 @@ input#pageNumber {
 }
 
 .compare-ui-label {
-    background-color: rgba(34, 45, 68,.75);
+    background-color: #4a556cbf;
 }
 
 .compare-panel {
-    box-shadow: 0 0 16px rgba(0,0,0,.1);
-    border-radius: 8px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    border-radius: 4px;
     border: none;
-    padding: 24px;
     background: #fff;
 }
 
@@ -437,51 +525,189 @@ input#pageNumber {
 }
 
 .compare-panel_item-row.selected {
-    border: 1px solid #E0E0E0;
+    border: 1px solid #fff;
+    background-color: #F3F8FF;
+    border-radius: 4px;
 }
 
 .compare-panel .close {
-    width: 20px;
-    height: 20px;
-    top: 0;
-    right: 0;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' stroke-width='2px' stroke='%23e0e0e0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 32.333l16-16m0 0l-16-16m16 16l16 16m-16-16l16-16'%3E%3C/path%3E%3C/svg%3E");
+    width: 24px;
+    height: 24px;
+    top: 20px;
+    right: 16px;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.compare-panel_body {
+    padding: 12px 16px;
+    background: transparent;
 }
 
 .compare-panel_toolbar {
     padding: 0;
-    margin-bottom: 18px;
+    margin-bottom: 12px;
     background-color: transparent;
 }
 
 .compare-toolbar-btn {
     margin: 0;
-    margin-right: 8px;
+    margin-right: 12px;
     border: 1px solid #bdbdbd;
+    border-radius: 4px;
+    border: none;
+}
+
+.compare-toolbar-btn:last-child {
+    margin: 0 !important;
 }
 
 .compare-toolbar-btn.active {
-    border: 1px solid #0097ff;
+    background-color: #DCEEFF !important;
+}
+
+.compare-toolbar-btn:not(.active) {
+    border: none; 
+    border-radius: 4px; 
+}
+
+#panelCompareType .compare-toolbar-btn {
+    margin-right: 0;
+    margin-bottom: 12px;
+}
+
+.compare-panel_doc-color {
+    border-radius: 4px;
+    padding: 8px 12px;
 }
 
 .compare-panel_doc-color.docA {
-    border-left: 5px solid #ff5b2d;
+    border-left: 4px solid #ff5b2d;
 }
 
 .compare-panel_doc-color.docB {
-    border-left: 5px solid #0097ff;
+    border-left: 4px solid #0097ff;
+}
+
+.compare-panel_doc-color .version,
+.compare-panel_doc-color .upload-by,
+.compare-panel_doc-color .upload-date {
+    font-size: 14px;
+    line-height: 21px;
+    color: #4A556C;
+}
+
+.compare-panel_doc-color .title {
+    font-family: 'InterSemiBold' !important;
+    font-size: 14px;
+    line-height: 21px;
+    padding: 0;
+    font-weight: unset;
 }
 
 .compare-viewer-toolbar .control-grp {
     background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 0 16px rgba(0,0,0,.1);
+    border-radius: 4px;
+    padding: 4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
 }
 
 #panelCompareType {
     background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 0 16px rgba(0,0,0,.1);
+    border-radius: 4px;
+    padding: 4px;
+    top: -104px;
+    margin-left: -4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+#btnComparePan {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.558 15.6667C19.0625 19.7183 16.7393 23 12.6878 23C9.69961 23 7.23388 21.1642 6.12476 18.3867L3.12738 11.4225C3.06301 11.2606 3.04609 11.0838 3.07862 10.9126C3.11115 10.7415 3.19177 10.5831 3.31105 10.4562C3.43032 10.3292 3.5833 10.2388 3.75207 10.1957C3.92085 10.1525 4.09842 10.1584 4.264 10.2125L4.98813 10.4508C5.50145 10.6158 5.9231 11.01 6.12476 11.5142L7.29804 14.4567C7.37137 14.64 7.53637 14.75 7.71969 14.75H8.10468L7.18805 3.97917C7.18805 3.67527 7.30876 3.38383 7.52364 3.16894C7.73852 2.95405 8.02995 2.83333 8.33384 2.83333C8.63772 2.83333 8.92915 2.95405 9.14403 3.16894C9.35891 3.38383 9.47962 3.67527 9.47962 3.97917L10.3963 11.5417C10.3963 11.7983 10.5979 12 10.8546 12C11.1112 12 11.3129 11.7983 11.3129 11.5417V2.14583C11.3129 1.84194 11.4336 1.55049 11.6485 1.33561C11.8634 1.12072 12.1548 1 12.4587 1C12.7626 1 13.054 1.12072 13.2689 1.33561C13.4837 1.55049 13.6045 1.84194 13.6045 2.14583V11.5417C13.6045 11.7983 13.8061 12 14.0628 12C14.3194 12 14.5211 11.7983 14.5211 11.5417L14.9787 3.52083C14.9787 3.21694 15.0994 2.92549 15.3143 2.71061C15.5292 2.49572 15.8206 2.375 16.1245 2.375C16.4284 2.375 16.7198 2.49572 16.9347 2.71061C17.1496 2.92549 17.2703 3.21694 17.2703 3.52083L16.8127 11.5417C16.8127 11.7983 17.0143 12 17.271 12C17.5276 12 17.7293 11.7983 17.7293 11.5417L18.6459 6.27083C18.6459 5.96694 18.7666 5.67549 18.9815 5.46061C19.1964 5.24572 19.4878 5.125 19.7917 5.125C20.0956 5.125 20.387 5.24572 20.6019 5.46061C20.8168 5.67549 20.9375 5.96694 20.9375 6.27083L19.558 15.6667Z' fill='%23222D44'/%3E%3C/svg%3E%0A");
+}
+
+#btnComparePan:hover,
+#btnComparePan.active {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.558 15.6667C19.0625 19.7183 16.7393 23 12.6878 23C9.69961 23 7.23388 21.1642 6.12476 18.3867L3.12738 11.4225C3.06301 11.2606 3.04609 11.0838 3.07862 10.9126C3.11115 10.7415 3.19177 10.5831 3.31105 10.4562C3.43032 10.3292 3.5833 10.2388 3.75207 10.1957C3.92085 10.1525 4.09842 10.1584 4.264 10.2125L4.98813 10.4508C5.50145 10.6158 5.9231 11.01 6.12476 11.5142L7.29804 14.4567C7.37137 14.64 7.53637 14.75 7.71969 14.75H8.10468L7.18805 3.97917C7.18805 3.67527 7.30876 3.38383 7.52364 3.16894C7.73852 2.95405 8.02995 2.83333 8.33384 2.83333C8.63772 2.83333 8.92915 2.95405 9.14403 3.16894C9.35891 3.38383 9.47962 3.67527 9.47962 3.97917L10.3963 11.5417C10.3963 11.7983 10.5979 12 10.8546 12C11.1112 12 11.3129 11.7983 11.3129 11.5417V2.14583C11.3129 1.84194 11.4336 1.55049 11.6485 1.33561C11.8634 1.12072 12.1548 1 12.4587 1C12.7626 1 13.054 1.12072 13.2689 1.33561C13.4837 1.55049 13.6045 1.84194 13.6045 2.14583V11.5417C13.6045 11.7983 13.8061 12 14.0628 12C14.3194 12 14.5211 11.7983 14.5211 11.5417L14.9787 3.52083C14.9787 3.21694 15.0994 2.92549 15.3143 2.71061C15.5292 2.49572 15.8206 2.375 16.1245 2.375C16.4284 2.375 16.7198 2.49572 16.9347 2.71061C17.1496 2.92549 17.2703 3.21694 17.2703 3.52083L16.8127 11.5417C16.8127 11.7983 17.0143 12 17.271 12C17.5276 12 17.7293 11.7983 17.7293 11.5417L18.6459 6.27083C18.6459 5.96694 18.7666 5.67549 18.9815 5.46061C19.1964 5.24572 19.4878 5.125 19.7917 5.125C20.0956 5.125 20.387 5.24572 20.6019 5.46061C20.8168 5.67549 20.9375 5.96694 20.9375 6.27083L19.558 15.6667Z' fill='%23326AD6'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareZoom {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.332 5.33333L11.9961 2L8.66536 5.32817' stroke='%23222D44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 15.0109L16.6684 17.3406L12.0053 22L7.33511 17.3333L5 15' stroke='%23222D44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 2H13V22H11V2Z' fill='%23222D44'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareZoom:hover,
+#btnCompareZoom.active {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.332 5.33333L11.9961 2L8.66536 5.32817' stroke='%23326AD6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 15.0109L16.6684 17.3406L12.0053 22L7.33511 17.3333L5 15' stroke='%23326AD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 2H13V22H11V2Z' fill='%23326AD6'/%3E%3C/svg%3E%0A");
+}
+
+#btnFitToView {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H7.5C7.77614 1 8 1.22386 8 1.5V1.5C8 1.77614 7.77614 2 7.5 2H3C2.44772 2 2 2.44772 2 3V7.5C2 7.77614 1.77614 8 1.5 8V8C1.22386 8 1 7.77614 1 7.5V2V2C1 1.44772 1.44772 1 2 1V1ZM1.5 16C1.22386 16 1 16.2239 1 16.5V22V22C1 22.5523 1.44772 23 2 23V23H7.5C7.77614 23 8 22.7761 8 22.5V22.5C8 22.2239 7.77614 22 7.5 22H3C2.44772 22 2 21.5523 2 21V16.5C2 16.2239 1.77614 16 1.5 16V16ZM22.5 16C22.2239 16 22 16.2239 22 16.5V21C22 21.5523 21.5523 22 21 22H16.5C16.2239 22 16 22.2239 16 22.5V22.5C16 22.7761 16.2239 23 16.5 23H22V23C22.5523 23 23 22.5523 23 22V22V16.5C23 16.2239 22.7761 16 22.5 16V16ZM22.5 8C22.7761 8 23 7.77614 23 7.5V2V2C23 1.44772 22.5523 1 22 1V1H16.5C16.2239 1 16 1.22386 16 1.5V1.5C16 1.77614 16.2239 2 16.5 2H21C21.5523 2 22 2.44772 22 3V7.5C22 7.77614 22.2239 8 22.5 8V8Z' fill='%23222D44'/%3E%3Cpath d='M7 9.56619C7 9.21493 7.1843 8.88942 7.4855 8.7087L11.4855 6.3087C11.8022 6.11869 12.1978 6.11869 12.5145 6.3087L16.3748 8.6249C16.6456 8.78733 16.6302 9.18468 16.3478 9.32575L12.5532 11.2209C12.2142 11.3902 12 11.7366 12 12.1155V17.2935C12 17.6044 11.6608 17.7965 11.3942 17.6365L7.4855 15.2913C7.1843 15.1106 7 14.7851 7 14.4338V12V9.56619Z' fill='%23222D44'/%3E%3Cpath d='M7.74275 9.13744L11.7428 6.73744C11.9011 6.64244 12.0989 6.64244 12.2572 6.73744L16.2572 9.13744C16.4079 9.22781 16.5 9.39056 16.5 9.56619V12V14.4338C16.5 14.6094 16.4079 14.7722 16.2572 14.8626L12.2572 17.2626C12.0989 17.3576 11.9011 17.3576 11.7428 17.2626L7.74275 14.8626C7.59215 14.7722 7.5 14.6094 7.5 14.4338V12V9.56619C7.5 9.39056 7.59215 9.22781 7.74275 9.13744Z' stroke='%23222D44'/%3E%3C/svg%3E%0A");
+}
+
+#btnFitToView:hover,
+#btnFitToView.active {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 3C22 2.44772 21.5523 2 21 2H16.5C16.2239 2 16 1.77614 16 1.5V1.5C16 1.22386 16.2239 1 16.5 1H22V1C22.5523 1 23 1.44772 23 2V2V7.5C23 7.77614 22.7761 8 22.5 8V8C22.2239 8 22 7.77614 22 7.5V3ZM1.5 8C1.77614 8 2 7.77614 2 7.5V3C2 2.44772 2.44772 2 3 2H7.5C7.77614 2 8 1.77614 8 1.5V1.5C8 1.22386 7.77614 1 7.5 1H2V1C1.44772 1 1 1.44772 1 2V2V7.5C1 7.77614 1.22386 8 1.5 8V8ZM1 16.5C1 16.2239 1.22386 16 1.5 16V16C1.77614 16 2 16.2239 2 16.5V21C2 21.5523 2.44772 22 3 22H7.5C7.77614 22 8 22.2239 8 22.5V22.5C8 22.7761 7.77614 23 7.5 23H2V23C1.44772 23 1 22.5523 1 22V22V16.5ZM22 16.5C22 16.2239 22.2239 16 22.5 16V16C22.7761 16 23 16.2239 23 16.5V22V22C23 22.5523 22.5523 23 22 23V23H16.5C16.2239 23 16 22.7761 16 22.5V22.5C16 22.2239 16.2239 22 16.5 22H21C21.5523 22 22 21.5523 22 21V16.5Z' fill='%23326AD6'/%3E%3Cpath d='M7 9.56619C7 9.21493 7.1843 8.88942 7.4855 8.7087L11.4855 6.3087C11.8022 6.11869 12.1978 6.11869 12.5145 6.3087L16.3748 8.6249C16.6456 8.78733 16.6302 9.18468 16.3478 9.32575L12.5532 11.2209C12.2142 11.3902 12 11.7366 12 12.1155V17.2935C12 17.6044 11.6608 17.7965 11.3942 17.6365L7.4855 15.2913C7.1843 15.1106 7 14.7851 7 14.4338V12V9.56619Z' fill='%23326AD6'/%3E%3Cpath d='M7.74275 9.13744L11.7428 6.73744C11.9011 6.64244 12.0989 6.64244 12.2572 6.73744L16.2572 9.13744C16.4079 9.22781 16.5 9.39056 16.5 9.56619V12V14.4338C16.5 14.6094 16.4079 14.7722 16.2572 14.8626L12.2572 17.2626C12.0989 17.3576 11.9011 17.3576 11.7428 17.2626L7.74275 14.8626C7.59215 14.7722 7.5 14.6094 7.5 14.4338V12V9.56619C7.5 9.39056 7.59215 9.22781 7.74275 9.13744Z' stroke='%23326AD6'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareType.type-overlay {
+    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.00391' y='14' width='13.9982' height='14.0038' rx='2' fill='%23326AD6'/%3E%3Cpath d='M10.0078 7.99805C10.0078 6.89348 10.9032 5.99805 12.0078 5.99805H22.006C23.1106 5.99805 24.006 6.89348 24.006 7.99805V18.0018C24.006 19.1064 23.1106 20.0018 22.006 20.0018H17.0069L17.0089 15.0028C17.0094 13.8982 16.1143 13.0024 15.0098 13.002L10.0078 12.9999V7.99805Z' fill='%23326AD6'/%3E%3Cpath d='M27.6536 2.6C27.8076 2.33333 28.1925 2.33333 28.3464 2.6L31.1177 7.4C31.2717 7.66667 31.0792 8 30.7713 8H25.2287C24.9208 8 24.7283 7.66667 24.8823 7.4L27.6536 2.6Z' fill='%23326AD6'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareType.type-side-by-side {
+    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 24.9V9.1C12.5 7.6 11.86 7 10.27 7H5.23C3.64 7 3 7.6 3 9.1V24.9C3 26.4 3.64 27 5.23 27H10.27C11.86 27 12.5 26.4 12.5 24.9Z' fill='%23326AD6'/%3E%3Cpath d='M23 24.9V9.1C23 7.6 22.36 7 20.77 7H15.73C14.14 7 13.5 7.6 13.5 9.1V24.9C13.5 26.4 14.14 27 15.73 27H20.77C22.36 27 23 26.4 23 24.9Z' fill='%23326AD6'/%3E%3Cpath d='M26.6536 2.6C26.8076 2.33333 27.1925 2.33333 27.3464 2.6L30.1177 7.4C30.2717 7.66667 30.0792 8 29.7713 8H24.2287C23.9208 8 23.7283 7.66667 23.8823 7.4L26.6536 2.6Z' fill='%23326AD6'/%3E%3C/svg%3E%0A");
+}
+
+#btnComparePanel {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='1' width='4' height='9' rx='1' fill='%23222D44'/%3E%3Crect x='10' y='1' width='4' height='9' rx='1' fill='%23222D44'/%3E%3Crect x='18' y='1' width='4' height='9' rx='1' fill='%23222D44'/%3E%3Crect x='2' y='12' width='20' height='3' rx='1' fill='%23222D44'/%3E%3Crect x='2' y='16' width='20' height='3' rx='1' fill='%23222D44'/%3E%3Crect x='2' y='20' width='20' height='3' rx='1' fill='%23222D44'/%3E%3C/svg%3E%0A");
+}
+
+#btnComparePanel:hover,
+#btnComparePanel.active {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='1' width='4' height='9' rx='1' fill='%23326AD6'/%3E%3Crect x='10' y='1' width='4' height='9' rx='1' fill='%23326AD6'/%3E%3Crect x='18' y='1' width='4' height='9' rx='1' fill='%23326AD6'/%3E%3Crect x='2' y='12' width='20' height='3' rx='1' fill='%23326AD6'/%3E%3Crect x='2' y='16' width='20' height='3' rx='1' fill='%23326AD6'/%3E%3Crect x='2' y='20' width='20' height='3' rx='1' fill='%23326AD6'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareViewerExit {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.9375V4.5C3 3.67158 3.67155 3 4.5 3H19.5C20.3284 3 21 3.67158 21 4.5V19.5C21 20.3285 20.3284 21 19.5 21H4.5C3.67155 21 3 20.3285 3 19.5V17.3438' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12H15' stroke='%23222D44' stroke-linecap='round'/%3E%3Cpath d='M12 15L15 12L12 9' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareViewerExit:hover,
+#btnCompareViewerExit.active {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.9375V4.5C3 3.67158 3.67155 3 4.5 3H19.5C20.3284 3 21 3.67158 21 4.5V19.5C21 20.3285 20.3284 21 19.5 21H4.5C3.67155 21 3 20.3285 3 19.5V17.3438' stroke='%23326AD6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12H15' stroke='%23326AD6' stroke-linecap='round'/%3E%3Cpath d='M12 15L15 12L12 9' stroke='%23326AD6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareTypeSideBySide {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 19.9V4.1C11.5 2.6 10.86 2 9.27 2H4.23C2.64 2 2 2.6 2 4.1V19.9C2 21.4 2.64 22 4.23 22H9.27C10.86 22 11.5 21.4 11.5 19.9Z' fill='%23222D44'/%3E%3Cpath d='M22 19.9V4.1C22 2.6 21.36 2 19.77 2H14.73C13.14 2 12.5 2.6 12.5 4.1V19.9C12.5 21.4 13.14 22 14.73 22H19.77C21.36 22 22 21.4 22 19.9Z' fill='%23222D44'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareTypeOverlay {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.00391' y='9' width='13.9982' height='14.0038' rx='2' fill='%23222D44'/%3E%3Cpath d='M9.00781 2.99805C9.00781 1.89348 9.90324 0.998047 11.0078 0.998047H21.006C22.1106 0.998047 23.006 1.89348 23.006 2.99805V13.0018C23.006 14.1064 22.1106 15.0018 21.006 15.0018H16.0069L16.0089 10.0028C16.0094 8.89824 15.1143 8.00244 14.0098 8.00199L9.00781 7.99994V2.99805Z' fill='%23222D44'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareTypeSideBySide.active {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 19.9V4.1C11.5 2.6 10.86 2 9.27 2H4.23C2.64 2 2 2.6 2 4.1V19.9C2 21.4 2.64 22 4.23 22H9.27C10.86 22 11.5 21.4 11.5 19.9Z' fill='%23326AD6'/%3E%3Cpath d='M22 19.9V4.1C22 2.6 21.36 2 19.77 2H14.73C13.14 2 12.5 2.6 12.5 4.1V19.9C12.5 21.4 13.14 22 14.73 22H19.77C21.36 22 22 21.4 22 19.9Z' fill='%23326AD6'/%3E%3C/svg%3E%0A");
+}
+
+#btnCompareTypeOverlay.active {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.00391' y='9' width='13.9982' height='14.0038' rx='2' fill='%23326AD6'/%3E%3Cpath d='M9.00781 2.99805C9.00781 1.89348 9.90324 0.998047 11.0078 0.998047H21.006C22.1106 0.998047 23.006 1.89348 23.006 2.99805V13.0018C23.006 14.1064 22.1106 15.0018 21.006 15.0018H16.0069L16.0089 10.0028C16.0094 8.89824 15.1143 8.00244 14.0098 8.00199L9.00781 7.99994V2.99805Z' fill='%23326AD6'/%3E%3C/svg%3E%0A");
+}
+
+#hideColors {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 21.5C16.1421 21.5 18 19.1421 18 15C18 9 12 2.5 12 2.5C12 2.5 6 9 6 15C6 19.1421 7.85785 21.5 12 21.5Z' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+}
+
+#hideColors.active {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 21.5C16.1421 21.5 18 19.1421 18 15C18 9 12 2.5 12 2.5C12 2.5 6 9 6 15C6 19.1421 7.85785 21.5 12 21.5Z' stroke='%23326AD6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+#alignFinish {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99535 15.002L3.9969 14.0027L2 12.0043L4 10.0027L5 9.00195' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.0047 9L20.0031 9.99924L22 11.9977L20 13.9992L19 15' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 12H22' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 5L13.9992 4L11.9977 2L9.99922 3.9969L9 4.99535' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 19.0047L14.0008 20.0031L12.0023 22L10.0008 20L9 19' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 2L12 22' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+}
+
+#alignFinish.active {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99535 15.002L3.9969 14.0027L2 12.0043L4 10.0027L5 9.00195' stroke='%23326AD6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.0047 9L20.0031 9.99924L22 11.9977L20 13.9992L19 15' stroke='%23326AD6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 12H22' stroke='%23326AD6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 5L13.9992 4L11.9977 2L9.99922 3.9969L9 4.99535' stroke='%23326AD6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 19.0047L14.0008 20.0031L12.0023 22L10.0008 20L9 19' stroke='%23326AD6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 2L12 22' stroke='%23326AD6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 #documentPropertiesDialog {
@@ -513,7 +739,7 @@ dialog .separator {
 }
 
 .dialogButton {
-    font-family: 'GraphikRegular';
+    font-family: 'InterMedium';
     font-size: 14px;
     outline: none;
     height: 32px;
@@ -634,6 +860,10 @@ dialog .separator {
     border-radius: 4px;
 }
 
+.body__sidebar, .body__sidebar * {
+    box-sizing: border-box !important;
+}
+
 .body__sidebar {
     padding: 32px 0 16px 0;
     width: 408px;