@vitrosoftware/common-ui-ts 1.1.12 → 1.1.14

package/css/common.css

@@ -1,5 +1,4 @@
 @import url('@vitrosoftware/common-ui-ts/css/third-party/kendo/kendo.css');
-@import url('@vitrosoftware/common-ui-ts/css/third-party/treegrid/treegrid.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jstree/style.min.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.min.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.structure.css');
@@ -16,3 +15,36 @@
 :global(.vitro-opacity-normal) {
     opacity: 1;
 }
+
+:global(.vitro-title) {
+    font-size: 20px;
+    font-family: 'InterMedium';
+    line-height: 24px;
+    margin-right: 24px;
+    margin-bottom: 14px;
+}
+
+:global(.vitro-flex) {
+    display: flex;
+}
+
+:global(.vitro-title.vitro-border-bottom) {
+    border-bottom: 1px solid #E4E6EC;
+    margin-right: 12px;
+    margin-bottom: 0;
+    padding-bottom: 12px;
+}
+
+@media (max-width: 800px) {
+    :global(.vitro-title) {
+        padding-bottom: 8px;
+        font-size: 18px;
+        line-height: 27px;
+        margin: 0;
+    }
+
+    :global(.pane) > :global(.vitro-flex) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}

package/css/std/controls/action-handler/action-handler-info.css

