.accordion-sp {
	.accordions  {
		.accordion {
			border: none;
			border-radius: 0;
			margin-bottom: 15px!important;

			&.is-active {
				.accordion-body {
					max-height: 100%!important;
				}
			}

			.accordion-header.toggle {
				background-color: #f7f7f7;
				padding: 0;
				height: 50px;
				border-bottom: none;

				span {

					&:first-child {
						height: 50px;
						width: 50px;
						background-color: $brand-orange;
						color: #fff;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 22px;
						font-weight: 700;

						&.completed-bg {
							background-color: $completed;
						}
					}

					&:nth-child(2) {
						margin-left: 30px;
						color: #000;
						display: flex;
						justify-content: center;
						font-size: 22px;
						font-weight: 700;
					}

					&:nth-child(3) {
						height: 50px;
						width: 50px;
						border: 5px solid #bfbfbf;
						background-color: #fff;
						margin-left: auto;
						position: relative;

						&.completed {
							border-color: $completed;

							&::before {
								content: "\f00c";
								position: absolute;
								font-family: FontAwesome;
								color: #97c322;
								font-size: 30px;
								position: absolute;
								left: 5px;
								top: 2px;
							}
						}
					}
				}
			}

			.accordion-body {
				border: none!important;
				background-color: #fbfbfb;

				.accordion-content {
					padding: 15px 50px 15px 80px!important;
				}
			}

			a {
				text-decoration: none!important;
			}
		}
	}

	.checkradio-flex {
		justify-content: center;

		.is-checkradio[type=radio] {
			&+label {
				&::before {
					border-radius: 20%;
				}

				&::after {
					border-radius: 20%;
					background-color: $brand-orange;
					width: 2em;
					height: 2em;
					top: -4px;
					left: -4px;
				}
			}

			&:hover {
				&:not([disabled]) {
					&+label {
						&::before {
							border-color: $brand-orange!important;
						}
					}
				}
			}
		}

		.is-checkradio[type=checkbox] {
			&+label {
				&::after {
					border-color: $brand-orange!important;
				}
			}

			&:hover {
				&:not([disabled]) {
					&+label {
						&::before {
							border-color: $brand-orange!important;
						}
					}
				}
			}
		}
	}
}