@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800;900&display=swap');

/* Corbado passkey list element for Safari */
.cb-passkey-list-icon {
    display: block !important;
}

html {
    scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Mukta', sans-serif;
	background: #0a0a0a;
}

h1, h2, h3, h4, h5, h6 {
	color: white;
	font-family: 'Mukta', sans-serif;
	margin: 0;
}

a {
    color: #04f2da;
}

::placeholder {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: rgba(255, 255, 255, 0.4);
}

button, form, input, label, a {
	font-family: 'Mukta', sans-serif;
}

.warning_banner {
    background: rgba(255, 165, 0, 0.3);
    border-radius: 6px;
    margin: 8px 0 0;
    padding: 8px 20px;
    width: fit-content;
}

button.cb-passkey-list-primary-button {
    font-size: 14px !important;
}

#display_name, #name {
    text-transform: capitalize;
}

#popup_family_name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#display_name, #full_name, #email_address, .plan_name_style, .plan_status_label, #expiration_date, .loading_animation {
    transition: 0.3s;
}

.user_loading_animation {
    margin-bottom: -28px;
}

:root {

    /* Lilia's gradient 2 */
 /*   --lilias-1: #008080;*/
	/*--lilias-2: #E6E6FA;*/
	/*--lilias-3: #FF7F50;*/
	/*--lilias-4: rgb(120 222 179);*/
	
    /* Lilia's gradient 1 */
 /*   --lilias-1: #A020F0;*/
	/*--lilias-2: #E6E6FA;*/
	/*--lilias-3: #FF7F50;*/
	/*--lilias-4: rgb(120 216 220);*/
	
	--dark-magic-1: #000;
	--dark-magic-2: #3CA0FF;
	--dark-magic-3: #BE5AAA;
	--dark-magic-4: rgb(120 216 220);

	--rainbow-1: #FFD700;
	--rainbow-2: #30D5C8;
	--rainbow-3: #0093ff;
	--rainbow-4: #AD00FF;
	
    --premium-gold-1: #dcaf50;
    --premium-gold-2: #995826;
    --premium-gold-3: #dcaf50;
    --premium-gold-4: #995826;
    
    --vauz-blue-1: #04f2da;
    --vauz-blue-2: #0491ea;
    --vauz-blue-3: #04b6e7;
    --vauz-blue-4: #176bfc;
}

#gradient-canvas {
	width: 100%;
	height: 100%;
	/*--gradient-color-1: #04f2da;*/
	/*--gradient-color-2: #0491ea;*/
	/*--gradient-color-3: #04b6e7;*/
	/*--gradient-color-4: #176bfc;*/

	--gradient-color-1: var();
	--gradient-color-2: var();
	--gradient-color-3: var();
	--gradient-color-4: var();

	z-index: -1;
	position: fixed;
	filter: brightness(85%) saturate(120%);
	
    transition: 0.55s;
}

#account_succesfully_deleted,
#error_updating_user_info,
#successfully_updated_user_info,
#successfully_created_family,
#error_creating_family,
#family_invitation_successfully_copied,
#error_joining_family,
#successfully_joined_family,
#error_deleting_account,
#inquiry_successfully_sent,
#error_sending_inquiry,
#feedback_successfully_sent,
#error_sending_feedback,
#custom_error_banner {
    display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: -20%;
	width: 96%;
    left: 2%;
    right: 2%;
    margin-top: 4vh;
	height: 12px;
	z-index: 15;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	transition: ease-in-out;
}

#account_succesfully_deleted .inner_text,
#error_updating_user_info .inner_text,
#successfully_updated_user_info .inner_text,
#successfully_created_family .inner_text,
#error_creating_family .inner_text,
#family_invitation_successfully_copied .inner_text,
#error_joining_family .inner_text,
#successfully_joined_family .inner_text,
#error_deleting_account .inner_text,
#inquiry_successfully_sent .inner_text,
#error_sending_inquiry .inner_text,
#feedback_successfully_sent .inner_text,
#error_sending_feedback .inner_text,
#custom_error_banner .inner_text {
    z-index: 16;
	padding: 18px 22px;
	color: white;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	background: rgba(45, 195, 0, 0.7);
	backdrop-filter: blur(20px) saturate(200%);
	-webkit-backdrop-filter: blur(20px) saturate(200%);
}

