#data-builder-container {
    max-height: 100%;
    height: 100%;
    padding-left: 0;
}

#data-builder-wrapper {
    display: flex;
    /* height: 100%; */
    height: calc(100vh - 220px);
    /* 100% minus the height of the data-builder-header  */
    /* height: calc(100% - 45px); */
}

#data-builder-content-container #data-builder-schema-properties,
#data-builder-content-container #data-builder-relation-properties {
    top: 66px;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 3;
    width: 0px;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

#data-builder-wrapper #data-builder-content-container {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    overflow: hidden;
    flex: 1;
}

#data-builder-content-container #data-builder-canvas {
    /* top: 0;
    bottom: 0;
    left: 0;
    right: 0; */
    position: relative;
    height: 100%;
}

#data-builder-wrapper #data-builder-sidenav {
    width: 264px;
    /* border-top: 1px solid #DEE4E4; */
    border-right: 1px solid #DEE4E4;
    background-color: white;
    max-height: 100%;
    min-height: 100%;
    padding: 14px 12px;
    z-index: 2;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#data-builder-sidenav #data-builder-stencil-container {
    margin-top: 20px;
    margin-bottom: 10px;
}


#data-builder-sidenav #data-builder-stencil-container #data-builder-stencil-header-icon {
    font-size: 16px !important;
    padding-right: 5px;
    font-weight: 700;
    margin-left: 5px;
    margin-right: 14px;
    color: #52768C;
    cursor: pointer;
}

#data-builder-content-container #data-builder-icons-right {
    /* position: absolute;
    right: 0;
    top: 0; */
}

#data-builder-container .data-stencil-collapsed {
    display: none;
}

#data-builder-container .data-stencil-expanded {
    min-height: 50%;
    display: block;
}

#data-builder-container .joint-stencil.joint-theme-default {
    color: black;
    background: white;
    border: none;
    position: relative;
}


#data-builder-sidenav #data-builder-stencil-container #data-builder-stencil .joint-stencil>.content {
    position: relative;
}


#data-builder-sidenav #data-builder-stencil-container #data-builder-stencil .joint-stencil.searchable>.content {
    top: 5px;
    margin-top: 10px;
    left: -15px;
}


#data-builder-sidenav #data-builder-stencil-container #data-builder-stencil .joint-inspector {
    background: #fcfcfc;
    position: relative;
}

 /* #data-builder-content-container #data-builder-canvas .joint-element {
    filter: drop-shadow(0.10rem 0.10rem 0.15rem rgba(0, 0, 0, 0.2));
}  */

#data-builder-content-container #data-builder-canvas [magnet="item"]:nth-child(odd){
    fill: var(--sds-grey-200, #F8F9FA) !important;
}

#data-builder-content-container #data-builder-canvas [magnet="item"]:hover,
#data-builder-content-container #data-builder-canvas .column-connected {
    fill: #efefef !important;
    stroke: #dddddd !important;
}

#data-builder-content-container #data-builder-canvas .source-arrowhead,
#data-builder-content-container #data-builder-canvas .target-arrowhead {
    fill: #A0A0A0;
    stroke-width: 1;
}

#data-builder-content-container .joint-dialog.joint-theme-default .body {
    padding: 0;
    max-height: 500px;
    overflow-y: scroll;
}

#data-builder-content-container .joint-inspector.joint-theme-default {
    border: none;
    background: #FFF;
    padding: 5px 16px;
}

#data-builder-content-container .joint-inspector.joint-theme-default .field {
    padding: 0;
}

#data-builder-content-container .joint-inspector.joint-theme-default .list-item {
    color: #636363;
    background: #FFF;
    border: none;
    border-top: 1px solid #DEE4E4;
    box-shadow: none;
    padding: 0;
    padding-top: 12px;
    padding-bottom: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.user-view-tab {
    height: calc(100vh - 13.8em);
}

.tab-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100vw;
    z-index: 9;
    overflow-y: auto;
    padding: 10px;
    background: white;
}

#data-builder-container .card-btn {
    color: var(--sds-primary);
    border: none;
}

#data-builder-container .card-btn:hover,
#data-builder-container .card-btn:active,
#data-builder-container .card-btn:visited,
#data-builder-container .card-btn:focus {
    border: none;
    -webkit-box-shadow: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
}

#data-builder-container .card-btn.diagram-tools-btn,
#data-builder-container .card-btn.action-tools-btn,
#data-builder-container .card-btn.designer-switch-btn,
#data-builder-container .card-btn.run-ai-query-btn {
    padding: 4px 7px;
    border-radius: 6px;
    border: 1px solid #B6BFBF !important;
    color: var(--sds-grey-900, #020303);
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5; /* 150% */
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#data-builder-container .card-btn.action-tools-btn.sds-btn-ai {
    border-color: transparent !important;
}

