.process-step {
    border: 5px #ebebeb solid;
    border-radius: 100%;
    line-height: 0;
    background: #959595;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-self: center;
    display: flex;
    color: #fff;
    width: 45px;
    height: 45px;
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 7px;
    margin-right: 5px;
    z-index: 4;
    cursor: pointer;
}

.process-step:hover {
    border: 5px #d8d8d8 solid;
}

.process-step-active {
    background-color: #f89828;
}



/*
 Wizard form
 */
.display-none {
    display: none;
}

.multi-wizard-step p {
    margin-top: 12px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    position: relative;
    width: 100%;
}

.multi-wizard-step button[disabled] {
    filter: alpha(opacity=100) !important;
    opacity: 1 !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    content: " ";
    width: 100%;
    height: 1px;
    z-order: 0;
    position: absolute;
    background-color: #fefefe;
}

.multi-wizard-step {
    text-align: center;
    position: relative;
    display: table-cell;
}

/*
   Wizard form end
   */

/* ADMIN DASHBOARD -GLOBE */
.warning {
    width: 5em;
    max-width: 8vh;
    height: 5em;
    max-height: 8vh;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 20px;
    background-color: #2ecc71;
    /* Green color for the marker */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-size: 80%;
    cursor: pointer;
    pointer-events: all;
    /*
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTIsMkwxLDIyaDIyTDEyLDJ6Ii8+PHBhdGggZmlsbD0iI0ZGMDAwMCIgZD0iTTEyIDFsLTEyIDIyaDI0bC0xMi0yMnptLTEgOGgydjdoLTJ2LTd6bTEgMTEuMjVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNXMuNTYtMS4yNSAxLjI1LTEuMjUgMS4yNS41NiAxLjI1IDEuMjUtLjU2IDEuMjUtMS4yNSAxLjI1eiIvPjwvc3ZnPg==);

    */
    animation: globepulse 1s infinite ease-in-out;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
    /* Adding a subtle shadow for better visibility */
}

@keyframes globepulse {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.9);
        border-width: 1px;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.7;
        box-shadow: 0 0 20px rgba(46, 204, 113, 0.9);
        border-width: 2px;
    }

    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.9);
        border-width: 1px;
    }
}

#wrapper .globe-outer {
    top: 10px;
    z-index: 0;
}

#earth-col {
    flex: 0 1 50vw;
    width: 90dvh;
}

.earth-occluded .warning {
    /*
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9IiNGRjAwMDAiIGQ9Ik0yNCAyM2gtMjRsMTItMjIgMTIgMjJ6bS0yMi4zMTUtMWgyMC42M2wtMTAuMzE1LTE4LjkxMi0xMC4zMTUgMTguOTEyem0xMC4zMTUtMmMuNDY2IDAgLjg0NS0uMzc4Ljg0NS0uODQ1IDAtLjQ2Ni0uMzc5LS44NDQtLjg0NS0uODQ0LS40NjYgMC0uODQ1LjM3OC0uODQ1Ljg0NCAwIC40NjcuMzc5Ljg0NS44NDUuODQ1em0uNS0xMXY4aC0xdi04aDF6Ii8+PC9zdmc+);*/
    opacity: 0.7;
}


#element::after {
    content: "";
    position: absolute;
    top: 9.85%;
    left: 9.85%;
    bottom: 9.85%;
    right: 9.85%;
    box-sizing: border-box;
    margin: 1px;
    border: 1px solid #231851;
    border-radius: 50%;
   /* box-shadow: 0 0 200px -50px #29135d, inset 0 0 40px 10px #887ca559;*/
   box-shadow: 0 0 200px -50px #9054a9, inset 0 0 40px 10px #887ca559
}

#back-link {
    position: fixed;
    top: 0;
    left: 0;
    background: #0d130e;
    padding: 0.5em;
    font-size: 26px;
    z-index: 10000;
    border-right: 1px RGBA(255, 255, 255, 0.5) solid;
    border-bottom: 1px RGBA(255, 255, 255, 0.5) solid;
}

#back-link img {
    display: block;
    width: 4em;
    height: auto;
}

@media (max-width: 1199px) {
    #back-link {
        font-size: 20px;
    }
}

@media (max-width: 511px) {
    #back-link {
        font-size: 16px;
    }
}