#error_updating_user_info .inner_text,
#error_creating_family .inner_text,
#error_joining_family .inner_text,
#error_deleting_account .inner_text,
#error_sending_inquiry .inner_text,
#error_sending_feedback .inner_text,
#custom_error_banner .inner_text {
    background: rgba(205, 30, 30, 0.7);
	backdrop-filter: blur(20px) saturate(200%);
	-webkit-backdrop-filter: blur(20px) saturate(200%);
}

@keyframes notification {
	0% {
		top: -20%
	}
	10% {
		top: 5%
	}
	80% {
		top: 5%
	}
	100% {
		top: -20%
	}
}

lord-icon {
	width: 32px;
	height: 32px;
}

.logout_button {
	position: fixed;
	top: 28px;
	right: 28px;
	width: 36px;
	height: 36px;
	background: transparent;
	border-top: 2px solid rgba(255, 255, 255, 0.6);
	border-bottom: 2px solid rgba(255, 255, 255, 0.6);
	border-left: 2px solid rgba(255, 255, 255, 0.6);
	border-right: 2px solid transparent;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

/* POPUP */
.popup_modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(64px);
    -webkit-backdrop-filter: blur(64px);
    z-index: 10;
    transition: 0.35s;
}

.popup {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 0; 
    /*calc(60% - 72px);*/
    height: 0; 
    /*calc(40% - 48px);*/
    padding: 20px;
    background: rgba(15, 15, 15, 0.1);
	backdrop-filter: blur(64px);
	-webkit-backdrop-filter: blur(64px);
	border-radius: 12px;
	border: 2px solid rgba(255, 255, 255, 0.4);
    z-index: 11;
    transition: 0.4s;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}

.popup button.close_popup {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 48px;
    height: 48px;
    background: rgba(15, 15, 15, 0.1);
    color: white;
	backdrop-filter: blur(64px);
	-webkit-backdrop-filter: blur(64px);
	border-radius: 6px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	cursor: pointer;
	font-size: 16px;
	transition: .2s;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.popup button.close_popup:hover,
.confirmation button.cancel_deletion_button:hover,
.card .body .edit_account_details_button:hover {
    background: rgba(255, 255, 255, 0.4);
    filter: contrast(200%);
}

.popup h1 {
    font-size: 40px;
    line-height: 1;
}

/* Family invite */
.popup_family_information {
    display: flex;
    flex-direction: row;
    gap: 64px;
    white-space: nowrap;
}

.share_invitation_container {
    display: flex;
    align-items: end;
    margin-top: 32px;
    gap: 8px;
}

button.share_invite_code_button {
    display: flex;
	justify-content: center;
	align-items: center;
}

a.invite_guide_button {
    width: 50%;
    height: 44.7px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13.3333px;
    font-weight: 600;
    margin: 0;
}

a.invite_guide_button:hover {
    background: rgba(255, 255, 255, 0.2);
    filter: contrast(200%);
}

/* Update User Info, Create Family and Join Family Forms */
.edit_user_info_form_container,
.create_family_container,
.invite_members_container,
.join_family_container {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    margin-top: 3%;
}

.join_family_fields {
    display: flex;
    gap: 12px;
}

#updateUserInfoForm,
#createFamilyForm,
#joinFamilyForm {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#updateUserInfoForm label,
#createFamilyForm label,
#joinFamilyForm label {
    color: white;
    margin-top: 6px;
}

#updateUserInfoForm input,
#createFamilyForm input,
#joinFamilyForm input {
    width: calc(100% - 44px);
	max-height: 48px;
	padding: 12px 20px;
    background: rgba(15, 15, 15, 0.1);
    color: white;
	backdrop-filter: blur(64px);
	-webkit-backdrop-filter: blur(64px);
	border-radius: 6px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	font-family: 'Mukta', sans-serif;
}

form#updateUserInfoForm button.update_info_button,
form#createFamilyForm button.create_family_button,
#joinFamilyForm .join_family_button {
    width: 100%;
    height: 48px;
	margin-top: 12px;
}


