/* Base styles for the dialog */
#appSelectionDialog {
    width: 60%;
    max-width: 400px; /* Set max width for better responsiveness */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    background-color: #2c2c2c; /* Dark background for the dialog */
    color: #f8f8f8; /* Light text for readability */
    border: 1px solid #444; /* Subtle border */
    border-radius: 10px; /* Rounded corners */
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Soft shadow for depth */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
    font-family: 'Patrick Hand', cursive;
}

/* Close button styles */
#closeDialog {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #ccc; /* Light color for the close button */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

#closeDialog:hover {
    color: #f8f8f8; /* Brighter color on hover for contrast */
}

/* Input field styles */
#pdfTitleInput {
    font-size: 16px;
    width: calc(100% - 40px); /* Responsive width with padding accounted */
    height: 40px;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: #1e1e1e; /* Darker background for the input */
    color: #f8f8f8;
    margin: 10px auto; /* Center horizontally and add margin for spacing */
    padding: 0 20px;
    transition: border-color 0.3s ease; /* Smooth transition for focus */
    font-family: 'Patrick Hand', cursive;
}

#pdfTitleInput:focus {
    outline: none;
    border-color: #6f016f; /* Highlight color when focused */
}

/* Button styles */
#app1Button, #app2Button {
    background-color: #6f016f; /* Primary color for buttons */
    height: 40px;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    width: calc(100% - 40px); /* Responsive width with padding accounted */
    transition: background-color 0.3s ease, transform 0.1s ease; /* Smooth transitions for hover and click */
    font-family: 'Patrick Hand', cursive;
}

#app1Button:hover, #app2Button:hover {
    background-color: #500150; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight raise effect on hover */
}

#app1Button:active, #app2Button:active {
    transform: translateY(1px); /* Slight press-in effect on click */
}

/* Additional styles for the dialog's title */
h2 {
    margin: 10px 0;
    font-weight: normal;
    color: #f8f8f8; /* Light text for titles */
}

/* Responsive design adjustments */
@media (max-width: 600px) {
    #appSelectionDialog {
        width: 90%; /* Full width on smaller screens */
    }
    #pdfTitleInput, #app1Button, #app2Button {
        width: calc(100% - 40px); /* Adjust width for smaller screens */
    }
}