/****************
* GLOBAL
****************/

.t-Form-inputContainer.col.col-12 > .t-Form-itemWrapper {
  max-width: none !important;
  width: 100% !important;
}

.t-Form-inputContainer.col.col-12 > .t-Form-itemWrapper > .t-Form-fieldContainer {
  width: 100% !important;
  display: block !important; /* Ensure it takes full block width */
}

.t-Form-inputContainer.col.col-12 > .t-Form-itemWrapper > .t-Form-fieldContainer > .t-Form-inputContainer {
  width: 100% !important;
  display: block !important; /* Ensure it takes full block width */
}

.t-Form-inputContainer.col.col-12 > .t-Form-itemWrapper > .t-Form-fieldContainer > .t-Form-inputContainer > .t-Form-itemWrapper {
  width: 100% !important;
  max-width: none !important; /* Ensure no max-width here either */
  display: block !important; /* Ensure it takes full block width */
}


.rmg-notice-value--bold {
  font-weight: bold;
}

.rmg-notice-value {
  white-space: pre-wrap;
}

.rmg-notice-value a {
    color: var(--link-color, #323232); /* Use the variable, fallback to original black if not set */
}

.rmg-notice-value-x-small {
  font-size: x-small;
}

.rmg-notice-value-small {
  font-size: small;
}

.rmg-notice-value-medium {
  font-size: medium;
}

.rmg-notice-value-large {
  font-size: large;
}

.rmg-notice-value-x-large {
  font-size: x-large;
}

.rmg-notice-outer-container {
  width: 100% !important; /* Finally ensure your outer container is full width */
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  align-items: stretch; /* Make items the same height */
}

.rmg-notice-icon-area {
  display: flex;
  justify-content: center;
  align-items: center; /* Center the icon within its area */
  padding: 8px 8px; /* Increased horizontal padding for width */
  width: auto; /* Adjust width based on content and padding */
  border-top-right-radius: 8px;
  border-bottom-right-radius: 24px;
  color: white;
}

.rmg-notice-icon {
  font-size: 16px;
  border: 2px solid white; /* Add the white circle */
  border-radius: 50%; /* Make it a circle */
  width: 24px; /* Fixed width for the circle */
  height: 24px; /* Fixed height for the circle */
  display: flex;
  justify-content: center; /* Center the "i" horizontally within the circle */
  align-items: center; /* Center the "i" vertically within the circle */
}

.rmg-notice-text-area {
  padding: 10px;
  padding-left: 18px;
  flex-grow: 1; /* Take remaining width */
  display: flex; /* Align text vertically in case of single line */
  align-items: center;
}

/****************
* INFO NOTICE
****************/
.rmg-info-notice-outer-container {
  background-color: #E6F3FA; /* Light blue background */
}

.rmg-info-notice-icon-area {
  background-color: #1976D2; /* Blue background */
}

.rmg-info-notice-text-area {
  background-color: #E6F3FA; /* Light blue background */
  color: #1976D2; /* Blue text color */
}

/****************
* SUCCESS NOTICE
****************/
.rmg-success-notice-outer-container {
  background-color: #dfffe7; /* Light green background */
}

.rmg-success-notice-icon-area {
  background-color: green; /* Green background */
}

.rmg-success-notice-text-area {
  background-color: #dfffe7; /* Light green background */
  color: darkgreen; /* Blue green color */
}

/****************
* WARNING NOTICE
****************/
.rmg-warning-notice-outer-container {
  background-color: #ffeb99; /* Light yellow/orange background */
}

.rmg-warning-notice-icon-area {
  background-color: #ff9933; /* Dark Yellow/orange background */
}

.rmg-warning-notice-text-area {
  background-color: #ffeb99; /* Light yellow/orange background */
  color: darkorange; /* Dark orange color */
}

/****************
* ERROR NOTICE
****************/

.rmg-error-notice-outer-container {
  background-color: #ffe6e6; /* Light Red background */
}

.rmg-error-notice-icon-area {
  background-color: #ff3333; /* Red background */
}

.rmg-error-notice-text-area {
  background-color: #ffe6e6; /* Light Red background */
  color: #ff3333; /* Red text color */
}