/* Delete Confirmation */
.popup.delete_account .confirmation {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.confirmation #email_not_correct_error {
    opacity: 0;
    width: fit-content;
    overflow: hidden;
    text-wrap: nowrap;
    height: auto;
    padding: 6px 20px;
	background: rgba(255, 0, 0, 0.4);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-radius: 6px;
	margin: 8px 0;
	/*border: 2px solid rgba(255, 255, 255, 0.4);*/
	transition: .4s;
}

.email_and_confirmation {
    display: flex;
    gap: 12px;
}

.confirmation input {
    width: 100%;
	max-height: 48px;
	padding: 12px 20px;
    background: rgba(15, 15, 15, 0.1);
    color: white;
	backdrop-filter: blur(64px);
	-webkit-backdrop-filter: blur(64px);
	border-radius: 6px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	font-family: 'Mukta', sans-serif;
}

.confirmation button.destructive_button {
    height: auto;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(200, 0, 0, 50%);
	color: white;
	line-height: 1;
}

.confirmation button.destructive_button:hover {
    background: rgb(255, 0, 0);
	border-color: rgb(225, 0, 0);
	filter: saturate(200%);
}

.confirmation button.cancel_deletion_button,
.invite_guide_button {
    width: 100%;
    height: 48px;
    cursor: pointer;
	font-weight: 600;
	transition: 0.3s;
	border: 2px solid rgba(255, 255, 255, 0.4);
	background: transparent;
	color: white;
	border-radius: 6px;
	margin-top: 12px;
}

.popup.send_inquiry form,
.popup.send_feedback form {
    display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	text-align: left;
	gap: 8px;
}

.popup.send_inquiry form .field,
.popup.send_feedback form .field {
	display: flex;
	flex-direction: column;
}

.popup.send_inquiry form textarea,
.popup.send_feedback form textarea {
	resize: none;
	min-height: 140px;
	height: auto;
	padding: 6px 12px;
	border-radius: 6px;
	border: 2px solid rgba(255, 255, 255, 20%);
	background: rgba(255, 255, 255, 10%);
	color: white;
	white-space: normal;
	word-wrap: break-word;
	font-family: 'Mukta', sans-serif;
	font-size: 14px;
}

.popup.send_inquiry form textarea::placeholder,
.popup.send_feedback form textarea::placeholder {
	color: rgba(255, 255, 255, 0.98);
}

.popup.send_inquiry form button,
.popup.send_feedback form button {
	height: 44px;
	cursor: pointer;
	background: white;
	color: black;
	border-radius: 6px;
	border: 2px solid white;
	font-weight: 700;
	font-size: 14px;
	font-family: 'Mukta', sans-serif;
	transition: 0.3s;
}

.popup.send_inquiry form button:hover
.popup.send_feedback form button:hover {
	color: white;
	background: transparent;
}


/* SideBar */

.side_bar {
	position: fixed;
	left: 4vh;
	top: 4vh;
	height: 92vh;
	display: flex;
	flex-direction: column;
	gap: 48px;
	z-index: 8;
}

.side_bar .logo {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	background: rgba(20, 20, 20, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.4);
	cursor: pointer;
}

.side_bar .logo a,
.side_bar .logo img {
	width: 64px;
	height: 64px;
}

.divider {
	height: 2px;
	width: 90%;
	background: rgba(25, 25, 25, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 12px;
	margin: 20px 5%;
	transition: 0.3s;
}

.side_bar .menu {
	width: 48px;
	padding: 0 8px;
	/*background: rgba(25, 25, 25, 0.1);*/
	background: transparent; /* for safari because it adds too much contrast on top layers */
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 12px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	transition: 0.3s;
	overflow: hidden;
	z-index: 9;
}

.side_bar .menu:hover {
	width: 100%;
}

.side_bar .menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
	cursor: pointer;
}

.side_bar .menu ul li a {
    text-decoration: none;
}

.menu .menu_item {
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	height: 48px;
	margin: 8px 0;
	border-radius: 6px;
	transition: 0.2s;
}

