.settings {
	--failure: #ff0808;
}

.settings {
	margin: 10px 20px 0 2px;
}

.settings .plan_dkim_dns_records {
	display: flex;
	gap: 15px;
}

.settings .card {
	padding: 10px;
	border: 1px solid #00000050;
	background-color: white;
	margin-bottom: 10px;
	box-shadow: 2px 2px 8px -3px rgb(129 129 129 / 50%);
	display: flex; 
	flex-direction: column;
	max-width: none;
}

.settings .dkim_dns_records {
	flex-grow: 1; 
}

.settings .card .title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}

.settings .card .description {
	font-size: 14px;
	margin-bottom: 10px;
}

.settings .account .plan {
	font-size: 48px;
	font-weight: 700;
	-webkit-text-stroke: 1px #00000050;
	text-align: center;
	line-height: 1;
	margin: 10px;
}

.settings .account .guest {
	color: #2271b1;
}

.email-verification-error {
	color: var(--failure);
	text-align: center;
}

form.signup {
	text-align: center;
}

.email-verification-error .message {
	margin-bottom: 1em;
}

.settings .account .free {
	color: rgb(65, 193, 65);
}

.settings .dkim_dns_records .dkim_record {
	display: flex;
	gap: 15px;
}

.settings .dkim_dns_records .dkim_record .record {
	padding: 10px;
	border: 1px solid #00000050; 
	margin-top: 10px;
	margin-bottom: 10px; 
	position: relative; 
	display: flex; 
	align-items: center;
}

.settings .dkim_dns_records .dkim_record .record label {
	position: absolute; 
	top: -10px; 
	background: white; 
	padding: 0 5px;
}

.settings .dkim_dns_records .copy_to_clipboard {
	position: relative;
	margin-left: 10px;
	color: #3c434a;
	background: transparent;
  border: 1px solid transparent;
}

.settings .dkim_dns_records .copy_to_clipboard:hover {
	border: 1px solid #00000050;
}

.settings .dkim_dns_records .copy_to_clipboard:hover .tooltip {
	visibility: visible;
	opacity: 1;
}

.settings .dkim_dns_records .copy_to_clipboard .tooltip {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

#daily-usage-chart {
	margin: auto;	
	width: 80vw;
	max-height: 40vh;
}

@media (max-width: 425px) {
	.settings .plan_dkim_dns_records {
	  flex-direction: column;
	  gap: 0;
	}
	.settings .dkim_dns_records .dkim_record {
		flex-direction: column;
		gap: 0;
	}
	.settings .dkim_dns_records .copy_to_clipboard {
		margin-left:auto;
	}
}