/* CSS Styles by dekitarpg@gmail.com */

/*###################################
* 
* CSS Styles by dekitarpg@gmail.com
* 
* 
*/

@font-face {
	font-family: Whitney;
	src: url(../fonts/Whitney-Book.ttf);
}
@font-face {
	font-family: WhitneyThick;
	src: url(../fonts/Whitney-Medium.ttf);
}
@font-face {
	font-family: WhitneyBold;
	src: url(../fonts/Whitney-Bold.ttf);
}

/*###################################
* 
* ■ Main CSS Variables
* 
*/
:root {
  /* font settings */
  --dek-font-family-1: Whitney, var(--bs-body-font-family);
  --dek-font-family-2: WhitneyThick, var(--bs-body-font-family);
  --dek-font-family-3: WhitneyBold, var(--bs-body-font-family);
  /* darker shades */
  --dek-darker-1: rgba(0,0,0,.05);
  --dek-darker-2: rgba(0,0,0,0.1);
  --dek-darker-3: rgba(0,0,0,0.2);
  --dek-darker-4: rgba(0,0,0,0.3);
  /* lighter shades */
  --dek-lighter-1: rgba(255,255,255,.05);
  --dek-lighter-2: rgba(255,255,255,0.2);
  --dek-lighter-3: rgba(255,255,255,0.3);
  --dek-lighter-4: rgba(255,255,255,0.3);
  /* input/dropdown area bg colorings */
  --dek-area-default: var(--dek-darker-1);
  --dek-area-active: var(--dek-darker-2);
}