.menu .menu_item:hover {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(32px) saturate(160%);
	-webkit-backdrop-filter: blur(32px) saturate(160%);
}

.menu li a#danger .menu_item:hover {
    background: rgba(255, 20, 20, 0.2);
}

.menu .menu_item .icon {
	min-width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.menu .menu_item h6 {
	font-size: 16px;
	font-weight: 600;
	margin-left: 8px;
	user-select: none;
	-webkit-user-select: none; /* Safari */
}


/* Dashboard */

.dashboard {
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8vh 20vw;
}

.dashboard .card {
	height: auto;
}

.dashboard .card_empty_space {
    height: 20vh;
}

.card .header {
    margin: 32px 0 12px;
	color: white;
}

.card .body {
    position: relative;
	display: flex;
	flex-direction: row;
	gap: 24px;
	padding: 24px;
	background: rgba(25, 25, 25, 0.1);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-radius: 12px;
	border: 2px solid rgba(255, 255, 255, 0.4);
}

.card.danger .body {
    background: rgba(255, 0, 0, 0.2);
}

.card.danger .body .info_container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.card .body .plan_status_label {
	position: absolute;
	top: 200px;
	left: 160px;
	border-radius: 8px;
	font-size: 40px;
	font-weight: 600;
	padding: 0 16px;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.card .body .plan_status_label.free {
	background: rgba(144, 238, 144, .8);
	color: rgba(0, 100, 0, 1);
}

.card .body .plan_status_label.plus {
	background: rgba(173, 216, 230, .8);
	color: rgba(0, 0, 200, 1);
}

.card .body .plan_status_label.premium {
	left: 100px;
	background: rgba(238, 232, 144, .8);
	color: rgba(184, 114, 11, 1);
}

.card .body .user_info {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	color: white;
}

.card .body .user_info p {
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

.card .body .user_info h5 {
	opacity: 85%;
}

.card .body .user_info p,
.card .body .user_info h5 {
	margin: 0;
}

.card .body .edit_account_details_button {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 48px;
    height: 48px;
    background: rgba(15, 15, 15, 0.1);
    color: white;
	backdrop-filter: blur(64px);
	-webkit-backdrop-filter: blur(64px);
	border-radius: 6px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	cursor: pointer;
	font-size: 16px;
	transition: .2s;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.card .body .contents_container {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

.card .body .contact_option_container {
    display: flex;
    backdrop-filter: blur(32px);
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 30%);
    align-items: center;
    /*width: fit-content;*/
    padding: 8px 16px 8px 8px;
    gap: 14px;
    text-decoration: none;
    transition: .2s;
    cursor: pointer;
}

.card .body .contact_option_container:hover {
    backdrop-filter: blur(32px) contrast(300%);
    border: 2px solid rgba(255, 255, 255, 70%);
}

.card .body .contact_option_container .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 200, 200, 0.25);
    padding: 8px;
    border-radius: 4px;
    backdrop-filter: blur(32px);
}

.card .body .contact_option_container .text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.card .body  .alternative {
    position: absolute;
    color: white;
    bottom: -20px;
    left: 66px;
    font-size: 12px;
    text-decoration: underline dotted;
    cursor: pointer;
    background: none;
    border: none;
    transition: .2s;
}


/* Referral */
.referral_info {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.referral_info h1 {
	margin: 20px 0 4px;
}

.referral_info h5 {
	opacity: 75%;
	text-wrap: balance;
	margin: 0 0 20px;
}

.refer_link_field {
	position: relative;
	display: flex;
	justify-content: start;
	align-items: center;
	height: 48px;
	border-radius: 8px;
	padding-left: 24px;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
	border: 2px solid rgba(255, 255, 255, 0.4);
}

.refer_link_text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 56px);
}

.refer_link_button {
	position: absolute;
	right: 10px;
	top: 15%;
	height: 70%;
	width: 36px;
	background: transparent;
	border: none;
	cursor: pointer;
}

.membership_text_info {
	display: flex;
	flex-direction: column;
}

.membership_text_info h1,
.membership_text_info h5 {
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.plan_name_style.free {
	color: rgba(0, 230, 0, 1);
}

.plan_name_style.plus {
	color: rgba(0, 200, 255, 1);
	filter: saturate(3);
}

.plan_name_style.premium {
	color: rgb(255, 225, 0);
}

.membership_buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
    gap: 8px;
}

a.purchase_plan,
button.manage_plan,
button.family_primary_button,
button.destructive_button,
.confirmation_buttons button,
#updateUserInfoForm button.update_info_button,
#createFamilyForm button.create_family_button,
button.share_invite_code_button,
.join_family_button {
	width: 172px;
	height: 48px;
	cursor: pointer;
	font-weight: 600;
	transition: 0.3s;
	border: 2px solid transparent;
	border-radius: 6px;
	background: rgb(231, 231, 231);
	font-size: 12px;
}

button.manage_plan:hover,
button.family_primary_button:hover,
#updateUserInfoForm button.update_info_button:hover,
#createFamilyForm button.create_family_button:hover,
button.share_invite_code_button:hover,
.join_family_button:hover {
	background: transparent;
	border-color: white;
	color: white;
}

a.purchase_plan {
	background: rgba(144, 238, 144, .8);
	color: rgba(0, 50, 0, 1);
	text-decoration: none;
	display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
}

a.purchase_plan:hover {
	background: transparent;
	border-color: rgba(144, 238, 144, .8);
	color: rgba(144, 238, 144, .8);
}

button.manage_plan {
    display: none;
}

button.destructive_button {
    background: rgb(225, 0, 0);
	color: white;
	min-width: 172px;
}

button.destructive_button:hover {
    background: transparent;
	border-color: rgb(225, 0, 0);
}

.membership_container,
.no_family_found,
.family_details {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.no_family_found,
.family_details {
    display: none;
}

.family_secondary_button {
    width: 172px;
	height: 48px;
	cursor: pointer;
	background: transparent;
	color: white;
	border: 2px solid transparent;
	border-radius: 6px;
	font-weight: 600;
	transition: 0.3s;
	text-decoration: 1px underline;
}

.family_secondary_button:hover {
    text-decoration: 2px underline;
    border-color: white;
}



/* Background */
.background-options {
	display: grid;
	/*justify-content: space-around;*/
	align-items: center;
	gap: 8px;
	width: 100%;
	grid-template-columns: repeat(auto-fit, 80px);
}

.background-options .background-option {
    position: relative;
	width: 80px;
	min-width: 80px;
	height: 80px;
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	background: none;
	color: white;
	line-height: 1;
	backdrop-filter: blur(32px);
	-webkit-backdrop-filter: blur(32px);
	cursor: pointer;
	background-size: 200% 200%;
	animation: moveGradient 1s infinite;
	transition: 0.2s;
}

.background-options .background-option.animated::after,
.background-options .background-option.static::after {
    content: "animated";
    font-size: 12px;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 4px;
    left: 4px;
    backdrop-filter: brightness(85%) contrast(120%);
    -webkit-backdrop-filter: brightness(85%) contrast(120%);
    width: calc(100% - 8px);
    border-radius: 4px;
    line-height: 1.2;
    transition: 0.2s;
}

.background-options .background-option.static::after {
    content: "static";
}

.background-options .background-option.selected::after {
    content: "selected";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 40%);
    backdrop-filter: brightness(70%) contrast(150%) saturate(150%);
    -webkit-backdrop-filter: brightness(70%) contrast(150%) saturate(150%);
    width: 100%;
    height: 100%;
    border-radius: 6px;
    transition: .3s;
}

.background-options .background-option.plus::after,
.background-options .background-option.premium::after {
    content: '🔒'"\A""only on""\A""plus plan";
    white-space: pre;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 40%);
    backdrop-filter: brightness(70%) contrast(150%) saturate(150%);
    -webkit-backdrop-filter: brightness(70%) contrast(150%) saturate(150%);
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.background-options .background-option.premium::after {
    content: '🔒'"\A""only on""\A""premium""\A""plan";
}

.background-options .background-option:hover {
    filter: contrast(200%);
}

.background-options .background-option:nth-child(1) {
    color: white;
	background:
        radial-gradient(circle at 80% 20%, var(--dark-magic-2), transparent),
        radial-gradient(circle at 20% 80%, var(--dark-magic-3), transparent),
        radial-gradient(circle at 10% 10%, var(--dark-magic-1), transparent),
        radial-gradient(circle at 80% 80%, var(--dark-magic-4), transparent);
}

.background-options .background-option:nth-child(2) {
	background:
        radial-gradient(circle at 100% 10%, var(--rainbow-1), transparent),
        radial-gradient(circle at 10% 10%, var(--rainbow-4), transparent),
        radial-gradient(circle at 80% 80%, var(--rainbow-3), transparent),
        radial-gradient(circle at 20% 80%, var(--rainbow-2), transparent);
}

.background-options .background-option:nth-child(3) {
	background:
        radial-gradient(circle at 100% 10%, var(--vauz-blue-2), transparent),
        radial-gradient(circle at 10% 10%, var(--vauz-blue-4), transparent),
        radial-gradient(circle at 80% 80%, var(--vauz-blue-3), transparent),
        radial-gradient(circle at 20% 80%, var(--vauz-blue-1), transparent);
}

.background-options .background-option:nth-child(4) {
	background:
        radial-gradient(circle at 100% 10%, var(--premium-gold-1), transparent),
        radial-gradient(circle at 10% 10%, var(--premium-gold-2), transparent),
        radial-gradient(circle at 80% 80%, var(--premium-gold-3), transparent),
        radial-gradient(circle at 20% 80%, var(--premium-gold-4), transparent);
}

.background-options .background-option:nth-child(5) {
	background: rgba(0, 0, 0, 70%);
}



@keyframes moveGradient {
  0% {
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
  }
  25% {
    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  }
  50% {
    background-position: 100% 0%, 0% 0%, 100% 100%, 0% 100%;
  }
  75% {
    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
  }
}

.slider {
  --line-background: rgba(255, 255, 255, 0.6);
  --line-active: #fff;
  --handle-background: #275EFE;
  --handle-border: #fff;
  --handle-text-color: #fff;
  --smoke-background: #fff;
  --smoke-shadow: inset 3px 3px 0 0 #E1E6F9;
  max-width: 320px;
  width: 100%;
}
.slider .rangeslider {
  width: 100%;
  height: 3px;
  position: relative;
}
.slider .rangeslider .rangeslider__fill__bg,
.slider .rangeslider .rangeslider__fill {
  --b: var(--line-active);
  position: absolute;
  left: 0;
  z-index: 1;
  top: var(--t, 0);
  height: var(--h, 3px);
  background: var(--b);
  border-radius: 2px;
}
.slider .rangeslider .rangeslider__fill__bg {
  --t: 1px;
  --h: 1px;
  --b: var(--line-background);
  width: 100%;
}
.slider .rangeslider .rangeslider__handle {
  width: 30px;
  height: 30px;
  left: 0;
  top: 0;
  z-index: 2;
  position: absolute;
  cursor: pointer;
}
.slider .rangeslider .rangeslider__handle:before {
  content: attr(data-value);
  top: 9px;
  left: -4px;
  right: -8px;
  position: absolute;
  text-align: center;
  font-family: inherit;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  color: var(--handle-text-color);
  transition: transform 0.3s ease;
  transform: translateY(var(--y, 0)) scale(var(--s, 0.7));
}
.slider .rangeslider .rangeslider__handle:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  border: 2px solid var(--handle-border);
  background: var(--handle-background);
}
.slider .rangeslider .rangeslider__handle:active, .slider .rangeslider .rangeslider__handle.active {
  --s: 1;
  --y: 34px;
}
.slider .rangeslider .smoke {
  background: var(--smoke-background);
  box-shadow: var(--smoke-shadow);
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  left: -4px;
  top: 0;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  transform: scale(0);
}

