.btn.btn-primary{
    background-color: var(--primary);
    color:var(--btn-color);
    border:1px solid var(--primary);
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active{
    background-color: var(--primary);
    color:var(--btn-color);
    border:1px solid var(--primary);
    opacity: 0.7;
}
.btn.btn-outline-primary{
    color:var(--primary);
    border:1px solid var(--primary);
}
.btn.btn-outline-primary:hover{
    background-color:var(--primary);
    border:1px solid var(--primary);
    color:#ffffff;
}
.text-primary{
    color: var(--primary) !important;
}
.text-bg-primary{
    background-color: var(--primary) !important;
    color:var(--btn-color) !important;
}

.bg-primary{
    background-color: var(--primary) !important;
    color:var(--btn-color) !important;
}
.track .step + .step:after{
    background-color:var(--primary);
}
.btn-list li a{
    background-color:var(--primary);
    color:#ffffff;
}
.btn-list li a:hover{
    opacity: 0.7;
}
table{
    a{
        color:var(--primary);
    }
}
.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}

.pie-container{
    position: relative;
    height:0;
    padding-bottom:70%;
    width:70%;
}
.disc-label{
    width: 140px;
    height: 140px;
    background-color: #000000;
    color: #ffffff;
    font-weight: 700;
    font-size: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.pie {
    overflow:hidden;
    position: absolute;
    left:0;
    top:0;
    margin: 0;
    padding: 0 !important;
    width: 100%; height: 100%;
    border-radius: 50%;
    list-style: none;
  }
  .pie:before{
    content:'';
    border: dashed 1px;
    border-radius: 50%;
    width: 84%;
    height: 84%;
    display: block;
    margin-left: 8%;
    margin-top: 8%;
  }
  .slice {
    overflow: hidden;
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 50%;
    transform-origin: 0% 100%; 
  }
  .slice:after {
    display: flex;
    width: 40px;
    height: 40px;
    color: #ffffff;
    border-radius: 50%;
    margin-left: calc(50% - 20px);
    margin-top: calc(50% - 20px);
    position: relative;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    font-weight: 700;
    font-size: 16px;
    border: 1px solid #ffffff;
  }
  .slice:nth-child(1) {
    transform: rotate(45deg) ;
  }
  .slice:nth-child(1):after {
    content: 'I';
    background-color: #fad751;
    transform: rotate(-45deg);
  }
  .slice:nth-child(2) {
    transform: rotate(135deg) ;
  }
  .slice:nth-child(2):after {
    content: 'S';
    background-color: #aff0d2;
    transform: rotate(-135deg);
  }
  .slice:nth-child(3) {
    transform: rotate(225deg) ;
  }
  .slice:nth-child(3):after {
    content: 'C';
    background-color: #7e84cc;
    transform: rotate(-225deg);
  }
  .slice:nth-child(4) {
    transform: rotate(315deg) ;
  }
  .slice:nth-child(4):after {
    content: 'D';
    background-color: #ee7e8c;
    transform: rotate(-315deg);
  }
  .slice-contents {
    position: absolute;
    left: -100%;
    width: 200%; height: 200%;
    border-radius: 50%;
    background: lightblue;
  }
  .slice:nth-child(1) .slice-contents {
    background: linear-gradient(to bottom, #fad751 30%, #a58b25 100%);
  }
  .slice:nth-child(2) .slice-contents {
    background: linear-gradient(to bottom, #aff0d2 30%, #5c977b 100%);
  }
  .slice:nth-child(3) .slice-contents {
    background: linear-gradient(to bottom, #7e84cc 30%, #494e8a 100%);
  }
  .slice:nth-child(4) .slice-contents {
    background: linear-gradient(to bottom, #ee7e8c 30%, #863640 100%);
  }
  .slice:nth-child(1):hover .slice-contents { background: #a58b25; }
  .slice:nth-child(2):hover .slice-contents { background: #5c977b; }
  .slice:nth-child(3):hover .slice-contents { background: #494e8a; }
  .slice:nth-child(4):hover .slice-contents { background: #863640; }
  div.dataTables_wrapper div.dataTables_filter{
    margin-bottom:20px;
  }
  div.dataTables_wrapper div.dataTables_filter input{
    padding: 9px 15px;
    border-bottom: 1px solid #f3f3ed;
  }

.accordion-item{
  border: 1px solid #f3f3ed !important;
  border-radius: 7px !important;
  overflow: hidden;
}
.accordion-item + .accordion-item{
  margin-top:15px;
}
.accordion-item .source-link, .accordion-item .accordion-collapse, .accordion-item .sub{
  padding: 10px;
 }
 .accordion-item .source-link {
  display: flex;
  justify-content: space-between;
 }
.accordion-item .accordion-button{
  padding: 10px;
  background-color:#f3f3ed;
}
.accordion-item .accordion-button.collapsed::after{
  font: var(--fa-font-solid);
    content: '\f078';
}
.accordion-item .accordion-button::after{
  font: var(--fa-font-solid);
    content: '\f077';
}
@media (max-width: 1500px) {
  .disc-label {
    width: 70px;
    height: 70px;
    font-size: 30px;
  }
}
@media (max-width: 991px) {
    .navbar-collapse{
        border-bottom: 2px solid  var(--primary) !important;
    }
    .pie-container {
      padding-bottom: 100%;
      width: 100%;
  }
  .disc-label {
    width: 140px;
    height: 140px;
    font-size: 34px;
  }
}
@media (max-width: 480px) {
  .disc-label {
    width: 70px;
    height: 70px;
    font-size: 30px;
  }
}