.donation-widget {
    text-align: center;
    color: #000000; /* General text color */
    width: 300px;
    padding: 20px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}



.donation-widget h2 {
    font-weight: 700;
    color: #000000; /* h2 title color */
    letter-spacing: 1%;
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

/* Style the input fields */
.message-container input#message {
    font-size: 20px;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    text-align: left;
    border: solid;
    border-width: 1px;
    border-color: #f7f7f7;
    border-radius: 8px;
    padding-right: 40px; /* Add space for the currency */
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

/* Problem med Västerås Pingsts hemsida. Lösning är att ge placeholder en färg. Dubbelkolla innan jag släpper detta i Golden. */
.message-container input#message::placeholder {
  color: #c5c5c5;
}

.input-container input#DonationSum::placeholder {
  color: #c5c5c5;
}

.input-container {
position: relative;
}

.input-container input#DonationSum {
font-size: 20px;
width: 100%;
background-color: #ffffff;
box-sizing: border-box;
padding: 10px;
text-align: left;
border: solid;
border-width: 1px;
border-color: #f7f7f7;
border-radius: 8px;
padding-right: 40px; /* Add space for the currency */
font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

.input-container .currency-suffix {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #B6B6B7;
font-size: 18px;
pointer-events: none;
font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

.description-text {
    text-align: left;
    color: #B6B6B7;
    font-size: 16px;
    margin: 0;
    font-weight: 400;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

.slider-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.slider-container input[type="range"] {
    -webkit-appearance: none;
    appearance: none; /* Remove the default appearance */
    width: 100%;
      background: linear-gradient(90deg, #46C4F8 0%, #1C85D9 100%);
  /* Old gradient
    background: linear-gradient(90deg, #b0c4de 0%, #a18cd1 100%);
  */
    height: 10px;
    border-radius: 20px;
    outline: none;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.slider-container input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(213, 177, 177, 0.2);
}

.dw-submit-btn {
    font-size: 18px;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #1d99e0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

.dw-submit-btn:hover {
    background-color: #1990d4;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

.url-display-container {
    margin-top: 20px;
}

.url-display-container textarea {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    border: none;
    border-radius: 8px;
    color: #333;
    resize: none;
}

.summa-display-container textarea {
      margin-top: 20px;  
      width: 100%;
    padding: 10px;
    font-size: 14px;
    text-align: left;
    border: none;
    border-radius: 8px;
    color: #333;
    resize: none;
}
.swish-logo {
margin-top: 30px;
width: 40%;
display: inline-block;
}



/* Path: admin.css */
/* CSS for the admin setings page */
.glass-window {
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 10px 10px 30px 10px rgba(0, 0, 0, 0.2);
    margin: 40px 40px 20px 20px;
    max-width: 1400px;
}

.glass-frame {
    background: #ffffff;
    padding: 20px 30px;
    border-radius: 20px;
    /* max-width: 800px; */
    margin: 5px 5px 5px 5px;
    color: rgb(120,120,120); /* Text color */
    font-size: 17px;
}



.sd-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    
    .sd-left-column {
    flex: 2; 
    padding-right: 10px; /* Space between columns */
    }
    
    .sd-right-column {
    flex: 1;
    text-align: right; /* Align the image to the right */
    padding: 0px 20px;
    }
    
    .sd-right-column img {
        width: 100%; /* Ensure the image does not overflow the column */
        max-width: 300px;
        height: auto; /* Maintain the aspect ratio */
        border-radius: 5px; /* Optional: Rounded corners for the image */
    }
    





.glass-frame p{
    font-size: 18px;
    margin-bottom: 20px;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
    font-weight: 400;
}

/* Style the h1 tag in the admin settings page */
.glass-frame h1 {
    font-size: 38px;
    color: #1C85D9;
    /* color: #625cff; Gammal färg */
    margin-bottom: 20px;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
    font-weight: 600;   
}
.glass-frame form {
    display: flex;
    flex-direction: column;
}
.glass-frame form .form-table {
    width: 100%;
    margin-bottom: 20px;
}
.glass-frame form .form-table th {
    text-align: left;
    vertical-align: middle;
    padding: 10px;
    background: #ffffff;
}
.glass-frame form .form-table td {
    padding: 10px;
}

.glass-frame form .form-table p{
	color: #939393;
    margin: 0px 0px 0px 10px;
}

/* Style the input fields for the form in the admin settings page */
.glass-frame form .form-table input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}


/* Style the placeholder text */
.glass-frame input::placeholder {
    color: #999; /* Grey color for the placeholder text */
    opacity: 1; /* Ensure the placeholder text is fully opaque */
}

.glass-frame .sd-submit-button {
    align-self: flex-end;
    background-color: #1C85D9; /* Button background color */
    color: #ffffff; /* Button text color */
    font-size: 16px; /* Font size */
    padding: 10px 24px; /* Padding */
    border: none; /* No border */
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif; /* Font family */
    font-weight: 600; /* Font weight */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.glass-frame .sd-submit-button:hover {
    background-color: #166ECD; /* Darker background color on hover */
    color: #ffffff;
}

.glass-frame .sd-submit-button:active  {
    transform: translateY(2px); /* Push the button down when clicked */
    background-color: #166ECD; /* Darker background color on hover */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow when clicked */
}

.glass-frame .sd-submit-button:focus {
    outline: none; /* Remove the default focus outline */
}

/*Desktop Popup Modal for Swish */

.dw-desktop-swish-modal-overlay {
    position: fixed !important;
 	bottom: 0 !important;
 	right: 0 !important;
 	left: 0 !important;
 	top: 0 !important;
 	/*On some occasion, some wordpress themes will make the modal and overlay smaller.
 	Several positional css lines with !important flags needs to be set to override
 	any possible css code on different sites to make sure it looks good on all sites.*/
    width: 100vw !important; 
	max-width: none !important;
    height: 100vh !important;
	margin-left: 0 !important;    
    margin-right: 0 !important;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 99999999 !important;
}

.dw-desktop-Swish-modal {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    width: 440px;
    min-width: 440px;
    min-height: 600px;
    text-align: center;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
    font-size: 20px;
    text-transform: none;
    font-weight: 400;
    box-sizing: content-box !important;
    color: #000000;
}

.dw-desktop-Swish-modal h2 {
    font-size: 32px;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
    color:#000000;
}

.dw-desktop-Swish-number {
    font-size: 26px;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
    font-weight: 600;
    color:#000000;
}


.dw-desktop-swish-modal-submit-btn {
    font-size: 18px;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #1d99e0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition for hover effects */
    width: 100%;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

.dw-desktop-swish-modal-x-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size:38px;
	padding-left: 8px;
    padding-right: 8px;
    padding-top: 0px;
    padding-bottom: 10px;
    color: #000000;
    cursor: pointer;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
    font-weight: 300;
    min-height: 40px;
    min-width: 40px;
    background: none;
    outline: none;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 40px !important;
    text-transform: none;
    box-sizing: content-box !important;
}

.dw-desktop-swish-modal-x-btn:hover {
    background-color: #f1f6f9;
    border-radius: 50%;
}


.dw-desktop-Swish-modal-close-btn {
    background: red;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 18px;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

.dw-desktop-swish-modal-overlay.active {
    display: flex; /* Show the overlay with flexbox meaning centering the modal */
    opacity: 1;
}

.dw-desktop-swish-modal-overlay.active .modal {
    transform: scale(1);
}

.dw-desktop-swish-modal-brand-link a {
    color: #b0b0b0;
    text-decoration: none;
    font-weight: 400;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
    position: absolute;
    bottom: 5px;
    left: 10px;
    font-size: 12px;
    transition: 0.5s ease-in-out;
}

.dw-desktop-swish-modal-brand-link a:hover {
    color: #2d7acd;
    text-decoration: none;
    font-weight: 400;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
    position: absolute;
    bottom: 5px;
    left: 10px;
    font-size: 12px;
    transition: 0.5s ease-in-out;
}

.donation-button-widget {
    text-align: center;
    color: #000000; /* General text color */
    width: 300px;
    padding: 0px;
    background: rgba(255, 255, 255, 0);
    border-radius: 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}

.donation_button {
    font-size: 18px;
    padding: 10px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #1d99e0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition for hover effects */
    width: 100%;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}
.donation_button:hover {
    background-color: #1990d4;
    font-family: 'Helvetica Neue', 'Lato', 'Roboto', 'Arial', sans-serif;
}
.donation_button:active  {
    transform: translateY(2px); /* Push the button down when clicked */
    background-color: #166ECD; /* Darker background color on hover */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow when clicked */
}
.donation_button:focus {
    outline: none; /* Remove the default focus outline */
}