#data-builder-container .card-btn.fullscreen-btn {
    padding: 4px 7px;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5; /* 150% */
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

#data-builder-container .card-btn.diagram-tools-btn svg,
#data-builder-container .card-btn.action-tools-btn svg,
#data-builder-container .card-btn.designer-switch-btn svg {
    width: 20px;
    height: 20px;
}

#data-builder-container .main-content .content {
    padding: 0 !important;
    margin-top: 10px !important;
}

#data-builder-container .disabled {
    opacity: 0.5;
    cursor: not-allowed;

}

#data-builder-content-container #data-builder-tabs-content div.active {
    display: block;
    height: 100%;
    position: relative;
}

#data-builder-content-container #data-builder-tabs-content div.hidden {
    display: none;
}

#data-builder-content-container #data-builder-tabs-content-wrapper {
    height: calc(100% - 61px);
    width: 100%;
    display: flex;
    position: relative;
}

#data-builder-content-container #data-builder-tabs-content {
    height: 100%;
    width: 100%
}

#data-builder-content-container #data-builder-tabs-container {
    position: relative;
    z-index: 2;
    width: 100%;
    background-color: white;
    padding: 14px 12px;
    gap: 8px;
    border-bottom: 1px solid #DEE4E4;
    flex-wrap: wrap;
}

#data-builder-content-container #data-builder-tabs-container #data-builder-save-button {
    font-family: 'Inter', 'Arial', 'Helvetica', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    padding: 6px 12px;
    border-radius: 6px;
}

/* style for the tab buttons */
#data-builder-content-container #data-builder-tabs-toolbar {
    outline: 1px solid #B6BFBF;
    border-radius: 6px;
}

#data-builder-content-container #data-builder-tabs-toolbar .tab {
    display: inline-block;
    padding: 7px 12px;
    cursor: pointer;
    color: #020303;
    font-family: 'Inter', 'Arial', 'Helvetica', sans-serif;
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    border-right: 1px solid #B6BFBF;
}

/* #data-builder-content-container #data-builder-tabs-toolbar .tab:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}  */
    
#data-builder-content-container #data-builder-tabs-toolbar .tab:last-child {
    border-right: none;
}

#data-builder-content-container .data-buttons {
    display: inline-flex;
    border: none;
    position: relative;
    z-index: 2;
    gap: 8px;
    /* background-color: white; */
    /* padding-right: 20px;
    margin-top: 2px; */
}


#data-builder-content-container .tab.active {
    color: var(--sds-black);
    background: #F0F4F4;
    /* border-bottom: 2px solid var(--sds-primary); */
    /* border-left: 1px solid #DEE4E4; */
}

/* style for the toolbar */
#data-builder-header #data-builder-table-name-header {
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #52768C;
    margin-left: 12px;
    margin-top: 5px
}

#data-builder-header {
    transition: opacity 0.5s ease-out, height 0.2s ease-out;
    opacity: 0;
    height: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: white;
    z-index: 2;
    ;
}

#data-builder-header.active {
    opacity: 1;
    height: 45px;
}

#data-builder-sidenav .data-properties_title-section-header .data-properties_title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#data-builder-wrapper #data-builder-sidenav .data-properties_title-section-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
    padding-top: 10px;
}

#data-builder-wrapper #data-builder-sidenav .title-icon-container {
    display: inline-block;
    background-color: rgba(91, 127, 149, 0.15);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22.5px;
    margin-right: 5px;
    /* centers the icon vertically */
}

#data-builder-wrapper #data-builder-sidenav .title-icon {
    color: #52768C;
    font-size: 12.5px;
}

#data-builder-wrapper #data-builder-sidenav .dx-filterbuilder-group-item {
    white-space: normal;
    max-width: 100%;
}

#data-builder-wrapper #data-builder-sidenav .dx-filterbuilder-group-item .dx-filterbuilder-text {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#data-builder-wrapper #data-builder-sidenav .data-filter {
    min-height: 85px;
}

#data-builder-wrapper #data-builder-data-properties #data-properties_trash-icon,
#data-builder-wrapper #data-builder-data-properties #data-properties_close-icon {
    color: #879090;
    font-size: 14px;
}

#data-builder-wrapper #data-builder-sidenav .title {

    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    color: #52768C;

}


#data-builder-sidenav .data-properties_input {

    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #2D3232;

}

#data-builder-sidenav .data-properties_edit-icon {
    max-width: 20px;
    max-height: 20px;
    cursor: pointer;
}

#data-builder-sidenav label {

    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #879090;
}

#data-builder-sidenav hr {
    margin: 5px auto;
}


#data-builder-sidenav .data-properties_input-container input {
    border: none;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
}

