/* Style for the radio button container */
.radio-container {
    display: flex;
    align-items: center;
    /* margin: 20px; */
}

/* Style for the radio button input */
.radio-input {
    display: none;
}

/* Style for the label (box and icon) */
.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 20px;
    color: #333;
    /* Default color for the label text */
}

/* Style for the square box */
.radio-label__box {
    width: 30px;
    height: 30px;
    border: 2px solid #9d9d9d;
    border-radius: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style for the icon inside the box */
.radio-label__icon {
    width: 20px;
    height: 20px;
    /* Default color for the icon */
}

/* Style for the checked state of the radio button */
.radio-input:checked + .radio-label {
    color: #1d4ed8;
    /* Color for the label text when selected */
}

/* Style for the checked state of the radio button box */
.radio-input:checked + .radio-label .radio-label__box {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* Style for the checked state of the radio button icon */
.radio-input:checked + .radio-label .radio-label__icon {
    fill: #fff;
    /* Color for the icon when selected */
}

/* Add your styles to the progress bar and download message */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.download-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 10000;
}

.progress-bar {
    width: 80%;
    height: 20px;
    background-color: #ddd;
    margin: 10px auto;
    border-radius: 5px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background-color: #3498db;
}