/** These styles override whats in Bootstrap **/
/** Basic Elements **/
body {
  color: var(--text-dark);
  background-color: var(--text-light);
  font-family: var(--font-sans-serif);
}
kbd {
  color: var(--text-light);
  background-color: var(--text-dark);
}
pre, code, kbd, samp {
  font-family: var(--font-monospace);
}
caption {
  color: var(--secondary);
}
code {
  color: var(--pink);
}
a {
  color: var(--dark);
  text-decoration: none;
}
a:hover {
  color: var(--black);
}
/** END Basic Elements **/

/** Space **/
.no-gutters{
  --bs-gutter-x: 0;
  --bs-gutter-y: 0; 
}
/** END Space **/

/** Quote **/
.blockquote-footer {
  color: var(--secondary);
}
/** END Quote **/

/** Image **/
.img-thumbnail {
  background-color: var(--white);
  border: 1px solid var(--border);
}
/** END Image **/

/** Figure **/
.figure-caption {
  color: var(--secondary);
}
/** END Figure **/

/** Table **/
.table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger  {
  color: var(--text-dark);
}
.table-dark {
  color: var(--text-light);
}
.table th {
  border-top: none;
}
/** END Table **/

/** Accordian **/
.accordion-button:focus {
  box-shadow: inherit;
}
.accordion-button::after {
  content: "\f067";
  font-family: var(--font-awesome);
  font-weight: bold;
  background-image: unset !important;
}
.accordion-button:not(.collapsed) {
  color: inherit;
  background-color: inherit;
}
.accordion-button:not(.collapsed)::after {
  content: "\f068";
  background-image: unset !important;
  transform: unset;
}
/** END Accordian **/

/** Form **/
.form-control, input[type="text"], input[type="email"], textarea, select {
  color: var(--control-text);
  background-color: var(--white);
  border: 1px solid var(--control-border);
  padding: var(--input-padding-y) var(--input-padding-x);
  line-height: var(--line-height);
  font-size: var(--font-size);
}
.form-control[type="radio"] { padding: 0; }
.form-control-sm {
  height: calc(var(--input-line-height) + var(--input-padding-y) + var(--input-height-border));
  padding: var(--input-padding-y) calc(var(--input-padding-x) / 2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height);
}
.form-control-lg {
  height: calc(var(--input-line-height) + calc(var(--input-padding-y) * 1.4) + var(--input-height-border));
  padding: calc(var(--input-padding-y) * 2) calc(var(--input-padding-y) * 3);
  font-size: var(--font-size-lg);
  line-height: var(--line-height);
}
.form-control:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  color: var(--control-text);
  background-color: var(--control-focus);
  border-color: var(--control-focus-border);
  box-shadow: none;
}
.form-control.field-has-error:focus, input[type="text"].field-has-error:focus, input[type="email"].field-has-error:focus, textarea.field-has-error:focus {
  border-color: var(--danger);
}
.form-control:disabled, .form-control[readonly] {
  background-color: var(--control-disabled);
}
.custom-select {
  border-color: var(--control-border);
  height: calc(var(--input-line-height) + calc(var(--input-padding-y) * 2) + var(--input-height-border));
}
.custom-select-sm {
  height: calc(var(--input-line-height) + var(--input-padding-y) + var(--input-height-border));
  padding-top: var(--input-padding-y);
  padding-bottom: var(--input-padding-y);
  padding-left: calc(var(--input-padding-x) / 2);
  font-size: var(--font-size-sm) }
.custom-select-lg {
  height: calc(var(--input-line-height) + calc(var(--input-padding-y) * 1.4) + var(--input-height-border));
  padding-top: calc(var(--input-padding-y) * 2);
  padding-bottom: calc(var(--input-padding-y) * 2);
  padding-left: calc(var(--input-padding-x) * 3);
  font-size: var(--font-size-lg); }
