.toast-title {
font-weight: 700;
}

.toast-message {
word-wrap: break-word;
}

.toast-message a,
.toast-message label {
color: #fff;
}

.toast-message a:hover {
color: #ccc;
text-decoration: none;
}

.toast-close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    font-weight: 700;
    color: #666666;
    -webkit-text-shadow: 0 1px 0 #fff;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.7;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Ensure it's above other elements */
}

.toast-close-button:focus,
.toast-close-button:hover {
    color: #000;
    text-decoration: none;
    opacity: 1;
}

.toast-top-center {
top: 0;
right: 0;
width: 100%;
}

.toast-bottom-center {
bottom: 0;
right: 0;
width: 100%;
}

.toast-top-full-width {
top: 0;
right: 0;
width: 100%;
}

.toast-bottom-full-width {
bottom: 0;
right: 0;
width: 100%;
}

.toast-top-left {
top: 12px;
left: 12px;
}

.toast-top-right {
top: 12px;
right: 12px;
}

.toast-bottom-right {
right: 12px;
bottom: 12px;
}

.toast-bottom-left {
bottom: 12px;
left: 12px;
}

#toast-container {
pointer-events: none;
position: fixed;
z-index: 99999;
}

#toast-container * {
box-sizing: border-box;
}

#toast-container > div {
position: relative;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 50px;
width: 300px;
border-radius: 8px;
background-position: 15px;
background-repeat: no-repeat;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: #333333;
opacity: 0.8;
font-family: 'Your Custom Font', sans-serif;
background-color: #ffffff;
border-left: 4px solid #004E7D;
pointer-events: auto;
}

#toast-container > div.toast-custom {
padding: 15px;
color: #030303;
}

#toast-container > div.toast-custom .toast-close-button {
color: #999 !important;
}

#toast-container > :hover {
box-shadow: 0 0 12px #000;
opacity: 1;
cursor: pointer;
}

#toast-container > .toast-info {
background-color: #EFF6FF;
color: #1E40AF;
border: 1px solid #BFDBFE;
}

#toast-container > .toast-error {
background-color: #FEF2F2;
color: #991B1B;
border: 1px solid #FECACA;
}

#toast-container > .toast-success {
background-color: #ECFDF5;
color: #065F46;
border: 1px solid #A7F3D0;
}

#toast-container > .toast-warning {
background-color: #FFFBEB;
color: #92400E;
border: 1px solid #FDE68A;
}

#toast-container > .toast-info::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 17v-6'/%3E%3Ccircle cx='12' cy='8' r='0.3'/%3E%3C/svg%3E") no-repeat;
}

#toast-container > .toast-error::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E") no-repeat;
}

#toast-container > .toast-success::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='17,9 11,15 8,12'/%3E%3C/svg%3E") no-repeat;
}

#toast-container > .toast-warning::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='8' x2='12' y2='14'/%3E%3Ccircle cx='12' cy='17' r='0.3'/%3E%3C/svg%3E") no-repeat;
}

#toast-container.toast-bottom-center > div,
#toast-container.toast-top-center > div {
width: 300px;
margin: auto;
}

#toast-container.toast-bottom-full-width > div,
#toast-container.toast-top-full-width > div {
width: 96%;
margin: auto;
}

.toast {
background-color: #fff;
pointer-events: auto;
}

.toast-success {
background-color: #ECFDF5;
}

.toast-error {
background-color: #FEF2F2;
}

.toast-info {
background-color: #EFF6FF;
}

.toast-warning {
background-color: #FFFBEB;
}

.toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
background-color: #000;
opacity: 0.4;
}

@media (max-width: 240px) {
#toast-container > div {
padding: 8px 8px 8px 50px;
width: 11em;
}
#toast-container .toast-close-button {
right: -0.2em;
top: -0.2em;
}
}

@media (min-width: 241px) and (max-width: 480px) {
#toast-container > div {
padding: 8px 8px 8px 50px;
width: 18em;
}
#toast-container .toast-close-button {
right: -0.2em;
top: -0.2em;
}
}

@media (min-width: 481px) and (max-width: 768px) {
#toast-container > div {
padding: 15px 15px 15px 50px;
width: 25em;
}
}