/* Overlay style */
            #overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(255, 255, 255, 0.8); /* White with transparency */
                z-index: 10000; /* High z-index to cover all content */
                pointer-events: none; /* Allow clicks to pass through */
            }

   .sform-group {
  max-width: 450px;
  margin: 20px auto;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-inline {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.toggle-btn,
.button {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.toggle-btn {
  background-color: #007bff;
  color: white;
}

.toggle-btn:hover {
  background-color: #0056b3;
}

.button {
  background-color: #28a745;
  color: white;
}

.button:hover {
  background-color: #218838;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  z-index: 999;
  display: none;
}
.modal-content button {
  margin: 5px;
}


            /* Style for the open icon */
            #openCardIcon {
                position: fixed;
                left: 0;
                top: 50px;
                width: 75px;
                padding: 10px;
                background-color: #2c4e72;
                color: white;
                font-size: 10px;
                font-weight: bold;
                text-align: center;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                cursor: pointer;
                z-index: 2;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }
            
            /* Style for the sliding card */
            #slidingCard {
                width: 320px;
                position: fixed;
                top: 50px;
                left: -340px; /* Start hidden */
                background-color: #f8f9fa;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                transition: left 0.3s ease;
                border-radius: 10px;
                padding: 15px;
                z-index: 1;
                overflow-y: auto; /* Add scroll if content overflows */
                max-height: calc(100vh - 100px); /* Limit card height */
            }
            
            /* Close button inside the card */
            #closeCardIcon {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 18px;
                cursor: pointer;
            }
            
            /* Content inside the card */
            .border-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
            #slidingCard label {
                display: block;
                font-weight: bold;
                margin-bottom: 4px; /* Reduced margin */
                font-size: 14px; /* Consistent font size */
            }
            
            #slidingCard input,
            #slidingCard select {
                width: 40px; /* Full width */
                padding: 4px;
                border: 1px solid #ccc;
                border-radius: 5px;
                font-size: 14px; /* Consistent font size */
            }
            
            #slidingCard input[type="color"] {
                width: 40px; /* Adjusted width */
                height: 32px; /* Consistent height */
                margin-left: 2px; /* Small spacing between input and color picker */
            }

        
            /* New class for custom action button styling */
            .custom-action-button {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 5px;
  align-items: center;
}
/* General style for icon buttons */
            .icon-button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 25px; /* Adjust size as needed */
                height: 25px; /* Adjust size as needed */
                background-color: #0c3561; /* Background color */
                color: white; /* Icon color */
                cursor: pointer; /* Pointer cursor */
                font-size: 12px; /* Adjust icon size as needed */
                box-shadow: 0 4px 8px rgba(5, 116, 83, 0.2); /* Shadow for 3D effect */
                transition: background-color 0.3s ease; /* Smooth color transition */
                border-radius: 5px;
            }
            
            .icon-button:hover {
                background-color: #0056b3; /* Darker background on hover */
            }
            
            .icon-button:active {
                background-color: #00317a; /* Even darker background on click */
            }

.settings {
    display: none;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 3px;
}

.toggle-label {
    cursor: pointer;
    font-weight: bold;
    color: rgb(30, 143, 73);
}

