.main-popup > h4 {
  color: #000;
  line-height: 15px;
  margin-bottom: 0.5rem;
}

/* .main-popup > ul li {
  margin-bottom: 1rem;
} */
/* 
.main-popup > ul {
  padding-right: 1rem;
  padding-left: 1rem;
  padding-top: 1rem;
} */

.main-popup > ul li::before {
  content: "\2022";
  color: #3384f3;
}

.jconfirm-buttons {
  text-align: right !important;
  border-top: none !important;
  padding-bottom: 15px !important;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box {
  border: 0px solid transparent !important;
  border-radius: 1em !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}

/*===================================================================
  [ Edit Bootsrap ]*/

body {
  background-color: #0c6bc4;
  overflow-x: hidden;
}

.text-primary {
  color: #597191 !important;
}

/* width */

::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

/* Track */

::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: rgb(209, 209, 209);
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: rgb(170, 170, 170);
}

/* table {
  table-layout:fixed;
  }
  
  table tr td {
  overflow: hidden; 
  text-overflow: ellipsis; 
  word-wrap: break-word;
  } */

/*===================================================================
  /* NAVBAR REGION */

.navbar {
  padding: 0rem 1rem;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
  /*height: 60px;*/
  background-color: #fff;
}

.navbar-brand {
  margin-right: 2em;
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: #00519b;
  font-weight: bold;
  border-bottom: 3px solid #fff;
  /*height: 60px;*/
}

.navbar-light .navbar-nav .nav-link:hover {
  color: #00519b;
  border-bottom: 3px solid #9b0dbf;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active {
  color: #9b0dbf;
}

.dropdown-toggle:focus {
  color: #00519b !important;
}

.navbar-light .navbar-nav .nav-link {
  color: #00519b;
  font-weight: bold;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid #fff;
}

.dropdown-menu {
  min-width: 11rem;
  border: 1px solid #eeeeee;
  margin-top: 0;
}

.dropdown-menu > a:hover {
  color: #00519b;
  font-weight: bold;
}

.nav-tabs {
  /*margin-bottom: 1em;*/
}

.nav-tabs .nav-link {
  color: #00519b;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #e1e4ea;
  border: 2px solid #f6f7f9;
  border-bottom: 1px solid #e5e5e5;
  padding: 0.58rem 0.75rem;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background-color: #fff;
  color: #00519b;
  font-weight: bold;
  border-bottom: 2px solid #f36f21;
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}

.icon-profile {
  background: #597191;
  color: #fff;
  border-radius: 50% !important;
  padding: 3px 8px 3px 8px;
  pointer-events: none;
}

.dropdown-profile {
  background-color: transparent;
  color: #00519b;
}

.dropdown-profile:hover {
  background-color: transparent;
  color: #00519b;
}

.navbar-light,
.dropdown-profile.active {
  color: #f36f21 !important;
}

.dropdown-profile::after {
  margin-left: 0;
}

/* END OF NAVBAR REGION */

/*===================================================================
  /* BASE CONTENT REGION*/

.maincontent {
  /* margin-top: 5em; */
  width: 75%;
}

@media (max-width: 767px) {
  .maincontent {
    width: 90%;
  }
}

.frame-content {
  padding-left: 10px;
  padding-right: 10px;
}

.frame-content > h1,
h2,
h4,
h5,
h6 {
  color: #597191;
  font-weight: bold;
}

.frame-content .breadcrumb {
  padding: 0;
  background-color: transparent;
}

.footer {
  margin-bottom: 0px;
  text-align: center;
  font-size: 12px;
}

.panel-head {
  margin-bottom: 2em;
}

.container-fluid {
  padding: 0;
}

.label-verify {
  background-color: #efb403;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12.5px;
}

.label-success {
  background-color: #49d198;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12.5px;
}

.label-failed {
  background-color: #f85359;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12.5px;
}

.label-process {
  background-color: #777777;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12.5px;
}

/*END OF BASE CONTENT REGION*/

/*===================================================================
  /*FRONT REGION*/

.wrap-input100 {
  border: none;
  background-color: #f6f7f9;
}

.input100:focus {
  border: 2px solid #3384f3;
  box-shadow: 0 0 1pt 1pt #3384f3;
  border-radius: 5px;
  background-color: #fff;
}

.g-recaptcha {
  transform: scale(0.77);
  -webkit-transform: scale(0.77);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  padding-left: 8em;
}

