/*@bst-box*/

.bst-box {
    height: 100%;
    position: relative;
}
.bst-box .bst-content {
    margin-left: 2px;
    padding-left: 280px;
    min-height: 100%;
    position: relative;
}
.bst-box .bst-leftbar {
    position: absolute;
    width: 280px;
    min-height: 100%;
    background: #33363d;
    z-index: 2;
}
.modal.modal-fullscreen .content-full-screan .bst-box .bst-leftbar {
    position: fixed;
    min-height: calc(100% - 130px);
}
.bst-leftbar>ul {
    margin: 0px;
    padding: 0px;
}
.bst-leftbar li>a {
    cursor: pointer;
    color: #FFFFFF;
}
.bst-leftbar>ul>li>a {
    background: #53565d;
    font-size: 12px;
    color: #FFFFFF;
    padding: 10px;
    position: relative;
    display: block;
    text-decoration: none;
    text-align: center;
    -webkit-box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}
.bst-leftbar>ul>li>ul {
    margin: 12px;
    padding: 0px;
    margin-bottom: 0px;
    position: relative;
}
.bst-leftbar>ul>li>ul::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.bst-leftbar>ul>li>ul>li {
    position: relative;
    margin: 0px;
    padding: 0px;
    padding-bottom: 12px;
    width: 50%;
    display: inline-block;
    float: left;
}
.bst-leftbar>ul>li>ul>li>a {
    display: block;
    text-align: center;
    background: #4c4f56;
    padding-top: 15px;
    padding-bottom: 5px;
    border: 1px solid #333;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.bst-leftbar>ul>li>ul>li>a:hover {
    -webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.75);
}
.bst-leftbar>ul>li>ul>li>a.active {
    border: 1px solid #e5e5e5;
}
.bst-leftbar>ul>li>ul>li:nth-child(odd) {
    /**/
}
.bst-leftbar>ul>li>ul>li:nth-child(even) {
    padding-left: 12px;
}
.bst-leftbar>ul>li>ul>li>a .icon {
    font-size: 75px;
}
.bst-leftbar>ul>li>ul>li>a .title {
    display: block;
    text-align: center;
    padding: 5px 8px;
}
.bst-content>.bst-content-header {
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 15px;
    font-size: 14px;
}
.bst-angle-right {
    color: #999;
    margin-right: 10px;
    margin-left: 10px;
}
table.bst-table-list {
    width: 100%;
}
table.bst-table-list thead>tr>th {
    height: 35px;
    font-weight: normal;
    line-height: 34px;
    background: #f1f9ff;
}
table.bst-table-list thead>tr>th, table.bst-table-list tbody>tr>td {
    padding-right: 15px;
    padding-left: 15px;
    outline: 0;
    border-right: 1px solid #d8e5f0;
    border-bottom: 1px solid #d8e5f0;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
table.bst-table-list tbody>tr>td {
    height: 35px;
    font-weight: normal;
    line-height: 34px;
}
/*@bst-box end*/

.CodeMirror {
    border: 1px solid black;
}
/*@editor component*/

.editor-component .component-viewer, .editor-component .component-editor-header {
    /*position: absolute;*/
    padding: 10px;
    margin: 5px;
    /*right: 0;*/
    /*z-index: 1050;*/
}
.editor-component .component-editor-header>ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    background: #121a24;
    border-radius: 3px;
}
.editor-component .component-editor-header>ul::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.editor-component .component-editor-header>ul>li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    float: left;
    /*border-right: 1px solid #ccc;*/
}
.editor-component .component-editor-header>ul>li:last-child {
    /*border-right: none;*/
}
.editor-component .component-editor-header>ul>li>a {
    min-width: 40px;
    line-height: 20px;
    padding: 7px;
    color: #fff;
    cursor: pointer;
    display: block;
    text-align: center;
}
.editor-component .component-editor-header>ul>li>a.title {
    cursor: initial;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.editor-component .component-editor-header>ul>li>a.title:hover, .editor-component .component-editor-header>ul>li>a.title:focus {
    //
}
.editor-component .component-editor-header>ul>li>a:hover, .editor-component .component-editor-header>ul>li>a:focus {
    background: transparent;
}
.editor-component .component-editor-header>ul>li>a:first-child {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
.editor-component .component-editor-header>ul>li>a:last-child {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
.editor-component {
    border: 1px dotted #121a24;
}
/*@editor component end*/

/*@froala editor*/

.fr-wrapper>div:first-child {
    display: none !important;
}
/*@ui-web-componentes*/

.modal.modal-fix {
    text-align: center;
    padding: 0!important;
}
.modal.modal-fix:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.modal.modal-fix .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
.modal.modal-fix {}
.modal.modal-fix .modal-header>h4 {
    font-size: 14px;
}
.maximize-modal {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.modal.modal-fix .modal-footer>button {
    font-size: 12px;
    padding: 7px 12px;
    min-width: 100px;
    font-style: normal;
    font-weight: initial;
    text-transform: initial;
}
ui-web-componentes {
    display: block;
    min-height: 35px;
}
ui-web-componentes::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
ui-web-componentes>ul.tools {
    list-style: none;
    margin: 5px;
    padding: 0px;
    background: #121a24;
    border-radius: 3px;
    position: absolute;
    right: 0;
    z-index: 1005;
    border: 1px solid #ccc;
}
ui-web-componentes>ul.tools::after, .ui-froala::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
ui-web-componentes>ul.tools>li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    float: left;
    /*border-right: 1px solid #ccc;*/
}
ui-web-componentes>ul.tools>li:last-child {
    /*border-right: none;*/
}
ui-web-componentes>ul.tools>li>a {
    font-size: 12px;
    min-width: 30px;
    line-height: 16px;
    padding: 5px;
    color: #fff;
    cursor: pointer;
    display: block;
    text-align: center;
}
ui-web-componentes>ul.tools>li>a.title {
    cursor: initial;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
ui-web-componentes>ul.tools>li>a.title:hover, ui-web-componentes>ul.tools>li>a.title:focus {
    /**/
}
ui-web-componentes>ul.tools>li>a:hover, ui-web-componentes>ul.tools>li>a:focus {
    background: transparent;
}
ui-web-componentes>ul.tools>li>a:first-child {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
ui-web-componentes>ul.tools>li>a:last-child {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
ui-web-componentes>ul.tools .tooltip-inner {
    max-width: 500px;
}
.custom-layer {
    text-align: center;
    padding: 10px;
}
[ui-web-data-component] .ui-btn-ctrl {
    display: block;
    position: absolute;
    padding: 2px 3px 2px 6px !important;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 2px;
    text-align: center;
    z-index: 2;
    left: 50%;
    transform: translate(-50%);
}
.CodeMirror-hints {
    z-index: 999999 !important;
}
.modal.modal-fullscreen-light {
    padding: 7px !important;
    margin: 0px;
    overflow: hidden;
}
.modal.modal-fullscreen-light>.modal-dialog {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-top: 0px;
    margin-bottom: 0px;
}
.modal.modal-fullscreen-light>.modal-dialog>.modal-content {
    height: 100%;
    overflow: hidden;
}
.modal.modal-fullscreen-light>.modal-dialog>.modal-content>.modal-body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-bottom: 15%;
}
.modal.modal-fullscreen-light>.modal-dialog>.modal-content>.modal-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 1050;
    background: #fff;
}
div::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em
}
div::-webkit-scrollbar-thumb {
    /*background: #666*/
    background: rgba(0, 0, 0, 0.37);
}
div::-webkit-scrollbar-track {
    background: none;
}
body.modal-open {
    overflow: hidden !important;
}
.menu-ctm {
    position: fixed;
    width: 200px;
    padding: 2px;
    margin: 0;
    border: 1px solid #bbb;
    background: #eee;
    background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
    background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
    z-index: 999999;
    border-radius: 3px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
    opacity: 0;
    -webkit-transform: translate(0, 15px) scale(.95);
    transform: translate(0, 15px) scale(.95);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}
.menu-ctm .menu-item {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.menu-ctm .menu-btn {
    background: none;
    line-height: normal;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: block;
    width: 100%;
    color: #444;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 3px;
}
.menu-ctm .menu-btn::-moz-focus-inner, .menu-ctm .menu-btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.menu-ctm .menu-text {
    margin-left: 25px;
}
.menu-ctm .menu-btn .fa {
    position: absolute;
    left: 8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.menu-ctm .menu-item:hover>.menu-btn {
    color: #fff;
    outline: none;
    background-color: #2E3940;
    background: -webkit-linear-gradient(to bottom, #5D6D79, #2E3940);
    background: linear-gradient(to bottom, #5D6D79, #2E3940);
    border: 1px solid #2E3940;
}
.menu-ctm .menu-item.disabled {
    opacity: .5;
    pointer-events: none;
}
.menu-ctm .menu-item.disabled .menu-btn {
    cursor: default;
}
.menu-ctm .menu-separator {
    display: block;
    margin: 7px 5px;
    height: 1px;
    border-bottom: 1px solid #fff;
    background-color: #aaa;
}
.menu-ctm .menu-item.submenu::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #808080;
}
.menu-ctm .menu-item.submenu:hover::after {
    border-left-color: #fff;
}
.menu-ctm .menu-ctm {
    top: 4px;
    left: 99%;
}
.show-menu, .menu-item:hover>.menu-ctm {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
}
.menu-item:hover>.menu-ctm {
    -webkit-transition-delay: 100ms;
    transition-delay: 300ms;
}
/*fileExplorer*/

.ag-file-browser .ag-root {
    border: 1px solid grey;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.ag-file-browser .ag-cell {
    padding-left: 4px;
    padding-right: 4px;
}
.ag-file-browser .ag-column-moving .ag-cell {
    -webkit-transition: left 0.2s;
    -moz-transition: left 0.2s;
    -o-transition: left 0.2s;
    -ms-transition: left 0.2s;
    transition: left 0.2s;
}
.ag-file-browser .ag-header-cell-moving .ag-header-cell-label {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.ag-file-browser .ag-header-cell-moving {
    background-color: #bebebe;
}
.ag-file-browser .ag-header-cell-moving-clone {
    border-right: 1px solid #808080;
    border-left: 1px solid #808080;
    background-color: rgba(220, 220, 220, 0.8);
}
.ag-file-browser .ag-header {
    background: -webkit-linear-gradient(white, lightgrey);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, lightgrey);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, lightgrey);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, lightgrey);
    /* Standard syntax */
    border-bottom: 1px solid grey;
}
.ag-file-browser .ag-header-cell {
    border-right: 1px solid grey;
}
.ag-file-browser .ag-header-cell-label {
    padding: 4px;
}
.ag-file-browser .ag-row:hover {
    background-color: aliceblue;
}
.ag-file-browser .ag-row {
    background-color: white;
    line-height: inherit;
}
.ag-file-browser .ag-body {
    background-color: #ffffff;
}
.ag-file-browser .ag-body-viewport {
    background-color: #ffffff;
}
.ag-file-browser .ag-menu {
    background-color: #ffffff;
    border: 1px solid grey;
}
.ag-file-browser .ag-row-focus {
    border: 1px solid #ccc;
}
/*@Tags-input*/

.smart-form .bootstrap-tagsinput>.label {
    display: inline-block;
    border-radius: 0!important;
    font-weight: 400;
    padding: 3px 28px 4px 8px;
    font-size: 13px;
    border: 1px solid #285E8E;
    background: #3276B1;
    color: #fff;
}
.smart-form .bootstrap-tagsinput .tag [data-role=remove] {
    display: block;
    top: -1px;
    right: 0;
    padding: 5px 4px 3px 5px;
    width: 15px;
    height: 22px;
    position: absolute;
    cursor: pointer;
}
.ui--file--explorer {
    border: 1px solid darkgrey;
    width: 800px;
    background-color: lightgrey;
    border-radius: 5px;
    padding: 3px;
}
.ui--file--explorer--header {
    border: 1px solid darkgrey;
    padding-left: 10px;
    margin-bottom: 2px;
    background-color: white;
}
.card___header {
    font-size: 18px;
    font-weight: 300;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.5384rem;
    margin: 0 1.538rem;
    border-bottom-width: 0;
    border-radius: 3px 3px 0 0;
    background-color: transparent
}
.card___ {
    position: relative;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125)
}
.card___>hr {
    margin-right: 0
}
.card___body {
    padding: 8px 20px 20px;
    border-radius: 0 0 3px 3px
}
.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.ui__installer__content {
    height: 99%;
}
.dialog__ui__installer {
    background: rgba(45, 45, 48, 0.35);
}
.dialog__ui__installer * {
    font-family: Roboto;
}
.dialog__ui__installer>.dialog__ui {
    width: 380px;
    min-height: 680px;
    height: 680px;
    background: #2d2d30;
    margin: 1em auto;
    color: #fff;
}
.ui__installer__toolbar {
    min-height: 20px;
}
.ui__installer__header {
    margin-left: 7px;
    margin-right: 7px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 169px;
    max-height: 169px;
    min-height: 169px;
}
.ui__installer__subheader {
    margin: 0 1.5em;
    height: 55px;
    line-height: 55px;
}
.ui__tools {
    float: right;
    color: #fff;
}
.ui__icon__close {
    cursor: pointer;
    padding: 3px;
}
.ui__icon__close:active {
    box-shadow: 0 1px 0 #00823F;
    bottom: -4px;
}
img.ui__logo {
    width: 45px;
    vertical-align: middle;
    line-height: normal;
    margin-right: 10px;
}
.ui__installer__subheader2 {
    margin-top: 20px;
    margin-right: 1.5em;
    margin-left: 1.5em;
}
.ui__installer__subheader3 {
    margin-top: 20px;
    margin-right: 1.5em;
    margin-left: 1.5em;
}
.ui__title__1 {
    vertical-align: middle;
    line-height: normal;
    font-size: 35px;
    font-family: "Roboto-Light";
}
.ui__title__2 {
    vertical-align: middle;
    line-height: normal;
    font-size: 18px;
    font-family: "Roboto-Thin";
}
.ui__title__3 {
    font-size: 11px;
    font-family: "Roboto-Light";
}
.ui__txt_1 {
    font-size: 12px;
    color: #939798;
}
.ui__installer__body {
    margin-left: 7px;
    margin-right: 7px;
    margin-top: 10px;
    margin-bottom: 5px;
    height: 332px;
    max-height: 332px;
    min-height: 332px;
}
.ui__installer_list {
    background: #252525;
    margin: 0px;
    padding: 0px;
    height: 300px;
    overflow: hidden scroll;
}
.ui__installer__item__right {
    float: right;
}
/**/

.control {
    font-size: 18px;
    position: relative;
    display: block;
    margin-bottom: 15px;
    padding-left: 30px;
    cursor: pointer;
}
.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #e6e6e6;
    border: 1px solid #32323e;
    border-radius: 0px;
}
.control--radio .control__indicator {
    border-radius: 50%;
}
/* Hover and focus states */

.control:hover input~.control__indicator, .control input:focus~.control__indicator {
    background: #ccc;
}
/* Checked state */

.control input:checked~.control__indicator {
    /*background: #2aa1c0;*/
    background: #32323e;
}
/* Hover state whilst checked */

.control:hover input:not([disabled]):checked~.control__indicator, .control input:checked:focus~.control__indicator {
    background: #0e647d;
}
/* Disabled state */

.control input:disabled~.control__indicator {
    pointer-events: none;
    opacity: .6;
    background: #e6e6e6;
}
/* Check mark */

.control__indicator:after {
    position: absolute;
    display: none;
    content: '';
}
/* Show check mark */

.control input:checked~.control__indicator:after {
    display: block;
}
/* Checkbox tick */

.control--checkbox .control__indicator:after {
    top: 4px;
    left: 8px;
    width: 3px;
    height: 8px;
    transform: rotate(45deg);
    border: solid #fff;
    border-width: 0 2px 2px 0;
}
/* Disabled tick colour */

.control--checkbox input:disabled~.control__indicator:after {
    border-color: #7b7b7b;
}
/* Radio button inner circle */

.control--radio .control__indicator:after {
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
/* Disabled circle colour */

.control--radio input:disabled~.control__indicator:after {
    background: #7b7b7b;
}
/**/

ul.ui__installer_list {
    list-style: none;
    margin-right: 1.5em;
    margin-left: 1.5em;
}
ul.ui__installer_list>li {
    margin-left: 15px;
    margin-right: 15px;
    line-height: 30px;
}
ul.ui__installer_list>li:first-child {
    margin-top: 7px;
}
ul.ui__installer_list>li:last-child {
    margin-bottom: 7px;
}
ul.ui__installer_list>li .control {
    display: inline;
    margin-bottom: 0px;
    margin-top: 5px;
    padding-left: 30px;
}
.ui__installer_item3 {
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
}
.ui__installer__footer {
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 20px;
    background: #252525;
    height: 90px;
    margin-top: 74px;
}
.ui__installer__footer>.ui__installer__footer__content {
    margin-top: 35px;
    margin-left: 15px;
    margin-right: 15px;
    min-height: 30px;
}
.ui__installer__footer>.ui__installer__footer__content>button {
    float: right;
}
/*@progresbar custom*/

.ui__progress__bar {
    background-color: rgba(0, 151, 251, 0.5);
    margin-top: 5px;
    height: 5px;
    width: 100%;
    *zoom: 1;
}
.ui__progress__bar .ui__bar {
    float: left;
    width: 0;
    background-color: #0097fb;
    height: 100%;
}
.ui__progress__bar:before, .ui__progress__bar:after {
    display: table;
    content: "";
}
.ui__progress__bar:after {
    clear: both;
}
.ui__installer_progress {
    margin-left: 15px;
    margin-right: 15px;
}
/**/

/*@loader custom*/

.ui__loader, .ui__wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ui__loader {
    width: 100%;
    position: relative;
}
.ui__loader .ui__wrapper span {
    width: 5px;
    height: 5px;
    background: #0097fb;
    display: inline-block;
    position: relative;
    margin: 0px 2px;
    border-radius: 50%;
    opacity: 0;
    animation: loading-custom-metro 3000ms ease-in-out infinite;
}
.ui__loader .ui__wrapper span:nth-child(5) {
    animation-delay: 100ms;
}
.ui__loader .ui__wrapper span:nth-child(4) {
    animation-delay: 200ms;
}
.ui__loader .ui__wrapper span:nth-child(3) {
    animation-delay: 300ms;
}
.ui__loader .ui__wrapper span:nth-child(2) {
    animation-delay: 400ms;
}
.ui__loader .ui__wrapper span:nth-child(1) {
    animation-delay: 500ms;
}
@keyframes loading-custom-metro {
    0% {
        transform: translateX(-350px);
        opacity: 0;
    }
    35%, 65% {
        transform: translateX(0px);
        opacity: 1;
    }
    100% {
        transform: translateX(350px);
        opacity: 0;
    }
}