:root {
  --blue: ##007bff;
}
/*===================================
* ADDITIONAL
*===================================*/
pre.papernote {
  color: black;
  background: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre.papernote > code {
  position: relative;
  border-left: 10px solid #358ccb;
  box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
  background-color: #fdfdfd;
  background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
  background-size: 3em 3em;
  background-origin: content-box;
  background-attachment: local;
  max-height: inherit;
  height: inherit;
  padding: 0 1em;
  display: block;
  overflow: auto;
}

.datta-example-modal {
  background-color: #fff;
}
.datta-example-modal-close {
  color: #666;
}
.datta-example-modal-close:hover {
  color: #000;
  opacity: 0.9;
}

.bd-toc {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  position: -webkit-sticky;
  position: sticky;
  top: 4rem;
  height: calc(100vh - 4rem);
  overflow-y: auto;
}

.bd-toc .card-header,
.bd-toc .card-body {
  padding: 0.5rem 1.25rem;
}
.bd-toc .nav-link {
  padding: 0.125rem 1.5rem;
  color: #99979c;
}

/*===================================
* RESET
*===================================*/

.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.btn {
  cursor: pointer;
}
.btn-light-secondary {
  background: #e2e3e5;
  color: #6c757d;
  border-color: #e2e3e5;
}
.btn-light-secondary:hover {
  background: #6c757d;
  color: #fff;
  border-color: #6c757d;
}
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  pointer-events: none;
  opacity: 0.65;
}

.btn-shadow {
  -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.btn-light-danger {
  background: #ffdcdc;
  color: #ff5252;
  border-color: #ffdcdc;
}
.btn-light-danger:hover {
  background: #ff5252;
  color: #fff;
  border-color: #ff5252;
}

.btn-light-warning {
  background: #fff1dd;
  color: #ffba57;
  border-color: #fff1dd;
}
.btn-light-warning:hover {
  background: #ffba57;
  color: #fff;
  border-color: #ffba57;
}
.btn-light-success {
  background: #ebf5e0;
  color: #9ccc65;
  border-color: #ebf5e0;
}
.btn-light-success:hover {
  background: #9ccc65;
  color: #fff;
  border-color: #9ccc65;
}

.btn-light-primary {
  background: #dae6ff;
  color: #4680ff;
  border-color: #dae6ff;
}
.btn-light-primary:hover {
  background: #4680ff;
  color: #fff;
  border-color: #4680ff;
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn {
  z-index: 1;
}

.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-check:active + .btn-light-secondary,
.btn-check:checked + .btn-light-secondary {
  background: #6c757d;
  color: #fff;
  border-color: #6c757d;
}
.btn-check:active + .btn-light-primary,
.btn-check:checked + .btn-light-primary {
  background: #4680ff;
  color: #fff;
  border-color: #4680ff;
}
.btn-check:active + .btn-light-success,
.btn-check:checked + .btn-light-success {
  background: #9ccc65;
  color: #fff;
  border-color: #9ccc65;
}
.btn-check:active + .btn-light-danger,
.btn-check:checked + .btn-light-danger {
  background: #ff5252;
  color: #fff;
  border-color: #ff5252;
}

.input-group-prepend {
  margin-right: -1px;
}
.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px;
}

.input-group-text {
  border: 1px solid #ced4da;
}
.form-control {
  border: 1px solid #ced4da;
}
/*
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-text {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.form-control {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
*/
.bg-primary,
.bg-secondary,
.bg-success,
.bg-danger,
.bg-info,
.bg-dark {
  color: #fff;
}

.bg-warning,
.bg-light {
  color: #212529;
}

.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: #6c757d;
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}

html {
  scroll-padding-top: 71px; /* height of sticky header */
}

a {
  color: rgba(44, 62, 80, 0.8);
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  background-color: #bbb;
}

.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}
.list-group-numbered > li::before {
  content: counters(section, ".") ". ";
  counter-increment: section;
}
/*reset stye.css */
/*
.form-check-input {
  position: unset;
  margin-left: unset;
}
.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
  */

.auth-wrapper {
  background: #2c3e50;
}
.auth-wrapper .card {
  background: #e9e9e9;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--primary-500);
}
/*==============================
* BLUE
*==============================*/
.bg-c-blue,
.pcoded-header.header-blue {
  background-color: var(--blue);
}

