.namapasangan {
color: #fff;
display: block;
position: relative;
background: #000;
cursor: pointer;
}

.text-header-v1 h2 {
background: #00000030;
text-align: center;
border-radius: 3px;
border: solid 2px #3a7490;
box-shadow: -2px 2px 2px #000000cc;
padding: 2px;
color: #000;
width: 98%;
font-size: 15px;
font-family: Arial;
font-weight: 600;
position: absolute;
display: block;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
}

.validate {
background: #ffffffe0;
border: solid 2px #3a7490;
width: 100%;
height: 35px;
border-radius: 6px;
display: block;
left:0;
right:0;
text-align: center;
color: #000;
box-shadow: -2px 2px 2px #8f7f7f;
}

/* --------------------------------------------------------------------------------- */

.nama-dan-pasangan {
border: solid 2px #3a738e;
border-radius: 5px;
padding: 12px;
width: 100%;
color: #000;
font-size: 2.2vh;
background: #c0c0c0;
box-shadow: -2px 2px 2px #00000066;
}

.box-text {
padding: 10px;
width: 100%;
word-wrap: anywhere;
word-break: break-word;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
font-size: 2vh;
border-radius: 6px;
border: solid 2px #000;
box-shadow: -3px 3px 2px #00000052;
margin-bottom: 2px; /* Add spacing between boxes */
overflow-x: hidden;
}

.box {
padding: 10px;
width: 97%;
font-size: 3vh;
margin-inline: 5.5px;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
position: relative;
display: block;
background-color: #d3d3d3d6;
border-radius: 6px;
border: solid 2px #3a7490;
box-shadow: -3px 3px 2px #00000052;
margin-top: 30px; /* Add spacing between boxes */
overflow-x: hidden;
}

.button {
text-decoration: none;
text-align: center;
justify-content: center;
justify-self: center;
left:0;
right:0;
position: relative;
display: block;
align-content: center;
align-self: center;
font-family: arial;
font-size: 15px;
color: #fff;
background-color: #000000;
border: solid 2px #4a4e50;
box-shadow: -2px 2px 2px #0000005e;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}

.button:hover {
text-align: center;
justify-content: center;
justify-self: center;
left:0;
right:0;
position: relative;
display: block;
align-content: center;
align-self: center;
font-family: arial;
font-size: 15px;
color: #fff;
background-color: #006dab;
border: solid 2px #171718;
box-shadow: -2px 2px 2px #150405cc;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}


.tombol-share-whatsapp {
text-decoration: none;
text-align: center;
justify-content: center;
justify-self: center;
left:0;
right:0;
position: relative;
display: block;
align-content: center;
align-self: center;
font-family: arial;
font-size: 15px;
color: #000000;
background-color: #0db838;
border: solid 2px #020709;
box-shadow: -2px 2px 2px #0000005e;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}

.tombol-share-whatsapp:hover {
text-decoration: none;
text-align: center;
justify-content: center;
justify-self: center;
left:0;
right:0;
position: relative;
display: block;
align-content: center;
align-self: center;
font-family: arial;
font-size: 15px;
color: #000000;
background-color: #ffffff;
border: solid 2px #020709;
box-shadow: -2px 2px 2px #0000005e;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}

.tombol-salin-only {
text-decoration: none;
text-align: center;
justify-content: center;
justify-self: center;
left:0;
right:0;
position: relative;
display: block;
align-content: center;
align-self: center;
font-family: arial;
font-size: 15px;
color: #fff;
background-color: #626262;
border: solid 2px #313435;
box-shadow: -3px 3px 1px #000000;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}

.tombol-salin-only:hover {
text-decoration: none;
text-align: center;
justify-content: center;
justify-self: center;
left:0;
right:0;
position: relative;
display: block;
align-content: center;
align-self: center;
font-family: arial;
font-size: 15px;
color: #fff;
background-color: #3a738e;
border: solid 2px #313435;
box-shadow: -3px 3px 1px #000000;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}


.block {
position: absolute; 
font-family: Times New Roman;
font-weight: bold;
font-style: italic;
overflow-x: hidden;
}

/* Style for clickable link */
#link {
color: blue;
text-decoration: underline;
cursor: pointer;
}

.footer-bawah{
padding-top: 8px;
font-size: 12px;
width: 100%;
position: relative;
display:block;
left:0;
right:0;
bottom:0;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
border: solid 2px #4f8ba9;
padding-left: 10px;
color: #fff;
background: #000000;
}

/* ------------------ BAGIAN PETUNJUK - START ------------------- */
.text-petunjuk h2 {
background: #3a738e;
text-align: center;
border-radius: 3px;
border: solid 2px #3a7490;
box-shadow: -2px 2px 2px #000000cc;
padding: 2px;
color: #fff;
width: 50%;
font-size: 15px;
font-family: Arial;
font-weight: 600;
position: absolute;
display: block;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
}

.list-type5{
width:350px;
margin:0 auto;
}

.list-type5 ol {
list-style-type: none;
margin: 0;
margin-left: 1em;
padding: 0;
counter-reset: li-counter;
}

.list-type5 ol li{
color: #000;
font-weight: 600;
font-size: 11.5px;
position: relative;
margin-bottom: 1.5em;
padding: 0.5em;
width: 95%;
background-image: url(../../images/bg-rounded.png);
background-size: 100%;
border: solid 2px #3a738e;
background-repeat:no-repeat;
object-fit: contain;
padding-left: 50px;
box-shadow: -2px 2px 3px #0000006b;
border-radius: 0px 20px 0px 20px;
}

.list-type5 a{
text-decoration:none;
color:black;
font-size:15px;
font-family: 'Raleway', sans-serif;
}

.list-type5 li:hover{
box-shadow:inset -0.5em 0 #3a738e;
-webkit-transition: box-shadow 0.5s; /* For Safari 3.1 to 6.0 */
transition: box-shadow 0.5s;
}

.list-type5 ol li:before {
position: absolute;
top: -0.3em;
left: -0.2em;
width: 1.8em;
height: 1.2em;
font-size: 2em;
line-height: 1.2;
font-weight: bold;
text-align: center;
color: white;
border-radius: 0px 10px 0px 10px;
background-color: #3a738e;
transform: rotate(10deg);
z-index: 99;
overflow: hidden;
content: counter(li-counter);
counter-increment: li-counter;
}
/* ------------------ BAGIAN PETUNJUK - END ------------------- */

.linkonly {
word-break:break-word;
word-wrap:break-word;
text-transform:lowercase;
font-family:monospace;
width: 308px;
font-size: 14px;
color: #fff;
background: #3a738e;
padding-block: 3px;
padding-inline: 3px;
border-radius: 5px;
border: solid 2px #000000;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
position: relative;
display: block;
box-shadow: -3px 3px 3px #00000063;
}