#settings-tab-group{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
	gap: 1.25rem;

	@media screen and (max-width: 700px){
		gap: 3rem;
	}
}

@media screen and (max-width: 700px) {
    #settings-tab-group {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .custom-settings-tab-item {
        display: flex;
        justify-content: center;
        flex: 0 1 auto;
    }
}

.custom-settings-tab-item {
  margin-right: 2px;
}

.custom-settings-tab-link {
	color: #525252 !important;
	padding: 0.75rem 0.125rem !important;
	font-size: 0.875rem;
	font-weight: 500;
	transition: none;
	border: none !important;

	&:focus-visible {
		outline: none;
	}

	&:hover {
		border: none !important;
	}
}

.custom-settings-tab-link.active {
	border: none !important;
    border-bottom: 2px solid #0091cd !important;
    color: #0381b6 !important;
	background-color: transparent !important;
}

.settings-tab-content{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	margin-top: 1rem;

	& > div:not(.active){
		display: none;
	}
}

#settings-profile-tab-content{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	gap: 1.5rem;

	@media screen and (max-width: 700px){
		flex-direction: column;
	}
}

#settings-profile-details{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 49rem;
	height: auto;
	gap: 1rem;
	border: 1px solid #e2e4f4;
	border-radius: 1rem;
	padding: 1.25rem 1.5rem 1.5rem;

	@media screen and (max-width: 700px){
		width: 100%;
	}
}

.settings-tab-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 1rem;

	& > h6{
		font-size: 1.25rem;
		font-weight: 500;
		font-style: normal;
		font-family: "Magistral", sans-serif;
		line-height: 1.2;
		margin: 0;
	}

	& > button{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border: none;
		background-color: transparent;

		& > .material-symbols-rounded{
			font-size: 1.5rem;
			color: #bac3d3;
		}
	}
}

.settings-tab-copy{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	gap: 1rem;
}

.profile-tab-info-row{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 1rem;

	@media screen and (max-width: 700px){
		flex-direction: column;
	}
}

.profile-tab-info{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	gap: 0.375rem;
}

.profile-tab-info-label{
	font-size: 0.875rem;
	font-weight: 600;
	color: #333333;
}

.profile-tab-info-value{
	font-size: 1rem;
	font-weight: 500;
	color: #7a7b7b;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: auto;
	padding: 0.625rem 0.875rem;
	border-radius: 0.5rem;
	border: solid 1px #e5e5e5;
	gap: 0.75rem;
}

#settings-profile-photo{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 18rem;
	height: inherit;
	gap: 1rem;
	padding: 1.25rem 1.5rem 1.5rem;
	border-radius: 1rem;
	border: solid 1px #e2e4f4;

	@media screen and (max-width: 700px){
		width: 100%;
		height: auto;
	}
}

#settings-profile-tab-img-wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	overflow: clip;
	border: 1px solid #000000;
}

#profile-preview-img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

#profile-img-update-wrapper{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	gap: 0.5rem;

	& > h6{
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.2;
	}

	& > div{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: auto;
		gap: 0.75rem;
	}

	& > div > a{
		margin: 0;
		padding: 0;
		text-decoration: none;
	}
}

#profile-img-delete-btn{
	font-size: 0.875rem;
	font-weight: 500;
	font-family: "Magistral", sans-serif;
	color: #565656;
	background-color: transparent;
	border: none;
	padding: 0;
}

#chooseFileBtn{
	font-size: 0.875rem;
	font-weight: 500;
	font-family: "Magistral", sans-serif;
	color: #0091cd;
	background-color: transparent;
	border: none;
	padding: 0;
}

#settings-tab-upload-wrapper{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 100%;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	border-radius: 0.5rem;
	border: 1px dashed #b3b6d7;
}

#profile-img-upload-icon{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f4f5fe;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;

	& > .material-symbols-rounded{
		font-size: 1.25rem;
		color: #8d91ba;
	}
}