/*###################################
* 
* Main element changes: (also includes bootstrap/helper classes)
* 
*/
body, .font {
  font-family: var(--dek-font-family-1);
}
button, .tooltip, .font-thick {
	font-family: var(--dek-font-family-2);
}
b, strong, .font-bold {
	font-family: var(--dek-font-family-3);
}
a {
  text-decoration: none;
}
body, .theme-border, .btn, .form-control {
  transition: color 1s, background-color 1s, border-color 1s;
}
small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
code {
  background-color: rgba(0, 0, 0, 0.05);
  padding-right:.25em;
  padding-left: .25em;
  color: var(--dek-danger-normal);
}
pre {
  padding: .5em;
  border-radius: 9px;
  background-color: var(--dek-lighter-1);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
::selection {background: #7e7ec2}
::-moz-selection {background: #7e7ec2}

::-webkit-scrollbar {
  width: 12px;
}
/* ::-webkit-scrollbar-track {
  background-color: var(--dek-darker-3); 
  padding-left: 10px !important;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--dek-darker-1); 
  border: 2px solid var(--dek-darker-2); 
  border-radius: 99px;
} */

::-webkit-scrollbar-track {
  border-left: none;
  border-radius: inherit;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: var(--dek-modal-border-color); 
}
::-webkit-scrollbar-thumb {
  background-color: var(--dek-modal-body-color);
  border: 3px solid var(--dek-modal-border-color);
  border-radius: 6px;
}


/* .thin-scroller::-webkit-scrollbar {width: 10px} */
/* .thin-scroller::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2); 
  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); 
} */
/* .thin-scroller::-webkit-scrollbar-thumb {
  border-radius: 0;
} */
.form-control {
	background-color: var(--dek-area-default); 
	border-color: var(--dek-darker-3); 
	color: var(--dek-text-color);
}
.form-control:focus {
	background-color: var(--dek-area-active);
	color: var(--dek-text-color);
}
.form-control::placeholder {
  color: inherit;
  opacity: 0.5;
}
.btn:focus, .btn-close:focus, .form-control:focus {
  outline: none;
  box-shadow: none;
}
.btn[disabled], .form-control[disabled], .form-control[disabled]:hover {
  background-color: var(--dek-darker-3);
  border-color: var(--dek-darker-4);
  color: var(--dek-text-color);
  opacity: 0.5;
  transition: all 1s;
}
.badge {
  color: var(--dek-text-color);
}




.toast, .toast-header, .toast-body {
  color: var(--dek-toast-text-color);
  background-color: var(--dek-toast-body-color);
  border-color: var(--dek-toast-border-color);
}
.toast, .toast-header, .toast-body {
  border-radius: 0;
  border-width: 2px;
}
.toast-header {
  border-radius: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}


/*###################################
* 
* ■ Dekcheck checkbox core css
* 
*/
.dekcheckbox ul {
  float: left !important;
  list-style-type: none;
  text-align: left;
  cursor: pointer;
  padding: 0px;
}
/* 
.dekcheckbox ul li i,
.dekcheckbox ul li span {
  cursor: pointer;
} 
*/
.dekcheckbox ul li i {
  width: 18px;
}

/*###################################
* 
* ■ Bootstrap style button select loosely based on:
* http://bootsnipp.com/snippets/GXagX
* 
*/
.btn-select {
  position: relative;
  min-width: 80px;
  width: 100%;
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0;
  line-height: 1.5; 
  background-color: var(--dek-body-color);
  border-color: var(--dek-darker-3);
  cursor: pointer;
  color: var(--dek-text-color);
}
.btn-select .btn-select-value {
  padding: 0.25rem 0.5rem;
  display: block;
  position: absolute;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  float: left;
  text-overflow: ellipsis;
  overflow: hidden;
  border: none !important;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  box-shadow: none !important;
  cursor: inherit;
	background-color: var(--dek-area-default);
  border-color: transparent;
  width: calc(100% - 34px);
  opacity: 1.0;
}
.btn-select .btn-select-value:hover {
  background-color: transparent;
	background-color: rgba(0, 0, 0, .05);
	background-color: var(--dek-area-default);
  opacity: 1.0;
}
.btn-select .btn-select-arrow {
  transition: color 1s, opacity 1s;
	background-color: var(--dek-area-default);
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  border-left: 1px solid;  
  border-color: inherit;
  color: var(--dek-text-color);
  float: right;
  padding: 0.25rem 0.5rem;
  top: 0;
}
.btn-select ul {
  display: none;
  background-color: inherit;
  border-color: inherit !important;
  transition: border-color 1ms;
  color: inherit;
  clear: both;
  list-style: none;
  padding: 0;
  margin-top: .1em;
  border-radius: inherit;
  border: 1px solid var(--dek-darker-2);
  position: absolute;
  left: -1px;
  right: -1px;
  top: 32px;
  z-index: 9999;
  max-height: 118px;
  overflow-y: auto;
}
.btn-select ul li {
  border-radius: 0;
  padding: 0.25rem 0.75rem;
  text-align: left;
	background-color: var(--dek-area-active);
  color: var(--dek-text-color);
}

/* .btn-select ul li:first-child {
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
}
.btn-select ul li:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
} */
.btn-select ul li:hover {
	background-color: var(--dek-area-active);
}
.btn-select ul li.selected {
  color: #E4E4E4;
}

.btn-select.active .btn-select-value,
.btn-select.active .btn-select-arrow {
	background-color: var(--dek-darker-2);
	background-color: var(--dek-area-default);
}
.btn-select.active ul li {
	background-color: var(--dek-darker-3);
	background-color: var(--dek-area-default);
}

/*###################################
* 
* ■ Various colorings
* 
*/
.trans-bg {background-color: transparent !important}
.darker-bg1 {background-color: var(--dek-darker-2)}
.darker-bg2 {background-color: var(--dek-darker-3)}
.darker-bg3 {background-color: var(--dek-darker-4)}
.lighter-bg1 {background-color: var(--dek-lighter-1)}
.lighter-bg2 {background-color: var(--dek-lighter-2)}
.lighter-bg3 {background-color: var(--dek-lighter-3)}

.theme-bg {
  background-color: var(--dek-body-color);
  color: var(--dek-text-color);
}
.theme-text {
  color: var(--dek-text-color);
}

/** [xxx-dark] elements */
.text-dark{color:inherit}
.bg-dark{background-color: var(--dek-darker-2) !important}
.border-dark{border-color: var(--dek-darker-2) !important}
.border-dark2{border-color: var(--dek-darker-3) !important}
.hover-dark {color: inherit; opacity: 0.6; cursor: pointer}
.hover-dark:hover {color: inherit; opacity: 1.0}
.dekcheckbox.check-dark ul li i {color: inherit; opacity: 0.6}
.dekcheckbox.check-dark ul li:hover i { color: inherit; opacity: 1.0 }
.btn-select.dekselect-dark .btn-select-arrow {
  opacity: 0.6;
}
.btn-select.dekselect-dark:hover .btn-select-arrow,
.btn-select.dekselect-dark .btn-select-arrow:hover, 
.btn-select.dekselect-dark.active .btn-select-arrow {
  opacity: 1.0;
}
.alert-dark { 
  background-color: var(--dek-darker-2);
  border-color: var(--dek-darker-3);
  color: inherit;
}
.btn-dark, .form-dark {
  background-color: var(--dek-darker-2);
  border-color: var(--dek-darker-3);
  color: inherit;
}
.btn-dark:hover,.btn-dark:focus,.btn-dark:active,.btn-dark.active,
.form-dark:hover,.form-dark:focus,.form-dark:active,.form-dark.active {
  background-color: var(--dek-darker-3);
  border-color: var(--dek-darker-4);
  color: inherit;
}
.selection-dark ::selection {
  background-color: var(--dek-darker-3);
}
.selection-dark ::-moz-selection {
  background-color: var(--dek-darker-3);
}
/** [xxx-primary] elements */
.text-primary {color: var(--dek-primary-normal) !important}
.bg-primary {background-color: var(--dek-primary-normal) !important}
.border-primary {border-color: var(--dek-primary-normal) !important}
.border-primary2 {border-color: var(--dek-primary-darkest) !important}
.hover-primary {color: inherit; cursor: pointer}
.hover-primary:hover {color: var(--dek-primary-normal) !important}
.alert-primary { 
  background-color: var(--dek-primary-light);
  border-color: var(--dek-primary-normal);
  color: var(--dek-primary-darkest);
}
.form-primary {border-color: var(--dek-darker-3)}
.form-primary:hover {border-color: var(--dek-primary-darkest)}
.form-primary:focus,.form-primary:active,.form-primary.active {
  border-color: var(--dek-primary-normal);
}
.btn-primary {
  background-color: var(--dek-primary-normal);
  border-color: var(--dek-primary-darker);
  color: inherit;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active {
  background-color: var(--dek-primary-darker);
  border-color: var(--dek-primary-darkest);
  color: inherit;
}
.btn-primary[disabled] {
  background-color: var(--dek-primary-darker);
  border-color: var(--dek-primary-darkest);
}
.dekcheckbox.check-primary ul li:hover i {
  color: var(--dek-primary-light)
}
.btn-select.dekselect-primary:hover {
  border-color: var(--dek-primary-darkest);
}
.btn-select.dekselect-primary:hover .btn-select-arrow{
  color: var(--dek-primary-darker);
}
.btn-select.dekselect-primary ul, .btn-select.dekselect-primary.active {
  border-color: var(--dek-primary-darker);
}
.btn-select.dekselect-primary.active .btn-select-arrow {
  color: var(--dek-primary-light);
}
.btn-select.dekselect-primary ul li:hover {
  background-color: var(--dek-primary-darkest);
}
.selection-primary ::selection {
  background: var(--dek-primary-darker);
  color: #e4e4e4;
}
.selection-primary ::-moz-selection {
  background: var(--dek-primary-darkest);
  color: #e4e4e4;
}
/** [xxx-secondary] elements */
.text-secondary {color: var(--dek-secondary-normal) !important}
.bg-secondary {background-color: var(--dek-secondary-normal) !important}
.border-secondary {border-color: var(--dek-secondary-normal) !important}
.border-secondary2 {border-color: var(--dek-secondary-darkest) !important}
.hover-secondary {color: inherit; cursor: pointer}
.hover-secondary:hover {color: var(--dek-secondary-normal) !important}
.alert-secondary { 
  background-color: var(--dek-secondary-light);
  border-color: var(--dek-secondary-normal);
  color: var(--dek-secondary-darkest);
}
.form-secondary {border-color: var(--dek-darker-3)}
.form-secondary:hover {border-color: var(--dek-secondary-darkest)}
.form-secondary:focus,.form-secondary:active,.form-secondary.active {
  border-color: var(--dek-secondary-normal);
}
.btn-secondary {
  background-color: var(--dek-secondary-normal);
  border-color: var(--dek-secondary-darker);
  color: inherit;
}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active,.btn-secondary.active {
  background-color: var(--dek-secondary-darker);
  border-color: var(--dek-secondary-darkest);
  color: inherit;
}
.btn-secondary[disabled] {
  background-color: var(--dek-secondary-darker);
  border-color: var(--dek-secondary-darkest);
}
.dekcheckbox.check-secondary ul li:hover i {
  color: var(--dek-secondary-light)
}
.btn-select.dekselect-secondary:hover {
  border-color: var(--dek-secondary-darkest);
}
.btn-select.dekselect-secondary:hover .btn-select-arrow{
  color: var(--dek-secondary-darker);
}
.btn-select.dekselect-secondary ul, .btn-select.dekselect-secondary.active {
  border-color: var(--dek-secondary-darker);
}
.btn-select.dekselect-secondary.active .btn-select-arrow {
  color: var(--dek-secondary-light);
}
.btn-select.dekselect-secondary ul li:hover {
  background-color: var(--dek-secondary-darkest);
}
.selection-secondary ::selection {
  background: var(--dek-secondary-darker);
  color: #e4e4e4;
}
.selection-secondary ::-moz-selection {
  background: var(--dek-secondary-darkest);
  color: #e4e4e4;
}
/** [xxx-info] elements */
.text-info {color: var(--dek-info-normal) !important}
.bg-info {background-color: var(--dek-info-normal) !important}
.border-info {border-color: var(--dek-info-normal) !important}
.border-info2 {border-color: var(--dek-info-darkest) !important}
.hover-info {color: inherit; cursor: pointer}
.hover-info:hover {color: var(--dek-info-normal) !important}
.alert-info { 
  background-color: var(--dek-info-light);
  border-color: var(--dek-info-normal);
  color: var(--dek-info-darkest);
}
.form-info {border-color: var(--dek-darker-3)}
.form-info:hover {border-color: var(--dek-info-darkest)}
.form-info:focus,.form-info:active,.form-info.active {
  border-color: var(--dek-info-normal);
}
.btn-info {
  background-color: var(--dek-info-normal);
  border-color: var(--dek-info-darker);
  color: inherit;
}
.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active {
  background-color: var(--dek-info-darker);
  border-color: var(--dek-info-darkest);
  color: inherit;
}
.btn-info[disabled] {
  background-color: var(--dek-info-darker);
  border-color: var(--dek-info-darkest);
}
.dekcheckbox.check-info ul li:hover i {
  color: var(--dek-info-light)
}
.btn-select.dekselect-info:hover {
  border-color: var(--dek-info-darkest);
}
.btn-select.dekselect-info:hover .btn-select-arrow{
  color: var(--dek-info-darker);
}
.btn-select.dekselect-info ul, .btn-select.dekselect-info.active {
  border-color: var(--dek-info-darker);
}
.btn-select.dekselect-info.active .btn-select-arrow {
  color: var(--dek-info-light);
}
.btn-select.dekselect-info ul li:hover {
  background-color: var(--dek-info-darkest);
}
.selection-info ::selection {
  background: var(--dek-info-darker);
  color: #e4e4e4;
}
.selection-info ::-moz-selection {
  background: var(--dek-info-darkest);
  color: #e4e4e4;
}
/** [xxx-success] elements */
.text-success {color: var(--dek-success-normal) !important}
.bg-success {background-color: var(--dek-success-normal) !important}
.border-success {border-color: var(--dek-success-normal) !important}
.border-success2 {border-color: var(--dek-success-darkest) !important}
.hover-success {color: inherit; cursor: pointer}
.hover-success:hover {color: var(--dek-success-normal) !important}
.alert-success { 
  background-color: var(--dek-success-light);
  border-color: var(--dek-success-normal);
  color: var(--dek-success-darkest);
}
.form-success {border-color: var(--dek-darker-3)}
.form-success:hover {border-color: var(--dek-success-darkest)}
.form-success:focus,.form-success:active,.form-success.active {
  border-color: var(--dek-success-normal);
}
.btn-success {
  background-color: var(--dek-success-normal);
  border-color: var(--dek-success-darker);
  color: inherit;
}
.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active {
  background-color: var(--dek-success-darker);
  border-color: var(--dek-success-darkest);
  color: inherit;
}
.btn-success[disabled] {
  background-color: var(--dek-success-darker);
  border-color: var(--dek-success-darkest);
}
.dekcheckbox.check-success ul li:hover i {
  color: var(--dek-success-light)
}
.btn-select.dekselect-success:hover {
  border-color: var(--dek-success-darkest);
}
.btn-select.dekselect-success:hover .btn-select-arrow{
  color: var(--dek-success-darker);
}
.btn-select.dekselect-success ul, .btn-select.dekselect-success.active {
  border-color: var(--dek-success-darker);
}
.btn-select.dekselect-success.active .btn-select-arrow {
  color: var(--dek-success-light);
}
.btn-select.dekselect-success ul li:hover {
  background-color: var(--dek-success-darkest);
}
.selection-success ::selection {
  background: var(--dek-success-darker);
  color: #e4e4e4;
}
.selection-success ::-moz-selection {
  background: var(--dek-success-darkest);
  color: #e4e4e4;
}
/** [xxx-warning] elements */
.text-warning {color: var(--dek-warning-normal) !important}
.bg-warning {background-color: var(--dek-warning-normal) !important}
.border-warning {border-color: var(--dek-warning-normal) !important}
.border-warning2 {border-color: var(--dek-warning-darkest) !important}
.hover-warning {color: inherit; cursor: pointer}
.hover-warning:hover {color: var(--dek-warning-normal) !important}
.alert-warning { 
  background-color: var(--dek-warning-light);
  border-color: var(--dek-warning-normal);
  color: var(--dek-warning-darkest);
}
.form-warning {border-color: var(--dek-darker-3)}
.form-warning:hover {border-color: var(--dek-warning-darkest)}
.form-warning:focus,.form-warning:active,.form-warning.active {
  border-color: var(--dek-warning-normal);
}
.btn-warning {
  background-color: var(--dek-warning-normal);
  border-color: var(--dek-warning-darker);
  color: inherit;
}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active {
  background-color: var(--dek-warning-darker);
  border-color: var(--dek-warning-darkest);
  color: inherit;
}
.btn-warning[disabled] {
  background-color: var(--dek-warning-darker);
  border-color: var(--dek-warning-darkest);
}
.dekcheckbox.check-warning ul li:hover i {
  color: var(--dek-warning-light)
}
.btn-select.dekselect-warning:hover {
  border-color: var(--dek-warning-darkest);
}
.btn-select.dekselect-warning:hover .btn-select-arrow{
  color: var(--dek-warning-darker);
}
.btn-select.dekselect-warning ul, .btn-select.dekselect-warning.active {
  border-color: var(--dek-warning-darker);
}
.btn-select.dekselect-warning.active .btn-select-arrow {
  color: var(--dek-warning-light);
}
.btn-select.dekselect-warning ul li:hover {
  background-color: var(--dek-warning-darkest);
}
.selection-warning ::selection {
  background: var(--dek-warning-darker);
  color: #e4e4e4;
}
.selection-warning ::-moz-selection {
  background: var(--dek-warning-darkest);
  color: #e4e4e4;
}
/** [xxx-danger] elements */
.text-danger {color: var(--dek-danger-normal) !important}
.bg-danger {background-color: var(--dek-danger-normal) !important}
.border-danger {border-color: var(--dek-danger-normal) !important}
.border-danger2 {border-color: var(--dek-danger-darkest) !important}
.hover-danger {color: inherit; cursor: pointer}
.hover-danger:hover {color: var(--dek-danger-normal) !important}
.alert-danger { 
  background-color: var(--dek-danger-light);
  border-color: var(--dek-danger-normal);
  color: var(--dek-danger-darkest);
}
.form-danger {border-color: var(--dek-darker-3)}
.form-danger:hover {border-color: var(--dek-danger-darkest)}
.form-danger:focus,.form-danger:active,.form-danger.active {
  border-color: var(--dek-danger-normal);
}
.btn-danger {
  background-color: var(--dek-danger-normal);
  border-color: var(--dek-danger-darker);
  color: inherit;
}
.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active {
  background-color: var(--dek-danger-darker);
  border-color: var(--dek-danger-darkest);
  color: inherit;
}
.btn-danger[disabled] {
  background-color: var(--dek-danger-darker);
  border-color: var(--dek-danger-darkest);
}
.dekcheckbox.check-danger ul li:hover i {
  color: var(--dek-danger-light)
}
.btn-select.dekselect-danger:hover {
  border-color: var(--dek-danger-darkest);
}
.btn-select.dekselect-danger:hover .btn-select-arrow{
  color: var(--dek-danger-darker);
}
.btn-select.dekselect-danger ul, .btn-select.dekselect-danger.active {
  border-color: var(--dek-danger-darker);
}
.btn-select.dekselect-danger.active .btn-select-arrow {
  color: var(--dek-danger-light);
}
.btn-select.dekselect-danger ul li:hover {
  background-color: var(--dek-danger-darkest);
}
.selection-danger ::selection {
  background: var(--dek-danger-darker);
  color: #e4e4e4;
}
.selection-danger ::-moz-selection {
  background: var(--dek-danger-darkest);
  color: #e4e4e4;
}








.btn, .form-control, .card, .toast, .add-shadow, .btn-select ul {
	box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.01), 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
.no-shadow {
  box-shadow: none;
}



