speech {
  font-size: 10mm;
  display: inline;
  color: inherit;
  text-decoration: none;
}

/* Insert the character */
speech[open]::before {
  content: "«";
}

speech[close]::before {
  content: "»";
}

/* Underline option */
speech[underline]::before {
  text-decoration: underline;
}

/* Color options */
speech[green]::before {
  color: rgb(70,175,70);
}

speech[red]::before {
  color: rgb(205,100,100);
}

speech[blue]::before {
  color: rgb(70, 70, 220);
}






/* Style for the vertical line */
.vertical-line-1 {
border-left: 0.3mm solid black; /* Adjust the color and width as needed */
height: 100%; /* Ensure the line spans the height of the content */
position: absolute; /* Position the line absolutely */
right: 7.5mm; /* Position the line at the left edge of the container */
page-break-inside: auto; /* or auto */
}

.vertical-line-dashed-1 {
border-left: 0.3mm dashed black; /* Adjust the color and width as needed */
height: 120%; /* Ensure the line spans the height of the content */
position: absolute; /* Position the line absolutely */
top: 50%; /* Position the top edge of the line at the vertical center of the container */
transform: translateY(-50%);
right: 7.5mm; /* Position the line at the left edge of the container */
page-break-inside: auto; /* or auto */
}

.vertical-line-red-1 {
border-left: 0.3mm solid rgb(205,100,100); /* Adjust the color and width as needed */
height: 100%; /* Ensure the line spans the height of the content */
position: absolute; /* Position the line absolutely */
right: 7.5mm; /* Position the line at the left edge of the container */
page-break-inside: auto; /* or auto */
}

.vertical-line-green-1 {
border-left: 0.3mm solid rgb(70,175,70); /* Adjust the color and width as needed */
height: 100%; /* Ensure the line spans the height of the content */
position: absolute; /* Position the line absolutely */
right: 7.5mm; /* Position the line at the left edge of the container */
page-break-inside: auto; /* or auto */
}

.vertical-line-2 {
border-left: 0.3mm solid rgb(150, 150, 150); /* Adjust the color and width as needed */
height: 100%; /* Ensure the line spans the height of the content */
position: absolute; /* Position the line absolutely */
right: 5.4mm; /* Position the line at the left edge of the container */
page-break-inside: auto; /* or auto */
}

.vertical-line-3 {
border-left: 0.3mm solid rgb(200, 200, 200); /* Adjust the color and width as needed */
height: 100%; /* Ensure the line spans the height of the content */
position: absolute; /* Position the line absolutely */
right: 3.4mm; /* Position the line at the left edge of the container */
page-break-inside: auto; /* or auto */
}

.vertical-line-inside {
border-left: 0.3mm dotted rgb(220, 220, 220); /* Adjust the color and width as needed */
height: 95%; /* Ensure the line spans the height of the content */
position: absolute; /* Position the line absolutely */
top: 50%; /* Position the top edge of the line at the vertical center of the container */
transform: translateY(-50%);
right: 0mm; /* Position the line at the left edge of the container */
page-break-inside: auto; /* or auto */

}

.diamond-marker{
width: 1.2mm;
height: 1.2mm;
transform: rotate(45deg); /* Rotate to create a diamond shape */
position: absolute;

}

.diamond-marker.top-1 {
background-color: black;
top: 0;
right: 7.0mm; /* Adjust the position for alignment */
}

.diamond-marker.bottom-1 {
background-color: black;
bottom: 0;
right: 7.0mm; /* Adjust the position for alignment */
}

.diamond-marker.top-red-1 {
background-color: rgb(205,100,100);
top: 0;
right: 7.0mm; /* Adjust the position for alignment */
}

.diamond-marker.bottom-red-1 {
background-color: rgb(205,100,100);
bottom: 0;
right: 7.0mm; /* Adjust the position for alignment */
}

.diamond-marker.top-green-1 {
background-color: rgb(70,175,70);
top: 0;
right: 7.0mm; /* Adjust the position for alignment */
}

.diamond-marker.bottom-green-1 {
background-color: rgb(70,175,70);
bottom: 0;
right: 7.0mm; /* Adjust the position for alignment */
}

.diamond-marker.top-2 {
background-color: rgb(150, 150, 150);
top: 0;
right: 5.0mm; /* Adjust the position for alignment */
}