.custom-select:focus {
  border-color: var(--control-focus-border);
  box-shadow: var(--select-shadow)
}
.form-check-input {
  background-color: var(--text-light);
}
.form-check-input:focus {
  border-color: var(--control-focus-border);
}
.form-check-input:checked {
  background-color: var(--dark);
  border-color: var(--dark);
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--dark);
  border-color: var(--dark);
}
.valid-feedback {
  color: var(--success);
}
.valid-tooltip {
  color: var(--text-light);
}
.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--success);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: var(--success);
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: var(--success);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: var(--success);
}
.invalid-feedback {
  color: var(--danger);
}
.invalid-tooltip {
  color: var(--text-light);
}
.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--danger);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: var(--danger);
}
.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: var(--danger);
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: var(--danger);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: var(--danger);
}
/** END Form **/

/** Button **/
.btn, .ThemeButton, input[type="submit"]:not(.btn) {
  color: var(--text-dark);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-weight: bold;
}
.btn-group-sm > .btn, .btn-sm {
  padding: var(--input-padding-y-sm) var(--input-padding-x-sm);
}
.btn:hover, .btn, .ThemeButton:hover {
  color: var(--text-dark);
}
.btn:focus {
  box-shadow: none;
}
.btn > a { 
  color: inherit;
}
.btn-group-lg > .btn,.btn-lg {
  padding: var(--input-btn-padding-y-lg) var(--input-btn-padding-x-lg);
}

/** btn-primary **/
.btn-primary, .btn-primary:disabled, .btn-primary.disabled {
  color: var(--text-light);
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
  color: var(--text-light);
  background-color: var(--primary-hover);
  border-color: var(--primary-hover-border);
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  background-color: var(--primary-hover-border);
  border-color: var(--primary-active-border);
}

.btn-outline-primary {
  color:var(--primary);
  background-color: transparent;
  border-color:var(--primary);
}
.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 {
  color: var(--text-light);
  background-color:var(--primary);
  border-color:var(--primary);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color:var(--primary);
}
/** END btn-primary **/

/** btn-secondary **/
.btn-secondary, .btn-secondary:disabled, .btn-secondary.disabled {
  color: var(--text-light);
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus  {
  color: var(--text-light);
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover-border);
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--text-light);
  background-color: var(--secondary-hover-border);
  border-color: var (--secondary-active-border);
}

.btn-outline-secondary {
  color: var(--secondary);
  background-color: transparent;
  border-color: var(--secondary);
}
.btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle  {
  color: var(--text-light);
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
  color: var(--secondary);
}
/** END btn-secondary **/

/** btn-success **/
.btn-success, .btn-success:disabled, .btn-success.disabled {
  color: var(--text-light);
  background-color: var(--success);
  border-color: var(--success);
}
.btn-success:hover, .btn-success:focus, .btn-success.focus {
  color: var(--text-light);
  background-color: var(--success-hover);
  border-color: var(--success-hover-border);
}
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: var(--text-light);
  background-color: var(--success-hover-border);
  border-color: var(--success-active-border);
}

.btn-outline-success {
  color: var(--success);
  background-color: transparent;
  border-color: var(--success);
}
.btn-outline-success:hover, .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle  {
  color: var(--text-light);
  background-color: var(--success);
  border-color: var(--success);
}
.btn-outline-success:disabled, .btn-outline-success.disabled {
  color: var(--success);
}
/** END btn-success **/

/** btn-info **/
.btn-info, .btn-info:disabled, .btn-info.disabled {
  color: var(--text-light);
  background-color: var(--info);
  border-color: var(--info);
}
.btn-info:hover, .btn-info:focus, .btn-info.focus {
  color: var(--text-light);
  background-color: var(--info-hover);
  border-color: var(--info-hover-border);
}
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: var(--text-light);
  background-color: var(--info-hover-border);
  border-color: var(--info-active-border);
}

.btn-outline-info {
  color: var(--info);
  background-color: transparent;
  border-color: var(--info);
}
.btn-outline-info:hover, .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle  {
  color: var(--text-light);
  background-color: var(--info);
  border-color: var(--info);
}
.btn-outline-info:disabled, .btn-outline-info.disabled {
  color: var(--info);
}
/** END btn-info **/

