linh-hk's picture
First version
a96bcc0
/* Make the section a stable 2‑col grid: [left tabs | right content] */
.u-section-1 .u-sheet-1 {
display: grid;
grid-template-columns: 340px 1fr; /* match your left column width */
gap: 24px;
align-items: start;
}
/* Pin left link column into col 1 */
.u-section-1 .u-group-elements-1 {
grid-column: 1;
margin: 0 !important;
width: 340px;
position: sticky;
height: auto;
top: 1rem;
}
.tabcontent {
display: none;
grid-column: 2;
margin: 0 !important;
min-height: 500px;
}
.tabcontent.active { display: block; }
.tablinks, .u-btn {
cursor: pointer;
pointer-events: auto;
}
/*Tab display when active*/
.u-section-1 .u-group-elements-1 .u-btn.tablinks {
background-image: none !important;
background-color: #ffffff !important;
color: #000000 !important;
border-color: #124873 !important; /* or whatever you like */
}
/* Active state = same as Nicepage hover */
.u-section-1 .u-group-elements-1 .u-btn.tablinks.active,
.u-section-1 .u-group-elements-1 .u-btn.tablinks.active:link,
.u-section-1 .u-group-elements-1 .u-btn.tablinks.active:visited {
background-image: none !important; /* defeat gradients/none rules */
background-color: #124873 !important; /* Nicepage hover bg */
border-color: #124873 !important; /* Nicepage hover border */
color: #ffffff !important; /* Nicepage hover text */
box-shadow: none !important; /* avoid pressed look clashes */
}
/*------------------------------------------------*/
/* */
/*------------------------------------------------*/
.u-section-1 .u-sheet-1 {
min-height: 574px;
}
.u-section-1 .u-btn-1 {
font-size: 1.5rem;
font-style: italic;
border-style: solid;
background-image: none;
padding: 13px 117px 14px 116px;
}
.u-section-1 .u-btn-2 {
font-size: 1.5rem;
font-style: italic;
border-style: solid;
background-image: none;
padding: 12px 84px 14px 83px;
}
.u-section-1 .u-btn-3 {
font-size: 1.5rem;
font-style: italic;
border-style: solid;
background-image: none;
padding: 12px 31px 14px 29px;
}
.u-section-1 .u-btn-4 {
font-size: 1.5rem;
font-style: italic;
border-style: solid;
background-image: none;
padding: 12px 75px 14px;
}
.u-section-1 .u-container-layout-1 {
padding: 100px 50px;
}
.u-section-1 .u-text-1 {
margin: 20px 20px 0;
}
.u-section-1 .u-text-2 {
margin: 20px 20px 0;
}
.u-section-1 .u-table-1 {
width: 643px;
margin: 10px auto 0;
}
.u-block-85b3-97 {
height: 46px;
}
.u-section-1 .u-table-cell-1 {
font-weight: 700;
}
.u-section-1 .u-table-cell-2 {
line-height: 0.8;
font-weight: 700;
}
.u-section-1 .u-table-cell-3 {
font-weight: 700;
}
.u-section-1 .u-table-cell-4 {
font-weight: 700;
}
.u-section-1 .u-table-cell-5 {
border-style: dashed;
}
.u-section-1 .u-table-cell-6 {
border-style: dashed;
}
.u-section-1 .u-table-cell-7 {
border-style: dashed;
}
.u-section-1 .u-table-cell-8 {
border-style: dashed;
}
.u-section-1 .u-table-cell-9 {
border-style: dashed;
}
.u-section-1 .u-table-cell-10 {
border-style: dashed;
}
.u-section-1 .u-table-cell-11 {
border-style: dashed;
}
.u-section-1 .u-table-cell-12 {
border-style: dashed;
}
.u-section-1 .u-table-cell-13 {
border-style: dashed;
}
.u-section-1 .u-table-cell-14 {
border-style: dashed;
}
.u-section-1 .u-table-cell-15 {
border-style: dashed;
}
.u-section-1 .u-table-cell-16 {
border-style: dashed;
}
.u-block-85b3-120 {
height: 46px;
}
.u-section-1 .u-text-3 {
margin: 20px 20px 0;
}
.u-section-1 .u-table-2 {
width: 643px;
margin: 10px auto 0;
}
.u-block-85b3-135 {
height: 46px;
}
.u-section-1 .u-table-cell-17 {
font-weight: 700;
}
.u-section-1 .u-table-cell-18 {
line-height: 0.8;
font-weight: 700;
}
.u-section-1 .u-table-cell-19 {
font-weight: 700;
}
.u-section-1 .u-table-cell-20 {
font-weight: 700;
}
.u-section-1 .u-table-cell-21 {
border-style: dashed;
}
.u-section-1 .u-table-cell-22 {
border-style: dashed;
}
.u-section-1 .u-table-cell-23 {
border-style: dashed;
}
.u-section-1 .u-table-cell-24 {
border-style: dashed;
}
.u-section-1 .u-table-cell-25 {
border-style: dashed;
}
.u-section-1 .u-table-cell-26 {
border-style: dashed;
}
.u-section-1 .u-table-cell-27 {
border-style: dashed;
}
.u-section-1 .u-table-cell-28 {
border-style: dashed;
}
.u-section-1 .u-table-cell-29 {
border-style: dashed;
}
.u-section-1 .u-table-cell-30 {
border-style: dashed;
}
.u-section-1 .u-table-cell-31 {
border-style: dashed;
}
.u-section-1 .u-table-cell-32 {
border-style: dashed;
}
.u-block-85b3-158 {
height: 46px;
}
.u-section-1 .u-container-layout-4 {
padding: 50px 50px;
}
.u-section-1 .u-text-4 {
margin: 20px 20px 0;
}
@media (max-width: 1199px) {
.u-section-1 .u-group {
height: auto;
}
}
@media (max-width: 991px) {
.u-section-1 .u-group {
margin-right: 37px;
}
}
@media (max-width: 767px) {
.u-section-1 .u-text-1 {
margin-left: 0;
margin-right: 0;
}
.u-section-1 .u-text-2 {
margin-left: 0;
margin-right: 0;
}
.u-section-1 .u-table-1 {
width: 540px;
}
.u-section-1 .u-text-3 {
margin-left: 0;
margin-right: 0;
}
.u-section-1 .u-table-2 {
width: 540px;
}
.u-section-1 .u-text-4 {
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 575px) {
.u-section-1 .u-group-elements-1 {
margin-left: 0;
}
.u-section-1 .u-group {
width: 340px;
}
.u-section-1 .u-table-1 {
width: 340px;
}
.u-section-1 .u-table-2 {
width: 340px;
}
}