@egovernments/digit-ui-components-css 0.0.2-beta.19 → 0.0.2-beta.21

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.0.2-beta.21] - 2024-08-07
+### Changed
+-  Updated css for Tooltip Component
+
+## [0.0.2-beta.20] - 2024-08-02
+### Added
+-  Added css for Tag Component
+
 ## [0.0.2-beta.19] - 2024-07-31
 ### Added
 -  Added css change for SelectionCard

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * @egovernments/digit-ui-components-css - 0.0.2-beta.19
+ * @egovernments/digit-ui-components-css - 0.0.2-beta.21
  *
  * Copyright (c) 2024 Jagankumar <jagan.kumar@egovernments.org>
  * 
@@ -1831,18 +1831,18 @@ body {
       font-size: 1.25rem; } }
 
 @media (max-aspect-ratio: 9 / 16) {
-  .typography.body-s, .digit-bread-crumb--item .digit-bread-crumb-content, .digit-bread-crumb--item .digit-bread-crumb-content.current, .digit-bread-crumb--item .digit-bread-crumb-seperator, .digit-checkbox-container .label, .digit-header-content.label .info-icon .infotext, .digit-field .digit-charcount, .digit-field .digit-description, .digit-multiselectdropdown-wrap .digit-category-selectAll .category-selectAll-label, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem p, .digit-panelcard-wrap .digit-panelcard-children-wrap .digit-panelcard-description, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap .digit-popup-description, .digit-radio-options-wrap label, .digit-dropdown-item .option-des-container .main-option, .digit-dropdown-item.unsuccessfulresults span, .digit-stepper-container .digit-stepper-content .stepper-label, .digit-text-block-wrap .digit-text-block-body, .timeline-date, .digit-option-label, .digit-uploader-wrap .digit-uploader-content-uploadpopup .drag-drop-text, .digit-uploader-wrap .digit-uploadpopup-label, .digit-uploader-wrap .digit-uploader-input, .digit-uploader-wrap .digit-upload-helptext, .digit-viewcard-field-pair .digit-viewcard-value, .header-dropdown-label, .header-dropdown-option, .header-dropdown-nooption, .digit-topbar .digit-header-img-ulb-wrapper-mobileview .digit-topbar-ulb-mobileview, .sidebar .sidebar-search-container ::-webkit-input-placeholder, .sidebar .sidebar-search-container ::-moz-placeholder, .sidebar .sidebar-search-container :-ms-input-placeholder, .sidebar .sidebar-search-container ::-ms-input-placeholder, .sidebar .sidebar-search-container ::placeholder, .mb-search-container ::-webkit-input-placeholder, .mb-search-container ::-moz-placeholder, .mb-search-container :-ms-input-placeholder, .mb-search-container ::-ms-input-placeholder, .mb-search-container ::placeholder, .mb-search-container.dark ::-webkit-input-placeholder, .mb-search-container.dark ::-moz-placeholder, .mb-search-container.dark :-ms-input-placeholder, .mb-search-container.dark ::-ms-input-placeholder, .mb-search-container.dark ::placeholder {
+  .typography.body-s, .digit-bread-crumb--item .digit-bread-crumb-content, .digit-bread-crumb--item .digit-bread-crumb-content.current, .digit-bread-crumb--item .digit-bread-crumb-seperator, .digit-checkbox-container .label, .digit-header-content.label .info-icon .infotext, .digit-field .digit-charcount, .digit-field .digit-description, .digit-multiselectdropdown-wrap .digit-category-selectAll .category-selectAll-label, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem p, .digit-panelcard-wrap .digit-panelcard-children-wrap .digit-panelcard-description, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap .digit-popup-description, .digit-radio-options-wrap label, .digit-dropdown-item .option-des-container .main-option, .digit-dropdown-item.unsuccessfulresults span, .digit-stepper-container .digit-stepper-content .stepper-label, .digit-text-block-wrap .digit-text-block-body, .timeline-date, .digit-option-label, .digit-uploader-wrap .digit-uploader-content-uploadpopup .drag-drop-text, .digit-uploader-wrap .digit-uploadpopup-label, .digit-uploader-wrap .digit-uploader-input, .digit-uploader-wrap .digit-upload-helptext, .digit-viewcard-field-pair .digit-viewcard-value, .header-dropdown-label, .header-dropdown-option, .header-dropdown-nooption, .digit-topbar .digit-header-img-ulb-wrapper-mobileview .digit-topbar-ulb-mobileview, .sidebar .sidebar-search-container ::-webkit-input-placeholder, .sidebar .sidebar-search-container ::-moz-placeholder, .sidebar .sidebar-search-container :-ms-input-placeholder, .sidebar .sidebar-search-container ::-ms-input-placeholder, .sidebar .sidebar-search-container ::placeholder, .mb-search-container ::-webkit-input-placeholder, .mb-search-container ::-moz-placeholder, .mb-search-container :-ms-input-placeholder, .mb-search-container ::-ms-input-placeholder, .mb-search-container ::placeholder, .mb-search-container.dark ::-webkit-input-placeholder, .mb-search-container.dark ::-moz-placeholder, .mb-search-container.dark :-ms-input-placeholder, .mb-search-container.dark ::-ms-input-placeholder, .mb-search-container.dark ::placeholder, .digit-tag-wrapper .digit-tag-text {
     font-size: .875rem; } }
 
 @media (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 4) {
-  .typography.body-s, .digit-bread-crumb--item .digit-bread-crumb-content, .digit-bread-crumb--item .digit-bread-crumb-content.current, .digit-bread-crumb--item .digit-bread-crumb-seperator, .digit-checkbox-container .label, .digit-header-content.label .info-icon .infotext, .digit-field .digit-charcount, .digit-field .digit-description, .digit-multiselectdropdown-wrap .digit-category-selectAll .category-selectAll-label, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem p, .digit-panelcard-wrap .digit-panelcard-children-wrap .digit-panelcard-description, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap .digit-popup-description, .digit-radio-options-wrap label, .digit-dropdown-item .option-des-container .main-option, .digit-dropdown-item.unsuccessfulresults span, .digit-stepper-container .digit-stepper-content .stepper-label, .digit-text-block-wrap .digit-text-block-body, .timeline-date, .digit-option-label, .digit-uploader-wrap .digit-uploader-content-uploadpopup .drag-drop-text, .digit-uploader-wrap .digit-uploadpopup-label, .digit-uploader-wrap .digit-uploader-input, .digit-uploader-wrap .digit-upload-helptext, .digit-viewcard-field-pair .digit-viewcard-value, .header-dropdown-label, .header-dropdown-option, .header-dropdown-nooption, .digit-topbar .digit-header-img-ulb-wrapper-mobileview .digit-topbar-ulb-mobileview, .sidebar .sidebar-search-container ::-webkit-input-placeholder, .sidebar .sidebar-search-container ::-moz-placeholder, .sidebar .sidebar-search-container :-ms-input-placeholder, .sidebar .sidebar-search-container ::-ms-input-placeholder, .sidebar .sidebar-search-container ::placeholder, .mb-search-container ::-webkit-input-placeholder, .mb-search-container ::-moz-placeholder, .mb-search-container :-ms-input-placeholder, .mb-search-container ::-ms-input-placeholder, .mb-search-container ::placeholder, .mb-search-container.dark ::-webkit-input-placeholder, .mb-search-container.dark ::-moz-placeholder, .mb-search-container.dark :-ms-input-placeholder, .mb-search-container.dark ::-ms-input-placeholder, .mb-search-container.dark ::placeholder {
+  .typography.body-s, .digit-bread-crumb--item .digit-bread-crumb-content, .digit-bread-crumb--item .digit-bread-crumb-content.current, .digit-bread-crumb--item .digit-bread-crumb-seperator, .digit-checkbox-container .label, .digit-header-content.label .info-icon .infotext, .digit-field .digit-charcount, .digit-field .digit-description, .digit-multiselectdropdown-wrap .digit-category-selectAll .category-selectAll-label, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem p, .digit-panelcard-wrap .digit-panelcard-children-wrap .digit-panelcard-description, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap .digit-popup-description, .digit-radio-options-wrap label, .digit-dropdown-item .option-des-container .main-option, .digit-dropdown-item.unsuccessfulresults span, .digit-stepper-container .digit-stepper-content .stepper-label, .digit-text-block-wrap .digit-text-block-body, .timeline-date, .digit-option-label, .digit-uploader-wrap .digit-uploader-content-uploadpopup .drag-drop-text, .digit-uploader-wrap .digit-uploadpopup-label, .digit-uploader-wrap .digit-uploader-input, .digit-uploader-wrap .digit-upload-helptext, .digit-viewcard-field-pair .digit-viewcard-value, .header-dropdown-label, .header-dropdown-option, .header-dropdown-nooption, .digit-topbar .digit-header-img-ulb-wrapper-mobileview .digit-topbar-ulb-mobileview, .sidebar .sidebar-search-container ::-webkit-input-placeholder, .sidebar .sidebar-search-container ::-moz-placeholder, .sidebar .sidebar-search-container :-ms-input-placeholder, .sidebar .sidebar-search-container ::-ms-input-placeholder, .sidebar .sidebar-search-container ::placeholder, .mb-search-container ::-webkit-input-placeholder, .mb-search-container ::-moz-placeholder, .mb-search-container :-ms-input-placeholder, .mb-search-container ::-ms-input-placeholder, .mb-search-container ::placeholder, .mb-search-container.dark ::-webkit-input-placeholder, .mb-search-container.dark ::-moz-placeholder, .mb-search-container.dark :-ms-input-placeholder, .mb-search-container.dark ::-ms-input-placeholder, .mb-search-container.dark ::placeholder, .digit-tag-wrapper .digit-tag-text {
     font-size: 1rem; } }
 
 @media (min-aspect-ratio: 3 / 4) {
-  .typography.body-s, .digit-bread-crumb--item .digit-bread-crumb-content, .digit-bread-crumb--item .digit-bread-crumb-content.current, .digit-bread-crumb--item .digit-bread-crumb-seperator, .digit-checkbox-container .label, .digit-header-content.label .info-icon .infotext, .digit-field .digit-charcount, .digit-field .digit-description, .digit-multiselectdropdown-wrap .digit-category-selectAll .category-selectAll-label, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem p, .digit-panelcard-wrap .digit-panelcard-children-wrap .digit-panelcard-description, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap .digit-popup-description, .digit-radio-options-wrap label, .digit-dropdown-item .option-des-container .main-option, .digit-dropdown-item.unsuccessfulresults span, .digit-stepper-container .digit-stepper-content .stepper-label, .digit-text-block-wrap .digit-text-block-body, .timeline-date, .digit-option-label, .digit-uploader-wrap .digit-uploader-content-uploadpopup .drag-drop-text, .digit-uploader-wrap .digit-uploadpopup-label, .digit-uploader-wrap .digit-uploader-input, .digit-uploader-wrap .digit-upload-helptext, .digit-viewcard-field-pair .digit-viewcard-value, .header-dropdown-label, .header-dropdown-option, .header-dropdown-nooption, .digit-topbar .digit-header-img-ulb-wrapper-mobileview .digit-topbar-ulb-mobileview, .sidebar .sidebar-search-container ::-webkit-input-placeholder, .sidebar .sidebar-search-container ::-moz-placeholder, .sidebar .sidebar-search-container :-ms-input-placeholder, .sidebar .sidebar-search-container ::-ms-input-placeholder, .sidebar .sidebar-search-container ::placeholder, .mb-search-container ::-webkit-input-placeholder, .mb-search-container ::-moz-placeholder, .mb-search-container :-ms-input-placeholder, .mb-search-container ::-ms-input-placeholder, .mb-search-container ::placeholder, .mb-search-container.dark ::-webkit-input-placeholder, .mb-search-container.dark ::-moz-placeholder, .mb-search-container.dark :-ms-input-placeholder, .mb-search-container.dark ::-ms-input-placeholder, .mb-search-container.dark ::placeholder {
+  .typography.body-s, .digit-bread-crumb--item .digit-bread-crumb-content, .digit-bread-crumb--item .digit-bread-crumb-content.current, .digit-bread-crumb--item .digit-bread-crumb-seperator, .digit-checkbox-container .label, .digit-header-content.label .info-icon .infotext, .digit-field .digit-charcount, .digit-field .digit-description, .digit-multiselectdropdown-wrap .digit-category-selectAll .category-selectAll-label, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem p, .digit-panelcard-wrap .digit-panelcard-children-wrap .digit-panelcard-description, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap .digit-popup-description, .digit-radio-options-wrap label, .digit-dropdown-item .option-des-container .main-option, .digit-dropdown-item.unsuccessfulresults span, .digit-stepper-container .digit-stepper-content .stepper-label, .digit-text-block-wrap .digit-text-block-body, .timeline-date, .digit-option-label, .digit-uploader-wrap .digit-uploader-content-uploadpopup .drag-drop-text, .digit-uploader-wrap .digit-uploadpopup-label, .digit-uploader-wrap .digit-uploader-input, .digit-uploader-wrap .digit-upload-helptext, .digit-viewcard-field-pair .digit-viewcard-value, .header-dropdown-label, .header-dropdown-option, .header-dropdown-nooption, .digit-topbar .digit-header-img-ulb-wrapper-mobileview .digit-topbar-ulb-mobileview, .sidebar .sidebar-search-container ::-webkit-input-placeholder, .sidebar .sidebar-search-container ::-moz-placeholder, .sidebar .sidebar-search-container :-ms-input-placeholder, .sidebar .sidebar-search-container ::-ms-input-placeholder, .sidebar .sidebar-search-container ::placeholder, .mb-search-container ::-webkit-input-placeholder, .mb-search-container ::-moz-placeholder, .mb-search-container :-ms-input-placeholder, .mb-search-container ::-ms-input-placeholder, .mb-search-container ::placeholder, .mb-search-container.dark ::-webkit-input-placeholder, .mb-search-container.dark ::-moz-placeholder, .mb-search-container.dark :-ms-input-placeholder, .mb-search-container.dark ::-ms-input-placeholder, .mb-search-container.dark ::placeholder, .digit-tag-wrapper .digit-tag-text {
     font-size: 1rem; } }
 
-.typography.body-s, .digit-bread-crumb--item .digit-bread-crumb-content, .digit-bread-crumb--item .digit-bread-crumb-content.current, .digit-bread-crumb--item .digit-bread-crumb-seperator, .digit-checkbox-container .label, .digit-header-content.label .info-icon .infotext, .digit-field .digit-charcount, .digit-field .digit-description, .digit-multiselectdropdown-wrap .digit-category-selectAll .category-selectAll-label, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem p, .digit-panelcard-wrap .digit-panelcard-children-wrap .digit-panelcard-description, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap .digit-popup-description, .digit-radio-options-wrap label, .digit-dropdown-item .option-des-container .main-option, .digit-dropdown-item.unsuccessfulresults span, .digit-stepper-container .digit-stepper-content .stepper-label, .digit-text-block-wrap .digit-text-block-body, .timeline-date, .digit-option-label, .digit-uploader-wrap .digit-uploader-content-uploadpopup .drag-drop-text, .digit-uploader-wrap .digit-uploadpopup-label, .digit-uploader-wrap .digit-uploader-input, .digit-uploader-wrap .digit-upload-helptext, .digit-viewcard-field-pair .digit-viewcard-value, .header-dropdown-label, .header-dropdown-option, .header-dropdown-nooption, .digit-topbar .digit-header-img-ulb-wrapper-mobileview .digit-topbar-ulb-mobileview, .sidebar .sidebar-search-container ::-webkit-input-placeholder, .sidebar .sidebar-search-container ::-moz-placeholder, .sidebar .sidebar-search-container :-ms-input-placeholder, .sidebar .sidebar-search-container ::-ms-input-placeholder, .sidebar .sidebar-search-container ::placeholder, .mb-search-container ::-webkit-input-placeholder, .mb-search-container ::-moz-placeholder, .mb-search-container :-ms-input-placeholder, .mb-search-container ::-ms-input-placeholder, .mb-search-container ::placeholder, .mb-search-container.dark ::-webkit-input-placeholder, .mb-search-container.dark ::-moz-placeholder, .mb-search-container.dark :-ms-input-placeholder, .mb-search-container.dark ::-ms-input-placeholder, .mb-search-container.dark ::placeholder, .typography.body-xs, .digit-tag-container .digit-tag .digit-text, .digit-dropdown-item .option-des-container .option-description, .digit-toggle-btn-wrap .digit-toggle-label, .digit-uploader-wrap .digit-img-container .preview-container .preview-file-name, .digit-uploader-wrap .digit-image-uploader .upload-image-label {
+.typography.body-s, .digit-bread-crumb--item .digit-bread-crumb-content, .digit-bread-crumb--item .digit-bread-crumb-content.current, .digit-bread-crumb--item .digit-bread-crumb-seperator, .digit-checkbox-container .label, .digit-header-content.label .info-icon .infotext, .digit-field .digit-charcount, .digit-field .digit-description, .digit-multiselectdropdown-wrap .digit-category-selectAll .category-selectAll-label, .digit-multiselectdropdown-wrap .digit-multiselectdropodwn-menuitem p, .digit-panelcard-wrap .digit-panelcard-children-wrap .digit-panelcard-description, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap, .digit-popup-overlay .digit-popup-wrapper .digit-popup-children-wrap .digit-popup-description, .digit-radio-options-wrap label, .digit-dropdown-item .option-des-container .main-option, .digit-dropdown-item.unsuccessfulresults span, .digit-stepper-container .digit-stepper-content .stepper-label, .digit-text-block-wrap .digit-text-block-body, .timeline-date, .digit-option-label, .digit-uploader-wrap .digit-uploader-content-uploadpopup .drag-drop-text, .digit-uploader-wrap .digit-uploadpopup-label, .digit-uploader-wrap .digit-uploader-input, .digit-uploader-wrap .digit-upload-helptext, .digit-viewcard-field-pair .digit-viewcard-value, .header-dropdown-label, .header-dropdown-option, .header-dropdown-nooption, .digit-topbar .digit-header-img-ulb-wrapper-mobileview .digit-topbar-ulb-mobileview, .sidebar .sidebar-search-container ::-webkit-input-placeholder, .sidebar .sidebar-search-container ::-moz-placeholder, .sidebar .sidebar-search-container :-ms-input-placeholder, .sidebar .sidebar-search-container ::-ms-input-placeholder, .sidebar .sidebar-search-container ::placeholder, .mb-search-container ::-webkit-input-placeholder, .mb-search-container ::-moz-placeholder, .mb-search-container :-ms-input-placeholder, .mb-search-container ::-ms-input-placeholder, .mb-search-container ::placeholder, .mb-search-container.dark ::-webkit-input-placeholder, .mb-search-container.dark ::-moz-placeholder, .mb-search-container.dark :-ms-input-placeholder, .mb-search-container.dark ::-ms-input-placeholder, .mb-search-container.dark ::placeholder, .digit-tag-wrapper .digit-tag-text, .typography.body-xs, .digit-tag-container .digit-tag .digit-text, .digit-dropdown-item .option-des-container .option-description, .digit-toggle-btn-wrap .digit-toggle-label, .digit-uploader-wrap .digit-img-container .preview-container .preview-file-name, .digit-uploader-wrap .digit-image-uploader .upload-image-label {
   font-family: Roboto;
   font-style: normal;
   font-weight: 400;
@@ -3433,7 +3433,7 @@ ol, ul {
   .digit-info-button.success {
     background-color: #00703c; }
   .digit-info-button.warning {
-    background-color: #ea8d00; }
+    background-color: #9e5f00; }
   .digit-info-button h1 {
     margin: 0;
     color: #fff !important; }
@@ -3521,10 +3521,10 @@ ol, ul {
       color: #00703c; }
   .digit-infobanner-wrap.warning {
     background-color: #fff9f0;
-    border: .063rem solid #ea8d00;
+    border: .063rem solid #9e5f00;
     border-left-width: .25rem; }
     .digit-infobanner-wrap.warning .digit-infobanner-header {
-      color: #ea8d00; }
+      color: #9e5f00; }
   .digit-infobanner-wrap.error {
     background-color: #fff5f4;
     border: .063rem solid #b91900;
@@ -8417,6 +8417,16 @@ video::-webkit-media-controls-panel {
   width: max-content;
   -webkit-transition: all .5s ease;
   transition: all .5s ease;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
   min-width: 4.125rem;
   max-width: 14.563rem;
   font-family: Roboto;
@@ -8433,46 +8443,262 @@ video::-webkit-media-controls-panel {
     .tooltip-content {
       font-size: 1rem; } }
 
+.tooltip-content.tooltip-bottom-start {
+  top: 3rem;
+  left: 0; }
+  .tooltip-content.tooltip-bottom-start.with-arrow {
+    border-top-left-radius: 0; }
+
+.tooltip-content.tooltip-bottom {
+  top: 3rem;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%); }
+
+.tooltip-content.tooltip-bottom-end {
+  top: 3rem;
+  right: 0; }
+  .tooltip-content.tooltip-bottom-end.with-arrow {
+    border-top-right-radius: 0; }
+
+.tooltip-content.tooltip-top-start {
+  bottom: 3rem;
+  left: 0; }
+  .tooltip-content.tooltip-top-start.with-arrow {
+    border-bottom-left-radius: 0; }
+
+.tooltip-content.tooltip-top {
+  bottom: 3rem;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%); }
+
+.tooltip-content.tooltip-top-end {
+  bottom: 3rem;
+  right: 0; }
+  .tooltip-content.tooltip-top-end.with-arrow {
+    border-bottom-right-radius: 0; }
+
+.tooltip-content.tooltip-left-start {
+  right: calc(100% + .5rem);
+  top: 0; }
+  .tooltip-content.tooltip-left-start.with-arrow {
+    border-top-right-radius: 0; }
+
 .tooltip-content.tooltip-left {
-  left: -10rem; }
+  right: calc(100% + .5rem);
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+.tooltip-content.tooltip-left-end {
+  right: calc(100% + .5rem);
+  bottom: 0; }
+  .tooltip-content.tooltip-left-end.with-arrow {
+    border-bottom-right-radius: 0; }
+
+.tooltip-content.tooltip-right-start {
+  left: calc(100% + .5rem);
+  top: 0; }
+  .tooltip-content.tooltip-right-start.with-arrow {
+    border-top-left-radius: 0; }
 
 .tooltip-content.tooltip-right {
-  left: 10rem; }
+  left: calc(100% + .5rem);
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
 
-.tooltip-content.tooltip-top {
-  top: -3.75rem; }
+.tooltip-content.tooltip-right-end {
+  left: calc(100% + .5rem);
+  bottom: 0; }
+  .tooltip-content.tooltip-right-end.with-arrow {
+    border-bottom-left-radius: 0; }
 
-.tooltip-content.tooltip-bottom {
-  top: 3.75rem; }
+.tooltip-bottom-start.with-arrow:before {
+  left: .25rem;
+  border-right: .5rem solid transparent; }
 
-.tooltip-left:before {
-  right: -.625rem; }
+.tooltip-bottom-start.with-arrow:before, .tooltip-bottom.with-arrow:before {
+  content: "";
+  position: absolute;
+  top: -.5rem;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-bottom: .5rem solid #505a5f; }
 
-.tooltip-left:before, .tooltip-right:before {
+.tooltip-bottom.with-arrow:before {
+  left: 50%;
+  border-left: .25rem solid transparent;
+  border-right: .25rem solid transparent; }
+
+.tooltip-bottom-end.with-arrow:before {
   content: "";
   position: absolute;
-  top: 0;
-  border: .625rem solid transparent;
-  border-top-color: #505a5f; }
+  top: -.5rem;
+  left: calc(100% - .25rem);
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-bottom: .5rem solid #505a5f;
+  border-left: .5rem solid transparent; }
+
+.tooltip-top-start.with-arrow:before {
+  left: .25rem;
+  border-right: .5rem solid transparent; }
+
+.tooltip-top-start.with-arrow:before, .tooltip-top.with-arrow:before {
+  content: "";
+  position: absolute;
+  bottom: -.5rem;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-top: .5rem solid #505a5f; }
 
-.tooltip-right:before {
-  left: -.625rem; }
+.tooltip-top.with-arrow:before {
+  left: 50%;
+  border-left: .25rem solid transparent;
+  border-right: .25rem solid transparent; }
 
-.tooltip-top:before {
+.tooltip-top-end.with-arrow:before {
   content: "";
   position: absolute;
-  bottom: -.625rem;
-  right: 0;
-  border: .625rem solid transparent;
-  border-right-color: #505a5f; }
+  bottom: -.5rem;
+  left: calc(100% - .25rem);
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  border-top: .5rem solid #505a5f;
+  border-left: .5rem solid transparent; }
+
+.tooltip-left-start.with-arrow:before {
+  top: .25rem;
+  right: -.45rem;
+  border-bottom: .5rem solid transparent; }
+
+.tooltip-left-start.with-arrow:before, .tooltip-left.with-arrow:before {
+  content: "";
+  position: absolute;
+  border-left: .5rem solid #505a5f;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+.tooltip-left.with-arrow:before {
+  top: 50%;
+  right: -.5rem;
+  border-top: .25rem solid transparent;
+  border-bottom: .25rem solid transparent; }
 
-.tooltip-bottom:before {
+.tooltip-left-end.with-arrow:before {
   content: "";
   position: absolute;
-  top: -.625rem;
-  left: 0;
-  border: .625rem solid transparent;
-  border-left-color: #505a5f; }
+  top: calc(100% - .25rem);
+  right: -.45rem;
+  border-left: .5rem solid #505a5f;
+  border-top: .5rem solid transparent;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+.tooltip-right-start.with-arrow:before {
+  top: .25rem;
+  left: -.45rem;
+  border-bottom: .5rem solid transparent; }
+
+.tooltip-right-start.with-arrow:before, .tooltip-right.with-arrow:before {
+  content: "";
+  position: absolute;
+  border-right: .5rem solid #505a5f;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+.tooltip-right.with-arrow:before {
+  top: 50%;
+  left: -.5rem;
+  border-top: .25rem solid transparent;
+  border-bottom: .25rem solid transparent; }
+
+.tooltip-right-end.with-arrow:before {
+  content: "";
+  position: absolute;
+  top: calc(100% - .25rem);
+  left: -.45rem;
+  border-right: .5rem solid #505a5f;
+  border-top: .5rem solid transparent;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+.digit-tag-wrapper {
+  border-radius: .25rem;
+  padding: .25rem .75rem;
+  grid-gap: .625rem;
+  gap: .625rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center; }
+  .digit-tag-wrapper.left {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start; }
+  .digit-tag-wrapper.right {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end; }
+  .digit-tag-wrapper svg {
+    -ms-flex-negative: 0;
+    flex-shrink: 0; }
+  .digit-tag-wrapper.success {
+    background-color: #f1fff8; }
+    .digit-tag-wrapper.success .digit-tag-text {
+      color: #00703c; }
+  .digit-tag-wrapper.error {
+    background-color: #fff5f4; }
+    .digit-tag-wrapper.error .digit-tag-text {
+      color: #b91900; }
+  .digit-tag-wrapper.warning {
+    background-color: #fff9f0; }
+    .digit-tag-wrapper.warning .digit-tag-text {
+      color: #9e5f00; }
+  .digit-tag-wrapper.monochrome {
+    background-color: #fafafa; }
+    .digit-tag-wrapper.monochrome .digit-tag-text {
+      color: #0b4b66; }
+  .digit-tag-wrapper.stroke.success {
+    border: .031rem solid #00703c; }
+  .digit-tag-wrapper.stroke.error {
+    border: .031rem solid #b91900; }
+  .digit-tag-wrapper.stroke.warning {
+    border: .031rem solid #9e5f00; }
+  .digit-tag-wrapper.stroke.monochrome {
+    border: .031rem solid #0b4b66; }
+  .digit-tag-wrapper .digit-tag-customIcon {
+    width: 1rem;
+    height: 1rem; }
+  .digit-tag-wrapper .digit-tag-text {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.37rem; }
+    @media (max-aspect-ratio: 9 / 16) {
+      .digit-tag-wrapper .digit-tag-text {
+        font-size: .875rem; } }
+    @media (min-aspect-ratio: 9 / 16) and (max-aspect-ratio: 3 / 4) {
+      .digit-tag-wrapper .digit-tag-text {
+        font-size: 1rem; } }
+    @media (min-aspect-ratio: 3 / 4) {
+      .digit-tag-wrapper .digit-tag-text {
+        font-size: 1rem; } }
+  .digit-tag-wrapper.cp:hover {
+    -webkit-box-shadow: 0 0.063rem 0.188rem 0.063rem rgba(0, 0, 0, 0.14902);
+    box-shadow: 0 0.063rem 0.188rem 0.063rem rgba(0, 0, 0, 0.14902);
+    -webkit-box-shadow: 0 0.063rem 0.125rem 0 rgba(0, 0, 0, 0.30196);
+    box-shadow: 0 0.063rem 0.125rem 0 rgba(0, 0, 0, 0.30196); }
 
 .bread-crumb.workbench-bredcrumb a {
   color: #f47738; }