#legal-footer-wrap {
    position: relative;
    height: 0;
    z-index: 10002;
    font-family: Arial, sans-serif;
}

#legal-footer {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
}

#legal-footer a {
    text-decoration: none;
    color: inherit;
    padding: 0 0.5em;
    font-size: 10px;
}

/* dashboard - locations */
.news {
    font-family: 'Rajdhani';
    cursor: pointer;
    color: #1ce5df;
}

/* Ensure the div is scrollable */
.table-responsive {
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #00ffff #111; /* Firefox */
    cursor: grab;
}

/* Change cursor when dragging */
.table-responsive:active {
    cursor: grabbing;
}

/* WebKit browsers (Chrome, Safari) */
.table-responsive::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
    height: 10px; /* Height of the scrollbar */
}

.table-responsive::-webkit-scrollbar-track {
    background: #111; /* Dark background for the scrollbar track */
    border-radius: 10px; /* Rounded corners for the track */
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #00ffff; /* Teal color for the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
    border: 2px solid #111; /* Padding around the thumb */
}

/* Hover effects for the scrollbar thumb */
.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #ff00ff; /* Magenta color when hovering over the thumb */
    box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; /* Neon glow effect on hover */
}

/* Active effects */
.table-responsive::-webkit-scrollbar-thumb:active {
    background-color: #ffffff; /* Change thumb color on active */
    box-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff; /* Intense glow effect */
}

/* Announcement Header Styles */
.announcement-header {
    background-color: #2e114d; /* Dark purple color from the image */
    padding: 12px 20px;
    border-radius: 0 15px 0 0; /* Only top-right corner rounded */
    margin-bottom: 2px; /* Small gap between header and title */
    display: block;
    box-shadow: 0 4px 15px rgba(46, 17, 77, 0.3);
    width: 300px; /* Fixed width for both elements */
    min-width: 250px; /* Minimum width for responsiveness */
}