#profile-img-upload{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 0.25rem;

	& > div{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
		gap: 0.25rem;
	}

	& > div > button{
		display: flex;
		justify-content: center;
		align-items: center;
		width: fit-content;
		height: fit-content;
		border: none;
		background-color: transparent;
		padding: 0;
		color: #0091cd;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.2;
	}

	& > div > span{
		font-size: 0.75rem;
		font-weight: normal;
		color: #333333;
		line-height: 1.2;
	}

	& > span{
		text-align: center;
		font-size: 0.75rem;
		font-weight: 500;
		color: #333333;
		line-height: 1.2;
	}
}

#deleteImgModal{
	padding: 0;
}

#delete-img-modal-content{
	padding: 1.5rem;
	width: 25rem;

	@media screen and (max-width: 700px){
		width: 100%;
	}
}

#delete-img-modal-close-btn{
	top: 1.5rem;
	right: 1.5rem;
}

#delete-img-modal-copy{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	gap: 2rem;

	& > p{
		color: #525252;
		font-size: 0.875rem;
	}
}

#delete-img-modal-title{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 1.5rem;
}

#delete-img-icon-wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #d4f2ff;
	border-radius: 0.75rem;
	width: 3.5rem;
	height: 3.5rem;

	& > .material-symbols-rounded{
		font-size: 2rem;
		color: #0091cd;
		transform: rotate(-45deg);
	}
}

#delete-btn-row{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 0.75rem;

	& > div{
		width: 100%;

		& > button{
			width: 100%;
		}

		& > a{
			width: 100%;

			& > button{
				width: 100%;
			}
		}
	}
}

#settings-billing-tab-content{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
    max-width: 68rem;
	height: 100%;
	gap: 1.5rem;

	@media screen and (max-width: 700px){
		width: 100%;
	}
}

#billing-tab-header-copy{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	gap: 0.25rem;

	& > h6{
		font-size: 1.25rem;
		font-weight: 500;
		font-style: normal;
		font-family: "Magistral", sans-serif;
		line-height: 1.2;
		margin: 0;
	}

	& > span{
		font-size: 0.875rem;
		font-weight: normal;
		color: #525252;
		line-height: 1.2;
	}
}

#billing-tab-change-plan-btn{
	font-weight: 500;
}

#billing-tab-info{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	border: solid 1px #cfd2eb;
	border-radius: 0.75rem;
	overflow: clip;
}

#billing-tab-info-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 1.5rem;
	border-bottom: solid 1px #CFD2EB;
	background-color: #e2e4f4;
	padding: 1rem 1.25rem 1rem 1rem;
}

#billing-tab-info-header-title{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 1.25rem;

	& > h6{
		font-size: 1.125rem;
		font-weight: 500;
		line-height: 1.2;
		font-family: "Magistral", sans-serif;
		margin: 0;
	}

	& > div{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		border: solid 6px #c8cced;
		background-color: #7e5fda;

		& > .material-symbols-rounded{
			font-size: 1.25rem;
			color: #ffffff;
		}
	}
}

#billing-tab-active-status{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: 1.25rem;
	background-color: #fff;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	gap: 0.375rem;

	& > span{
		color: #7e5fda;
	}
}

#billing-tab-info-copy{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	gap: 0.5rem;
	padding: 1rem;

	& > p{
		font-size: 0.875rem;
		font-weight: normal;
		color: #525252;
		line-height: 1.2;
		width: 40rem;

		@media screen and (max-width: 700px){
			width: 100%;
		}
	}
}

#billing-plan-price-group{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 0.25rem;

	& > h5{
		font-size: 2rem;
		font-weight: 500;
		line-height: 1.2;
		margin: 0;
		font-family: "Magistral", sans-serif;
	}

	& > span{
		font-size: 0.875rem;
		font-weight: normal;
		color: #525252;
		line-height: 1.2;
	}
}

#settings-security-tab-content{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 39.5rem;
	height: 100%;
	gap: 3rem;

	@media screen and (max-width: 700px){
		width: 100%;
	}
}

.security-tab-group{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 1.5rem;
}

#security-tab-password-copy{

}