.toggle-label:hover {
    color: rgb(143, 98, 30);
}


        .template-selection {
            width: 100%; /* Adjust this value as needed */
            overflow-x: auto;
            white-space: nowrap;
            padding: 10px;
            background-color: #f9f9f9;
            display: flex;
            flex-wrap: nowrap;
        }
    
        .template-selection:before, .template-selection:after {
        content: '';
        position: relative; /* Fix the gradient to the container */
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, #f5f5f7, rgba(245, 245, 247, 0));
        z-index: 2;
        pointer-events: none;
    }

    .template-selection:after {
        right: 0;
        transform: rotate(180deg);
    }

    .template-selection:before {
        left: 0;
    }
    
        .dropdown {
            display: inline-block;
            white-space: nowrap;
            flex-shrink: 0;
            margin-right: 10px;
        }
    
        .dropdown-item1 {
        background-color: #007bff;
        color: white;
        padding: 12px 20px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    
    .dropdown-item1:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #fff;
        min-width: 180px;
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
        z-index: 3;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .dropdown-content .template-button {
        color: #333;
        padding: 12px 20px;
        text-decoration: none;
        display: block;
        transition: background-color 0.3s ease;
        font-size: 14px;
    }
    
    .dropdown-content .template-button:hover {
        background-color: #f1f1f1;
    }

        form {
            margin-bottom: 20px;
        }
        .error {
            color: red;
        }
        .success {
            color: green;
        }
        .hidden {
            display: none;
        }
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            margin: 0;
            box-sizing: border-box;
            background-color: #abbac7;
        }

        .form-container {
            width: 100%;
            max-width: 600px;
            background-color: rgb(222, 238, 222);
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        
        .form1-container {
            width: 100%;
            max-width: 600px;
            background-color: rgb(222, 238, 222);
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }


        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }

        .form-group label {
            margin-bottom: 5px;
            font-size: 0.9rem;
        }

        .form-group input,
        .form-group select,
        .form-group textarea,
        .form-group button {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 0.9rem;
        }

        .form-group button {
            background-color: #175e1b;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .form-group button:hover {
            background-color: #0056b3;
        }

        .form-group button.crop-btn {
            margin-top: 5px;
        }

        .input-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .input-group label {
            flex-basis: 100%;
        }

        .input-group textarea,
        .input-group select,
        .input-group input {
            flex: 1;
            min-width: 150px;
        }

        .cropper-overlay {
    position: fixed; /* Use fixed to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(222, 238, 222,0); /* Fully opaque background */
    z-index: 1000;

}

.cropper-modal {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.cropper-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 400px;
    background-color: #fff; /* Ensure container background is opaque */
    opacity: 1 !important;
}

.cropper-container img {
    max-width: 100%;
    max-height: 100%;
    background-color: #fff; /* Ensure image background is opaque */

}

.cropper-button {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;

}

