.vertical-menu {
width: 80%; /* lebar dari menu, saran saya tidak perlu di ubah */
}

.vertical-menu a {
background-color: #FFD9D9; /* Warna pada bagian body menu */
color: black; /* Warna tulisan */
display: block;
padding: 2px;
text-decoration: none;
font-family: arial; /*Jenis font*/;text-align: center;
}

.vertical-menu a:hover {
background-color: #ccc; /* Warna efek yang keluar ketika di arahkan mouse */
}

.vertical-menu a.active {
background-color: #800000; /* Warna pada header menu */
color: white; /*Warna font*/
font-family: arial; /*Jenis font*/;text-align: center;
}


hover {
  width:100%;
  border-collapse:collapse;
}

.hover th {
  background-color: #000f7b;
  border-bottom:0px solid #FFFFFF;
  color: #FFFFFF;
  width:100%;
  height:30px;
  vertical-align:middle;
  text-align: center;
  transition: 0.3s;
  -webkit-border-radius: 50% 20% / 10% 40%; 
  -moz-border-radius: 50% 20% / 10% 40%; 
}

.hover th a:hover {
  background-color: #fef500;
  color: #000000;
  display: block;
  border-radius: 50% 20% / 10% 40%;
}

.hover td {
  background-color: rgb(217,226,243);
  border:1px solid #fef500;
  color: #000000;
  width:100%;
  height:30px;
  vertical-align:middle;
  text-align: center;
  transition: 0.3s;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px;    
}

.hover td a {
  color: #000000;
  display:block;
  border-radius: 50% 20% / 10% 40%;
}

.hover td img {
  width:100%;  
  height:70px;
  transition: 0.3s;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px;    
}

.hover td :hover {
  background-color: #fef500;
  color: #000000;
  border-radius: 50% 20% / 10% 40%;
}

.hover tr :hover {
  #background-color: #fef500;
  #color: #000000;
  border-radius: 50% 20% / 10% 40%;
}


.pkp_site_name .is_img img {
  display: block;
  max-height: 90px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: -10px 0px 0px 0px;
}

.pkp_navigation_primary {
  display: block;
  max-width: 80%;
  text-align: left;
  background-image: linear-gradient(to left, rgba(255,0,0,0), rgb(217,226,243));
  border-radius: 50% 20% / 10% 30%;
  padding: 0px 10px 0px 10px;
  width: 100%;
}

.pkp_navigation_primary > li > a:hover {
  background:
   #fef500
     linear-gradient(
       to right,
       var(--mainColordk) 0%,
       var(--mainColordk) 0px,
       transparent
     );
  color: #000f7b;
  border-radius: 50% 20% / 10% 40%;
  text-decoration: none !important;
  border-bottom: 0px transparent;
  transition: 0.3s;
  font-weight: bold;
}

.pkp_navigation_primary > li > a {
  border-bottom: 0px solid transparent;
  padding: 7px 7px 7px 7px;
  color: #000000;
}

.pkp_navigation_user {
  float: right;
  text-align: center;
  background-color: rgb(217,226,243);
  color: #FFFFFF;
  border-radius: 50% 20% / 10% 40%;
  text-decoration: none !important;
  border-bottom: 0px solid transparent;
  padding: 0px 0px 0px 0px;
  width:auto;
  max-width: 500px;
}

.pkp_navigation_user li {
  color: #FFFFFF;
  margin-right: 8px; 
}

.pkp_navigation_user:hover {
  color: #000000;
  border-radius: 50% 20% / 10% 40%;
  text-decoration: none !important;
  border-bottom: 0px solid transparent;
  transition: 0.3s;
  padding: 10px 3px 10px 10px;
}

.pkp_navigation_user > li > a {
  color: #000000;
}

.pkp_navigation_user > li > a:hover {
  background-color: #fef500;
  color: #000000;
  border-radius: 50% 20% / 10% 40%;
  text-decoration: none !important;
  border-bottom: 0px solid transparent;
  #padding: 10px 10px 10px 10px;
  margin-right: -8px;
  padding-right: 8px;
  transition: 0.3s;
  font-weight: bold;
}

.cover img {
  max-width: 100%;
  width: 202px;
  height: 290px;
  float: right;
  margin: 7px 0px 0px 12px;
}

 .obj_issue_summary .cover {
  margin: 0px 0px 0px 0px;
 }