#data-builder-sidenav .data-properties_input-container input:focus {

    box-sizing: border-box;
    padding: 6px 12px !important;
    gap: 8px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #879090;
    border-radius: 3px;

}

#data-builder-content-container #data-builder-tabs-content #data-builder-tab-preview {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100% - 30px);
    height: 100%;
}


#data-builder-tabs-content #data-builder-tab-selected_fields #data-builder-tab-selected_fields_table th,
#data-builder-tabs-content #data-builder-tab-selected_fields #data-builder-tab-selected_fields_message div,
#data-builder-tabs-content #data-builder-tab-sql_query #data-builder-tab-sql_query_message div,
#data-builder-tabs-content #data-builder-tab-preview #data-builder-tab-preview_message div {

    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    color: #52768C;
}

#data-builder-tabs-content #data-builder-tab-selected_fields #data-builder-tab-selected_fields_table td {
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #52768C;
    min-width: 150px;
}

#data-builder-tabs-content #data-builder-tab-selected_fields #data-builder-tab-selected_fields_table td.trash-icon {
    min-width: 60px;
    width: 60px;
}

#data-builder-tabs-content #data-builder-tab-selected_fields #data-builder-tab-selected_fields_message,
#data-builder-tabs-content #data-builder-tab-sql_query #data-builder-tab-sql_query_message,
#data-builder-tabs-content #data-builder-tab-preview #data-builder-tab-preview_message {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;

}

#data-builder-tabs-content #data-builder-tab-selected_fields {
    max-height: calc(100% - 68px);
    overflow: auto;
}

#data-builder-sidenav .data-properties_input-container input:focus-visible {
    border: 1px solid #879090 !important;
}

#data-builder-sidenav .data-properties_input {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.data-properties-select-toggle {
    position: relative;
    display: block;
    padding: 5px;
}

.data-properties-select-toggle .data-dropdown-text {
    display: block;
    width: 100%;
    cursor: pointer;
}

.data-properties-select-toggle .hidden {
    display: none;
    width: 100%;
    margin: 0;
}


#data-builder-content-container #data-builder-tabs-content .title {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    color: #020303;
}

#data-builder-wrapper .data-properties-select .form-select:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

#data-builder-sds-ai-chatbot-container {
    width: 0px;
    position: relative;
}

#data-builder-sds-ai-chatbot-container .headercontent  {
    width: 100%;
}

#data-builder-sds-ai-chatbot-container:has(.floating.open) {
    width: auto;
    /* max-width: 370px; */
    height: auto;
    border-left: 1px solid #e8eaeb;
    /* Quick fix for staging task AI */
    right: 0;
    height: 100%;
    position: absolute;
    top: 0;
    /* End Quick fix for staging task AI */
}

#data-builder-sds-ai-chatbot-container .side-panel.floating.open {
    width: 370px;
    top: 70px;
    /* Quick fix for joining task AI */
    top: 62px;
    /* End Quick fix for joining task AI */
}

#data-builder-sds-ai-chatbot-container .side-panel.floating {
    top: 70px;
    height: calc(100% - 80px);
    /* Quick fix for joining task AI */
    top: 62px;
    height: calc(100% - 66px);
    right: 0px;
    border-radius: 0;
    /* End Quick fix for joining task AI */
}

/* Loading spinner start  */
/* ******************************************** */
.data-designer-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
}

.data-designer-spinner div {
    transform-origin: 40px 25px;
    animation: data-designer-spinner 1.2s linear infinite;
}

.data-designer-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 12px;
    border-radius: 20%;
    background: #52768C;
}

.data-designer-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.05s;
}

.data-designer-spinner div:nth-child(2) {
    transform: rotate(45deg);
    animation-delay: -0.9s;
}

.data-designer-spinner div:nth-child(3) {
    transform: rotate(90deg);
    animation-delay: -0.75s;
}

.data-designer-spinner div:nth-child(4) {
    transform: rotate(135deg);
    animation-delay: -0.6s;
}

.data-designer-spinner div:nth-child(5) {
    transform: rotate(180deg);
    animation-delay: -0.45s;
}

.data-designer-spinner div:nth-child(6) {
    transform: rotate(225deg);
    animation-delay: -0.3s;
}

.data-designer-spinner div:nth-child(7) {
    transform: rotate(270deg);
    animation-delay: -0.15s;
}

.data-designer-spinner div:nth-child(8) {
    transform: rotate(315deg);
    animation-delay: 0s;
}

.query-builder-settings-bar {
    min-height: 56px;
    border-bottom: 1px solid var(--sds-grey-400, #BFBFBC);
    width: -webkit-fill-available;
    position: absolute;
    background-color: white;
    z-index: 999;
    display: none;
    align-items: center;
    gap: 10px;
    padding:5px 30px;
    justify-content: space-evenly;
}

.query-settings-wrapper {
    display: flex;
    gap: 10px
}

.query-builder-distinct-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sds-grey-900, #020303);
}

