body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
}

.brand-link {
  display: block;
  font-size: 1.25rem;
  line-height: 1.5;
  /* padding: .5rem .5rem; */
  transition: width 0.3s ease-in-out;
  white-space: nowrap;
}

.brand-link .brand-image {
    float: left;
    line-height: .8;
    margin-left: 2.25rem;
    /* margin-right: .5rem; */
    margin-top: -3px;
    max-height: 60px;
    /* width: auto; */
    width: 150px; /* fix width */
    height: 42px;  /* optional, untuk konsisten visual */
}

.content-wrapper > .content {
  padding: 0 4rem;
}

.content-header {
  padding: 15px 4rem;
}

.layout-fixed .main-sidebar {
  bottom: 0;
  float: none;
  height: 100vh;
  left: 0;
  position: fixed;
  /* top: 0; */
  /* background-color: #fff; */
}

.layout-fixed .main-sidebar-seconday-color {
  bottom: 0;
  float: none;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  background-color: #404042;
}
.bg-bluegradient {
  color: #ffffff;

  background: rgba(73, 155, 234, 1);
  background: -moz-linear-gradient(
    -45deg,
    rgba(73, 155, 234, 1) 0%,
    rgba(2, 66, 135, 1) 100%
  );
  background: -webkit-gradient(
    left top,
    right bottom,
    color-stop(0%, rgba(73, 155, 234, 1)),
    color-stop(100%, rgba(2, 66, 135, 1))
  );
  background: -webkit-linear-gradient(
    -45deg,
    rgba(73, 155, 234, 1) 0%,
    rgba(2, 66, 135, 1) 100%
  );
  background: -o-linear-gradient(
    -45deg,
    rgba(73, 155, 234, 1) 0%,
    rgba(2, 66, 135, 1) 100%
  );
  background: -ms-linear-gradient(
    -45deg,
    rgba(73, 155, 234, 1) 0%,
    rgba(2, 66, 135, 1) 100%
  );
  background: linear-gradient(
    135deg,
    rgba(73, 155, 234, 1) 0%,
    rgba(2, 66, 135, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#024287', GradientType=1 );
}

.main-header-panel {
  color: #ffffff;
  background: #404042; /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    #404042 0%,
    #070102 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    #404042 0%,
    #070102 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    #404042 0%,
    #070102 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404042', endColorstr='#070102',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.bg-dark-gradient {
  color: #ffffff;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#404042+0,070102+100 */
  background: #404042; /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    #404042 0%,
    #070102 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    #404042 0%,
    #070102 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    #404042 0%,
    #070102 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404042', endColorstr='#070102',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.btn-primary {
  color: #fff;
  background-color: #499cea;
  border-color: #499cea;
  box-shadow: none;
}
.btn-sijitu-red {
  color: #fff;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bb0a1e+0,721326+100 */
  background: #bb0a1e; /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    #bb0a1e 0%,
    #721326 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    #bb0a1e 0%,
    #721326 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    #bb0a1e 0%,
    #721326 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb0a1e', endColorstr='#721326',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  /* padding-left: 5%;
    padding-right: 5%; */
  box-shadow: none;
}

.btn-sijitu-red:hover{
  color: #fff;
  transform: scale(1.03);
  transition: transform 0.3s ease;
}

.card-table{
  opacity: 0.5;
  font-size: 35px !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 15%;
}

.text-center-middle {
    text-align: center;
    vertical-align: middle;
}

.border-transparent {
  background-color: #024287;
  color: #ffffff;
}

.max-height {
  max-height: 30%;
}

.buttonWidth30 {
  width: 30%;
}

.bg_red_widget_1 {
  color: #ffffff;

  background: rgba(199, 228, 255, 1);
  background: -moz-linear-gradient(
    45deg,
    rgba(199, 228, 255, 1) 0%,
    rgba(10, 67, 127, 1) 95%,
    rgba(0, 58, 120, 1) 100%
  );
  background: -webkit-gradient(
    left bottom,
    right top,
    color-stop(0%, rgba(199, 228, 255, 1)),
    color-stop(95%, rgba(10, 67, 127, 1)),
    color-stop(100%, rgba(0, 58, 120, 1))
  );
  background: -webkit-linear-gradient(
    45deg,
    rgba(199, 228, 255, 1) 0%,
    rgba(10, 67, 127, 1) 95%,
    rgba(0, 58, 120, 1) 100%
  );
  background: -o-linear-gradient(
    45deg,
    rgba(199, 228, 255, 1) 0%,
    rgba(10, 67, 127, 1) 95%,
    rgba(0, 58, 120, 1) 100%
  );
  background: -ms-linear-gradient(
    45deg,
    rgba(199, 228, 255, 1) 0%,
    rgba(10, 67, 127, 1) 95%,
    rgba(0, 58, 120, 1) 100%
  );
  background: linear-gradient(
    45deg,
    rgba(199, 228, 255, 1) 0%,
    rgba(10, 67, 127, 1) 95%,
    rgba(0, 58, 120, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7e4ff', endColorstr='#003a78', GradientType=1 );
}

.bg_red_widget_1_2 {
  color: #ffffff;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bb0a1e+0,670e20+100 */
  background: #bb0a1e; /* Old browsers */
  background: -moz-linear-gradient(
    top,
    #bb0a1e 0%,
    #670e20 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    #bb0a1e 0%,
    #670e20 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    #bb0a1e 0%,
    #670e20 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb0a1e', endColorstr='#670e20',GradientType=0 ); /* IE6-9 */
}

.bg-dark-gradient > .card-header > h3 {
  color: #fff;
  font-weight: bold;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dark-mode .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  color: #fff;
  background-color: #bb0a1e;
}

.page-link {
  color: #bb0a1e;
  background-color: #fff;
}

a {
  color: #bb0a1e;
  text-decoration: none;
  background-color: transparent;
}

.page-item.active .page-link {
  color: #fff;
  background-color: #bb0a1e;
  border-color: #bb0a1e;
}

.bg-sijitu {
  color: #fff;
  background-color: #bb0a1e;
  border-color: #bb0a1e;
}

/************ MEDIA QUERY ***************/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .content-wrapper > .content {
    padding: 0 1rem;
  }

  .content-header {
    padding: 15px 1rem;
  }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

.list_user {
  margin-top: 8px;
}

.btn_export {
  padding-top: 0;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 18px;
}

.daterangepicker {
  color: black;
}

.content-wrapper.kanban .card.card-row .card-body.card-height {
  height: 370px;
}

.nav-sidebar .menu-open > .nav-link i.right {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.cust-image {
  width: 855px;
  margin-top: -20px;
}

.cust-image-cdd {
  width: 660px;
}

.bg-color-cdd-tittle-pdf {
  background-color: #f6f6f6;
}

.bg-color-rescreening-disabled {
  background-color: #dcdcdc;
}

.title-center {
  text-align: center;
}

.content-wrapper-padding {
  padding-right: 12.5em;
  padding-left: 12.5em;
}

#eddForm {
  display: none;
}

.tnc-biometric {
  margin-left: -5%;
  text-align: justify;
}

#loadMore {
  padding: 10px;
  text-align: center;
  background-color: #8b0000;
  color: #fff;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 1px #ccc;
  transition: all 600ms ease-in-out;
  -webkit-transition: all 600ms ease-in-out;
  -moz-transition: all 600ms ease-in-out;
  -o-transition: all 600ms ease-in-out;
}
#loadMore:hover {
  background-color: #fff;
  color: #8b0000;
  border-color: #8b0000;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  height: 225px;
}

.bg-score {
  background-color: #d3d3d3;
}

.bg-title-pdf {
  color: #ffffff;
  background-color: black;
  padding: 15px;
  margin-bottom: 0px;
}

.password-group {
  position: relative;
}

.password-visibility {
  position: absolute;
  right: 20px;
  top: 6px;
  cursor: pointer;
}

.password-visibility-login {
  right: 13px;
  top: 7px;
}

.custom-box-eye-login {
  padding-right: 1.83rem;
}

.select2 {
  width: 100% !important;
}

.padding-zero {
  padding: 0;
}

.card-section {
  background: #fff;
}

/* Accordion */
.accordion,
.accordion * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.accordion {
  overflow: hidden;
  /*    box-shadow:0px 1px 3px rgba(0,0,0,0.25);*/
  border-radius: 3px;
  background: #f6f6f6;
}

/* Section Title */
.section-title {
  /*    background:#2f2f2f;*/
  background: #bb0a1e; /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    #bb0a1e 0%,
    #721326 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    #bb0a1e 0%,
    #721326 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    #bb0a1e 0%,
    #721326 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  display: inline-block;
  border-bottom: 1px solid #1a1a1a;
  width: 100%;
  padding: 15px;
  transition: all linear 0.15s;
  color: #fff;
  font-size: 18px;
  text-shadow: 0px 1px 0px #1b1b1b;
  margin-bottom: 20px;
}

.section-title.active,
.section-title:hover {
  color: #fff;
}

.section:last-child .section-title {
  border-bottom: none;
}

.section-title:after {
  content: "+";
  font-weight: bold;
  color: #fff !important;
  float: right;
  margin-left: 5px;
}

.section-title.active:after {
  content: "\2212";
  color: white;
}

/* Section Content */
.section-content {
  display: none;
  padding: 20px;
  background: #fff;
  color: black;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  color: black;
}

.download-button {
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 5px;
}

.blue {
  background-color: #007bff;
}

.green {
  background-color: #228b22;
}

.lightskyblue {
  color: #87cefa;
}

.gold {
  color: #ffd700;
}

.orange {
  color: orange;
}

.burlywood {
  color: #deb887;
}

.black {
  color: black;
}

.tomato {
  color: tomato;
}

.grey {
  color: grey;
}

.red {
  color: red;
}

.yellow {
  color: yellow;
}

.green {
  color: green;
}

.font-13 {
  font-size: 13px;
}

.font-14 {
  font-size: 14px;
}

.font-24 {
  font-size: 24px;
}

.margin-bottom-text {
  margin-bottom: 0rem;
}

.category {
  border-radius: 25px;
  margin-bottom: 5px;
  width: 100px;
  margin-right: 10px;
}

.category-green {
  background-color: #d2e4e1;
  border: 2px solid #207868;
}

.category-purple {
  background-color: #e0defd;
  border: 2px solid #6558f5;
}

.category-maroon {
  background-color: #f6dade;
  border: 2px solid #d3455b;
}

.category-chocolate {
  background-color: #f5deb3;
  border: 2px solid chocolate;
}

.category-yellow {
  background-color: #ffefd5;
  border: 2px solid gold;
}

.category-blue {
  background-color: #f0ffff;
  border: 2px solid #6495ed;
}

.icon-next {
  margin: auto;
  /*    left: -10px;*/
  color: grey;
}

.gap-detail-text {
  margin-top: 5px;
}

.gap-name-entity {
  margin-top: -10px;
}

.box-result {
  padding: 9px;
  border: 2px solid #f2f5f7;
  margin-bottom: 10px;
  background-color: #f2f5f7;
  border-radius: 6px;
}

.pointer {
  cursor: pointer;
}

.dark-mode .card .card-result {
  color: black;
}

.color-red {
  color: red;
}

.margin-auto {
  margin: auto;
}

.color-sijitu-red {
  color: #bf3131;
}

.color-active {
  color: #4b70f5;
}

.line-height-7 {
  line-height: 7;
}

.size-radio {
  height: 19px;
  width: 25px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider2 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}

.slider2:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider2 {
  background-color: #2ab934;
}

input:focus + .slider2 {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider2:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.slider2:after {
  content: "OFF";
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked + .slider2:after {
  content: "ON";
}

.width-0 {
  vertical-align: middle;
  width: 0;
}

.margin-left-0 {
  margin-left: 0;
}

.margin-label-value-long-text {
  margin-left: 180px;
}

.margin-right-looping {
  margin-right: 5px;
}

.text-warning-update-db {
  background-color: red;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.iw-custom-delete-btn {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 10px;
}

dialog {
  padding: 1rem 3rem;
  background: white;
  /* max-width: 400px; */
  width: 100%;
  padding-top: 2rem;
  border-radius: 20px;
  border: 0;
  box-shadow: 0 5px 30px 0 rgb(0 0 0 / 10%);
  animation: fadeIn 1s ease both;
  &::backdrop {
    animation: fadeIn 1s ease both;
    background: rgb(255 255 255 / 40%);
    z-index: 2;
    backdrop-filter: blur(20px);
  }
  .x {
    filter: grayscale(1);
    border: none;
    background: none;
    position: absolute;
    top: 15px;
    right: 10px;
    transition: ease filter, transform 0.3s;
    cursor: pointer;
    transform-origin: center;
    &:hover {
      filter: grayscale(0);
      transform: scale(1.1);
    }
  }
  h2 {
    font-weight: 600;
    font-size: 2rem;
    padding-bottom: 1rem;
  }
  p {
    font-size: 1rem;
    line-height: 1.3rem;
    padding: 0.5rem 0;
    a {
      &:visited {
        color: rgb(var(--vs-primary));
      }
    }
  }
}

.separator-border {
    border-left: 3px solid black;
  }
  
  .threat {
    background-color: #d9d9d9;
  }
  
  .consequence {
    background-color: #b7b7b7;
  }
  .vulnerability {
    background-color: #e7f8d7;
  }
  
  .sticky {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .btn-custom-template{
    float: right;
    margin-top: -41px;
    margin-right: 11px;
  }

  .ira-bg-secondary {
    background-color: #404042; 
    border-radius: .25rem;
  }
.btn-sijitu-red-dark {
    background-color:#4d0a18;
}

.vertical-center-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-content:center;
}

.ira-table-field {
    background-color: #E6E7EB;
}

.ira-table-bordered-dashboard tr,
.ira-table-bordered-dashboard td {
    border: 1px solid #000 !important;
}

.ira-risk-level-1 {
    background-color: #008001;
}

.ira-risk-level-2 {
    background-color: #8EBC8E;
}

.ira-risk-level-3 {
    background-color: #FFFF00;
}

.ira-risk-level-4 {
    background-color: #FEA500;
}

.ira-risk-level-5 {
    background-color: #FE0000;
}

.center-text{
  line-height: 36px;
}