.announcement-title {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    font-family: sans-serif;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Responsive styles for announcement header */
@media (max-width: 768px) {
    .announcement-header {
        padding: 10px 15px;
        margin-bottom: 2px;
        width: 280px;
        min-width: 220px;
    }
    
    .announcement-title {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .announcement-header {
        padding: 8px 12px;
        margin-bottom: 2px;
        width: 250px;
        min-width: 200px;
    }
    
    .announcement-title {
        font-size: 0.8rem;
    }
}

/* Title Label Container Styles */
.title-label-container {
    background-color: #1a1648; /* Dark blue color for title background */
    padding: 4px 20px; /* Much smaller padding for shorter height */
    margin-bottom: 2px; /* Same gap as between announcement header and title */
    display: block;
    box-shadow: 0 4px 15px rgba(26, 22, 72, 0.3);
    width: 300px; /* Same fixed width as announcement header */
    min-width: 250px; /* Same minimum width for responsiveness */
}

/* Full width version of title-label-container - removes width constraint */
.title-label-container-full {
    background-color: #1a1648; /* Dark blue color for title background */
    padding: 4px 20px; /* Much smaller padding for shorter height */
    margin-bottom: 2px; /* Same gap as between announcement header and title */
    display: inline-block; /* Change to inline-block to fit content width */
    box-shadow: 0 4px 15px rgba(26, 22, 72, 0.3);
    width: auto; /* Auto width to fit content */
    min-width: auto; /* Remove minimum width constraint */
}

/* Full width version that spans the entire container width */
.title-label-container-full-width {
    background-color: #130f30; /* Same dark color as input fields */
    padding: 4px 20px; /* Much smaller padding for shorter height */
    margin-bottom: 2px; /* Same gap as between announcement header and title */
    display: block; /* Block display to span full width */
    box-shadow: 0 4px 15px rgba(19, 15, 48, 0.3); /* Updated shadow to match input fields */
    width: 100%; /* Full width */
    min-width: 100%; /* Full minimum width */
    border: 1px solid #1d1343; /* Tiny border with custom color */
}

/* Form label container - full width styling for form labels */
.form-label-container {
    background-color: rgba(26, 22, 72, 0.5); /* Dark blue color with more transparency */
    padding: 4px 20px; /* Much smaller padding for shorter height */
    margin-bottom: 2px; /* Same gap as between announcement header and title */
    display: block; /* Block display to span full width */
    box-shadow: 0 4px 15px rgba(26, 22, 72, 0.3);
    width: 100%; /* Full width */
    min-width: 100%; /* Full minimum width */
}

/* Form label text styling with custom color */
.form-label-container .title-label {
    color: #9a9a9e; /* Custom gray color for form labels */
    font-size: 1rem;
    font-weight: 600;
    font-family: sans-serif;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Responsive styles for title label */
@media (max-width: 768px) {
    .title-label-container {
        padding: 3px 15px; /* Much smaller padding for smaller screens */
        margin-bottom: 10px;
        width: 280px;
        min-width: 220px;
    }
    
    .title-label-container-full {
        padding: 3px 15px; /* Much smaller padding for smaller screens */
        margin-bottom: 10px;
        width: auto;
        min-width: auto;
    }
    
    .title-label-container-full-width {
        padding: 3px 15px; /* Much smaller padding for smaller screens */
        margin-bottom: 10px;
        width: 100%;
        min-width: 100%;
    }
    
    .form-label-container {
        padding: 3px 15px; /* Much smaller padding for smaller screens */
        margin-bottom: 10px;
        width: 100%;
        min-width: 100%;
    }
    
    .title-label {
        font-size: 0.9rem;
    }
    
    .title-label-dawood {
        font-size: 0.9rem;
    }

    .title-label-gray-dawood {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .title-label-container {
        padding: 2px 12px; /* Much smaller padding for mobile screens */
        margin-bottom: 8px;
        width: 250px;
        min-width: 200px;
    }
    
    .title-label-container-full {
        padding: 2px 12px; /* Much smaller padding for mobile screens */
        margin-bottom: 8px;
        width: auto;
        min-width: auto;
    }
    
    .title-label-container-full-width {
        padding: 2px 12px; /* Much smaller padding for mobile screens */
        margin-bottom: 8px;
        width: 100%;
        min-width: 100%;
    }
    
    .form-label-container {
        padding: 2px 12px; /* Much smaller padding for mobile screens */
        margin-bottom: 8px;
        width: 100%;
        min-width: 100%;
    }
    
    .title-label {
        font-size: 0.8rem;
    }
    
    .title-label-dawood {
        font-size: 0.8rem;
    }

    .title-label-gray-dawood {
        font-size: 0.9rem;
    }
}

/* Remove border from input fields */
.form-control {
    border: none;
    outline: none;
    box-shadow: none;
}

.form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

/* Announcement Input Header Styles */
.announcement-input-header {
    /* Essential form-control properties */
    background-clip: padding-box !important;
    display: block !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    padding: .5rem 1rem !important; /* Increased padding */
    width: 100% !important;
    
    /* Custom styling */
    background-color: #130f30 !important; /* Dark color as requested */
    color: #d3d3d3 !important; /* Light gray color for text */
    border-radius: 0 !important; /* Sharp corners - no rounding */
    margin-bottom: 2px !important;
    box-shadow: 0 4px 15px rgba(19, 15, 48, 0.3) !important;
    font-family: sans-serif !important;
    font-weight: 400 !important; /* Reduced from 600 to 400 for lighter weight */
    font-style: normal !important; /* Ensure normal (not italic) text */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    border: 1px solid #1d1343 !important; /* Tiny border with custom color */
    outline: none !important;
}

/* Special styling for textarea with announcement-input-header class */
textarea.announcement-input-header {
    height: auto !important; /* Allow textarea to use its natural height based on rows */
    min-height: 100px !important; /* Even smaller minimum height for textarea */
    resize: vertical !important; /* Allow vertical resizing */
}

/* Credit Card Input Container */
.credit-card-container {
    position: relative !important;
    width: 100% !important;
}

/* Credit Card Input Styles */
.credit-card-input {
    /* Essential form-control properties */
    background-clip: padding-box !important;
    display: block !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    padding: .5rem 1rem !important; /* Increased padding */
    width: 100% !important;
    
    /* Custom styling */
    background-color: #086e58 !important; /* Specific green color for credit card */
    color: #d3d3d3 !important; /* Light gray color for text */
    border-radius: 0 !important; /* Sharp corners - no rounding */
    margin-bottom: 2px !important;
    box-shadow: 0 4px 15px rgba(8, 110, 88, 0.3) !important; /* Updated shadow to match background */
    font-family: sans-serif !important;
    font-weight: 400 !important; /* Normal font weight */
    font-style: normal !important; /* Ensure normal (not italic) text */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    border: 1px solid #1d1343 !important; /* Tiny border with custom color */
    outline: none !important;
    padding-left: 3rem !important; /* Extra padding for icon */
}

/* Credit card icon styling */
.credit-card-icon {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.2rem !important;
    z-index: 1 !important;
    pointer-events: none !important; /* So it doesn't interfere with input */
    color: #4a90e2 !important; /* Blue color for the credit card icon */
}

/* Credit card placeholder styling */
.credit-card-input::placeholder {
    color: #d3d3d3 !important; /* Light gray color for placeholder text */
    opacity: 0.8 !important;
    font-style: normal !important; /* Ensure placeholder is not italic */
    font-weight: 400 !important; /* Normal font weight for placeholder */
}

/* Autofill Link Button Styles */
.autofill-link-btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    background-color: #002665 !important; /* Updated dark blue background */
    color: #03d9e4 !important; /* Updated cyan text color */
    border: 1px solid #1d1343 !important; /* Same border as input */
    border-left: none !important; /* Remove left border to connect with input */
    padding: 0.5rem 1rem !important;
    font-family: sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    outline: none !important;
    transition: background-color 0.2s ease !important;
}

.autofill-link-btn:hover {
    background-color: #2a1f5a !important; /* Slightly lighter on hover */
}

.autofill-link-btn:active {
    background-color: #1a1648 !important; /* Return to original on click */
}

/* Audience Background Container */
.audience-background-container {
    background-color: #130f30;
    padding: 10px 15px; /* Reduced vertical padding */
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(19, 15, 48, 0.3);
}

/* Audience Options Styling */
.audience-options-container {
    display: flex;
    gap: 120px;
    margin-bottom: 15px; /* Added vertical gap */
    padding: 2px 0;
}

.audience-option {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audience-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #d3d3d3;
    border-radius: 3px;
    background-color: #130f30;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.audience-checkbox:checked {
    background-color: #2e114d;
    border-color: #2e114d;
}

.audience-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.audience-label {
    color: white;
    font-family: sans-serif;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
}

/* Publish Option Styling */
.publish-option-container {
    margin-bottom: 0;
    padding: 5px 0;
}

.publish-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Create Announcement Button Styling */
.btn_factory_reset.add_tenant {
    padding: 8px 16px;
    font-size: 0.9rem;
    min-width: auto;
}

.announcement-input-header::placeholder {
    color: #d3d3d3 !important; /* Light gray color for placeholder text */
    opacity: 0.8 !important;
    font-style: normal !important; /* Ensure placeholder is not italic */
    font-weight: 400 !important; /* Normal font weight for placeholder */
}

.announcement-input-header:focus {
    background-color: #130f30 !important;
    color: #d3d3d3 !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 15px rgba(19, 15, 48, 0.5) !important;
}

/* Responsive styles for announcement input header */
@media (max-width: 768px) {
    .announcement-input-header {
        padding: 10px 15px;
        margin-bottom: 2px;
        width: 280px;
        min-width: 220px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .announcement-input-header {
        padding: 8px 12px;
        margin-bottom: 2px;
        width: 250px;
        min-width: 200px;
        font-size: 0.8rem;
    }
}

.title-label {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    font-family: sans-serif;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Custom title label for form labels with specific color */
.title-label-dawood {
    color: #f6f6f7; /* Custom gray color for form labels */
    font-size: 1rem;
    font-weight: 600;
    font-family: sans-serif;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


.title-label-gray-dawood {
    color: #9e9da0; /* Custom gray color for form labels */
    font-size: 1.1rem;
    font-weight: 600;
    font-family: sans-serif;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Responsive styles for title label */
@media (max-width: 768px) {
    .title-label-container {
        padding: 10px 15px;
        margin-bottom: 10px;
    }
    
    .title-label {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .title-label-container {
        padding: 8px 12px;
        margin-bottom: 8px;
    }
    
    .title-label {
        font-size: 0.8rem;
    }
}