.btn-front-nactive {
  color: #3384f3;
  font-weight: bold;
}

.btn-front-nactive:hover {
  color: #3384f3;
}

.btn-front-active {
  border-radius: 3px;
  box-shadow: 0 4px 12px 2px rgba(51, 132, 243, 0.3);
  background-color: #3384f3;
  color: #ffffff;
}

.btn-front-active:hover {
  color: #ffffff;
}

.login100-form-regis {
  width: 550px;
  margin: 0 auto;
}

.wrap-input100-regis {
  width: 100%;
}

.lbl-regis {
  color: #597191;
  font-size: 14px;
  width: 100%;
}

.btn-regis-next {
  width: 100%;
}

.btn-regis-next:hover {
  color: #fff;
}

.btn-regis-back {
  width: 100%;
  background: none;
  color: #3384f3;
  font-weight: bold;
}

.btn-regis-back:hover {
  background: none;
  color: #3384f3;
}

.select-regis {
  height: 40px;
}

.login100-form-termcond {
  width: 85%;
  margin: 0 auto;
}

.front-footer {
  background-color: #fff;
}

.btn-termcond {
  height: 40px;
  float: right;
  text-align: left;
  color: #07111c;
  border-color: #4a95da;
  background: #ffffff;
  border-color: #cacfd9;
}

.btn-termcond:hover {
  color: #3384f3;
  border-color: #3384f3;
}

.symbol-input100 {
  font-size: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  position: absolute;
  border-radius: 25px;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 90%;
  color: #999999;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.symbol-input--style-6 {
  font-size: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  position: absolute;
  border-radius: 25px;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 90%;
  color: #999999;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.carousel-indicators li {
  background-color: #517fea;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

/*END FRONT REGION*/

/* Disable outline on focus */

.btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none;
}

.btn-informasi {
  color: #4a95da;
  border-color: #4a95da;
  background: #fff;
  font-weight: bold;
}

.btn-informasi:hover {
  color: #00519b;
}

.btn-token {
  color: #4a95da;
  border-left: 1px solid #ccc;
  font-weight: bold;
}

.btn-token:hover {
  color: #00519b;
}

@media (min-width: 767px) {
  .btn-informasi {
    float: right !important;
  }
}

.btn-back {
  color: #4a95da;
  border-color: none;
  background: #fff;
  padding: 17px 0px;
  font-size: 16px;
  font-weight: bold;
}

.btn-back:hover {
  color: #00519b;
  font-weight: bold;
}

@media (min-width: 767px) {
  .btn-back {
    float: left !important;
  }
}

.btn-reject {
  color: #4a95da;
  border-color: #4a95da;
  background: #fff;
  padding: 17px 48px;
  font-size: 16px;
  font-weight: 500;
}

.btn-reject:hover {
  color: #00519b;
  font-weight: bold;
}

/* @media (min-width: 767px) {
    .btn-reject {
        float: right !important;
    }
  } */

.btn-user {
  color: #ffffff;
  border-color: #4a95da;
  background: #3384f3;
  font-weight: bold;
  /*width: 150px;*/
}

.btn-user:hover {
  color: #00519b;
}

@media (min-width: 767px) {
  .btn-user {
    float: right !important;
  }
}

.btn-submit {
  color: #ffffff;
  background: #3384f3;
  padding: 17px 48px;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
}

.btn-submit-report {
  color: #ffffff;
  background: #3384f3;
  padding: 6px 45px;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
}

.btn-submit:hover {
  opacity: 0.7;
}

.btn-submit-before {
  color: #91a1bb;
  background: #e1e4ea;
  padding: 17px 48px;
  font-size: 16px;
  font-weight: 500;
}

.btn-submit-before:hover {
  color: #91a1bb;
  /* font-weight: bold; */
}

@media (max-width: 767px) {
  .btn-submit {
    padding: 5px 8px;
  }
}

.btn-info-front {
  height: 40px;
  float: right;
  text-align: left;
  color: #07111c;
  border-color: #4a95da;
  background: #ffffff;
  border-color: #cacfd9;
}

.btn-info-front:hover {
  color: #00519b;
}

@media (min-width: 767px) {
  .btn-info-front {
    float: right !important;
  }
}

.card-content {
  background: #fff;
  position: relative;
  border: 1px solid #e5e5e5;
  padding-top: 1em;
  padding-bottom: 2em;
  /*border-bottom: none;*/
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
}

.form-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 15px 55px;
}