.diamond-marker.bottom-2 {
background-color: rgb(150, 150, 150);
bottom: 0;
right: 5.0mm; /* Adjust the position for alignment */
}

.diamond-marker.top-3 {
background-color: rgb(200, 200, 200);
top: 0;
right: 3.0mm; /* Adjust the position for alignment */
}

.diamond-marker.bottom-3 {
background-color: rgb(200, 200, 200);
bottom: 0;
right: 3.0mm; /* Adjust the position for alignment */
}

/* Style for the container */
.container {
position: relative; /* Set the container as a relative position */
page-break-inside: auto; /* or auto */
}



.inner-paragraph-1 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:-2mm;
width: 161mm;
text-indent:0mm;
}



.inner-paragraph-2 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:-1mm;
width: 161mm;
}



.inner-paragraph-3 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:1.5mm;
width: 56mm;
}



.inner-paragraph-4 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:-1.5mm;
width: 119mm;
}



.inner-paragraph-5 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:0mm;
width: 70mm;
}



.inner-paragraph-6 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:-1.5mm;
width: 141mm;
}



.inner-paragraph-7 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:0.0mm;
width: 161mm;
}



.inner-paragraph-8 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:-3.0mm;
width: 163mm;
}



.inner-paragraph-9 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:0.0mm;
width: 159mm;
}



.inner-paragraph-10 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:0.0mm;
width: 164mm;
}



.inner-paragraph-11 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:-1.1mm;
width: 136mm;
}



.inner-paragraph-12 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:0.5mm;
width: 64mm;
}



.inner-paragraph-13 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:0.5mm;
width: 132mm;
}



.inner-paragraph-14 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:1.0mm;
width: 80mm;
}



.inner-paragraph-15 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:1.0mm;
width: 117mm;
}



.inner-paragraph-16 {
display: inline-block;
page-break-inside: auto;
vertical-align: top;
text-align: justify;
margin-top:0.0mm;
width: 79mm;
}




.inner-paragraph-continue {
display: inline-block;
vertical-align: bottom;
text-align: center;
background-color: rgb(150, 150, 150);
margin-top:0mm;
text-indent:0mm;
}



.ordinary-near {
margin-top:0mm;
margin-right:10mm;
margin-bottom:0mm;
margin-left:10mm;
text-align:justify;
text-indent:0mm;
}



.ordinary-far {
margin-top:0mm;
margin-right:10mm;
margin-bottom:4.5mm;
margin-left:10mm;
text-align:justify;
text-indent:0mm;
}



.only-bullet-near {
margin-top:0mm;
margin-right:4mm;
margin-bottom:0mm;
margin-left:0mm;
text-align:justify;
text-indent:-4mm;
}



.small-bullet-near {
margin-top:0mm;
margin-right:16.5mm;
margin-bottom:0mm;
margin-left:10mm;
text-align:justify;
text-indent:-6.5mm;
}



.small-bullet-far {
margin-top:0mm;
margin-right:16.5mm;
margin-bottom:4.5mm;
margin-left:10mm;
text-align:justify;
text-indent:-6.5mm;
}



.small-bullet-near-2 {
margin-top:0mm;
margin-right:14.5mm;
margin-bottom:0mm;
margin-left:10mm;
text-align:justify;
text-indent:-4.5mm;
}



.small-bullet-far-2 {
margin-top:0mm;
margin-right:14.5mm;
margin-bottom:4.5mm;
margin-left:10mm;
text-align:justify;
text-indent:-4.5mm;
}



.big-bullet-near {
margin-top:0mm;
margin-right:19.5mm;
margin-bottom:0mm;
margin-left:10mm;
text-align:justify;
text-indent:-9.5mm;
}



.big-bullet-far {
margin-top:0mm;
margin-right:19.5mm;
margin-bottom:4.5mm;
margin-left:10mm;
text-align:justify;
text-indent:-9.5mm;
}



.double-bullet-first-near {
margin-top:0mm;
margin-right:25.5mm;
margin-bottom:0mm;
margin-left:10mm;
text-align:justify;
text-indent:-15.5mm;
}



.double-bullet-first-far {
margin-top:0mm;
margin-right:25.5mm;
margin-bottom:4.5mm;
margin-left:10mm;
text-align:justify;
text-indent:-15.5mm;
}



.double-bullet-next-near {
margin-top:0mm;
margin-right:24.0mm;
margin-bottom:0mm;
margin-left:10mm;
text-align:justify;
text-indent:-5mm;
}