.query-setting-label {
    padding-top: 5px;
    color: var(--sds-grey-900, #020303);
}

.clear-filter-btn {
    color: #eb5757;
    font-weight: 600;
}

.clear-filter-btn:hover {
    color: #eb5757;
}

.query-filter-popup-header,
.query-filter-popup-wrapper,
.query-filter-popup-footer {
    padding: 24px;
}

.query-builder-container {
    height: 244px;
    overflow-y: auto;
    border: 1px solid var(--sds-grey-500, #B6BFBF);
    border-radius: 6px;
    padding: 8px 12px;
}

.query-filter-popup-header {
    color: var(--sds-grey-900, #020303);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.query-filter-save-btn {
    border-radius: 6px;
    background: var(--sds-primary-500, #0B9294);
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    color: #FFF;
    padding: 8px 14px !important;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.query-filter-cancel-btn {
    color: var(--sds-grey-900, #020303);
    padding: 8px 14px !important;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--sds-grey-500, #B6BFBF);
    background: var(--sds-grey-000, #FFF);
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    line-height: 20px;
}

.query-filter-popup .dx-popup-content {
    padding: 0 !important;
}

.query-builder-settings-bar input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: #FFFFFF;
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 18px;
    height: 18px;
    border: 1px solid #B6BFBF;
    border-radius: 4px;
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;
}

.query-builder-settings-bar input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(13% 46%, 34% 66%, 88% 15%, 100% 27%, 34% 90%, 0 58%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #FFFFFF;
}

.query-builder-settings-bar input[type="checkbox"]:checked {
    background-color: var(--sds-primary, #0B9294);
}

.query-builder-settings-bar input[type="checkbox"]:checked::before {
    transform: scale(1);
}


.query-builder-settings-bar input[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);
    color: var(--form-control-disabled);
    cursor: not-allowed;
}

#data-builder-canvas input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: #FFFFFF;
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 18px;
    height: 18px;
    border: 1px solid #B6BFBF;
    border-radius: 4px;
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;
}

#data-builder-canvas input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(13% 46%, 34% 66%, 88% 15%, 100% 27%, 34% 90%, 0 58%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #FFFFFF;
}

#data-builder-canvas input[type="checkbox"]:checked {
    background-color: var(--sds-primary, #0B9294);
}

#data-builder-canvas input[type="checkbox"]:checked::before {
    transform: scale(1);
}


#data-builder-canvas input[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);
    color: var(--form-control-disabled);
    cursor: not-allowed;
}

#data-builder-canvas .record-item-body {
    stroke: transparent !important;
}

#data-builder-canvas [joint-selector="labelsGroup_0"] .record-item-label {
    font-size: 12px;
    fill: #000;
}

#data-builder-canvas [joint-selector="labelsGroup_1"] .record-item-label {
    font-size: 10px;
    fill: #000;
    transform: translateX(-5px);
}

.search-input::-webkit-input-placeholder {
    color: transparent;
    /* Hides placeholder text */
}

.search-input:-ms-input-placeholder {
    color: transparent;
    /* Hides placeholder text */
}

.search-input::-ms-input-placeholder {
    color: transparent;
    /* Hides placeholder text */
}

.search-input::placeholder {
    color: transparent;
    /* Hides placeholder text */
}

.design-switch-popup .dx-popup-content {
    padding: 0 !important;
}

.design-switch-popup .design-mode-switch-popup-header {
    padding: 20px 16px;
    border-bottom: 1px solid #DEE4E4;
}

.design-switch-popup .design-mode-switch-popup-header h5 {
    color: #020303;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    margin: 0;
}

.design-switch-popup .design-mode-switch-popup-body {
    padding: 24px;
}

.design-switch-popup .design-mode-switch-popup-body p {
    color: #5A6161;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.425;
    text-align: left;
    margin: 0;
}

.design-switch-popup .design-mode-switch-popup-footer {
    padding: 16px;
    border-top: 1px solid #DEE4E4;
}

.design-switch-popup .design-mode-switch-popup-footer .btn {
    padding: 8px 14px;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.425;
    text-align: left;
    color: #020303;
    box-shadow: 0px 1px 0px 0px #0000000D;
    border-radius: 6px;
}
#userdata-description-query.tab-fullscreen #data-builder-wrapper {
    height: calc(100vh - 20px);
}

@media (max-width: 756px) {
   #data-builder-wrapper{
    overflow-x: auto;
}
#data-builder-wrapper #data-builder-sidenav{
     min-width: 300px;
}
#data-builder-wrapper #data-builder-content-container{
    min-width: 500px;
}
}

@keyframes data-designer-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Loading spinner end  */
/* ******************************************** */