/** btn-warning **/
.btn-warning, .btn-warning:disabled, .btn-warning.disabled {
  color: var(--text-dark);
  background-color: var(--warning);
  border-color: var(--warning);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus {
  color: var(--text-dark);
  background-color: var(--warning-hover);
  border-color: var(--warning-hover-border);
}
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: var(--text-dark);
  background-color: var(--warning-hover-border);
  border-color: var(--warning-active-border);
}
.btn-outline-warning {
  color: var(--warning);
  background-color: transparent;
  border-color: var(--warning);
}
.btn-outline-warning:hover, .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: var(--text-dark);
  background-color: var(--warning);
  border-color: var(--warning);
}
.btn-outline-warning:disabled, .btn-outline-warning.disabled {
  color: var(--warning);
}
/** END btn-warning **/

/** btn-danger **/
.btn-danger, .btn-danger:disabled, .btn-danger.disabled {
  color: var(--text-light);
  background-color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus {
  color: var(--text-light);
  background-color: var(--danger-hover);
  border-color: var(--danger-hover-border);
}
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: var(--text-light);
  background-color: var(--danger-hover-border);
  border-color: var(--danger-active-border);
}

.btn-outline-danger {
  color: var(--danger);
  background-color: transparent;
  border-color: var(--danger);
}
.btn-outline-danger:hover, .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle  {
  color: var(--text-light);
  background-color: var(--danger);
  border-color: var(--danger);
}
.btn-outline-danger:disabled, .btn-outline-danger.disabled {
  color: var(--danger);
}
/** END btn-danger **/

/** btn-light **/
.btn-light, .btn-light:disabled, .btn-light.disabled {
  color: var(--text-dark);
  background-color: var(--light);
  border-color: var(--light);
}
.btn-light:hover, .btn-light:focus, .btn-light.focus {
  color: var(--text-dark);
  background-color: var(--light-hover);
  border-color: var(--light-hover-border);
}
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
  color: var(--text-dark);
  background-color: var(--light-hover-border);
  border-color: var(--light-active-border);
}

.btn-outline-light {
  color: var(--light);
  background-color: transparent;
  border-color: var(--light);
}
.btn-outline-light:hover, .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
  color: var(--text-dark);
  background-color: var(--light);
  border-color: var(--light);
}
.btn-outline-light:disabled, .btn-outline-light.disabled {
  color: var(--light);
}
/** END btn-light **/

/** btn-white **/
.btn-white, .btn-white:disabled, .btn-white.disabled {
  color: var(--text-dark);
  background-color: var(--white);
  border-color: var(--white);
}
.btn-white:hover, .btn-white:focus, .btn-white.focus {
  color: var(--text-dark);
  background-color: var(--white);
  border-color: var(--white);
}
.btn-white:not(:disabled):not(.disabled):active, .btn-white:not(:disabled):not(.disabled).active,
.show > .btn-white.dropdown-toggle {
  color: var(--text-dark);
  background-color: var(--white);
  border-color: var(--white);
}
/** END btn-white **/

/** btn-dark **/
.btn-dark, .btn-dark:disabled, .btn-dark.disabled, .ThemeButton:not(.btn):not(.as-link), input[type="submit"]:not(.btn):not(.as-link) {
  color: var(--text-light);
  background-color: var(--dark);
  border-color: var(--dark);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark.focus, .ThemeButton:not(.btn):not(.as-link):hover, input[type="submit"]:not(.btn):not(.as-link):hover {
  color: var(--text-light);
  background-color: var(--dark-hover);
  border-color: var(--dark-hover);
}
.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  color: var(--text-light);
  background-color: var(--dark-hover-border);
  border-color: var(--dark-active-border);
}

.btn-outline-dark {
  color: var(--dark);
  background-color: transparent;
  border-color: var(--dark);
}
.btn-outline-dark:hover {
  color: var(--text-light);
  background-color: var(--dark);
  border-color: var(--dark);
}
.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle  {
  color: var(--text-light);
  background-color: var(--dark);
  border-color: var(--dark);
}
.btn-outline-dark:disabled, .btn-outline-dark.disabled {
  color: var(--dark);
}
/** END btn-dark **/
/** END Button **/

/** Badge **/
.badge-primary { color: var(--white); background-color: var(--primary); }
.badge-secondary { color: var(--white); background-color: var(--secondary); }
.badge-success { color: var(--white); background-color: var(--success); }
.badge-danger { color: var(--white); background-color: var(--danger); }
.badge-warning { color: var(--text-dark); background-color: var(--warning); }
.badge-info { color: var(--white); background-color: var(--info); }
.badge-light { color: var(--text-dark); background-color: var(--light); }
.badge-dark { color: var(--white);  background-color: var(--dark); }
/** END Badge **/

/** Dropdown **/
.dropdown-menu {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
  border: none;
  color: var(--secondary);
  margin: 0;
}
.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active  {
  background-color: var(--dropdown-hover);
}
/** END Dropdown **/

/** Input Group **/
.input-group-text {
  color: var(--control-text);
  background-color: var(--control-disabled);
  border: 1px solid var(--control-border);
}
.input-group-sm > .input-group-prepend > .btn,.input-group-sm > .input-group-append > .btn {
  height: var(--input-height-sm);
}
.input-group-sm>.custom-select, .input-group-sm>.form-control:not(textarea) {
  height: var(--input-height-sm);
}
/** END Input Group **/

/** Navigation **/
.breadcrumb {
  background-color: unset;
  padding-top: 10px;
}
.nav-link:focus, .nav-link:hover {
  color: inherit;
}
/** END Navigation **/

/** Card **/
.card {
  border-color: var(--card-border);
}
.card-header, .card-footer {
  background-color: var(--card-header-bg);
  border-bottom-color: var(--card-border);
}
.card, .panel {
  box-shadow: 0 0.21429rem 0.64286rem rgba(52, 58, 64, 0.2); 
}
/** END Card **/

/** Modal **/
.modal-header {
  border-bottom: none;
}
.modal-footer {
  border-top: none;
}
/** END Modal **/

/** Progress **/
.progress-bar {
  background-color: var(--success);
}
/** END Progress **/

/** Background **/
.bg-primary     { background-color: var(--primary) !important; }
.bg-secondary   { background-color: var(--secondary) !important; }
.bg-success     { background-color: var(--success) !important; }
.bg-info        { background-color: var(--info) !important; }
.bg-warning     { background-color: var(--warning) !important; }
.bg-danger      { background-color: var(--danger) !important; }
.bg-light       { background-color: var(--light) !important; }
.bg-dark        { background-color: var(--dark) !important; }
.bg-body        { background-color: var(--text-light) !important; }
.bg-white       { background-color: var(--white) !important; }
.bg-gray        { background-color: var(--border); }
.bg-accent      { background-color: var(--accent); }
.bg-muted       { background-color: var(--muted) !important; }
.bg-transparent { background-color: transparent !important; }
.bg-gradient    { background-image: var(--gradient) !important; }
/** END Background **/

/** Border **/
.border-primary   { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-success   { border-color: var(--success) !important; }
.border-info      { border-color: var(--info) !important; }
.border-warning   { border-color: var(--warning) !important; }
.border-danger    { border-color: var(--danger) !important; }
.border-light     { border-color: var(--light) !important; }
.border-dark      { border-color: var(--dark) !important; }
.border-white     { border-color: var(--text-light) !important; }
.border-gray      { border-color: #dee2e6; }
.border-form      { border-color: var(--control-border) !important; }
/** END Border **/

/** Display **/
.clearfix {
  clear: both;
}
/** END Display **/

/** Text **/
.text-primary {
  color: var(--primary) !important;
}
.text-black {
  color: var(--black);
}
a.text-primary:hover, a.text-primary:focus {
  color: var(--primary-dark) !important;
}
.text-muted {
  color: var(--muted) !important;
}
/** END Text **/

/** Align **/
.align-sub {
  vertical-align: sub;
}
/** END Align **/

/** Container **/
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1300px;
  }
}
@media (min-width: 1700px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1500px; } }
/** END Container **/


/** Previous Bootstrap **/
.well {
  border-radius: 0;
  border: none;
  box-shadow: none; 
}
.panel-heading:empty {
  display: none; 
}
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
}
.panel-default {
  border-color: #ddd;
}
.panel-heading {
  padding: 10px 15px;
  background-color: var(--light);
  border-bottom: var(--border-width) solid var(--card-border);
  border-radius: calc(0.25rem - var(--border-width)) calc(0.25rem - var(--border-width)) 0 0;
}
.panel-body {
  padding: 15px;
}
.panel-default.panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
/** END Previous Bootstrap **/