/*
 * Tables
 */

@table_border_color: transparent;
@table_text_color: #565656;
@table_text_header: #565656;
@table_bg_color: #F7F7F7;
@table_header_bg_color: #fff;
@table_dark_color: rgba(255,255,255,0.08);

:root {
    --table_border_color: @table_border_color;
    --table_text_color: @table_text_color;
    --table_text_header: @table_text_header;
    --table_bg_color: @table_bg_color;
    --table_header_bg_color: @table_header_bg_color;
    --table_dark_color: @table_dark_color;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0 4px;
    margin: 0 0 24px;
    border: none;
    table-layout: fixed;
	.rems(18);
	line-height: 30px;
	font-weight: 500;


    td, th {
        padding: 9px 12px;
        text-align: left;
        border: none;
        font-size: inherit;
        line-height: inherit;
		font-weight: inherit;
		border-right: 1px solid #CBCBCB;

		&:last-child {
			border-right: none;
		}

        &.opts {
            width: 80px;
            text-align: center;
        }

        .row {
            margin: 0;
        }
    }


    td {

        background: var(--table_bg_color);
        color: var(--table_text_color);

        &:first-of-type {
            border-left: none;
            border-radius: 0;
        }

        &:last-of-type {
            border-right: none;
            border-radius: 0;
        }

    }

    tr {

		border-bottom: 1px solid #CBCBCB;


        &:last-of-type {
            td {
                border-bottom: none;
            }
        }
    }


    th {
		font-family: @secondary_font;
        font-weight: 600;
        color: var(--table_text_header);
        background: var(--table_header_bg_color);
        text-align: left;
    }
}


table.alternating {

    tr:nth-child(even) {
        td {
            background: var(--table_header_bg_color) !important;
        }
    }

    tr:nth-child(odd) {
        td {
            background: var(--table_bg_color) !important;
        }
    }
}

table.responsiveTitles {

    tr {

        @media @mobile {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }

        th {
            @media @mobile {
                display: none;
            }
        }

        td {

            @media @mobile {
                width: 100%;
                padding: 8px 16px;
            }

            .mobileTitle {
                .rems(12);
                line-height: 14px;
                margin: 0 0 6px 0;
                font-weight: normal;
                width: 100%;
                text-align: inherit;
                color: var(--secondary_color);
                display: none;

                @media @mobile {
                    display: block;
                }
            }



        }
    }
}

@media @mobile {

    .deliveryTable {

        tr {
            display: block;
            width: 100%;

            th {
                display: none;
            }

            td:nth-child(1) {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                font-weight: bold;
            }

            td:nth-child(2) {
                position: relative;
                padding-left: 0;
                padding-right: 0;

                &:before {
                    display: block;
                    float: left;
                    width: 100%;
                    content: 'Price';
                    font-weight: bold;
                }
            }

            td:nth-child(3) {
                position: relative;
                padding-left: 0;
                padding-right: 0;

                &:before {
                    display: block;
                    float: left;
                    width: 100%;
                    content: 'Description';
                    font-weight: bold;
                }
            }
        }
    }

}


/* -- STYLED TABLES -- */

.treatmentComparisonWrap {

	h3 {
		float: left;
		width: 100%;
		text-align: center;
		color: var(--primary_color);
		.rems(28);
		font-weight: normal;
	}

	table.comparison {
		border: none;

		td {
			border: none;
			.rems(13);
			color: var(--light_text_color);
		}

		tr:nth-child(even) {
			background-color: var(--third_color);
		}

		tr:first-child {

			td {
				.rems(15);
				font-weight: 500;
				color: var(--text_color);
			}
		}

		tr td:first-child {
			color: var(--text_color);
			font-weight: 500;
		}
	}

}

.innerWrap {
	float: left;
	width: 100%;

	@media all and (max-width: 520px) {
		overflow-x: auto;

		table.comparison {
			width: 520px;
		}
	}
}