@@ -0,0 +1,103 @@
+.vitro-info-container {
+    width: 100%;
+    padding-top: 16px;
+    margin-top: 16px;
+    border-top: 1px solid #E4E6EC;
+}
+
+.vitro-action-info {
+    color: #4A556C;
+    font-size: 14px;
+    line-height: 21px;
+    margin-left: 32px;
+}
+
+.vitro-item-container {
+    margin-top: 16px;
+}
+
+.vitro-item {
+    display: flex;
+    margin-bottom: 4px;
+    height: 32px;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.vitro-item:last-child {
+    margin-bottom: 0;
+}
+
+.vitro-title {
+    color: #222D44;
+    font-size: 12px;
+    line-height: 16px;
+}
+
+.vitro-subtitle {
+    color: #8E98A3;
+    font-size: 11px;
+    line-height: 16px;
+}
+
+.vitro-progress-bar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #3274E0;
+    position: relative;
+    margin-left: 12px;
+}
+
+.vitro-progress-bar::before {
+    content: '';
+    display: block;
+    width: 28px;
+    height: 28px;
+    background: #fff;
+    border-radius: 50%;
+    position: absolute;
+    top: calc(50% - 14px);
+    left: calc(50% - 14px);
+}
+
+.vitro-button-cancel {
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    z-index: 100;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.50488 11.4965L8.00022 8.00119L11.4955 11.4965M11.4955 4.50586L7.99955 8.00119L4.50488 4.50586' stroke='%23999B9D' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.vitro-success,
+.vitro-progress,
+.vitro-error,
+.vitro-status {
+    font-size: 12px;
+    line-height: 16px;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-success {
+    color: #198754;
+}
+
+.vitro-progress {
+    color: #2A63F6;
+}
+
+.vitro-error {
+    color: #D13438;
+}
+
+.vitro-status {
+    color: #4A556C;
+}

package/css/std/controls/action-handler/action-handler.css

@@ -0,0 +1,247 @@
+.vitro-action-handler > :global(div.popover) {
+    z-index: 10000;
+    max-width: unset !important;
+    border: none;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
+}
+
+.vitro-icon-before,
+.vitro-icon-progress,
+.vitro-icon-success,
+.vitro-icon-error {
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.vitro-icon-before {
+    width: 42px;
+    height: 42px;
+    margin-right: 16px;
+}
+
+.vitro-icon-progress,
+.vitro-icon-success,
+.vitro-icon-error,
+.vitro-icon-warning {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+}
+
+.vitro-icon-before {
+    /* question.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='help-question'%3E%3Cpath id='Vector' d='M21.0005 36.751C29.6993 36.751 36.751 29.6993 36.751 21.0005C36.751 12.3017 29.6993 5.25 21.0005 5.25C12.3017 5.25 5.25 12.3017 5.25 21.0005C5.25 29.6993 12.3017 36.751 21.0005 36.751Z' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M16.7656 16.7561C16.7656 15.9174 17.0146 15.0976 17.4809 14.4002C17.9473 13.7029 18.6102 13.1594 19.3858 12.8384C20.1613 12.5175 21.0147 12.4335 21.838 12.5971C22.6614 12.7607 23.4177 13.1646 24.0112 13.7576C24.6048 14.3507 25.0091 15.1063 25.1728 15.9289C25.3366 16.7514 25.2526 17.6041 24.9313 18.3789C24.6101 19.1538 24.066 19.816 23.3681 20.282C22.6701 20.7479 21.8495 20.9966 21.01 20.9966V23.8236' stroke='%23222D44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='Group 2567'%3E%3Cpath id='Vector_3' d='M21.0042 29.3835C20.6697 29.3835 20.3984 29.1122 20.3984 28.7777C20.3984 28.4431 20.6697 28.1719 21.0042 28.1719' stroke='%23222D44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_4' d='M21 29.3835C21.3346 29.3835 21.6058 29.1122 21.6058 28.7777C21.6058 28.4431 21.3346 28.1719 21 28.1719' stroke='%23222D44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-icon-progress {
+    /* preloader.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' style='margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;' class='ng-star-inserted'%3E%3Cg transform='rotate(0 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23347FDE'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.875s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(45 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23347FDE'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.75s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(90 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23347FDE'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.625s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(135 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23347FDE'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.5s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23347FDE'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.375s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(225 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23347FDE'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.25s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23347FDE'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.125s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(315 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23347FDE'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
+}
+
+.vitro-icon-error {
+    /* error.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='check-one /Line/Black'%3E%3Cpath id='Vector' d='M12 22.0039C14.7614 22.0039 17.2614 20.8846 19.071 19.075C20.8807 17.2653 22 14.7653 22 12.0039C22 9.24251 20.8807 6.74251 19.071 4.93284C17.2614 3.1232 14.7614 2.00391 12 2.00391C9.2386 2.00391 6.7386 3.1232 4.92893 4.93284C3.11929 6.74251 2 9.24251 2 12.0039C2 14.7653 3.11929 17.2653 4.92893 19.075C6.7386 20.8846 9.2386 22.0039 12 22.0039Z' fill='%23D13438'/%3E%3Cpath id='Vector_2' d='M9 15L12 12L15 15M15 9L11.9994 12L9 9' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-icon-success {
+    /* success.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='check-one /Line/Black'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath id='Vector' d='M12 22C14.7614 22 17.2614 20.8807 19.0711 19.0711C20.8807 17.2614 22 14.7614 22 12C22 9.2386 20.8807 6.7386 19.0711 4.92893C17.2614 3.11929 14.7614 2 12 2C9.2386 2 6.7386 3.11929 4.92893 4.92893C3.11929 6.7386 2 9.2386 2 12C2 14.7614 3.11929 17.2614 4.92893 19.0711C6.7386 20.8807 9.2386 22 12 22Z' fill='%23198754'/%3E%3Cpath id='Vector_2' d='M8 12L11 15L16 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-icon-warning {
+    /* warning.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='check-one /Line/Black'%3E%3Cpath id='Vector' d='M12 22.0039C14.7614 22.0039 17.2614 20.8846 19.071 19.075C20.8807 17.2653 22 14.7653 22 12.0039C22 9.24251 20.8807 6.74251 19.071 4.93284C17.2614 3.1232 14.7614 2.00391 12 2.00391C9.2386 2.00391 6.7386 3.1232 4.92893 4.93284C3.11929 6.74251 2 9.24251 2 12.0039C2 14.7653 3.11929 17.2653 4.92893 19.075C6.7386 20.8846 9.2386 22.0039 12 22.0039Z' fill='%23F3AD4A'/%3E%3Cg id='Vector_2'%3E%3Cpath d='M12 6V12Z' fill='white'/%3E%3Cpath d='M12 6V12' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Ccircle id='Ellipse 135' cx='12' cy='17' r='1' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-action-handler :global(.popover-body) {
+    padding: 24px;
+    width: 460px;
+    height: 170px;
+}
+
+.vitro-action-handler :global(.popover-body) .vitro-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.vitro-flex {
+    align-items: center;
+    display: flex;
+}
+
+:global(.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before), :global(.bs-popover-bottom > .popover-arrow::before) {
+    border-bottom-color: rgba(0, 0, 0, 0.12);
+}
+
+.vitro-interface-blur {
+    position: absolute;
+    z-index: 100000;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+}
+
+.vitro-action-handler-dialog-confirm, .vitro-action-handler-dialog {
+    z-index: 100000;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+}
+
+.vitro-content-container {
+    padding: 16px;
+    flex: 1 1;
+}
+
+.vitro-confirm .vitro-content-container {
+    padding: 0;
+}
+
+.vitro-content {
+    width: 100%;
+    height: 100%;
+}
+
+.vitro-action-handler-dialog-confirm {
+    height: 100vh;
+    width: 100vw;
+    background: rgba(34, 45, 68, 0.2);
+}
+
+.vitro-action-handler-dialog-confirm .vitro-content {
+    padding: 24px;
+    width: 460px;
+    height: 170px;
+    background: #fff;
+    border-radius: 4px;
+    border: 1px solid #C0CAD5;
+    position: absolute;
+    top: calc(50% - 75px);
+    left: calc(50% - 230px);
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
+    display: flex;
+    flex-direction: column;
+}
+
+.vitro-action-handler-dialog {
+    height: auto;
+    width: 450px;
+    top: 56px;
+    right: 24px;
+    overflow: hidden;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    background: #fff;
+}
+
+.vitro-action-handler-dialog .vitro-flex,
+:global(.popover-body) .vitro-flex {
+    overflow: hidden;
+}
+
+.vitro-action-handler-dialog .vitro-flex > span {
+    font-size: 14px;
+    flex: 1 1;
+}
+
+.vitro-progress {
+    width: 100%;
+    background-color: transparent;
+    overflow: hidden;
+    margin-top: -4px;
+}
+
+.vitro-progress-bar {
+    width: 1%;
+    height: 4px;
+    background: #3274E0;
+}
+
+.vitro-flex > span {
+    color: #222D44;
+    font-size: 18px;
+    line-height: 150%;
+}
+
+.vitro-small {
+    color: #4A556C;
+    font-size: 14px;
+    line-height: 150% !important;
+    margin-left: 59px;
+    flex: 1 1;
+    margin-top: -5px;
+}
+
+.vitro-button-close {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-left: 10px;
+    /* close-red.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconoir:cancel'%3E%3Cpath id='Vector' d='M4.79688 19.2008L11.9969 12.0008L19.1969 19.2008M19.1969 4.80078L11.9955 12.0008L4.79688 4.80078' stroke='%23D13438' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-success .vitro-button-close,
+.vitro-warning .vitro-button-close,
+.vitro-error .vitro-button-close {
+    /* close.svg URL-encoder for SVG */
+    margin-left: 8px;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconoir:cancel'%3E%3Cpath id='Vector' 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/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-cancel {
+    cursor: pointer;
+    background: #fff !important;
+    color: #222D44 !important;
+    border: 1px solid #E4E6EC !important;
+    margin-right: 12px !important;
+}
+
+.vitro-button-cancel:hover, .vitro-button-cancel:active {
+    background: #F3F8FF !important;
+}
+
+.vitro-button, .vitro-button-cancel {
+    min-width: 145px !important;
+    height: 44px !important;
+    font-size: 18px !important;
+}
+
+.vitro-success {
+    border-left: 4px solid #198754;
+}
+
+.vitro-error {
+    border-left: 4px solid #D13438;
+}
+
+.vitro-warning {
+    border-left: 4px solid #F3AD4A;
+}
+
+.vitro-button-collapse-up,
+.vitro-button-collapse-bottom {
+    width: 24px;
+    height: 24px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+
+.vitro-button-collapse-bottom {
+    /* collapse-up.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Chevron-dropdown-Big'%3E%3Cpath id='Vector 9' d='M19.5 9L12 16.5L4.5 9' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-collapse-up {
+    /* collapse-bottom.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 16.5L12 9L19.5 16.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}

package/css/std/controls/alert/alert.css

@@ -0,0 +1,184 @@
+.vitro-alert {
+    border: 0;
+    z-index: 1000;
+    position: absolute;
+    right: 0;
+    width: 450px;
+    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;
+    padding: 12px !important;
+}
+
+:global(#Timesheets) .vitro-alert {
+    position: relative;
+    width: 100%;
+    margin-top: -12px;
+    margin-bottom: 24px !important;
+    top: 0 !important;
+    left: 0 !important;
+    transform: none !important;
+}
+
+.vitro-alert-content {
+    display: flex;
+    align-items: start;
+    height: auto;
+}
+
+.vitro-button-close {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconoir:cancel'%3E%3Cpath id='Vector' 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/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    align-self: center;
+}
+
+.vitro-text {
+    display: flex;
+    flex-grow: 1;
+    font-size: 14px;
+    line-height: 21px;
+    color: #4A556C;
+    flex-direction: column;
+}
+
+.vitro-text > strong {
+    color: #222D44;
+    display: block;
+}
+
+.vitro-text a {
+    text-decoration: underline;
+}
+
+.vitro-text p {
+    margin: 0px;
+}
+
+.vitro-alert-action-list {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: auto;
+    align-items: center;
+    margin-right: 6px;
+    margin-left: 8px;
+    padding: 0px;
+}
+
+.vitro-position-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.vitro-alert ul:global(.errorList) {
+    -webkit-font-smoothing: antialiased;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+    list-style: disc;
+    max-height: 440px;
+    overflow: hidden;
+    display: block;
+}
+
+.vitro-alert > ul:global(.errorList) {
+    list-style: decimal;
+}
+
+.vitro-alert > ul:global(.errorList) > li a {
+    text-decoration: underline;
+}
+
+.vitro-alert a:global(.link) {
+    text-decoration: underline;
+    white-space: pre-wrap;
+}
+
+.vitro-alert button:global(.btn) {
+    margin-left: 8px;
+    background: white;
+    color: #616365;
+    font-size: 13px;
+    padding: 0.1rem 16px;
+    border: 1px solid rgb(138, 136, 134);
+    font-weight: 600;
+    min-width: 80px;
+    border-radius: 2px;
+}
+
+.vitro-alert :global(.btn):active, 
+.vitro-alert :global(.btn):focus {
+  outline: none !important;
+}
+
+.vitro-alert > div :global(.header) {
+    font-weight: 500;
+    font-size: 15px;
+}
+
+.vitro-alert button:global(.close) {
+    position: relative;
+    padding: 0.2rem;
+}
+
+.vitro-alert button:global(.btn.error) {
+    margin-left: 8px;
+    font-size: 13px;
+    font-weight: bold;
+    padding: 0.1rem 0.75rem;
+    border-radius: 0;
+}
+
+.vitro-alert :global(.btn.danger),
+.vitro-alert :global(.btn.warning) {
+    margin: 5px;
+}
+
+.vitro-alert:global(.alert-danger),
+.vitro-alert:global(.alert-success),
+.vitro-alert:global(.alert-warning) {
+    border: none;
+    background-color: #fff !important;
+    color: #222d44;
+}
+
+.vitro-alert:global(.alert-danger) {
+    border-left: 4px solid #D13438;
+}
+
+.vitro-alert:global(.alert-success) {
+    border-left: 4px solid #198754;
+}
+
+.vitro-alert:global(.alert-warning) {
+    border-left: 4px solid #F3AD4A;
+}
+
+.vitro-alert:global(.alert-danger) .vitro-icon {
+    /* error.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='check-one /Line/Black'%3E%3Cpath id='Vector' d='M12 22.0039C14.7614 22.0039 17.2614 20.8846 19.071 19.075C20.8807 17.2653 22 14.7653 22 12.0039C22 9.24251 20.8807 6.74251 19.071 4.93284C17.2614 3.1232 14.7614 2.00391 12 2.00391C9.2386 2.00391 6.7386 3.1232 4.92893 4.93284C3.11929 6.74251 2 9.24251 2 12.0039C2 14.7653 3.11929 17.2653 4.92893 19.075C6.7386 20.8846 9.2386 22.0039 12 22.0039Z' fill='%23D13438'/%3E%3Cpath id='Vector_2' d='M9 15L12 12L15 15M15 9L11.9994 12L9 9' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-alert:global(.alert-success) .vitro-icon {
+    /* success.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='check-one /Line/Black'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath id='Vector' d='M12 22C14.7614 22 17.2614 20.8807 19.0711 19.0711C20.8807 17.2614 22 14.7614 22 12C22 9.2386 20.8807 6.7386 19.0711 4.92893C17.2614 3.11929 14.7614 2 12 2C9.2386 2 6.7386 3.11929 4.92893 4.92893C3.11929 6.7386 2 9.2386 2 12C2 14.7614 3.11929 17.2614 4.92893 19.0711C6.7386 20.8807 9.2386 22 12 22Z' fill='%23198754'/%3E%3Cpath id='Vector_2' d='M8 12L11 15L16 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-alert:global(.alert-warning) .vitro-icon {
+    /* warning.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='check-one /Line/Black'%3E%3Cpath id='Vector' d='M12 22.0039C14.7614 22.0039 17.2614 20.8846 19.071 19.075C20.8807 17.2653 22 14.7653 22 12.0039C22 9.24251 20.8807 6.74251 19.071 4.93284C17.2614 3.1232 14.7614 2.00391 12 2.00391C9.2386 2.00391 6.7386 3.1232 4.92893 4.93284C3.11929 6.74251 2 9.24251 2 12.0039C2 14.7653 3.11929 17.2653 4.92893 19.075C6.7386 20.8846 9.2386 22.0039 12 22.0039Z' fill='%23F3AD4A'/%3E%3Cg id='Vector_2'%3E%3Cpath d='M12 6V12Z' fill='white'/%3E%3Cpath d='M12 6V12' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Ccircle id='Ellipse 135' cx='12' cy='17' r='1' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
+}