@milestone-sys/web-design-system 3.6.3 → 3.6.4

package/components/raw/tab-tile/tab-tile.scss

@@ -1,256 +0,0 @@
-@mixin border-bottom {
-  position: absolute;
-  border-top: unset;
-  top: unset;
-  bottom: 0px;
-  left: -0.0625rem;
-  content: ' ';
-  display: block;
-  width: 100%;
-  height: calc(100% + 2px);
-  border-radius: none;
-}
-
-@mixin border-top {
-  position: absolute;
-  top: -4px;
-  left: -0.0625rem;
-  content: ' ';
-  display: block;
-  height: 0%;
-  width: calc(100% + 2px);
-  border-radius: 2px 2px 0 0;
-}
-
-.msds-tabs {
-  &--sticky-tabs {
-    top: 0;
-    position: sticky;
-  }
-
-  &__container {
-    display: flex;
-    flex-direction: row;
-    z-index: $zindex-element-1;
-  }
-
-  &__tabs-container {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0;
-  }
-
-  &__tab {
-    position: relative;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: center;
-    border-top: 4px solid transparent;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-    border-radius: 2px 2px 0 0;
-    margin-left: 0;
-    margin-right: 0;
-    @extend .msds-text-body-1-bold;
-    text-align: center;
-    color: $gray-9;
-    cursor: pointer;
-    padding: 20px 16px 24px 16px;
-    border-bottom: 1px solid $gray-4;
-
-    &:hover {
-      color: $clear-blue;
-    }
-
-    &:focus {
-      outline: none;
-
-      &:after {
-        border-top: 4px solid $gray-7;
-        @include border-top();
-      }
-    }
-  }
-
-  &__tab--active {
-    border-top: 4px solid $clear-blue;
-    border-left: 1px solid $gray-4;
-    border-right: 1px solid $gray-4;
-    border-bottom: none;
-    background: $white;
-    color: $clear-blue;
-
-    &:after {
-      @include border-top();
-      border-top: 4px solid $clear-blue;
-    }
-
-    &:focus {
-      &:after {
-        @include border-top();
-        border-top: 4px solid $clear-blue;
-      }
-    }
-  }
-
-  &__tab--disabled {
-    color: $gray-7;
-    pointer-events: none;
-    svg {
-      filter: grayscale(100%);
-    }
-    .msds-tab__tab--active {
-      border-top: 4px solid $gray-5;
-    }
-    &:hover {
-      color: $gray-7;
-    }
-    &.msds-tab__tab--active {
-      border-top: 4px solid $gray-5;
-    }
-    &.msds-tab__tab--small {
-      &.msds-tab__tab--active {
-        border-bottom: 4px solid $gray-5;
-        border-top: 4px solid $white;
-      }
-    }
-  }
-
-  &__tab--small {
-    padding: 20px 20px 12px 20px;
-    border-top: 0px solid transparent;
-    border-left: none;
-    border-right: none;
-    text-align: center;
-    min-width: 120px;
-    @extend .msds-text-body-2;
-    border-bottom: 0.7px solid $gray-4;
-
-    .msds-tab-tile__svg {
-      max-width: 80px;
-      max-height: 60px;
-      margin-bottom: 12px;
-      align-items: center;
-      display: flex;
-      justify-content: center;
-
-      &--icon {
-        height: inherit;
-        width: 100%;
-      }
-    }
-
-    &.msds-tabs__tab--active {
-      background-color: transparent;
-      &:after {
-        @include border-bottom();
-        border-top: unset;
-        border-bottom: 3px solid $clear-blue;
-      }
-
-      &:focus {
-        &:after {
-          @include border-bottom();
-          border-top: unset;
-          border-bottom: 3px solid $clear-blue;
-        }
-      }
-
-      &.msds-tabs__tab {
-        border-top: unset;
-      }
-    }
-
-    &:focus {
-      &:after {
-        @include border-bottom();
-        border-top: unset;
-        border-bottom: 3px solid $gray-7;
-      }
-    }
-
-    &:active {
-      &:after {
-        @include border-bottom();
-        border-top: unset;
-        border-bottom: 3px solid $gray-7;
-      }
-    }
-  }
-
-  &--center-tabs {
-    justify-content: center;
-  }
-
-  &__tab-svg {
-    width: 120px;
-    height: 90px;
-    margin-bottom: 20px;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    &--icon {
-      height: inherit;
-      width: 100%;
-    }
-  }
-
-  &__tab-text {
-    width: 100%;
-  }
-
-  &__content-container {
-    display: none;
-    min-height: 100px;
-
-    &--visible {
-      display: block;
-    }
-  }
-}
-
-.msds-tabs-other-content {
-  height: 100vh;
-}
-
-@include media-breakpoint-down(md) {
-  .msds-tabs {
-    &__tabs-container {
-      max-width: 100vw;
-      flex-wrap: nowrap;
-      overflow-x: scroll;
-
-      &::-webkit-scrollbar {
-        height: 5px;
-        border-radius: 5%;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-        background: rgba(174, 191, 200, 0.6);
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .msds-tabs {
-    &__spacer {
-      flex-grow: 1;
-      border-bottom: 1px solid $gray-4;
-    }
-
-    &__tab--active {
-      border-bottom: none;
-    }
-  }
-}

package/components/render/accordion-checkbox-large.html

@@ -1,55 +0,0 @@
-
-
-<div class="msds-accordion msds-accordion--large">
-    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-large-1">
-        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-large-1">
-            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <svg>
-                    <use href="../../msds-spritemap.svg#right-arrow" />
-                </svg>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-large-2">
-        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-large-2">
-            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <svg>
-                    <use href="../../msds-spritemap.svg#right-arrow" />
-                </svg>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-</div>
-

package/components/render/accordion-checkbox-medium-dark.html

@@ -1,55 +0,0 @@
-
-
-<div class="msds-accordion msds-accordion--dark">
-    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_checkbox-medium-1">
-        <label class="msds-accordion__list-item-header" for="accordion-list-item_checkbox-medium-1">
-            <span class="msds-accordion__list-item-header-title">Accordion List Item 1 - Multiple List items Open At Any Time</span>
-            <span class="msds-accordion__list-item-header-icon">
-                <svg>
-                    <use href="../../msds-spritemap.svg#right-arrow" />
-                </svg>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_checkbox-medium-2">
-        <label class="msds-accordion__list-item-header" for="accordion-list-item_checkbox-medium-2">
-            <span class="msds-accordion__list-item-header-title">Accordion List Checkbox Item 1 - Multiple List items Open At Any Time</span>
-            <span class="msds-accordion__list-item-header-icon">
-                <svg>
-                    <use href="../../msds-spritemap.svg#right-arrow" />
-                </svg>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-</div>
-

package/components/render/accordion-checkbox-medium-disabled.html

@@ -1,56 +0,0 @@
-
-
-<div class="msds-accordion">
-    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-disabled" disabled>
-        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-disabled">
-            <span class="msds-accordion__list-item-header-title">Accordion Disabled 1 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <svg>
-                    <use href="../../msds-spritemap.svg#right-arrow" />
-                </svg>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-enabled">
-        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-enabled">
-            <span class="msds-accordion__list-item-header-title">Accordion Enabled 1 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <svg>
-                    <use href="../../msds-spritemap.svg#right-arrow" />
-                </svg>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 2 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-</div>
-
-

package/components/render/accordion-checkbox-medium-filtered-list-items.html

@@ -1,58 +0,0 @@
-
-
-<div class="msds-accordion msds-accordion--filter-list-item">
-    <div class="msds-accordion__list-item 
-                    msds-accordion__list-item--animate-icon-rotate">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-as-filter">
-        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-medium-as-filter">
-            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <svg>
-                    <use href="../../msds-spritemap.svg#right-arrow" />
-                </svg>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-    <div class="msds-accordion__list-item 
-                    msds-accordion__list-item--animate-icon-rotate">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-as-filter2">
-        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-medium-as-filter2">
-            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <svg>
-                    <use href="../../msds-spritemap.svg#right-arrow" />
-                </svg>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-</div>
-
-

package/components/render/accordion-checkbox-medium-icon-left-floating-dark-yellow.html

@@ -1,69 +0,0 @@
-
-
-<div class="msds-accordion msds-accordion--floating-list-item msds-accordion--dark-yellow">
-    <div class="msds-accordion__list-item">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-icon-left-floating-dark-yellow-1">
-        <label class="msds-accordion__list-item-header 
-                        msds-accordion__list-item-header--left-icon" 
-               for="accordion-list-item_overview-medium-icon-left-floating-dark-yellow-1">
-            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <div class="msds-btn-floating">
-                    <svg class="msds-icon msds-icon--unchecked">
-                        <use href="../../msds-spritemap.svg#knowledgebase"></use>
-                    </svg>
-                    <svg class="msds-icon msds-icon--checked">
-                        <use href="../../msds-spritemap.svg#cross"></use>
-                    </svg>
-                </div>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-      <div class="msds-accordion__list-item">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-icon-left-floating-dark-yellow-2">
-        <label class="msds-accordion__list-item-header 
-                        msds-accordion__list-item-header--left-icon" 
-               for="accordion-list-item_overview-medium-icon-left-floating-dark-yellow-2">
-            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 2 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <span class="msds-btn-floating">
-                    <svg class="msds-icon msds-icon--unchecked">
-                        <use href="../../msds-spritemap.svg#demo"></use>
-                    </svg>
-                    <svg class="msds-icon msds-icon--checked">
-                        <use href="../../msds-spritemap.svg#cross"></use>
-                    </svg>
-                </span>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-</div>
-

package/components/render/accordion-checkbox-medium-icon-left-floating.html

@@ -1,69 +0,0 @@
-
-
-<div class="msds-accordion msds-accordion--floating-list-item">
-    <div class="msds-accordion__list-item">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-icon-left-floating-1">
-        <label class="msds-accordion__list-item-header 
-                        msds-accordion__list-item-header--left-icon" 
-               for="accordion-list-item_overview-medium-icon-left-floating-1">
-            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <span class="msds-btn-floating">
-                    <svg class="msds-icon msds-icon--unchecked">
-                        <use href="../../msds-spritemap.svg#knowledgebase"></use>
-                    </svg>
-                    <svg class="msds-icon msds-icon--checked">
-                        <use href="../../msds-spritemap.svg#cross"></use>
-                    </svg>
-                </span>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-      <div class="msds-accordion__list-item">
-        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-icon-left-floating-2">
-        <label class="msds-accordion__list-item-header 
-                        msds-accordion__list-item-header--left-icon" 
-               for="accordion-list-item_overview-medium-icon-left-floating-2">
-            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 2 </span>
-            <span class="msds-accordion__list-item-header-icon">
-                <span class="msds-btn-floating">
-                    <svg class="msds-icon msds-icon--unchecked">
-                        <use href="../../msds-spritemap.svg#demo"></use>
-                    </svg>
-                    <svg class="msds-icon msds-icon--checked">
-                        <use href="../../msds-spritemap.svg#cross"></use>
-                    </svg>
-                </span>
-            </span>
-        </label>
-        <div class="msds-accordion__list-item-body">
-            <div class="msds-accordion__list-item-subtitle">
-                This is the Accordion List Item 1 long title
-            </div>
-            <div class="msds-accordion__list-item-description">
-                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                </span>
-            </div>
-        </div>
-    </div>
-</div>
-