/* Style the parent container */
#edit-remain-on-this-tariff {
  background-color: #f0f0f0;
  border: 1px solid #ccc;     
  padding: 15px;              
  border-radius: 5px;         
  margin: 20px 0;             
}

/* Style for each paragraph inside the container */
.tariff-message {
  text-align: center;
  font-size: 1em; /* Adjust as needed */
  margin: 10px 0; /* Optional: Add some spacing between paragraphs */
}

/* Bold the tariff value */
.tariff-message b {
  font-weight: bold;
}

/* Style the link */
.tariff-message a {
  color: #007BFF; /* Customize link color */
  text-decoration: underline;
  transition: color 0.3s ease;
}

.tariff-message a:hover {
  color: #0056b3; /* Darker shade on hover */
}

.callout {
  animation: callout-appear 0.001s;
}
@keyframes callout-appear {  
  from { opacity: 0.999; }
  to { opacity: 1; }  
}
[id^="edit-would-you-like-to-switch-to-an-advanced-meter"] {
  animation: radios-appear 0.001s;
}
@keyframes radios-appear {  
  from { opacity: 0.999; }
  to { opacity: 1; }  
}
.form-item--error-message {
    margin-top: 0 !important;
    font-weight: bold;
}
.form-item--error-message::before {
    margin-right: 5px;
}

form .js-form-type-datelist {
	margin-top: 1.1em;
}
form .js-form-type-datelist .container-inline {
	display: flex;
	max-width: 14em;
}	
form .js-form-type-datelist .container-inline > * {
	flex: 1 1 0;
}
form .js-form-type-datelist .container-inline > *[class*="year"] {
	flex: 1.3 1.3 0;
}
form .js-form-type-datelist .container-inline > *:not(:last-child) {
	margin-right: 1em;
}
section[data-drupal-selector="edit-upgrade-to-an-advanced-meter-free-of-charge-"] label {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
section[data-drupal-selector="edit-upgrade-to-an-advanced-meter-free-of-charge-"] label span {
  width:100%;
  text-align:right;
}

@media (min-width:1024px){
  section[data-drupal-selector="edit-upgrade-to-an-advanced-meter-free-of-charge-"] label {
    flex-wrap: nowrap;
  }
  section[data-drupal-selector="edit-upgrade-to-an-advanced-meter-free-of-charge-"] label span {
     width: 260px;
      padding-left: 30px;
  }
}