.obj_issue_summary .description {
  text-align: justify;
}

.pkp_structure_main p {
  text-align: justify;
}

.pkp_structure_main p img {
  max-width: 100%;
  width: 194px;
  height: auto;
  float: right;
  margin: 10px;
}

.pkp_structure_main img {
  display:block;
  margin-left: auto;
  margin-right: auto;
}

.pkp_brand_footer {
    display: none;
}

.dkbrand{
    vertical-align:middle;
}

.dkbrandL{
    float: left;
    text-align: left;
}

.dkbrandC{
    float: center;
}

.dkbrandR{
    float: right;
    text-align: center;
    line-height: 100px;
}

.dkbrand img{
    height: 50px;
    text-align: center;
}

.dkbrandR img {
  transition: 0.3s;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px;    
}

.dkbrandR :hover {
  transition: 0.3s;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.dkf {
  border-collapse:collapse;
}

.dkf td {
  vertical-align:middle;
}

.dkf img:hover {
  transition: 0.3s;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-border-radius: 50px; 
  -moz-border-radius: 50px;    
}

.dkf img {
  height: 50px;
  vertical-align:middle;
  text-align: center;
  transition: 0.3s;
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px;    
}

.graline {
  background-image: linear-gradient(to left, rgba(255,0,0,0), rgb(0,15,123));
  border: 3px solid #fef500;
  -webkit-border-radius: 50% 20% / 10% 40%; 
  -moz-border-radius: 50% 20% / 10% 40%; 
  background-size: 150% 30px;
  background-repeat: no-repeat;
  margin: -31px -30px 10px -30px;
}

.dk a {
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
  #text-decoration: none;
}

.dk a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='rgb(0,15,123)' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
  text-decoration: none;
}

.dkprg {
  margin: auto;
  text-align: justify;
}

.dkprg div {
  border-top: 2px dashed;
  border-color: #000f7b !important;
  margin:0; padding: 30px;
  counter-increment: section;
  position: relative;
}

.dkprg div:nth-child(even):before {
  content: counter(section);
  right: 100%; 
  margin-right: -20px;
  position: absolute;
  border-radius: 50%;
  width: 50px;
  background-color: #000f7b;
  text-align:center;
  color: white;
  font-size: 150%;
  vertical-align: middle;
  line-height: 50px;
  font-weight: bold;
}

.dkprg div:nth-child(odd):before {
  content: counter(section);
  left: 100%; 
  margin-left: -20px;
  position: absolute;
  border-radius: 50%;
  width: 50px;
  background-color: #000f7b;
  text-align:center;
  color: white;
  font-size: 150%;
  vertical-align: middle;
  line-height: 50px;
  font-weight: bold;
}

.dkprg div:nth-child(even) {
  border-left: 2px dashed;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-right: 30px; 
  padding-right: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dkprg div:nth-child(odd) {
  border-right: 2px dashed;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-left: 30px; 
  padding-left: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dkprg div:first-child {
  border-top: 0;
  border-top-right-radius:0;
  border-top-left-radius:0;
  border-top: 2px dashed;
  border-top-right-radius: 30px;
  margin-left: 0px;
  padding-left: 30px;
}

.dkprg div:last-child {
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
  border-bottom-right-radius: 30px;
  border-bottom: 2px dashed;
}

.dkline {
  border-top: 2px dashed;
  border-color: #000f7b !important;
  margin-right: 30px;
}

.dkcite{
  padding-left: 3em;
  text-indent: -2em;
}

.dkcite a {
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
  #text-decoration: none;
}

.dkcite a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='rgb(0,15,123)' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
  text-decoration: none;
}

.pkp_search.is_open {
  border: 1px solid #fef500;
  border-radius: 50% 20% / 10% 30%;
  overflow: hidden;
}

.pkp_search{
  margin-top: -5px;
}

.search_prompt {
  border-radius: 50% 20% / 10% 40%;
  border-bottom: none !important;
}

:root {
  --mainColordk: rgb(254,245,0);
}

.search_prompt:hover {
  background:
   #fef500
     linear-gradient(
       to top,
       var(--mainColordk) 0%,
       var(--mainColordk) 0px,
       transparent
     );
  color: #000f7b!important;
  border-radius: 50% 20% / 10% 40%;
  text-decoration: none !important;
  border-bottom: 0px transparent;
  transition: 0.5s;
  font-weight: bold;
}