:root {
    --light-grey: #727272;
    --off-light-grey: #5d5d5d;
    --background-color: var(--e-global-color-6b54d0c);

    --divider-color: #F9F9F9;
}
.fa-copy {
    cursor: pointer;
}
.fa-copy:hover {
    color: var(--e-global-color-accent);
}

hr {
    border: 1px solid var(--e-global-color-primary);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
    opacity: 50%;
    border-radius: 5px;
}

.pageContainer {
   padding: 20px;
}

.contentContainer {
    background-color: white;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0px;
}
.fullWidth {
    width: 100%;
}

.buttonLight, .wizard form button {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07)!important;
    font-family: "Rubik", sans-serif!important;
    background-color: var(--e-global-color-primary)!important;
    color: white!important;
    font-weight: bold!important;
    border-radius: 5px!important;
    border: 1px solid var(--e-global-color-primary)!important;
    cursor: pointer;
}
.buttonLight:hover, .buttonLight:focus, .buttonLight:active, .wizard form button:hover, .wizard form button:focus, .wizard form button:active, .buttonLight.active {
    background-color: var(--e-global-color-accent)!important;
    border: 1px solid var(--e-global-color-accent)!important;
    color: white!important;
}
.buttonLight:disabled {
    cursor: not-allowed;
    background-color: var(--light-grey)!important;
    border-color: var(--light-grey)!important;
}
.buttonLight:disabled:hover {
    cursor: not-allowed;
    background-color: var(--off-light-grey)!important;
    border-color: var(--off-light-grey)!important;
}


.welcomeSection, .topSection {
    margin: 0px 0px 20px 0px;
}
.welcomeContainer h3, .topSection h3, h3 {
    color: var(--e-global-color-primary)!important;
    font-size: 21px!important;
    margin-bottom: 5px!important;
}
.welcomeContainer h4, .topSection h4, h4 {
    font-size: 18px!important;
    margin-bottom: 5px!important;
}
.topSection p, p {
    font-size: 16px!important;
    margin-bottom: 5px!important;
    color: var(--e-global-color-secondary)!important;
}

.topSection.hasButton {
    display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.topSection.hasButtonReversed {
    display: flex;
    align-content: center;
    justify-content: start;
    gap: 20px;
    align-items: center;
}

.dataTable {  
    margin: 20px 0px;
    background-color: transparent!important;
    text-align: left;
    width: 100%;
    color: var(--e-global-color-secondary);
}
.dataTable th:first-child {
    border-radius: 5px 0px 0px 5px!important; 
}
.dataTable th:last-child {
    border-radius: 0px 5px 5px 0px!important; 
}

.dataTable tr, .dataTable td {
    background-color: transparent!important;
}
.dataTable td {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--e-global-color-secondary);
    background-color: none!important;
    vertical-align: middle;
}
.dataTable th {
    border: none;
    background-color: var(--e-global-color-primary)!important;
    color: white!important;
    vertical-align: middle;
}
.dataTable .dataTableButton {
    background-color: var(--e-global-color-primary);
    padding: 5px 10px;
    color: white;
    border: none;
    border-radius: 5px;
}
.dataTable .dataTableButton:hover, .dataTable .dataTableButton:focus {
    background-color: var(--e-global-color-accent);
    border: none;
}
.dataTable td:not(:first-child), .dataTable th:not(:first-child) {
    text-align: center;
}
.dataTable .unMiddle {
    text-align: left!important;
}
.dataTable .middle {
    text-align: center!important;
}
.dataTable .right {
    text-align: right!important;
}


.dataTable .author {
    font-size: 12px;
    color: var(--light-grey);
    font-weight: light;
}

.subscriptionContainer {
    text-align: center;
    background-color: var(--e-global-color-primary);
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
    padding: 20px 0px;
}
.subscriptionContainer h3 {
    color: white!important;
}

.wizard hr {
    color: var(--e-global-color-primary);
    background-color: var(--e-global-color-primary)!important;
    border-color: var(--e-global-color-primary)!important;
    box-shadow: none;
}

.wizard form label {
    color: var(--e-global-color-secondary);
    font-size: 16px;
    margin-bottom: 10px;
}
.wizard form input[type="text"], .wizard form input[type="date"] {
    font-family: "Rubik", sans-serif;
    padding: 10px 10px;
    border: 1px solid var(--light-grey);
    border-radius: 5px;
    background-color: transparent!important;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
    margin-bottom: 20px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, --select-icon-color 0.2s ease;
}
.wizard form input[type="text"]:disabled, .wizard form input[type="date"]:disabled {
    cursor: not-allowed;
    font-weight: 400!important;
    font-style: italic;
    color: var(--light-grey);
    border: 1px solid var(--light-grey)!important;
    text-indent: 5px;
}


