.dipl_progress_bar_wrapper{
background-color: #eeeeee;
overflow: hidden;
z-index: 9999;
}
.dipl_progress_bar_percent{
padding: 5px;
font-size: 12px;
} .dipl_progress_bar_layout_bar{
position: relative;
height: 30px;
width: 100%;
border-radius: 50px;
border: 0 solid #000000;
}
.dipl_progress_bar_layout_bar .dipl_progress_bar_inner{
background-color: #007bff;
transition: width 0.1s ease-out, height 0.1s ease-out;
width: 0%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
inset: 0;
color: white;
font-weight: bold;
font-family: sans-serif;
overflow: hidden;
flex-direction: row;
}
.dipl_progress_bar_striped .dipl_progress_bar_inner{
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
animation: dipl-stripe-slide 1s linear infinite;
}
@keyframes dipl-stripe-slide {
from { background-position: 40px 0; }
to { background-position: 0 0; }
} .dipl_progress_bar_wrapper.dipl_progress_bar_layout_bar[data-bar_direction="vertical"]{
width: 30px;
height: 500px;
}
.dipl_progress_bar_wrapper.dipl_progress_bar_layout_bar[data-bar_direction="vertical"] .dipl_progress_bar_percent{
writing-mode: sideways-lr;
} .dipl_progress_bar_layout_circle{
width: 150px;
position: relative;
background: none;
}
.dipl_progress_bar_layout_circle .dipl_progress_bar_inner{
width: 100% !important;
}
.dipl_progress_bar_layout_circle .dipl_progress_bar_percent{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
font-weight: bold;
color: #fff;
font-family: sans-serif;
z-index: 2;
}
.dipl_progress_bar_layout_circle svg.dipl_progress_bar_circle{
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.dipl_progress_bar_layout_circle svg circle{
fill: none;
stroke-width: 10;
cx: 50;
cy: 50;
r: 45;
}
.dipl_progress_bar_layout_circle svg circle.dipl_fill_progress_bar_bg{
fill: #131313;
stroke: none;
}
.dipl_progress_bar_layout_circle svg circle.dipl_circle_bg{
fill: none;
stroke: #eee;
stroke-width: 8;
}
.dipl_progress_bar_layout_circle svg circle.dipl_circle_fg{
fill: none;
stroke: #007bff;
stroke-linecap: round;
stroke-width: 8;
stroke-dasharray: 282.6;
stroke-dashoffset: 282.6;
} .dipl_progress_bar_layout_half_circle{
width: 150px;
position: relative;
background: none;
z-index: 9999;
}
.dipl_progress_bar_layout_half_circle .dipl_progress_bar_inner{
position: relative;
width: 100% !important;
}
.dipl_progress_bar_layout_half_circle svg.dipl_half_circle{
display: block;
width: 100%;
height: 100%;
transform: rotate(0deg);
}
.dipl_progress_bar_layout_half_circle svg .dipl_circle_bg{
fill: #131313;
stroke: #e9ecef;
stroke-width: 12;
}
.dipl_progress_bar_layout_half_circle svg .dipl_circle_fg{
fill: none;
stroke: #007bff;
stroke-width: 12;
stroke-linecap: square;
stroke-dasharray: 282.74;
stroke-dashoffset: 282.74;
}
.dipl_progress_bar_layout_half_circle .dipl_progress_bar_percent{
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
color: #ffffff;
pointer-events: none;
}.dipl_table_of_contents{
background-color: #fafafa;
}
.dipl-table-of-contents-wrapper{
position: relative;
border: 1px solid #dddddd;
}
.dipl-table-of-contents-title{
position: relative;
padding: 20px;
font-size: 20px;
background-color: #101010;
color: #ffffff;
}
.dipl-table-of-contents-content{
padding: 20px;
}
.dipl-table-of-contents-content a{
text-decoration: none;
}
.dipl-table-of-contents-content tableofcontents{
display: block;
} .dipl-table-of-contents-content tocsecentry{
position: relative;
display: block;
margin: 10px 0;
font-size: 16px;
} .dipl-table-of-contents-content sectionnum{
margin-right: 8px;
color: #000000;
} .dipl-table-of-contents-content tocsecentry tableofcontents{
display: block;
margin-left: 1rem;
} .dipl-table-of-contents-content sectionsubject{
cursor: pointer;
color: #0073aa;
}