#password-change-form{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	gap: 1rem;

	& > .form-group{
		width: 100%;
		margin: 0;

		& > label{
			font-size: 0.875rem;
			font-weight: 500;
			line-height: 1.2;
			color: #333333;
			margin: 0;
		}

		& > div {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: auto;
			gap: 1.5rem;

			& > label {
				font-size: 0.875rem;
				font-weight: 500;
				line-height: 1.2;
				color: #333333;
				margin: 0;
			}

			& > button {
				font-size: 0.875rem;
				font-weight: 500;
				line-height: 1.2;
				color: #0091cd;
				background-color: transparent;
				border: none;
				padding: 0;

				&:disabled{
					background-color: #f6f6f6;
					color: #b3b6d7;
					cursor: not-allowed;
				}
			}
		}

		& > input{
			width: 100%;
			height: auto;
			padding: 0.625rem 0.875rem;
			border-radius: 0.5rem;
			border: solid 1px #e5e5e5;
			font-size: 1rem;
			font-weight: normal;
			line-height: 1.2;
			color: #333333;
			cursor: pointer;

			&:focus-visible{
				outline: none;
			}

			&::placeholder{
				color: #7a7b7b;
			}
		}
	}
}

#password-reset-button-group{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 0.75rem;
}

#password-requirements-group{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	gap: 0.75rem;
}

.password-requirement{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	gap: 0.6rem;

	&.valid{
		color: #0091cd;
	}

	span{
		font-size: 1rem;
		font-weight: normal;
		font-style: normal;
		line-height: 1.2;
		color: #737373;

		&.material-symbols-rounded{
			font-size: 1.25rem;
			color: #ffffff;
		}
	}
}

.requirement-icon{
	background-color: #d4d4d4;
	border-radius: 50%;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;


	&.valid{
		background-color: #0091cd;
	}
}

.page-body{
	position: relative;
}

#settings-alert-container{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 0;
	position: absolute;
	top: 7%;
	overflow: clip;

	@media screen and (max-width: 700px){
		top: 0;
	}
}

#settings-message-alert{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 37.5rem;
	height: auto;
	gap: 0.5rem;
	padding: 1rem;
	border-radius: 12px;
	background-color: #f4f5fe;

	@media screen and (max-width: 700px){
		width: 100%;
	}
}

#settings-message-alert1, 
.settings-message-alert1{
	display: flex;
	justify-content: center;
	align-items: center;

	gap: 0.5rem;
	padding: 1rem;
	border-radius: 12px;
	background-color: #f7ec84;

	@media screen and (max-width: 700px){
		width: 100%;
	}
}

#settings-message-icon{
	display: flex;
	justify-content: center;
	align-items: center;

	& > .material-symbols-rounded{
		font-size: 1.25rem;
        line-height: 1.2;
	}
}

#settings-message{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100%;
    width: 100%;

	& > p{
		margin: 0.25rem 0 0;
		font-size: 0.875rem;
		font-weight: 500;
		font-family: "Magistral", sans-serif;
	}
}

.showAlert{
	height: auto !important;
}

#security-tab-mfa-copy{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	gap: 1rem;
}

.mfa-method{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: auto;
	gap: 1.5rem;
}

.mfa-method-copy{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	gap: 0.5rem;

	& > h6{
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.2;
		margin: 0;
	}

	& > span{
		font-size: 0.875rem;
		font-weight: normal;
		color: #525252;
		line-height: 1.2;
	}
}

.toggle-container {
    display: inline-block;
    position: relative;
    width: 4rem;
    height: 1.75rem;
    background-color: #e2e4f4;
    border-radius: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;

	&.active{
		background-color: #0091cd;
	}
}

.toggle-slider {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-container.active .toggle-slider {
    transform: translateX(1.75rem);

	@media screen and (max-width: 700px){
		transform: translateX(1.5rem);
	}
}

.mfa-divider {
  width: 100%;
  height: 0.063rem;
  flex-grow: 0;
  background-color: #e2e4f4;
}