:root {
  --skili-loader-color-1: hsl(196, 35%, 93%);
  --skili-loader-color-2: hsl(196, 18%, 81%);
  --skili-loader-color-3: hsl(196, 43%, 85%);
  --skili-loader-color-4: hsl(196, 25%, 73%);

  --skili-background-color: #231f20;
  --skili-color: rgba(255,255,255,0.86);
  --skili-darker-color: white;
  --skili-primary-accent: hsl(196, 100%, 46%);
  --skili-primary-accent-text-color: white;
  --skili-secondary-accent: hsl(230, 10%, 70%);
  --skili-secondary-accent-text-color: hsla(0, 0%, 100%, 0.9);
  --skili-help: hsl(328, 60%, 20%);
  --skili-help-text-color: white;
  --skili-info: hsl(196, 100%, 46%);
  --skili-error: hsl(357, 79%, 63%);
  --skili-danger: hsl(357, 79%, 63%);
  --skili-warning: #cda26a;

  --skili-navbar-logo-width: 160px;

  --skili-text-button-hover-background-color: rgba(104, 80, 80, 0.2);

  --skili-input-border-radius: 12px;

  --skili-input-background-color: #231f20;
  --skili-input-hover-background-color: black;
  --skili-input-focus-background-color: black;
  --skili-input-active-background-color: black;
  /* --skili-input-color: ;
  --skili-input-hover-color: ;
  --skili-input-focus-color: ;
  --skili-input-active-color: ; */
  --skili-input-border: 1px solid rgba(104, 80, 80, 0.2);
  /* --skili-input-hover-border: ;
  --skili-input-focus-border: ;
  --skili-input-active-border: ; */
  /* --skili-input-outline: ;
  --skili-input-hover-outline: ;
  --skili-input-focus-outline: ;
  --skili-input-active-outline: ; */
  --skili-input-box-shadow: none;
  --skili-input-hover-box-shadow: 0 0 0 2px rgba(104, 80, 80, 0.2);
  --skili-input-focus-box-shadow: 0 0 0 2px rgba(104, 80, 80, 0.5);
  /* --skili-input-active-box-shadow: ; */

  /* --skili-input-error-background-color: ;
  --skili-input-error-hover-background-color: ;
  --skili-input-error-focus-background-color: ;
  --skili-input-error-active-background-color: ; */
  --skili-input-error-color: hsl(6, 50%, 61%);
  /* --skili-input-error-hover-color: ;
  --skili-input-error-focus-color: ;
  --skili-input-error-active-color: ; */
  --skili-input-error-border: 1px solid hsl(6, 50%, 61%);
  /* --skili-input-error-hover-border: ;
  --skili-input-error-focus-border: ;
  --skili-input-error-active-border: ; */
  --skili-input-error-outline: ;
  --skili-input-error-hover-outline: ;
  --skili-input-error-focus-outline: ;
  --skili-input-error-active-outline: ;
  --skili-input-error-box-shadow: none;
  --skili-input-error-hover-box-shadow: 0 0 0 2px hsla(6, 50%, 61%, 0.5);
  --skili-input-error-focus-box-shadow: 0 0 0 2px hsla(6, 50%, 61%, 0.8);
  /* --skili-input-error-active-box-shadow: ; */

  --skili-primary-button-background-color: hsl(196, 80%, 46%);
  --skili-primary-button-hover-background-color: hsl(196, 80%, 40%);
  --skili-primary-button-focus-background-color: hsl(196, 80%, 34%);
  --skili-primary-button-active-background-color: hsl(196, 80%, 28%);
  --skili-primary-button-color: white;
  --skili-primary-button-hover-color: white;
  --skili-primary-button-focus-color: white;
  --skili-primary-button-active-color: white;
  /* --skili-primary-button-border: 2px solid hsl(196, 100%, 46%);
  --skili-primary-button-hover-border: 2px solid hsl(196, 100%, 40%);
  --skili-primary-button-focus-border: 2px solid hsl(196, 100%, 34%);
  --skili-primary-button-active-border: 2px solid hsl(196, 100%, 28%); */
  --skili-primary-button-outline: none;
  --skili-primary-button-hover-outline: 2px solid hsl(196, 100%, 40%);
  --skili-primary-button-focus-outline: 2px solid hsl(196, 100%, 34%);
  --skili-primary-button-active-outline: 2px solid hsl(196, 100%, 28%);
  /* --skili-primary-button-box-shadow: ;
  --skili-primary-button-hover-box-shadow: ;
  --skili-primary-button-focus-box-shadow: ;
  --skili-primary-button-active-box-shadow: ; */

  --skili-success-button-background-color: hsl(178, 93%, 39%);
  --skili-success-button-hover-background-color: hsl(178, 93%, 31%);
  --skili-success-button-focus-background-color: hsl(178, 93%, 23%);
  --skili-success-button-active-background-color: hsl(178, 93%, 15%);
  --skili-success-button-color: white;
  --skili-success-button-hover-color: white;
  --skili-success-button-focus-color: white;
  --skili-success-button-active-color: white;
  /* --skili-success-button-border: ;
  --skili-success-button-hover-border: ;
  --skili-success-button-focus-border: ;
  --skili-success-button-active-border: ;*/
  --skili-success-button-outline: none;
  --skili-success-button-hover-outline: 3px solid hsla(178, 93%, 39%, 0.3);
  --skili-success-button-focus-outline: 3px solid hsla(178, 93%, 39%, 0.5);
  --skili-success-button-active-outline: 4px solid hsla(178, 93%, 39%, 0.7);
  /* --skili-success-button-box-shadow: ;
  --skili-success-button-hover-box-shadow: ;
  --skili-success-button-focus-box-shadow: ;
  --skili-success-button-active-box-shadow: ; */

  --skili-danger-button-background-color: hsl(6, 50%, 61%);
  --skili-danger-button-hover-background-color: hsl(6, 50%, 53%);
  --skili-danger-button-focus-background-color: hsl(6, 50%, 45%);
  --skili-danger-button-active-background-color: hsl(6, 50%, 37%);
  --skili-danger-button-color: white;
  --skili-danger-button-hover-color: white;
  --skili-danger-button-focus-color: white;
  --skili-danger-button-active-color: white;
  /* --skili-danger-button-border: ;
  --skili-danger-button-hover-border: ;
  --skili-danger-button-focus-border: ;
  --skili-danger-button-active-border: ;*/
  --skili-danger-button-outline: none;
  --skili-danger-button-hover-outline: 3px solid hsla(6, 50%, 61%, 0.3);
  --skili-danger-button-focus-outline: 3px solid hsla(6, 50%, 61%, 0.5);
  --skili-danger-button-active-outline: 4px solid hsla(6, 50%, 61%, 0.7);
  /* --skili-danger-button-box-shadow: ;
  --skili-danger-button-hover-box-shadow: ;
  --skili-danger-button-focus-box-shadow: ;
  --skili-danger-button-active-box-shadow: ; */

  --skili-alert-danger-background-color: hsl(357, 60%, 42%);
  --skili-alert-danger-color: white;
  --skili-alert-danger-border: none;

  --skili-block-background-color: #383435;
  --skili-block-color: var(--skili-darker-color);
  --skili-block-enlighted-background-color: #524e4f;
  --skili-block-enlighted-color: var(--skili-darker-color);
  --skili-block-border-radius: 10px;
  /* --skili-block-box-shadow: 0px 2.794929027557373px 3.154672384262085px 0px rgba(190, 147, 129, 0.01), 0px 6.7166032791137695px 7.581116199493408px 0px rgba(190, 147, 129, 0.02), 0px 12.646767616271973px 14.274569511413574px 0px rgba(190, 147, 129, 0.03), 0px 22.55967140197754px 25.46339225769043px 0px rgba(190, 147, 129, 0.03), 0px 42.19538497924805px 47.6264762878418px 0px rgba(190, 147, 129, 0.04), 0px 101px 114px 0px rgba(190, 147, 129, 0.05); */
  --skili-block-box-shadow: 0 0 0 4px #231f20, 0 0 0 6px #6a6a6d;

  --skili-calendar-border: 2px solid #231f20;
  --skili-calendar-header-background-color: #383435;
  --skili-calendar-header-month-color: hsla(196, 50%, 61%, 1);
  --skili-calendar-header-weekday-color: hsla(196, 50%, 61%, 0.5);
  --skili-calendar-day-background-color: #383435;
  --skili-calendar-day-color: var(--skili-darker-color);
  --skili-calendar-day-hover-background-color: hsla(196, 50%, 61%, 0.6);
  --skili-calendar-day-hover-color: var(--skili-darker-color);
  --skili-calendar-day-selected-background-color: hsla(196, 50%, 61%, 0.4);
  --skili-calendar-day-selected-color: var(--skili-darker-color);
  --skili-disabled-day-background-color: rgba(0, 0, 0, 0.2);
  --skili-disabled-day-color: rgba(255,255,255, 0.2);

  --skili-custom-control-color: var(--skili-block-color);
  --skili-custom-control-hover-color: var(--skili-block-color);
  --skili-custom-control-background-color: #383435;
  --skili-custom-control-hover-background-color: #524e4f;

  --skili-alert-info-background-color: hsl(196, 71%, 20%);
  --skili-alert-info-color: var(--skili-darker-color);
  --skili-alert-info-border: none;

  --skili-nav-background: #383435;
  --skili-mobile-nav-background: #383435;
  --skili-mobile-navigation-background: #383435;
  /* --skili-nav-background-size: ; */
  /* --skili-mobile-nav-background-size: ; */
  --skili-nav-color: var(--skili-color);
  /* --skili-mobile-nav-color: ; */
  --skili-nav-item-color: var(--skili-darker-color);

  --skili-link-color: hsl(196, 100%, 46%);

  --skili-alert-warning-background-color: hsla(40, 100%, 90%, 0.5);
  --skili-alert-warning-color: white;
  --skili-alert-warning-border: none;

  --skili-navbar-background-position: absolute;
  --skili-navbar-background-top: auto;
  --skili-navbar-background-bottom: 10px;
  --skili-navbar-background-left: auto;
  --skili-navbar-background-right: -30%;
  --skili-navbar-background-width: 120%;
  --skili-navbar-background-max-width: none;
  --skili-navbar-background-height: auto;
  --skili-navbar-background-max-height: none;
  --skili-navbar-background-transform: translateY(20%);
}

in2-input label {
  color: var(--skili-color) !important;
}

in2-input .focused .inputIcon {
  color: white !important;
}

body, .btn {
  color: white !important;
}

.modal-content {
  background-color: var(--skili-block-background-color) !important;
  & > * {
    border-color: #6a6a6d !important;
  }
}

.layoutHorizontal {
  gap: 1rem;
}