/* Just setting body font and turning off margin, adding a bg colour */
.table { font-family: "Gotham SSm A","Gotham SSm B",Helvetica,Arial,sans-serif; font-weight: 400; font-style: normal; margin: 0;}


/* Default styles regardless of screen size - mobile first */
.table {
    color: #fff;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 1rem;
	font-size: 12px;
}

.table__spacer { height: 3ch; }

.table__heading {
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.table__heading--primary { background-color: #ee2737; }
.table__heading--secondary { background-color: #0f99d6; }
.table__heading--tertiary { background-color: #fabd3c; }
.table__heading--yellow { background-color: #fcbd3d; }
.table__heading--blue { background-color: #0f99d6; }
.table__heading--orange { background-color: #f2653b; }
.table__heading--green { background-color: #b9d432; }
.table__heading--red { background-color: #ee2737; }

.selected { position: relative; }
.selected:before {
    border-radius: 50%;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 12px;
    width:  12px;
}
.selected--primary:before { background-color: #ee2737;}
.selected--secondary:before { background-color: #0f99d6; }
.selected--tertiary:before { background-color: #fabd3c; }
.selected--yellow:before { background-color: #fcbd3d; }
.selected--blue:before { background-color: #0f99d6; }
.selected--orange:before { background-color: #f2653b; }
.selected--green:before { background-color: #b9d432; }
.selected--red:before { background-color: #ee2737; }
.selected--blank:before { background-color: rgba(36,61,100,0.0); }
.selected--add-on {
    color: #5989b7;
    text-transform: uppercase;
    text-align: center;
}
.selected--add-on:before { display: none; }

/* Utilities */
.visually-hidden {
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* < SMALL PHONE */
@media (max-width: 400px) {
    .table__description { max-width: 70%; }
}

/* < TABLET */
@media (max-width: 799px) {
    .sm-no { display: none; }
    .table {
        display: flex;
        flex-direction: column;
        position: relative;
		font-size: 12px;
    }
    .table td:not([class]) { display: none; }

    .table__row {
        background: linear-gradient(-90deg, #0a202c 17vw, #243d64 35vw);
        display: flex;
        flex-wrap: wrap;
        margin-left:   2vw;
        margin-right:  2vw;
        margin-bottom: 0.5rem;
    }

    .table__row .table__heading { background: #0a202c; }

    .table__heading {
        flex: 100%;
        padding-bottom: 0.5rem;
        text-align: left;
    }
    .table__heading--primary,
    .table__heading--secondary,
    .table__heading--tertiary {
        align-items: center;
        display: flex;
        justify-content: center;
        padding: 0.25rem 0.25rem 0.4rem 0.25rem;
        text-align: center;
    }

    .table__header {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .table__description {
        max-width: 75%;
        margin-right: auto;
        padding-left: 1vw;
    }

    .selected { width: 15px; }
	
	.selected--asterix:after {
    	content: '*';
    	color: #fff;
    	font-size: 1.5rem;
		position: absolute;
		left: 60%;
		top: -6px;
}

    .selected--add-on {
        font-size: 12px;
        padding-top: 2px;
        width: auto;
    }
	th, td {
		border: 0;
	}
}

/* anything larger than tablet */
@media (min-width: 800px) {
    .lg-no { display: none; }
    .table { border-spacing: 0 6px; font-size: 13px; border-collapse: separate; }
    .table td:not(.selected--add-on) { text-align: right; }

    .table__heading[scope=col] { text-align: center; width: 10vw; }
    .table__heading[scope=row] {
        text-align: right;
        width: 17vw;
    }

    .table__heading span {
        display: block;
        margin: 0 0 0 auto;
        max-width: 200px;
    }

    .table__description {
        padding-right: 2rem;
        width: 45%;
    }

    .table__row { background: linear-gradient(90deg, #0a202c 17vw, #243d64 35vw); margin-bottom: 0.5rem; }

    .selected--primary { border: 2px solid #ee2737;}
    .selected--secondary { border: 2px solid #0f99d6; }
    .selected--tertiary { border: 2px solid #fabd3c; }
    .selected--yellow { border: 2px solid #fcbd3d; }
    .selected--blue { border: 2px solid #0f99d6; }
    .selected--orange { border: 2px solid #f2653b; }
    .selected--green { border: 2px solid #b9d432; }
    .selected--red { border: 2px solid #ee2737; }

	.selected--asterix:after {
    	content: '*';
    	color: #fff;
    	font-size: 1.5rem;
		position: absolute;
		left: 56%;
		top: 4px !important;
}

    .selected--add-on {
        line-height: 1;
    }
	th, td {
		border: 0;
	}
}