.wac-capacity-chart{
    max-width    : var(--wp--custom--width--default);
    margin-left  : auto;
    margin-right : auto;
    padding-left : var(--wp--custom--gap--page-padding);
    padding-right: var(--wp--custom--gap--page-padding);
    width        : 100%;
    color        : var(--wp--preset--color--table-cell);
}

.wac-capacity-chart__table{
    width         : 100%;
    letter-spacing: 0.56px;
}

.wac-capacity-chart__table-head{
    background-color: var(--wp--preset--color--primary);
    text-transform  : uppercase;
    color           : var(--wp--preset--color--contrast);
    line-height     : 1;
    white-space     : nowrap;
    position        : sticky;
    top             : 0;
    font-size       : var(--wp--preset--font-size--small);
    letter-spacing  : 0.84px;
}

.wac-capability-chart__table-head-col:first-child,
.wac-capacity-chart__table-row-header:first-child,
.wac-capacity-chart__table-col:first-child{
	text-align: left;
	width     : 50%;
}

.wac-capability-chart__table-head-col,
.wac-capacity-chart__table-row-group-header,
.wac-capacity-chart__table-row-header,
.wac-capacity-chart__table-col{
    padding    : 25px;
    text-align : center;
    font-weight: 400;
}

.wac-capacity-chart__table-row-header{
    font-size     : 18px;
    letter-spacing: 0.72px;
    color         : var(--wp--preset--color--base);
    text-transform: uppercase;
    line-height   : normal;
    text-wrap     : balance;
}

.wac-capacity-chart__table-row-header em{
    font-size     : var(--wp--preset--font-size--small);
    color         : var(--wp--preset--color--table-cell-alt);
    display       : block;
    font-style    : normal;
    margin-top    : 6px;
    letter-spacing: 0.84px;
}

.wac-capacity-chart__table-col{
    letter-spacing: 0.56px;
    font-size     : 14px;
}

.wac-capacity-chart__table-col dl{
	margin:0;
}

.wac-capacity-chart__table-col dt{
	display: none;
}

.wac-capacity-chart__table-col dt,
.wac-capacity-chart__table-col dd{
	margin:0;
}

.wac-capacity-chart__table-row-group-header,
.wac-capacity-chart__table-row-header{
	text-transform: uppercase;
}

.wac-capacity-chart__table-row-group-header{
    text-transform: uppercase;
    text-align    : center;
    display       : none;
    font-size     : 16px;
    line-height   : 1.4em;
    letter-spacing: 0.64px;
}

.wac-capacity-chart__table-row--even{
	background-color: var(--wp--preset--color--clear);
}

.wac-capacity-chart__chart-menu-list{
	display        : flex;
	justify-content: center;
}

.square-feet-units .square-meters-units,
.square-meters-units .square-feet-units{
    display: none;
}

.wac-capacity-chart__unit-type{
    font-size     : 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom : 30px;
    display       : block;
    text-align    : right;
}

.wac-capacity-chart__unit-type-selector{
    border        : 1px solid var(--wp--preset--color--line);
    display       : inline-block;
    padding       : 8px;
    border-radius : 20px;
    letter-spacing: 0.4px;
    line-height   : normal;
    position      : relative;
    cursor        : pointer;
}

.wac-capacity-chart__unit-type-button{
    width           : 24px;
    height          : 24px;
    background-color: var(--wp--preset--color--primary);
    display         : inline-block;
    border-radius   : 100%;
    position        : absolute;
    left            : var(--wac-capacity-chart--unit-type-button--left, 5px);
    top             : 50%;
    transform       : translateY(-50%);
    transition      : all 0.3s ease-in-out;
}

.wac-capacity-chart__unit-type-option{
    padding   : 5px;
    transition: all 0.3s ease-in-out;
}

.wac-capacity-chart__unit-type-option:first-child{
    padding-right: 0;
    margin-right : -5px;
    opacity      : var(--wac-capacity-chart--unit-type-option--first-child--opacity, 0);
}

.wac-capacity-chart__unit-type-option:last-child{
    padding-left: 0;
    margin-left : -5px;
    opacity     : var(--wac-capacity-chart--unit-type-option--last-child--opacity, 1);
}

.wac-capacity-chart__unit-type-checkbox:checked + .wac-capacity-chart__unit-type-selector {
    --wac-capacity-chart--unit-type-button--left                : calc(100% - 29px);
    --wac-capacity-chart--unit-type-option--last-child--opacity : 0;
    --wac-capacity-chart--unit-type-option--first-child--opacity: 1;
}

.wac-capacity-chart__action-list{
    --action-list--margin-top: clamp(40px, 3.57vw, 50px);

    flex-direction: column;
    gap           : clamp(20px, 2.14vw,30px);
    text-align    : center;
    text-transform: uppercase;
}

.wac-capacity-chart__action-link{
    font-size: var(--wp--preset--font-size--small);
}

@media(max-width:1100px){

	.wac-capacity-chart__table thead{
		display: none;
	}

	.wac-capacity-chart__table tbody th,
	.wac-capacity-chart__table tbody th:first-child,
	.wac-capacity-chart__table tbody td{
		display: block;
		width: 100%;
	}

	.wac-capacity-chart__table tbody th[scope=rowgroup]{
		background-color: initial;
		border-top      : 1px solid var(--wp--preset--color--line);
		border-bottom   : 1px solid var(--wp--preset--color--line);
		margin-top      : -1px;
		cursor          : pointer;
	}

	.wac-capacity-chart__table tbody th[scope=rowgroup]:after{
		content : url('data:image/svg+xml,<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5L4 3.5L7.5 0.5" stroke="black" stroke-width="1.01476"/></svg>');
		position: relative;
		display : inline-block;
		top     : -3px;
	}

	.wac-capacity-chart__table tbody .wac-capacity-chart__table-row-group.is-open th[scope=rowgroup]:after{
		transform: rotate(180deg);
		top     : 0;
	}

	.wac-capacity-chart__table tbody .wac-capacity-chart__table-row.is-open{
		display: block;
	}

	.wac-capacity-chart__table tbody th[scope=row]{
		background-color: var(--wp--preset--color--medium-background);
	}

	.wac-capacity-chart__table tbody td dl{
		display: grid;
		grid-template-columns:1fr 1fr;
	}

	.wac-capacity-chart__table tbody td dt{
		display       : block;
		text-transform: uppercase;
		text-align    : left;
	}

	.wac-capacity-chart__table-row--even{
		background:initial;
	}

	.wac-capacity-chart__table-col--even{
		background-color: var(--wp--preset--color--table-row);
	}

	.wac-capacity-chart__table-row{
		display: none;
	}

    .wac-capacity-chart__table-col--odd{
        background-color: var(--wp--preset--color--clear);
    }

    .wac-capacity-chart__table-row-header{
        text-align: center !important;
    }

    .wac-capacity-chart__unit-type{
        text-align: left;
    }
}

@media (max-width: 500px) {
    .wac-capacity-chart__menu {
        --action-link--width: 100%;
        --action-link--display: block;
    }
}