.cropper-button:hover {
    background-color: #0056b3;

}


        canvas {
            width: 100%;
            max-width: 600px;
            border: 1px solid #ccc;
            margin-top: 20px;
        }

        #floatingg-container {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 300px;
            background-color: rgb(255, 255, 255);
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 10px;
            z-index: 1000;
            transition: width 0.3s, height 0.3s, border-radius 0.3s;
        }
        
        #floating-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 300px;
            background-color: rgb(255, 255, 255);
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 10px;
            z-index: 1000;
            transition: width 0.3s, height 0.3s, border-radius 0.3s;
        }

        /* Floating Container in Minimized State */
        #floating-container.minimized {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            overflow: hidden;
            border-radius: 50%;
            background-color: #2c4e72;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            box-shadow: none;
            border-width: 2px;
            border-color: #be8ca1;
        }

        /* Hide Button Group and Other Content */
        #floating-container.minimized .button-group {
            display: none; /* Hide the content */
        }

        /* Show Minimized Icon */
        #minimized-icon {
            color: white;
            font-size: 24px;
            display: block; /* Show the icon in minimized state */
            cursor: pointer;
            background-color: #722c4d;
            border: #2c4e72;
            border-radius: 10%;
            padding: 20px;
        }

        /* Ensure Minimized Icon is Centered */
        #floating-container.minimized #minimized-icon {
            display: block;
            position: absolute; /* Position icon correctly */
            text-align: center; /* Center text inside icon */
        }

        .button-group {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .action-button {
            display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px;
    border: 5px;
    border-radius: 5px;
    background-color: #91b691;
    color: white;
    pointer-events: none; /* Disables pointer events on the container */
        }
        
        .action-button:focus {
    outline: none; /* Removes focus outline */
}

/* Re-enable pointer events for child elements */
.action-button * {
    pointer-events: auto;
}

        .action-button input[type="text"] {
            flex: 3; /* Takes up 3/4 of the width */
            padding: 10px;
            border: none;
            border-radius: 5px;
            margin-right: 10px; /* Space between the text field and the button */
        }

        .action-button button, 
        .action-button select {
            flex: 0.5; /* Takes up 1/4 of the width */
            padding: 1px;
            border: 10px;
            border-radius: 5px;
            background-color: #2c4e72; /* Different background color for buttons or dropdowns */
            color: white;
            cursor: pointer;
            margin: 3px;
        }

        .action-button input[type="number"] {
            padding: 1px;
            width: 50px; /* Width for numerical input, adjust as needed */
            text-align: center; /* Center-align text for better appearance */
            border: 10px;
            border-radius: 5px;
            margin: 1px;
        }
        .action-button textarea {
            width: 100%; /* Takes up 100% of the width of its container */
            max-width: 100%; /* Ensures it does not exceed its container's width */
            resize: vertical; /* Allows vertical resizing only */
        }


        .action-button input[type="color"] {
            -webkit-appearance: none; /* Removes default styling in WebKit browsers */
            appearance: none; /* Removes default styling in other browsers */
            padding: 1px;
            cursor: pointer;
            border-radius: 5px; /* Optional: rounded corners */
            background-color: transparent; /* Ensures background is transparent */
            flex: 1;
            border: 10px;
            margin: 3px;
            min-width: 50px;
            max-width: 50px;
        }

       



        /* Container for each label and input pair */
.border-input-container {
    display: flex;
    align-items: center; /* Vertically centers the label with the input fields */
    margin-bottom: 10px; /* Space between each set of inputs */
    margin: 15px 20px
}

/* Labels should stay on one line */
.border-input-container label {
    min-width: 60px; /* Set a minimum width to prevent wrapping */
    margin-right: 10px; /* Space between the label and the input fields */
    white-space: nowrap; /* Prevent label text from wrapping to the next line */
}

/* Styles for number input */
.border-input-container input[type="number"] {
    padding: 5px;
    width: 75px; /* Width for numerical input */
    text-align: center; /* Center-align text */
    border-radius: 5px;
    margin-right: 10px; /* Space between number input and color input */
}

/* Styles for color input */
.border-input-container input[type="color"] {
    -webkit-appearance: none; /* Removes default styling in WebKit browsers */
    appearance: none; /* Removes default styling in other browsers */
    padding: 5px;
    cursor: pointer;
    border-radius: 5px;
    background-color: transparent; /* Transparent background */
    border: 1px solid #ccc;
    margin-right: 10px; /* Space between color input and the next input field */
    min-width: 50px;
    max-width: 50px;
}




        /* Ensure buttons are on one line even on mobile devices */
        @media (max-width: 600px) {
            .button-group {
                flex-wrap: nowrap; /* Prevent wrapping on smaller screens */
            }

            .action-button {
                flex: 1; /* Ensure buttons take up equal space */
            }
        }

        .heading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .heading-container h1 {
            font-size: 24px; /* Adjust the font size as needed */
            margin: 0; /* Remove default margins */
        }


        @font-face {
            font-family: 'Jameel Noori Nastaleeq';
            src: url('/Fonts/Jameel_Noori_Nastaleeq_Regular.ttf') format('truetype'),
                url('/Fonts/Jameel_Noori_Nastaleeq.woff2') format('woff2');
            font-display: swap; /* This helps with font loading issues */
        }
        @font-face {
            font-family: 'Arial Rounded';
            src: url('/Fonts/ARLRDBD.ttf') format('truetype');
            font-display: swap; /* This helps with font loading issues */
        }
        @font-face {
            font-family: 'Built Tilting';
            src: url('/Fonts/built_titling_rg.ttf') format('truetype'),
                url('/Fonts/built_titling_rg.woff2') format('woff2');
            font-display: swap; /* This helps with font loading issues */
        }
        @font-face {
            font-family: 'Tahoma';
            src: url('/Fonts/tahoma_0.ttf') format('truetype');
            font-display: swap; /* This helps with font loading issues */
        }
        @font-face {
            font-family: 'Jameel Khushkhati';
            src: url('/Fonts/JameelKhushkhati.ttf') format('truetype');
            font-display: swap; /* This helps with font loading issues */
        }
        @font-face {
            font-family: 'Quran';
            src: url('/Fonts/Al_Mushaf_Quran.ttf') format('truetype');
            font-display: swap; /* This helps with font loading issues */
        }
        /* Hide the default context menu */
        body {
            position: relative;
        }
        
        /* Custom context menu styles */
        .custom-menu {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ddd;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
            padding: 5px;
            list-style-type: none;
            margin: 0;
            cursor: pointer;
        }

        .custom-menu li {
            padding: 8px 12px;
            cursor: pointer;
        }

        .custom-menu li:hover {
            background-color: #f0f0f0;
        }
        
/* Immediately apply the fonts */
body {
    font-family: 'Jameel Noori Nastaleeq', 'Built Tilting', 'Arial Rounded', 'Tahoma','Jameel Khushkhati','Quran', sans-serif;
}


.group {
    position: relative;
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 10px;
}

#groupControls {
    margin-top: 20px;
}

button {
    margin-left: 10px;
}