/*
CMS specific styles
 */

.sidebar {
	.cms-header {
		padding: 25px 25px 0;

		.quality-title {
			@include typography('Rubik', 14px, 16px, $color-white);
			font-weight: 500;
			text-transform: uppercase;
		}

		.quality-subtitle {
			@include typography('Rubik', 14px, 16px, $color-white);
			padding: 10px 0 0;
		}
	}

	.cms-content {
		padding-left: 40px;
		padding-top: 10px;

		.due-date,
		.completed,
		.trial-period {
			@include typography(
				'Rubik',
				14px,
				20px,
				transparentize($color-white, 0.2)
			);

			& span {
				color: $color-white;
				font-family: 'Rubik', sans-serif;
				font-weight: 500;
			}
		}

		a.button {
			@include typography('Rubik', 14px, 20px, $color-teal-light);
			background: transparent;
			border: 2px solid $color-teal-light;
			border-radius: 28px;
			cursor: pointer;
			display: inline-block;
			margin: 10px 0;
			padding: 15px 30px;
			text-align: center;
			text-transform: uppercase;
			width: 100%;

			&:hover {
				border-color: $color-white;
				color: $color-white;
			}
		}
	}
}