.double-bullet-next-far {
margin-top:0mm;
margin-right:24.0mm;
margin-bottom:4.5mm;
margin-left:10mm;
text-align:justify;
text-indent:-5mm;
}



.double-bullet-zero-near {
margin-top:0mm;
margin-right:19.5mm;
margin-bottom:0mm;
margin-left:10mm;
text-align:justify;
text-indent:0mm;
}



.double-bullet-zero-far {
margin-top:0mm;
margin-right:19.5mm;
margin-bottom:4.5mm;
margin-left:10mm;
text-align:justify;
text-indent:0mm;
}



.double-small-bullet-first-near {
margin-top:0mm;
margin-right:15mm;
margin-bottom:0mm;
margin-left:10mm;
text-align:justify;
text-indent:-5mm;
}



.double-small-bullet-next-near {
margin-top:0mm;
margin-right:18.4mm;
margin-bottom:0mm;
margin-left:10mm;
text-align:justify;
text-indent:-5mm;
}



.double-small-bullet-next-far {
margin-top:0mm;
margin-right:18.4mm;
margin-bottom:4.5mm;
margin-left:10mm;
text-align:justify;
text-indent:-5mm;
}



.boxed {
border: 1px solid rgb(150, 150, 150); /* Set border properties */
padding: 1px 2px; /* Add padding inside the box */
}

.boxed.square {
border-bottom: 1px solid rgb(100, 100, 100);
border-left: 0;
border-right: 0;
border-top: 1px solid rgb(100, 100, 100);
padding: 0px 0px; /* Add padding inside the box */
}

.boxed-dashed {
border: 1px dashed rgb(150, 150, 150); /* Set border properties */
padding: 1px 2px; /* Add padding inside the box */
}

.boxed-dotted {
border: 1px dotted rgb(150, 150, 150); /* Set border properties */
padding: 1px 2px; /* Add padding inside the box */
}

.boxed-dotted.gray {
border: 1px dotted rgb(200, 200, 200); /* Set border properties */
}

.boxed-dashed.gray {
border: 1px dashed rgb(200, 200, 200); /* Set border properties */
}

.boxed-red {
border: 1px solid rgb(255, 220, 220);
padding: 1px 2px; /* Add padding inside the box */
}

.boxed-green {
border: 1px solid rgb(210, 230, 210);
padding: 1px 2px; /* Add padding inside the box */
}

.boxed.underline-green {
border-bottom: 1px dashed rgb(190, 210, 190);
border-left: 0;
border-right: 0;
border-top: 0;
}

.boxed.underline-gradient {
border-bottom: 1px solid;
border-image: linear-gradient(to left, black, white); /* Define the gradient from black to white */
border-image-slice: 1; /* Ensure the entire border is filled with the gradient */
border-left: 0;
border-right: 0;
border-top: 0;
padding: 0px 0px; /* Add padding inside the box */
}

.boxed.underline-solidgreen {
border-bottom: 1px solid rgb(190, 210, 190);
border-left: 0;
border-right: 0;
border-top: 0;
}

.boxed.underline-blue {
border-bottom: 1px dashed rgb(70, 70, 220);
border-left: 0;
border-right: 0;
border-top: 0;
}

.boxed.underline-red {
border-bottom: 1px dashed rgb(235, 200, 200);
border-left: 0;
border-right: 0;
border-top: 0;
}

.boxed.underline-solidred {
border-bottom: 1px solid rgb(235, 200, 200);
border-left: 0;
border-right: 0;
border-top: 0;
}

.boxed.underline-black-1 {
border-bottom: 1px solid rgb(100, 100, 100);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 0px 0px; /* Add padding inside the box */
}

.boxed.underline-black-far {
border-bottom: 1px solid rgb(100, 100, 100);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 3px 0px; /* Add padding inside the box */
}

.boxed.underline-black-2 {
border-bottom: 1px solid rgb(180, 180, 180);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 0px 0px; /* Add padding inside the box */
}

.boxed.underline-black-3 {
border-bottom: 1px solid rgb(220, 220, 220);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 0px 0px; /* Add padding inside the box */
}

.boxed.underline-blackdashed {
border-bottom: 1px dashed rgb(100, 100, 100);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 0px 0px; /* Add padding inside the box */

}