/*.background-brightness-container {*/
/*    width: auto;*/
/*}*/

/*.background-brightness-slider,*/
/*#background-brightness-value {*/
/*    color: white;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 6px;*/
/*}*/

/*#background-brightness-value {*/
/*    justify-content: center;*/
/*}*/


/* Legal */

.legal {
    color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.legal a {
    text-decoration: 1.2px underline dotted;
    color: white;
}


/* Responsiveness */
@media screen and (width <= 1024px) {
    .side_bar {
        left: 2vh;
        top: 2vh;
    }
    .dashboard {
        padding: 8vh 14vw;
    }
}

@media screen and (width <= 1024px) and (height <= 1380px) and (orientation: portrait) {
    .side_bar {
        left: 0;
        top: calc(100% - 8vh - 85px);
        width: 100%;
    }
    .side_bar .logo {
        display: none;
    }
    .side_bar .menu {
        width: 70%;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        margin: 0 calc((100% - 70% - 4px - 16px) / 2);
        justify-content: center;
    }
    .side_bar .menu:hover {
        width: auto;
    }
    .side_bar .menu ul {
        display: flex;
        flex-direction: row;
        gap: 24px;
    }
    .menu .menu_item {
        flex-direction: column;
        height: auto;
        justify-content: center;
    }
    .menu .menu_item h6 {
        margin: 0;
    }
    .menu .menu_item .icon {
        margin-top: 6px;
    }
    .divider {
        height: auto;
        width: 2px;
        margin: 20px 0;
    }
    .no_family_buttons {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
}

@media screen and (width <= 768px) {
    /*.background-brightness-container {*/
    /*    width: 100%;*/
    /*}*/
    
    .side_bar .menu {
        width: 85%;
        margin: 0 calc((100% - 85% - 4px - 16px) / 2);
    }
    
    .card .body {
        flex-direction: column;
        align-items: center;
    }
    
    .card .body .plan_status_label.premium {
        left: 30%;
    }
    
    .card .body .user_info {
        gap: 12px;
        margin: 8px 0 16px;
    }
    
    .membership_container, .no_family_found, .family_details,
    .card.danger .body .info_container{
        flex-direction: column;
        gap: 16px;
    }
    
    .family_button, 
    .membership_text_info,
    .membership_buttons, 
    .membership_buttons form,
    .no_family_buttons,
    button.manage_plan,
    button.family_primary_button,
    button.family_secondary_button,
    button.destructive_button,
    .body .setting, 
    .info_container, 
    .card .body .contents_container,
    a.purchase_plan {
        width: 100%;
    }
    
    button.cb-passkey-list-primary-button {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media screen and (width <= 660px) {
    .dashboard {
        padding: 4vh 10vw;
    }
    .side_bar {
        top: calc(100% - 180px);
    }
    .side_bar .menu {
        margin: 0 calc((100% - 85% - 4px) / 2);
        padding: 8px 0;
    }
    .side_bar .menu ul {
        display: grid;
        grid-template-columns: repeat(4, 60px);
        gap: 12px;
    }
    .card .body {
        padding: 16px;
    }
    .menu .menu_item {
        margin: 0;
    }
    .divider {
        margin: 20px 50%;
        height: calc(100% - 40px);
    }
    .menu .menu_item h6 {
        margin: 0;
        font-size: 14px;
    }
    .logout_button {
        z-index: 10;
        backdrop-filter: blur(4px);
    }
    .dashboard .card_empty_space {
        height: 10vh;
    }
    .legal {
        margin-bottom: 190px;
    }
    .invite_members_container {
        margin-top: 32px;
    }
    .warning_banner,
    .confirmation #email_not_correct_error {
        width: auto;
    }
    .confirmation #email_not_correct_error {
        text-wrap: wrap;
        line-height: 1.1;
    }
}

@media screen and (width <= 550px) {
    /*.popup {*/
    /*    padding: 30px 14px 14px;*/
    /*}*/
    .popup_family_information {
        flex-direction: column;
        gap: 12px;
    }
    .share_invitation_container {
        flex-direction: column;
    }
    button.share_invite_code_button {
        width: 100%;
    }
    a.invite_guide_button {
        width: calc(100% - 4px);
    }
    .email_and_confirmation {
        flex-direction: column;
    }
    .confirmation h3 {
        line-height: 1.1;
        margin-bottom: 8px;
    }
    .confirmation input {
        width: auto;
    }
    .confirmation button.destructive_button {
        height: 48px;
    }
}