.wizard form input[type="text"]:hover, .wizard form input[type="text"]:focus, .wizard form input[type="text"]:active, .wizard form input[type="date"]:focus, .wizard form input[type="date"]:active, .wizard form input[type="date"]:hover  {
    outline: 0;
    border: 1px solid var(--e-global-color-primary);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
}
.wizard form input[type="text"]:not(:placeholder-shown), .wizard form input[type="date"]:not(:placeholder-shown) {  
    outline: 0;
    border: 1px solid var(--e-global-color-primary);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    font-weight: bold;
}
.wizard form input[type="text"]::placeholder, .wizard form input[type="date"]::placeholder {
    color: var(--light-grey);
}

.wizard form select {
    appearance: none;
    font-family: "Rubik", sans-serif;
    padding: 10px 10px;
    border: 1px solid var(--light-grey);
    border-radius: 5px;
    background-color: transparent !important;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
    margin-bottom: 20px;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23727272' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.wizard form select:hover,
.wizard form select:focus,
.wizard form select:active {
    outline: 0;
    border: 1px solid var(--e-global-color-primary);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.wizard form select:invalid {
    color: var(--light-grey);
}
.wizard form select:not(:invalid) {  
    outline: 0;
    border: 1px solid var(--e-global-color-primary);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    font-weight: bold;
    color: var(--e-global-color-primary);
}

.wizard .wizardStep {
    font-size: 10px;
    color: var(--light-grey);
    font-weight: 100;
    line-height: 0px;
    margin-top: 10px;
}

/* PROGRESS BAR WIZARD */
.progress-container {
    width: 100%;
    position: relative;
}
.progressbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.progressbar li {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
}
.progressbar li .circle {
    width: 40px;
    height: 40px;
    background-color: var(--light-grey);
    color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 20px;
    z-index: 1;
    cursor: pointer;
}

.progressbar li.complete .circle,
.progressbar li.active .circle {
    background-color: var(--e-global-color-primary);
    color: #fff;
}

/* Lines between steps */
.progressbar li .line {
    flex: 1;
    height: 4px;
    background-color: var(--light-grey);
    margin: 0 10px;
}

.progressbar li.complete .line {
    background-color: #ED675C;
}

.progressbar li:first-child .line {
    display: none; /* Hide the line before the first step */
}

/* Step labels */
.progressbar li .progressLabel {
    color: var(--light-grey);
    padding-top: 10px!important;
}

.progressbar li.complete span,
.progressbar li.active span {
    color: var(--e-global-color-primary);
}

.progressbar li:first-child {
    margin: 0px;
    align-items: end;
    flex: 0;
}
/* END PROGRESS BAR WIZARD */

.notice {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
}
.notice .noticeContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.notice .noticeContainer i {
    font-size: 28px;
}
.notice .closeNoticeContainer i {
    font-size: 21px;
    cursor: pointer;
}
.notice .closeNoticeContainer i:hover {
    color: var(--e-global-color-accent);
}

.notice-success {
    color: var(--e-global-color-secondary);
    background-color: lightgreen;
}
.notice-error {
    color: white;
    background-color: lightcoral;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--e-global-color-secondary);;
    border-bottom-color: var(--e-global-color-primary);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 
.loaderContainer {
    display: flex;
    padding: 20px;
    justify-content: center;
}
.innerLoaderContainer {
    text-align: center;
}

.previewContainer {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-bottom: 10px;
}

.previewContainer img {
    width: 30vw!important;
    border: 1px solid var(--e-global-color-primary)!important;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1)!important;
    border-radius: 5px!important;
}


/*Specific flow*/
.flowIntegrationSection {
    display: flex;
    gap: 10px;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.flowIntegrationSection input[type='radio'] {
    display: none;
    opacity: 0;
}
.flowIntegrationSection label {
    padding-top: 20px;
    padding: 15px;
    border: 1px solid var(--e-global-color-primary);
    
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
    align-items: center;

    min-width: 150px;
    min-height: 150px;
}

.flowIntegrationSection label svg {
    font-size: 64px;
    width: 64px;
    fill: var(--e-global-color-primary);
}
.flowIntegrationSection label span {
    color: var(--e-global-color-primary);
}

.flowIntegrationSection label img {
    width: 100px;
}
.flowIntegrationSection label:has(input[type='radio']:checked) {
    border-color: var(--e-global-color-primary);
    background-color: var(--e-global-color-primary);
}
.flowIntegrationSection label:has(input[type='radio']:checked) svg, .flowIntegrationSection label:has(input[type='radio']:checked) span  {
    color: white;
    fill: white;
}

.buttonWizardContainer {
    display: flex;
    gap: 10px;
}

.webhookMapVariable {
    gap: 10px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

.webhookMapVariable label {
        margin-bottom: 10px;
        outline: 0;
        border: 1px solid var(--e-global-color-primary);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
        padding: 10px 10px;
        line-height: 1.5;
        background-color: transparent;
        border-radius: 5px;
        width: 100%;
}
.webhookMapVariable input[type='text'] {
        margin-bottom: 10px!important;
        outline: 0;
        border: 1px solid var(--e-global-color-primary);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
        padding: 10px 10px;
        line-height: 1.5;
        background-color: transparent;
        border-radius: 5px;
        width: 100%;
}
.webhookMapVariable i {
      margin-bottom: 10px!important;
}


.ubq-public {
    --ubq-canvas: var(--e-global-color-6b54d0c);
    --ubq-elevation-1: rgb(240, 240, 240);
    --ubq-elevation-2: rgb(230, 230, 230);
    --ubq-elevation-3: rgb(210, 210, 210);
    --ubq-foreground-default: var(--e-global-color-secondary);
    --ubq-foreground-light: var(--e-global-color-secondary);
    --ubq-foreground-info: var(--e-global-color-secondary);
    --ubq-foreground-active: hsla(33.9,87.19%,60.2%,0.9);
    --ubq-foreground-accent: var(--e-global-color-secondary);
    --ubq-foreground-danger-default: var(--e-global-color-secondary);
    --ubq-foreground-notice-default: hsla(0,0%,100%,0.9);
    --ubq-interactive-default: var(--e-global-color-primary);
    --ubq-interactive-hover: var(--e-global-color-accent);
    --ubq-interactive-pressed: var(--e-global-color-accent);
    --ubq-interactive-selected: var(--e-global-color-accent);
    --ubq-interactive-active-default: var(--e-global-color-accent);
    --ubq-interactive-active-hover: var(--e-global-color-accent);
    --ubq-interactive-active-pressed: var(--e-global-color-accent);
    --ubq-interactive-accent-default: var(--e-global-color-accent);
    --ubq-interactive-accent-hover: var(--e-global-color-primary);
    --ubq-interactive-accent-pressed: var(--e-global-color-primary);
    --ubq-interactive-danger-default: hsl(340, 88%, 45%);
    --ubq-interactive-danger-hover: hsl(337 69% 46%);
    --ubq-interactive-danger-pressed: hsl(332 100% 36%);
    --ubq-interactive-template-default: hsl(273 91% 61%);
    --ubq-interactive-template-hover: hsl(275 81% 53%);
    --ubq-interactive-template-pressed: hsl(278 100% 42%);
    --ubq-interactive-group-default: hsl(0 0% 100% / 0);
    --ubq-interactive-group-hover: hsl(210 8% 88%);
    --ubq-interactive-group-active-default: hsl(210 8% 85%);
    --ubq-interactive-group-active-hover: hsl(210 8% 82%);
    --ubq-input-default: white;
    --ubq-input-hover: white;
    --ubq-border-default: var(--e-global-color-secondary);
    --ubq-stroke-contrast-1: hsla(0,0%,100%,0.15);
    --ubq-stroke-contrast-2: hsla(0,0%,100%,0.3);
    --ubq-stroke-contrast-3: hsl(208 14% 18% / 0.9);
    --ubq-focus-default: var(--e-global-color-secondary);
    --ubq-focus-outline: none;
    --ubq-overlay: hsl(210 9% 87% / 0.8);
    --ubq-notice-info: var(--e-global-color-primary);
    --ubq-notice-success: hsl(164.68,100%,40.8%);
    --ubq-notice-warning: hsl(39.08,77.66%,56.68%);
    --ubq-notice-error: hsl(330.59,100%,74.16%);
    --ubq-effect-shadow: 0px 1px 2px 0px hsla(207, 18%, 10%, 0.16), 0px 0px 0px 0.5px hsla(207, 18%, 10%, 0.08);
    --ubq-effect-focus: 0px 1px 2px 0px hsla(207, 18%, 10%, 0.16),
      0px 0px 0px 0.5px hsla(207, 18%, 10%, 0.08),
      0px 0px 0px 2px hsl(210 10% 92%),
      0px 0px 0px 3px hsl(231 76% 54%),
      0px 0px 0px 7px hsl(231 76% 54% / 0.35);
    --ubq-progress: hsla(0,0%,100%,0.7);
    --ubq-static-selection-frame: var(--e-global-color-accent);
    --ubq-static-contrast-white: hsl(0, 0%, 100%);
    --ubq-static-contrast-black: hsl(0, 0%, 0%);
    --ubq-static-snapping: hsl(338, 100%, 50%);
    --ubq-static-bleed: hsl(334, 73%, 43%);
    --ubq-static-text-variable: hsl(274, 97%, 60%);
    --ubq-static-card-label-background: linear-gradient(
        
        180deg,
        rgba(0, 0, 0, 0) 14.46%,
        rgba(0, 0, 0, 0.6) 100% );
    --ubq-static-card-background: linear-gradient(
        
        180deg,
        hsla(0, 0%, 100%, 0.08),
        hsla(0, 0%, 0%, 0.08) ),
      hsla(0, 0%, 67%, 0.16);
  }


/*Mobile styles*/
.mobileDataTable {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.mobileDataTableItem {
    border: 1px solid var(--e-global-color-primary);
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
}
.mobileDataTableHeading {
    display: flex;
    padding: 15px;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    align-content: center;
}
.mobileDataTableHeading.active {
    background-color: var(--e-global-color-primary);
    color: white;
}
.mobileDataTableHeading.active h6 {
    color: white!important;
}


.mobileDataTable h6 {
    font-size: 14px;
    font-weight: light;
    color: var(--e-global-color-secondary)!important;
    line-height: 0;
    margin: 0;
    text-align: center;
}
.mobileDataTable .info {
    font-size: 12px;
    color: var(--light-grey);
    font-weight: light;
}
.mobileDataTable .mobileDataTableInfo {
    display: none;
    padding: 15px;
}
.mobileDataTable .mobileButtonActions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.mobileDataTable .dataTableButton {
    background-color: var(--e-global-color-primary);
    padding: 5px 10px;
    color: white;
    border: none;
    border-radius: 5px;
    width: 100%;
}
.mobileDataTable .dataTableButton:hover, .mobileDataTable .dataTableButton:focus {
    background-color: var(--e-global-color-accent);
    border: none;
}

@media (max-width: 767px) {
    .topSection.hasButton {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }
}

.restoreSelect {
    position: absolute;
    right: 70px;
    z-index: 999;
    cursor: pointer;
    color: var(--e-global-color-primary);
}
.restoreSelect:hover {
    color: var(--e-global-color-accent);
}

div.inputWithCross {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.statusButtonContainer {
    display: flex;
    gap: 10px;
    padding: 20px 0px;
}

/* POPUP STYLES */
/* Full-page overlay background */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

/* Centered popup content */
.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #F0F0F0;
    padding: 15px;
    border-radius: 5px;
    width: 90%;
    height: 90%;
    max-height: 1200px;
    max-width: 1000px;
    overflow-y: scroll;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.popup-content::-webkit-scrollbar {
    display: none;
}

.singleFlowStatusContainer {
    width: 100%;
    background-color: green;
    border-radius: 5px;
    color: white;
    text-align: center;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
    padding: 10px 0px;
}

.profilePreviewContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    margin-top: 15px;
    position: relative; /* Needed for positioning the overlay */
    width: 100px; /* Match the image width */
    height: 100px; /* Match the image height */
}

input[type='file'].profilePictureUpload, input[type='file']#newUserPicture {
    display: none;
}

.profilePicturePreview {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%; /* Ensures circular preview */
    transition: opacity 0.3s ease; /* Smooth transition */
}

.profileOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth fade-in */
    border-radius: 50%; /* Matches circular image */
    pointer-events: none; /* Prevent interaction when hidden */
    cursor: pointer; /* Pointer cursor when visible */
}

.profileOverlay i {
    color: white;
    font-size: 24px; /* Icon size */
}

.profilePreviewContainer:hover .profileOverlay {
    opacity: 1; /* Show the overlay on hover */
    pointer-events: auto; /* Allow interaction when visible */
}

.edit_inline_wizard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    align-content: center;
    flex-direction: row;
}
.edit_inline_wizard button.small {
    font-size: 12px;
}

.deleteImage:hover {
    background-color: var(--e-global-color-primary);
}

/* TOGGLE SWITCH */
.form-switch {
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .form-switch i {
    position: relative;
    display: inline-block;
    margin-right: .5rem;
    width: 46px;
    height: 26px;
    background-color: #e6e6e6;
    border-radius: 23px;
    vertical-align: text-bottom;
    transition: all 0.3s linear;
  }
  .form-switch i::before {
    content: "";
    position: absolute;
    left: 0;
    width: 42px;
    height: 22px;
    background-color: var(--e-global-color-6b54d0c);
    border-radius: 11px;
    transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
    transition: all 0.25s linear;
  }
  .form-switch i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 11px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
    transform: translate3d(2px, 2px, 0);
    transition: all 0.2s ease-in-out;
  }
  .form-switch:active i::after {
    width: 28px;
    transform: translate3d(2px, 2px, 0);
  }
  .form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
  .form-switch input { display: none; }
  .form-switch input:checked + i { background-color: var(--e-global-color-primary); }
  .form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
  .form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }