.cw-dashboard {
	padding: 0 50px 24px;
	margin-left: -20px;
	font-size: 16px;
	color: $font-color;
	background: $white-color;
	font-family: $fontFamily;
	line-height: 1.5;

	@media screen and (max-width: 1441px) {
		padding: 0 16px 24px;

	}

	a {
		text-decoration: none;
	}

	img {
		display: block;
		max-width: 100%;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
	}

	h1 {
		font-size: 22px;
		line-height: 1.3;
	}

	h2 {
		font-size: 20px;
		line-height: 1.5;
	}

	h3 {
		font-size: 18px;
		line-height: 1.5;
	}

	p {
		font-size: 16px;
		margin: 0 0 16px;
	}

	.cw-button-btn {
		display: inline-flex;
		align-items: center;
		font-size: 14px;
		font-weight: 500;
		padding: 10px 12px;
		border-radius: 100px;
		border: 1px solid $primary-color;
		cursor: pointer;
		transition: all 0.3s;

		&.outline {
			background: transparent;
			color: $primary-color;

			&:hover {
				background: $primary-color;
				color: $white-color;
			}
		}

		&.primary-btn {
			background: $primary-color;
			color: $white-color;

			&:hover:not(.deactivate) {
				background: transparent;
				color: $primary-color;
			}

			&.long-button {
				width: -webkit-fill-available;
				justify-content: center;
				font-size: 16px;
			}
		}

		&.deactivate:hover {
			opacity: 0.7;
		}
	}

	.freepro {
		width: 100%;
	}

	[disabled] {
		opacity: 0.7;
		cursor: no-drop;
		box-shadow: none;
	}
}

// button styles
.cw-button-btn {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	line-height: 2;
	font-weight: 500;
	padding: 8px 32px;
	border-radius: 100px;
	border: 1px solid $primary-color;
	cursor: pointer;
	transition: all 0.3s;

	&.btn-outline {
		background: $white-color;
		color: $primary-color;

		&:hover {
			background: $primary-color;
			color: $white-color;
		}
	}

	&.btn-disable {
		background: $white-color;
		color: $accent-color;
		opacity: 0.4;
		border-color: $accent-color;

		&:hover {
			background: $accent-color;
			color: $white-color;
		}
	}

	&.btn-primary {
		background: $primary-color;
		color: $white-color;
		padding: 8px 32px;

		&:hover:not(.deactivate) {
			background: transparent;
			color: $primary-color;
		}
	}

	&.has-icon {
		gap: 8px;
	}

	&.deactivate:hover {
		opacity: 0.7;
	}
}