.form-row-front {
  text-align: left;
  padding: 5px 5px;
  border-radius: 3px;
}

.form-row-notes {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0px 55px;
  color: #597191;
}

.form-row .name {
  width: 188px;
  color: #597191;
  font-size: 15px;
  margin-top: 11px;
}

.form-row .name2 {
  width: 188px;
  color: #597191;
  font-size: 12px;
  padding-left: 10px;
  font-weight: 700;
}

.form-row .name3 {
  width: 80px;
  color: #597191;
  font-size: 15px;
}

.input-custom {
  width: 70px;
  height: 40px;
  padding: 0px 20px;
  margin-left: 10px;
  margin-right: 30px;
  background: #f6f7f9;
  border-radius: 4px;
}

.form-row .value {
  width: -webkit-calc(100% - 188px);
  width: -moz-calc(100% - 188px);
  width: calc(100% - 188px);
}

.form-row-notes .name {
  width: 188px;
  color: #597191;
  font-size: 15px;
  margin-top: 11px;
}

.form-row-notes > p {
  color: #597191;
  font-size: 12px;
}

.form-row-regis {
  padding: 0;
}

.separator {
  border-bottom: 1.5px solid #e5e5e5;
  width: 90%;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .form-row {
    display: block;
    padding: 10px 30px;
  }
  .form-row .name,
  .form-row .name2,
  .form-row .value {
    /*display: block;*/
    width: 100%;
  }
  .form-row .name {
    margin-top: 0;
    margin-bottom: 5px;
  }
}

.input-group {
  position: relative;
  margin: 0;
}

/*input,
  textarea {
  outline: none;
  margin: 0;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  }*/

.input--style-6,
.textarea--style-6 {
  background: #f6f7f9;
  line-height: 38px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #666;
  font-size: 15px;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  padding: 0 20px;
}

.input--style-6::-webkit-input-placeholder,
.textarea--style-6::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #91a1bb;
}

.input--style-6:-moz-placeholder,
.textarea--style-6:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #91a1bb;
  opacity: 1;
}

.input--style-6::-moz-placeholder,
.textarea--style-6::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #91a1bb;
  opacity: 1;
}

.input--style-6:-ms-input-placeholder,
.textarea--style-6:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #91a1bb;
}

.input--style-6:-ms-input-placeholder,
.textarea--style-6:-ms-input-placeholder {
  /* Microsoft Edge */
  color: #91a1bb;
}

.input--style-6:focus,
.textarea--style-6:focus {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
}

.input--style-2,
.textarea--style-2 {
  background: #f6f7f9;
  line-height: 38px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #666;
  font-size: 15px;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin-right: 20px;
}

.input--style-2::-webkit-input-placeholder,
.textarea--style-2::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #91a1bb;
}

.input--style-2:-moz-placeholder,
.textarea--style-2-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #91a1bb;
  opacity: 1;
}

.input--style-2::-moz-placeholder,
.textarea--style-2::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #91a1bb;
  opacity: 1;
}

.input--style-2:-ms-2-input-placeholder,
.textarea--style-2:-ms-2-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #91a1bb;
}

.input--style-2:-ms-2-input-placeholder,
.textarea--style-2:-ms-2-input-placeholder {
  /* Microsoft Edge */
  color: #91a1bb;
}

.input--style-2:focus,
.textarea--style-2:focus {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
}

.form-control {
  border: none;
}

.input-group-text {
  background-color: #597191;
  color: #fff;
  border-color: #597191;
}

.btn-outline-secondary {
  border-color: #ced5da;
  font-size: 15px;
  background-color: #f6f7f9;
  border: none;
  color: #000;
}

.btn-outline-secondary:hover,
active {
  background-color: #f6f7f9;
  color: #000;
}

/* TABLE REGION */

.table-content {
  padding: 1.5rem;
  margin-right: 0;
  margin-left: 0;
}

thead {
  background-color: #e1e4ea;
  color: #5f789b;
  border-top: 2px solid #cacfd9;
  border-bottom: 2px solid #cacfd9;
}

table.dataTable {
  border-collapse: collapse;
  border-spacing: 0;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #cacfd9;
}

table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: none;
}

table.dataTable tbody th,
table.dataTable tbody td {
  padding: 15px 10px;
}

.dataTables_wrapper {
  font-size: 14px;
}

.dataTables_wrapper .dataTables_length {
  float: right;
  padding-right: 2em;
}

.dataTables_wrapper .dataTables_filter {
  float: left;
  text-align: left;
  padding-left: 2em;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: #333;
  margin-bottom: 1em;
}

.dataTables_filter label input {
  border: 1px solid #cacfd9;
  border-radius: 8px;
}

.dataTables_filter label input:focus {
  border: 1px solid #cacfd9;
  border-radius: 8px;
}

.dataTables_length label select {
  border: 1px solid #cacfd9;
  border-radius: 8px;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 0.755em;
  margin-right: 1em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 15px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #f36f21 !important;
  background: linear-gradient(to bottom, #fac5a6 0%, #fac5a6 100%);
  border-radius: 50%;
  border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 7px 15px;
}

.dataTables_wrapper .dataTables_info {
  padding-top: 1.55em;
}

.btn-detail-table {
  color: #5f789b;
}

/* END OF TABLE REGION */

/*DASHBOARD*/

.card-h {
  color: #5f789b;
  background-color: transparent;
  border-bottom: 1px solid #cacfd9;
  margin: 0 auto;
  width: 95%;
  padding: 0.75rem 0.5rem;
}

.card-b {
  border: none;
  border-radius: 8px;
}

.card-body {
  padding: 0rem 0.75rem;
}

.btn-card {
  background-color: #3384f3;
  font-size: 12px;
}

.table-card {
  padding: 10px 0px 10px 0px;
}

.table-card-c {
  font-size: 10px;
}

.table-card-c > thead {
  font-weight: bold;
}

.w-custom {
  height: 100%;
  width: 100%;
}

.card-notif {
  padding: 1em 2em;
}

.btn-notif {
  background-color: #ffffff;
  color: #4a95da;
  border: 1px solid #4a95da;
  font-weight: bold;
  font-size: 14px;
}

.badge-notif {
  background: #f36f21;
  color: #fff;
  border-radius: 50%;
  padding: 3.5px 6px;
  top: -20px;
  right: -20px;
}

.badge-delete {
  background: #f45156;
  color: #fff;
  border-radius: 50%;
  padding: 3px 5px;
  top: 2px;
}

.badge-delete:hover {
  background: #961519;
}

.badge-add {
  background: #06d755;
  color: #fff;
  border-radius: 50%;
  padding: 3px 5px;
  top: 2px;
}

.badge-add:hover {
  background: #109040;
}

.modal-content {
  border: none;
  border-radius: 8px;
}

.modal-header {
  background-color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: none;
}

.modal-footer {
  border-top: none;
}

.modal-footer .btn-secondary {
  background-color: transparent;
  border: none;
  color: #007bff;
}

.modal-header > h5 {
  color: #585858;
}

.close-modal {
  color: #cacfd9;
  opacity: 1;
  text-shadow: none;
}

.close-modal:hover {
  color: #184584;
}

.modal-body-btop {
  border-top: 1px solid #dee2e6;
  padding: 0rem 1rem 0rem 1rem;
}

.w-full {
  width: 100%;
}

.btn-notif-flat {
  background-color: #ffffff;
  color: #4a95da;
  border: 1px solid #4a95da;
  font-weight: bold;
  font-size: 12px;
}

.btn-notif-flat:hover {
  background-color: #ffffff;
  color: #4a95da;
}

.card-h-accordion {
  background: transparent;
  padding: 0;
}

.card-b-accordion {
  padding: 1rem 0.75rem 0rem 0.75rem;
}

.card-accordion {
  border: none;
}

.aside {
  height: 250px;
  width: 29.5%;
}

.kontak {
  font-family: Rubik-Regular;
  font-size: 14px;
  margin-left: 20px;
  text-align: justify;
}

.judul {
  font-family: Rubik-Regular;
  font-size: 32px;
  line-height: 44px;
  color: #07111c;
  margin-left: 20px;
}

.label-save-paycode {
  margin-top: 0.3rem;
}

.label-save-paycode {
  margin-top: 0.3rem;
}

.newboxes {
  display: none;
}

.warning-fav {
  color: #f45156;
  border: none;
  font-size: 14px;
}

.warning-fav:hover {
  color: #f45156;
}

.alert-danger {
  color: #dc3545;
  padding: 0;
  border: none;
  background: transparent;
}

.alert-success {
  color: #155724;
  padding: 0;
  border: none;
  background: transparent;
}

.a:hover {
  color: #333;
}

/*END OF DASHBOARD*/

/*DETAIL TRANSACTION*/

.form-row-dt {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: start;
  align-items: flex-start;
  padding: 5px 55px;
}

.form-row-dt .name {
  width: 185px;
  color: #597191;
  font-size: 15px;
  margin-top: 11px;
}

.form-row-dt .message {
  color: #597191;
  font-size: 15px;
  margin-top: 11px;
}

.form-row-dt .value {
  width: -webkit-calc(100% - 185px);
  width: -moz-calc(100% - 185px);
  width: calc(100% - 185px);
  color: #597191;
  font-size: 15px;
  margin-top: 11px;
  font-weight: bold;
}

/*END OF DETAIL TRANSACTION*/

/* Select2 adjustments */

.select2-container--default .select2-selection--single {
  background-color: #f6f7f9 !important;
  color: #597191 !important;
  border: none !important;
  padding-left: 13px !important;
  padding-top: 3px !important;
  font-size: 12px !important;
}

.select2-results__options {
  font-size: 12px !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
  padding-bottom: 13px !important;
}

.select2-dropdown--below {
  border: none !important;
  -webkit-box-shadow: -1px 6px 14px -1px rgba(0, 0, 0, 0.19) !important;
  -moz-box-shadow: -1px 6px 14px -1px rgba(0, 0, 0, 0.19) !important;
  box-shadow: -1px 6px 14px -1px rgba(0, 0, 0, 0.19) !important;
}

.select2-selection__rendered {
  line-height: 31px !important;
}

.select2-container .select2-selection--single {
  height: 35px !important;
}

.select2-selection__arrow {
  height: 34px !important;
}

.select2-selection__placeholder {
  color: #91a1bb !important;
}

/* SCROLL */

.float-up {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 40px;
  right: 40px;
  background-color: #f36f21;
  color: #fff !important;
  border-radius: 50px;
  text-align: center;
  cursor: pointer;
  visibility: hidden;
  transition: background-color 0.3s, opacity 0.4s, visibility 0.4s;
  opacity: 0;
}

.float-down {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 40px;
  right: 40px;
  background-color: #f36f21;
  color: #fff !important;
  border-radius: 50px;
  text-align: center;
  cursor: pointer;
  visibility: hidden;
  transition: background-color 0.3s, opacity 0.4s, visibility 0.4s;
  opacity: 0;
}

.showUp-btn-floating {
  visibility: visible !important;
  opacity: 1;
}

.showDown-btn-floating {
  visibility: visible !important;
  opacity: 1;
}

.float:hover {
  color: #fff !important;
  background-color: #dd5d13;
}

.my-float-up {
  font-size: 18px;
  margin-top: 16px;
}

.my-float-down {
  font-size: 18px;
  margin-top: 18px;
}

/* END OF SCROLL */

/* DISPLAY  */

@media (min-width: 1961px) and (max-width: 2560px) {
}

@media (min-width: 1601px) and (max-width: 1960px) {
  p,
  td,
  th,
  div,
  a,
  label,
  option,
  .form-control,
  .input-group-text,
  .btn-outline-primary,
  strong {
    font-size: 13px !important;
  }
  .txt1 {
    font-family: Rubik-Regular;
    font-size: 13px;
    line-height: 1.4;
    color: #555555;
  }
}

@media (min-width: 1041px) and (max-width: 1600px) {
  p,
  td,
  th,
  div,
  a,
  .btn,
  .form-control,
  .input-group-text,
  .btn-outline-primary,
  label,
  option,
  strong {
    font-size: 12px !important;
  }
  .txt1 {
    font-family: Rubik-Regular;
    font-size: 12px;
    line-height: 1.4;
    color: #555555;
  }
  .form-image-login {
    padding-left: 6% !important;
  }
}

@media (min-width: 992px) and (max-width: 1040px) {
  p,
  td,
  th,
  div,
  a,
  label,
  option,
  .form-control,
  .input-group-text,
  .btn-outline-primary,
  strong {
    font-size: 12px !important;
  }
  h1,
  h2 {
    font-size: 22px !important;
  }
  h3 {
    font-size: 17px !important;
  }
  h4,
  h5,
  h6 {
    font-size: 14px !important;
  }
  .txt1 {
    font-family: Rubik-Regular;
    font-size: 12px;
    line-height: 1.4;
    color: #555555;
  }
  .container-captcha {
    width: 80% !important;
  }
  .wrap-input100 {
    width: 80% !important;
  }
  .label-login {
    width: 80%;
  }
  .login100-form {
    padding: 100px 31px 30px 31px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  p,
  th,
  div,
  option,
  strong {
    font-size: 11px !important;
  }
  table,
  td {
    font-size: 10px !important;
  }
  h1,
  h2 {
    font-size: 20px !important;
  }
  h3,
  h4,
  h5,
  h6 {
    font-size: 14px !important;
  }
  button,
  .btn-notif,
  .btn-informasi,
  .paginate_button,
  .nav-link,
  .form-control,
  .input-group-text,
  .btn-outline-primary,
  .nav-item {
    font-size: 12px;
  }
  .badge-notif {
    top: -18px !important;
  }
  .mt-carousel {
    margin-top: 55px;
  }
  .navbar {
    padding: 0.5rem 1rem;
  }
}

@media (min-width: 600px) and (max-width: 766px) {
  .navbar {
    padding: 0.5rem 1rem;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  p,
  td,
  th,
  div,
  a,
  label,
  option,
  .form-control,
  .input-group-text,
  strong {
    font-size: 10px !important;
  }
  h1,
  h2 {
    font-size: 16px !important;
  }
  h3,
  h4,
  h5,
  h6 {
    font-size: 12px !important;
  }
  .navbar {
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 370px) {
  p,
  td,
  th,
  div,
  a,
  label,
  option,
  strong {
    font-size: 8px !important;
  }
  h1,
  h2 {
    font-size: 14px !important;
  }
  h3,
  h4,
  h5,
  h6 {
    font-size: 19px !important;
  }
  .navbar {
    padding: 0.5rem 1rem;
  }
}

.form-input-login {
  /* padding: 75px 0px 0px 0px; */
  /* margin-top: auto; */
  max-width: 100%;
  padding-top: 50px;
}

.form-control:focus {
  box-shadow: none !important;
}

/* Style buttons download*/

.btn-submit-report {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
  float: right !important;
}

/* Darker background on mouse-over buttons download */

.btn-submit-report:hover {
  opacity: 0.7;
}

/* END DISPLAY */

.table-custom {
  background-color: transparent !important;
  border: transparent !important;
}

.table-custom tr td {
  padding: 0.5em 0 0.5em 0 !important;
}

.table-body-custom tr td {
  border: transparent !important;
  padding: 0.5em 0 0.5em 0 !important;
}

.custom-tabs {
  background: transparent !important;
  border-left: transparent !important;
  border-top: transparent !important;
  border-right: transparent !important;
}

.dropdown-logout-sm {
  display: none;
}

.base-container {
  display: flex;
}

@media (max-width: 991px) {
  .right-banner {
    padding-left: 15px !important;
  }
  .right-banner-content {
    display: flex;
    flex-direction: row;
  }
  .dropdown-logout-sm {
    display: inherit;
  }
  .dropdown-logout-lg {
    display: none;
  }
  .base-container {
    flex-direction: column;
  }
  .kurs-container {
    padding-right: 1rem !important;
    padding-left: 0 !important;
  }
  .article-container {
    padding-left: 1rem !important;
    padding-right: 0 !important;
  }
  .trx-promo {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .kurs-container {
    padding-inline: 0 !important;
  }
  .article-container {
    padding-inline: 0 !important;
  }
}

@media (max-width: 476px) {
  .right-banner-content {
    display: flex;
    flex-direction: column;
  }
  .frame-container {
    padding-left: 0 !important;
  }
  .kurs-container {
    padding-inline: 0 !important;
  }
  .article-container {
    padding-inline: 0 !important;
  }
  .dataTables_wrapper .dataTables_filter {
    margin-top: 0 !important;
  }
}

/* external css: flickity.css */

.carousel-cell {
  margin-right: -10px;
  overflow: hidden;
  height: 350px;
  display: flex;
  align-items: center;
}

.carousel-cell img {
  display: block;
  height: 60%;
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
  width: 50vw;
  border-radius: 10px;
}

.carousel-cell.is-selected img {
  opacity: 1;
  -webkit-filter: none;
  filter: none;
  z-index: 1000 !important;
  height: 80%;
}

@media screen and (max-width: 768px) {
  .carousel-cell {
    height: 200px;
  }
}

.flickity-page-dots {
  display: none !important;
}

.flickity-prev-next-button.next {
  right: 20px;
}

.flickity-prev-next-button.previous {
  left: 20px;
}