.text-c-blue,
.pcoded-header.header-blue .main-search .search-close > .input-group-text,
.pcoded-header.header-blue .b-bg,
.pcoded-header.brand-blue .m-header .b-bg,
.pcoded-header[class*="header-"].brand-blue .m-header .b-bg {
  color: var(--blue);
}

.b-c-blue,
.pcoded-header.header-blue .main-search.open .input-group .search-btn {
  border-color: var(--blue);
}
.card-border-c-blue {
  border-top: 4px solid var(--blue);
}

.lay-customizer .theme-color.header-color > a[data-value="header-blue"] > span:nth-child(1):after,
.lay-customizer .theme-color.header-color > a[data-value="header-blue"] > span:nth-child(1):before,
.theme-color.header-color > a[data-value="header-blue"] > span:nth-child(1):after,
.theme-color.header-color > a[data-value="header-blue"] > span:nth-child(1):before,
.lay-customizer .theme-color.header-color.small > a[data-value="header-blue"],
.theme-color.header-color.small > a[data-value="header-blue"],
.lay-customizer .theme-color.background-color.flat > a[data-value="background-blue"],
.theme-color.background-color.flat > a[data-value="background-blue"],
.doc-img.header-color > a[data-value="header-blue"] > span:nth-child(1):after,
.doc-img.background-color.flat > a[data-value="background-blue"],
.pcoded-header.header-blue .main-search.open .input-group .search-btn,
.pcoded-header.header-blue .dropdown .profile-notification .pro-head,
body.background-blue,
body.background-blue .pcoded-navbar.theme-horizontal ~ .pcoded-header[class*="header-"],
.pcoded-header.brand-blue .m-header,
.pcoded-header[class*="header-"].brand-blue .m-header {
  background: var(--blue);
}

.doc-img.background-color.gradient > a[data-value="background-grd-blue"],
body.background-grd-blue,
body.background-grd-blue .pcoded-navbar.theme-horizontal ~ .pcoded-header[class*="header-"] {
  background: linear-gradient(to right, var(--blue) 0%, #00f2fe 100%);
}

/*=============================
* RESET PALETTE COLOR
*=============================*/
a {
  color: var(--primary-500);
}
a:hover {
  color: var(--primary-800);
}

/* reset color */
.btn-outline-primary.disabled,
.btn-outline-primary:disabled,
.btn-link,
.btn-link:hover,
.page-link,
.page-link:hover,
.card.card-load .card-loader i,
.badge-light-primary,
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu .pcoded-submenu li.active > a,
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu .pcoded-submenu li.pcoded-trigger > a,
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu .pcoded-submenu li:hover > a,
.pcoded-header .input-group-text:hover,
.pcoded-header a:hover,
.pcoded-header dropdown-toggle:hover,
.lay-customizer .theme-color > a.active:before,
.theme-color > a.active:before,
.doc-img > a.active:before,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.pcoded-trigger > a:before,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li:hover > a:before,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.active > a,
.pcoded-navbar.menu-light .pcoded-inner-navbar li.pcoded-trigger > a,
.pcoded-navbar.menu-light .pcoded-inner-navbar li:hover > a,
.pcoded-header[class*="brand-"]:not(.brand-default) .b-bg,
.lb-data .lb-caption a,
.br-theme-bars-movie .br-widget .br-current-rating,
div.dt-button-info {
  color: var(--primary-500);
}

/* reset background-color */
.badge-primary,
.progress-bar,
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary-500);
}
.dropdown-item.active,
.dropdown-item:active,
.custom-range::-webkit-slider-thumb,
.custom-range::-moz-range-thumb,
.custom-range::-ms-thumb,
.page-link {
  background-color: var(--primary-500);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after,
.pcoded-navbar.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger:after,
.widget-primary-card.flat-card,
.flat-card.widget-purple-card,
.widget-chat-box .receive-chat,
.swal-button,
.br-theme-bars-movie .br-widget a.br-active,
.br-theme-bars-movie .br-widget a.br-selected,
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
.daterangepicker .ranges ul li.active,
.daterangepicker .ranges ul li:hover,
.auth-wrapper .card-body .carousel-indicators li.active,
.show > .btn-outline-primary.dropdown-toggle,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.page-item.active .page-link,
.list-group-item.active,
a.badge-light-primary.active,
a.badge-light-primary:active,
a.badge-light-primary:focus,
a.badge-light-primary:hover,
.page-item.active .page-link,
.footable .pagination > .active > a,
.footable .pagination > .active > span,
.footable .pagination > .active > a:focus,
.footable .pagination > .active > a:hover,
.footable .pagination > .active > span:focus,
.footable .pagination > .active > span:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary-500);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--primary-100);
}
/*.select2-container--default .select2-results__option--highlighted[aria-selected],
 */
/* reset background */
.switch input[type="checkbox"]:checked + .cr:before,
.switch.switch-primary input[type="checkbox"]:checked + .cr:before,
.dropdown-menu > li.active,
.dropdown-menu > li:active,
.dropdown-menu > li:focus,
.dropdown-menu > li:hover,
.dropdown-menu > .dropdown-item.active,
.dropdown-menu > .dropdown-item:active,
.dropdown-menu > .dropdown-item:focus,
.dropdown-menu > .dropdown-item:hover,
.dropdown-menu > a.active,
.dropdown-menu > a:active,
.dropdown-menu > a:focus,
.dropdown-menu > a:hover,
.datta-example .datta-example-btns .datta-example-btn,
.md-datta-example-modal-copy,
.md-show.md-effect-12 ~ .md-overlay,
.b-brand .b-bg,
.pcoded-header .dropdown .profile-notification .pro-body li.active,
.pcoded-header .dropdown .profile-notification .pro-body li:active,
.pcoded-header .dropdown .profile-notification .pro-body li:focus,
.pcoded-header .dropdown .profile-notification .pro-body li:hover,
.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar > li.pcoded-trigger.pcoded-hasmenu > .pcoded-submenu li.active > a:before,
.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar > li.pcoded-trigger.pcoded-hasmenu > .pcoded-submenu li.pcoded-trigger > a:before,
.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar > li.pcoded-trigger.pcoded-hasmenu > .pcoded-submenu li:hover > a:before,
.pcoded-navbar.menu-light .pcoded-inner-navbar > li.active > a,
.pcoded-navbar.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a,
.pcoded-header.brand-dark .m-header .b-bg,
.pcoded-header[class*="header-"].brand-dark .m-header .b-bg,
.chat-card .send-chat .msg,
.chat-card .widget-chat-box .receive-chat .msg,
.widget-chat-box .chat-card .receive-chat .msg,
.bootstrap-tagsinput .tag,
.bootstrap-maxlength,
.user-profile .profile-tabs .nav-item .nav-link:after,
.user-profile-list table tbody tr .overlay-edit,
.user-profile-list table tbody tr:hover td,
.highcharts-menu-item:hover {
  background: var(--primary-500);
}

/* reset border-color */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.page-item.active .page-link,
.list-group-item.active,
a.badge-light-primary.active,
a.badge-light-primary:active,
a.badge-light-primary:focus,
a.badge-light-primary:hover,
.page-item.active .page-link,
.footable .pagination > .active > a,
.footable .pagination > .active > span,
.footable .pagination > .active > a:focus,
.footable .pagination > .active > a:hover,
.footable .pagination > .active > span:focus,
.footable .pagination > .active > span:hover,
.form-control:focus,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.doc-img > a.active,
.select2-container--classic .select2-selection--single:focus,
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic .select2-selection--multiple:focus,
.select2-container--classic.select2-container--open .select2-selection--multiple,
.select2-container--classic.select2-container--open .select2-dropdown,
div.dt-button-info {
  border-color: var(--primary-500);
}
/* reset border */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 1px solid var(--primary-500);
}

/* Other */
.user-profile-list table tbody tr:hover {
  box-shadow: 0 0 6px 0 var(--primary-500);
}

div.dt-button-info h2 {
  border-bottom: 1px solid var(--primary-500);
  background-color: var(--primary-500);
}

table.dataTable tbody td.focus,
table.dataTable tbody th.focus {
  box-shadow: inset 0 0 1px 2px var(--primary-500);
}

.chat-card .send-chat .msg:after,
.chat-card .widget-chat-box .receive-chat .msg:after,
.widget-chat-box .chat-card .receive-chat .msg:after {
  border-right-color: var(--primary-500);
}
.highcharts-selection-marker {
  fill: var(--primary-500);
}

.highcharts-legend-nav-active,
.highcharts-navigator-mask-inside {
  fill: var(--primary-500);
}

.highcharts-color-0,
.highcharts-navigator-series {
  fill: var(--primary-500);
  stroke: var(--primary-500);
}

.slider.slider-horizontal .slider-handle.triangle,
.slider.slider-horizontal .slider-tick.triangle {
  border-bottom-color: var(--primary-500);
}

.slider.slider-vertical .slider-handle.triangle,
.slider.slider-vertical .slider-tick.triangle {
  border-left-color: var(--primary-500);
  border-right-color: var(--primary-500);
}

.menu-styler .style-toggler > a:before {
  box-shadow: 0 0 0 2px var(--primary-500);
}

.nav-tabs .nav-link {
  background-image: linear-gradient(to top, var(--primary-500) 2px, rgba(255, 255, 255, 0) 2px);
}

#row-delete .selected,
#row-select .selected {
  background-color: var(--primary-500);
}

table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  background: var(--primary-500);
}

/* important */
.bg-primary {
  background-color: var(--primary-500) !important;
}

.border-primary {
  border-color: var(--primary-500) !important;
}

.text-primary,
.text-h-primary:hover {
  color: var(--primary-500) !important;
}

.b-primary {
  border: 1px solid var(--primary-500) !important;
}

.slider-handle {
  background-color: var(--primary-500);
  background-image: linear-gradient(to bottom, var(--primary-500) 0, var(--primary-500) 100%);
  background-repeat: repeat-x;
}

/* [ overrides bootstrap color ] */
.b-primary {
  border: 1px solid var(--primary-500);
}

.border-bottom-primary td {
  border-bottom: 1px solid var(--primary-500);
}

.border-bottom-primary th {
  border-bottom: 1px solid var(--primary-500) !important;
}

.pcoded-navbar .pcoded-submenu {
  padding-top: 0;
}
/*
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #148f77 !important;
}
a.text-primary:hover,
a.text-primary:focus {
  color: #117964 !important;
}

*/

/* NOT USED */
/*
#task-container li {
	border-top: 5px solid #1abc9c;
}
.to-do-list .checkbox-fade label input[type="checkbox"]:checked + .cr {
  background: #1abc9c;
}
.job-meta-data i {
  color: #1abc9c;
}
.fc th.fc-widget-header {
  background: #1abc9c;
    border-color: #1abc9c;
}
.fc-state-active,
.fc-state-disabled,
.fc-state-down {
  background-color: #1abc9c;
}
.fc-event,
.fc-event:not([href]) {
  background-color: #1abc9c;
  border-color: #1abc9c;
}
.sample-icon .i-block:nth-child(1) {
  border-color: #1abc9c;
}
.sample-icon .i-block:nth-child(1) i {
  color: #1abc9c;
}
.sample-icon .i-block:nth-child(11) {
  border-color: #1abc9c;
}
.sample-icon .i-block:nth-child(11) i {
  color: #1abc9c;
}
.sample-icon .i-block:nth-child(21) {
  border-color: #1abc9c;
}
.sample-icon .i-block:nth-child(21) i {
  color: #1abc9c;
}
.sample-icon .i-block:nth-child(31) {
  border-color: #1abc9c;
}
.sample-icon .i-block:nth-child(31) i {
  color: #1abc9c;
}

*/
.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption {
  color: #e9e9e9;
}
.pcoded-header.header-dark a:hover,
.pcoded-navbar .pcoded-inner-navbar li:hover > a {
  color: var(--accent-light);
}
.pcoded-navbar .pcoded-inner-navbar li.active > a {
  background: var(--accent);
}
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu.active > a {
  background-color: transparent;
  color: #d0dcda;
}
.text-accent {
  color: var(--accent);
}
.text-accent-light {
  color: var(--accent-light);
}

.bg-accent {
  background-color: var(--accent);
}

.card {
  border-color: var(--primary-200);
}
.alert-primary {
  color: var(--primary-600);
  background-color: var(--primary-50);
  border-color: var(--primary-100);
}
.btn-primary:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-800);
}

.alert-primary .alert-link {
  color: var(--primary-900);
}
.btn-outline-primary {
  color: var(--primary-500);
  border-color: var(--primary-500);
}

.custom-range::-webkit-slider-thumb,
.custom-range::-moz-range-thumb,
.custom-range::-ms-thumb {
  background-color: var(--primary-500);
}
.custom-range::-webkit-slider-thumb:active,
.custom-range::-moz-range-thumb:active,
.custom-range::-ms-thumb:active {
  background-color: var(--primary-200);
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--primary-200);
  border-color: var(--primary-200);
}

.list-group-item-primary {
  color: var(--primary-600);
  background-color: var(--primary-100);
}
.nav-link.active {
  color: var(--primary-500);
}