@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.table__text-wrapper {
text-align: center;
max-width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.table {
border-collapse: collapse;
display: table;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
table-layout: fixed;
min-width: 100%;
}
.table b, .table strong {
display: contents;
}
.table--border-all .table__row .table__cell:not(:first-child),
.table--border-all .table__header .table__cell:not(:first-child),
.table--border-inner .table__row .table__cell:not(:first-child),
.table--border-inner .table__header .table__cell:not(:first-child) {
border-left: 1px solid #d9d9d9;
}
.table--border-all .table__row:not(:last-child),
.table--border-all .table__header,
.table--border-inner .table__row:not(:last-child),
.table--border-inner .table__header {
border-bottom: 1px solid #d9d9d9;
}
.table--border-all,
.table--border-outer {
border: 1px solid #d9d9d9;
}
.table--striped .table__row:nth-child(even) .table__cell {
background-color: #efefef;
}
.table--alt-header .table__header .table__cell {
background-color: $secondary !important;
padding: 1.5rem 1rem;
font-size: 20px;
text-align: left;
font-weight: 700;
}
.table--alt-header .table__header .table__cell:not(.empty) div {
display: inline-block;
color: #fff !important;
}
.table--alt-header .table__header .table__cell:not(.empty) div:before {
bottom: 30%;
}
.table--freeze-first .table__header .table__cell:first-child,
.table--freeze-first .table__row .table__cell:first-child {
position: -webkit-sticky;
position: sticky;
left: -1px;
z-index: 1;
-webkit-box-shadow: inset -2px 0 0 #d9d9d9;
box-shadow: inset -2px 0 0 #d9d9d9;
}
.table--freeze-first .table__header .table__cell:nth-child(2),
.table--freeze-first .table__row .table__cell:nth-child(2) {
border-left: transparent;
}
.table__header,
.table__row,
.table__cell {
font-size: 18px;
font-weight: 500;
}
.table__header,
.table__row {
display: table-row;
}
.table__cell {
background-color: #fff;
display: table-cell;
-ms-flex-preferred-size: 0;
flex-basis: 0%;
min-width: 9rem;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
overflow: hidden;
padding: 1rem;
text-align: left;
vertical-align: baseline;
}
.table__cell > div {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.table__cell .tick {
margin: 0 8px;
}
.table__cell .country-flag {
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
margin: 0 24px;
border-radius: 2rem;
width: 30px;
height: 30px;
-o-object-fit: cover;
object-fit: cover;
}
.table__caption {
font-size: 14px;
margin-top: 1rem;
opacity: 0.75;
text-align: center;
}
.table-wrapper {
overflow-x: auto;
}
.block-table--align-left .table__cell {
text-align: left !important;
}
.block-table--align-center .table__cell {
text-align: center !important;
}
.block-table--align-right .table__cell {
text-align: right !important;
}
.table--border-all .table__row .table__cell:not(:first-child),
.table--border-all .table__header .table__cell:not(:first-child),
.table--border-inner .table__row .table__cell:not(:first-child),
.table--border-inner .table__header .table__cell:not(:first-child) {
border-left: 1px solid #d9d9d9;
}
.table--border-all .table__row .table__cell:first-child,
.table--border-inner .table__row .table__cell:first-child {
position: relative;
@media screen and (max-width: 767px) {
&::before {
content: "";
height: 100%;
width: 1px;
background-color: #d9d9d9;
position: absolute;
left: 0;
top: 0;
}
}
}
.table--border-all .table__row:not(:last-child),
.table--border-all .table__header,
.table--border-inner .table__row:not(:last-child),
.table--border-inner .table__header {
border-bottom: 1px solid #d9d9d9;
}
.table--border-all,
.table--border-outer {
border: 1px solid #d9d9d9;
}
.table--striped .table__row:nth-child(even) .table__cell {
background-color: #efefef;
}
.table--alt-header .table__header .table__cell {
background-color: $secondary !important;
padding: 1.5rem 1rem;
font-size: 20px;
text-align: left;
font-weight: 700;
}
.table--alt-header .table__header .table__cell:not(.empty) div {
display: inline-block;
color: #fff !important;
}
.table--alt-header .table__header .table__cell:not(.empty) div:before {
bottom: 30%;
}
.table--freeze-first .table__header .table__cell:first-child,
.table--freeze-first .table__row .table__cell:first-child {
position: -webkit-sticky;
position: sticky;
left: -1px;
z-index: 1;
-webkit-box-shadow: inset -2px 0 0 #d9d9d9;
box-shadow: inset -2px 0 0 #d9d9d9;
}
.table--freeze-first .table__header .table__cell:nth-child(2),
.table--freeze-first .table__row .table__cell:nth-child(2) {
border-left: transparent;
}
.table__header,
.table__row,
.table__cell {
font-size: 18px;
font-weight: 500;
}
.table__header,
.table__row {
display: table-row;
}
.table__cell {
background-color: #fff;
display: table-cell;
-ms-flex-preferred-size: 0;
flex-basis: 0%;
min-width: 9rem;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
overflow: hidden;
padding: 1rem;
text-align: left;
vertical-align: baseline;
}
.table__cell > div {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.table__cell .tick {
margin: 0 8px;
}
.table__cell .country-flag {
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
margin: 0 24px;
border-radius: 2rem;
width: 30px;
height: 30px;
-o-object-fit: cover;
object-fit: cover;
}
.table__caption {
font-size: 14px;
margin-top: 1rem;
opacity: 0.75;
text-align: center;
}
.table-wrapper {
overflow-x: auto;
}
.block-table--align-left .table__cell {
text-align: left !important;
}
.block-table--align-center .table__cell {
text-align: center !important;
}
.block-table--align-right .table__cell {
text-align: right !important;
}