.boxed.underline-blackdashed-far {
border-bottom: 1px dashed rgb(100, 100, 100);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 2px 0px; /* Add padding inside the box */
}

.boxed.underline-blackdashed2 {
border-bottom: 1px dashed rgb(200, 200, 200);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 0px 0px; /* Add padding inside the box */

}

.boxed.underline-blackdotted {
border-bottom: 1px dotted rgb(100, 100, 100);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 0px 0px; /* Add padding inside the box */

}

.boxed.underline-blackdotted-far {
border-bottom: 1px dotted rgb(100, 100, 100);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 3px 0px; /* Add padding inside the box */
}

.boxed.underline-blackdotted2 {
border-bottom: 2px dotted rgb(100, 100, 100);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 0px 0px; /* Add padding inside the box */
}

.boxed.underline-three {
border-bottom: 1px dashed rgb(100, 100, 100);
border-left: 0;
border-right: 1px dashed rgb(100, 100, 100);
border-top: 1px dashed rgb(100, 100, 100);
padding: 0px 0px; /* Add padding inside the box */
}

.boxed.underline-notsure {
border-bottom: 0;
border-left: 1px dotted rgb(100, 100, 100);;
border-right: 1px dotted rgb(100, 100, 100);;
border-top: 0;
padding: 0px 1px;
}




.zero-margin {
margin-top:0mm;
margin-right:0mm;
margin-bottom:0mm;
margin-left:0mm;
text-align:justify;
text-indent:0mm;
}



.zero-margin2 {
margin-top:0mm;
margin-right:6.5mm;
margin-bottom:0mm;
margin-left:0mm;
text-align:justify;
text-indent:-6.5mm;
}



.zero-margin2.far {
margin-bottom:4.5mm;
}



.zero-margin3 {
margin-top:0mm;
margin-right:7mm;
margin-bottom:4.5mm;
margin-left:0mm;
text-align:justify;
text-indent:-5mm;
}



.zero-margin4 {
margin-top:0mm;
margin-right:6mm;
margin-bottom:0mm;
margin-left:0mm;
text-align:justify;
text-indent:0mm;
}



.zero-margin5 {
margin-top:0mm;
margin-right:7mm;
margin-bottom:0mm;
margin-left:0mm;
text-align:justify;
text-indent:-5mm;
}



.zero-margin6 {
margin-top:0mm;
margin-right:4mm;
margin-bottom:0mm;
margin-left:0mm;
text-align:justify;
text-indent:-4mm;
}



.highlight1 {
color:  rgb(70, 175, 70);
}

.highlight2 {
color:  rgb(205, 100, 100);
}

.highlight3 {
color:  rgb(0, 150, 255);
}

.highlight4 {
color:  rgb(201, 129, 22);
}

.highlight5 {
color:  rgb(175, 120, 35);
}

.highlight6 {
color:  goldenrod;
}

.highlight7 {
color:  violet;
}

.highlight8 {
color:  sandybrown;
}

.highlight9 {
color:  rgb(5, 145, 5);
}

.highlight10 {
color:  rgb(180, 26, 26);
}

.highlight11 {
color:  rgb(162, 192, 212);
}

.highlight12 {
color:  rgb(0, 130, 230);
}

.backhighlight1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
/*background-color:  rgba(240, 255, 240);*/
}




.line-container {
display: flex;
justify-content: space-between;
width: 95%;
/*border-top: 1px solid #000; /* Optional: Add a border for better visibility */
padding: 10px; /* Optional: Add padding for better spacing */
font-size: 10mm;
font-weight: bold;
color: rgb(150, 150, 150);
}

.left-word {
order: 1; /* Specify the order of the element within the flex container */
}

.right-word {
order: 2; /* Specify the order of the element within the flex container */
}






.page-break-after {
page-break-after: always;
}


@media print {
    .header {
    position: fixed;
    top: 0mm;
    left: 40mm;
    right: 40mm;
    text-align: left;
    font-size: 5mm;

    }
    .content {
    margin-top: 17mm;
    margin-bottom: 17mm;
    margin-left: 10mm;
    margin-right: 10mm;

    }

    .my-inline-block {
    margin-bottom: calc(100vh - 20px); /* Example calculation */
    }
}




body {lang=AR-SA;
    direction: rtl;
    text-align:'right';
    width:190mm;
    font-size:4.5mm;
    line-height:240%;
    font-family:"KFGQPC Uthman Taha Naskh"}