.knw-teh-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 999999;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(0, 0, 0, 0.58);
}
.knw-teh-overlay.is-visible {
display: flex;
}
.knw-teh-box {
position: relative;
width: 100%;
overflow-y: auto;
box-sizing: border-box;
padding: 24px 30px 24px;
border-radius: 14px;
background: #fff;
color: #222;
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
animation: knw-teh-in .22s ease-out;
}
@keyframes knw-teh-in {
from {
opacity: 0;
transform: translateY(-14px) scale(.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.knw-teh-close {
position: absolute;
top: 8px;
right: 10px;
z-index: 2;
margin: 0;
padding: 4px 8px;
border: 0;
background: transparent;
color: #626262;
font: inherit;
font-size: 29px;
line-height: 1;
cursor: pointer;
}
.knw-teh-close:hover,
.knw-teh-close:focus-visible {
color: #111;
}
.knw-teh-image-wrap {
margin: 0 24px 12px 0;
text-align: center;
}
.knw-teh-image {
display: inline-block;
max-width: 100%;
max-height: 125px;
width: auto;
height: auto;
object-fit: contain;
}
.knw-teh-title {
margin: 0 30px 10px 0;
padding: 0;
color: #222;
font-size: 24px;
line-height: 1.2;
}
.knw-teh-content {
font-size: 15.5px;
line-height: 1.42;
}
.knw-teh-content p {
margin: 0 0 9px;
}
.knw-teh-content ul {
margin: 0 0 11px 0;
padding: 0;
list-style: none;
}
.knw-teh-content ul > li {
position: relative;
margin: 4px 0;
padding-left: 23px;
}
.knw-teh-content ul > li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #16803a;
font-weight: 700;
}
.knw-teh-content ol {
margin: 0 0 11px 0;
padding-left: 22px;
}
.knw-teh-content ol > li {
margin: 4px 0;
}
.knw-teh-actions {
margin-top: 14px;
}
.knw-teh-button {
display: inline-block;
padding: 10px 20px;
border-radius: 7px;
background: #1e73be;
color: #fff !important;
font-size: 15.5px;
font-weight: 700;
line-height: 1.35;
text-decoration: none !important;
transition: transform .15s ease, background-color .15s ease;
}
.knw-teh-button:hover,
.knw-teh-button:focus-visible {
background: #155d9b;
transform: translateY(-1px);
}
body.knw-teh-open {
overflow: hidden;
}
@media (max-width: 700px) {
.knw-teh-overlay {
display: none !important;
}
}