/*
※風險顏色
一般危險：#73C887
危險：#E25B3F
極高危險：#D30000
 */

html, body {
        height: 100%;
    }
body {
        font-family: 'Roboto Condensed', 'Noto Sans TC', sans-serif;
    }
/* 首頁 */
    .cancer-group {
        display: flex;
        align-items: center;
    }
    .cancer-group-left, .cancer-group-right {
        width: 50%;
    }
    .img-home-title {
        width: 474px;
        height: 128px;
    }
    .btn-home-cancer {
        font-size: 1.25rem;
        background-color: #23AAB8;
        border: 1px solid #23AAB8;
        border-radius: 32px;
        padding: .75rem 2rem;
        color: #fff;
    }
    .btn-home-cancer:hover {
        background-color: #1D8D99;
        color: #fff;
    }
    .img-home {
        width: 100%;
    }
    .btn-shortcut {
		border: 1px solid #23AAB8;
		border-radius: 21px;
		padding: .5rem 1.5rem;
		color: #23AAB8;
		width: 100%;
	}
	.btn-shortcut:hover {
		background-color: #23AAB8;
		color: #fff;
	}
    .img-wave-t {
        width: 100%;
        position: absolute;
        top: 0;
    }
    .img-wave-b {
        width: 100%;
        position: absolute;
        bottom: 0;
    }

/* 乳癌危險評估、大腸癌危險評估 */
	.header {
		background: linear-gradient(0deg, rgba(47, 227, 245, 1)0%, rgba(115, 200, 135, 1)100%);
		background: -moz-linear-gradient(0deg, rgba(47, 227, 245, 1)0%, rgba(115, 200, 135, 1)100%);
		background: -webkit-linear-gradient(0deg, rgba(47, 227, 245, 1)0%, rgba(115, 200, 135, 1)100%);
		background: -o-linear-gradient(0deg, rgba(47, 227, 245, 1)0%, rgba(115, 200, 135, 1)100%);
	}

	.width-customized {
		max-width: 768px;
	}

	.navbar-nav-customized {
		flex-direction: unset;
	}

	.nav-text-color {
		color: #fff;
	}
	.nav-text-color:hover {
		background-color: #fff;
		color: #1D8D99;
		opacity: .8;
		border-radius: 21px;
		transition: color 240ms ease-in-out;
	}
	.nav-text-active {
		background-color: #fff;
		border-radius: 21px;
		color: #23AAB8;
		font-weight: 500;
	}
	.nav-text-active:hover {
		color: #1D8D99;
		transition: color 240ms ease-in-out;
	}
	.title {
		font-size: 1.25rem;
		font-weight: 600;
		color: #111;
	}
	.depiction {
		font-size: .875rem;
		color: #444;
	}
	.form-text {
		color: #111;
	}
	.form-control {
		color: #111;
	}
	.subject {
		font-size: 1.125rem;
		font-weight: 500;
		color: #111;
	}
	.btn-check {
		border: 1px solid #23AAB8 !important;
		border-radius: 21px;
		padding: .5rem 1.5rem;
		color: #23AAB8;
	}
	.btn-check:hover {
		background-color: #23AAB8;
		color: #fff !important;
	}
	.result {
		border: 1px solid transparent;
		border-width: 2px;
		border-image: linear-gradient(to right, rgb(47, 227, 245) 0%, rgb(115, 200, 135) 100%);
		border-image-slice: 1;
	    padding: 2rem;
	}
	.result-chart {
		width: 100%;
		margin-top: 1rem;
	}
	.result-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.result-text {
		font-size: 1.25rem;
		font-weight: 600;
		color: #111;
	}
	.result-text-color {
	    font-size: 2rem;
	    color: #73C887;
	}
	.result-annotation {
		font-size: 1.25rem;
	    color: #444;
	}
	.btn-restart {
		background-color: #23AAB8;
		border: 1px solid #23AAB8;
		border-radius: 21px;
		padding: .5rem 1.5rem;
		color: #fff;
	}
	.btn-restart:hover {
		background-color: #1D8D99;
		color: #fff;
	}