.settings {
	--failure: #ff0808;
	--container-border-color: #00000050;
}

.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;
	min-width: auto;
}

.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 .card.account {
	width: 20em;
}

.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;
}

.account > form {
	text-align: center;
	display: flex;
	flex-direction: column;
}

.account input[name=password] {
	margin-top: 8px;
}

.signup-link {
	padding: 4px;
	margin-bottom: 8px;
	text-decoration: none;
	font-weight: 500;
	margin-right: auto;
}

.signup-separator {
	display: flex;
	margin: 10px 0px;
	text-transform: uppercase;
}

.signup-separator::before, .signup-separator::after {
	content: "";
    border-bottom: 1px solid #c2c8d0;
    flex: 1 0 auto;
    height: 0.6em;
    margin: 0;
}

.signup-separator > span {
	margin: 0px 10px;
}

.continue-with-google-link .google {
	display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='a' d='M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23b)' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='url(%23b)' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E");
	vertical-align: middle;
}

form {
	margin-top: 1em;
	margin-bottom: 1em;
}

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

.settings .account .free,
.settings .account .premium_1 {
	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;
}

.settings #settings_purging_checkbox_container {
	line-height: 5em;
}

.settings .card.maintenance fieldset {
	display: flex;
	border-style: solid !important;
	border-color: var(--container-border-color) !important;
	border: 1px;
	padding: 1em;
	margin-top: 1em;
}

.settings .card.maintenance fieldset > form{
	margin: auto 2em auto 0;
}

.settings .card.maintenance fieldset > div {
	margin: auto auto auto 0;
}

@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;
	}
}