/* App styles */

/* default --ds variables that don't exist in original theme for sites/users that don't have dark or light */
:root {
  --ds-surface:              var(--aui-page-background);
  --ds-text:                 var(--aui-body-text);
  --ds-background-discovery: var(--aui-message-change-bg-color); 
  --ds-text-discovery:       var(--aui-message-change-text-color);
}

body {
    color: var(--ds-text);
    background-color: transparent; /*  var(--ds-surface); */
}

.decline-color { 
  color: var(--aui-lozenge-error-subtle-text-color) !important; 
}

.intro-header h1 {
  font-size: 48px;
  line-height: 60px;
  padding-top: 20px;
}

.intro-header p.subtitle {
  font-size: 24px;
  line-height: 30px;
  padding-bottom: 20px;
}

.main-panel .aui-page-panel-item {
  padding: 20px 40px 20px 0;
  height: 100px;
}

/* reduce whitespace above toolbar buttons */
.aui-toolbar2 .aui-button {
  margin-top: 4px;
}
.aui-toolbar2 .aui-button {
  margin-left: 2px;
}


div.description, span.description {
  font-size: 13px !important;
  line-height: 20px !important;
}

/* override aui large avatar to 40px instead of 48px */
.aui-avatar.aui-avatar-large, .aui-avatar.aui-avatar-large .aui-avatar-inner {
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  width: 40px;
}

/* restrict width of large dialogs to prevent horizontal scroll bars */
.aui-dialog2-content {
  padding-top: 10px;  
  padding-bottom: 10px;  
}
.aui-dialog2-large {
  max-width: 750px;  
}

/* override aui help */
.aui-help {
  max-width: 750px;
  width: 100% !important;
  padding-top: 8px;
  padding-bottom: 8px;
}
.aui-help .aui-help-content {
  background-color: var(--ds-background-discovery); 
  color: var(--ds-text-discovery) !important;
  font-size: 13px ;  
  padding-top: 4px;  
  padding-bottom: 4px; 
  padding-right: 20px;
}
.aui-help-content h4 {
  color: var(--ds-text-discovery) !important;
}
.aui-help-content ul {
  margin-top: 0px;
  padding-inline-start: 20px;
  list-style-type: circle;
}


/* use aui-message-confirmation for legal consent message to get the green check icon */
.aui-message.legal {
  font-size: 12px;
  line-height: 16px !important;
}

/* Customer consent box: suppress AUI icon, reset left padding for checkbox */
.aui-message.legal-consent {
  font-size: 12px;
  line-height: 16px !important;
  padding-left: var(--aui-message-padding);
}
.aui-message.legal-consent::after {
  display: none;
}

.hint {
    font-size: 12px;
  /* color:#7a869a; */
}

span.hint {
  font-size: 12px;
  font-style: italic;
  margin-left: 4px;
  /* FUTURE?  color:#7a869a; */
}

.monospace {
  font-family: monospace !important;
}

div.selectize-input {
  padding: 4px 5px 2px 5px !important;
}

div.selectize-option {
  margin: 0px 2px 2px 0px !important;
}

/* Styling Tom-Select */
div.ts-control, div.ts-control>input, div.ts-dropdown {
  background-color: var(--aui-form-field-default-bg-color) !important;
  background-image: none !important;
  color: var(--aui-body-text) !important; 
}

/* adjust disabled form items for improved readibility */
form.aui input:disabled,
form.aui textarea:disabled {
    background-color: var(--aui-dialog-bg-color) !important;
    color: var(--aui-form-field-default-text-color) !important;
    border-left-width: 0px !important;
    padding-left: 0px !important;
}

img.button-icon-img {
  height: 16px;
  width: 16px; 
  vertical-align: text-bottom;
}

/* override some colors in dark mode */
html[data-color-mode="dark"] {
  --aui-body-text: var(--ds-text);

  --aui-button-default-bg-color:    var(--ds-background-neutral);
  --aui-button-default-text-color:  var(--ds-text);
  --aui-button-subtle-text-color:   var(--ds-text);
  --aui-button-default-disabled-text-color: 	var(--ds-text-disabled);

  --aui-dialog-bg-color: var(--ds-surface-overlay);
  --aui-dialog-border-color: var(--ds-border); 
  
  --aui-dropdown-bg-color: var(--ds-surface-overlay);

  --aui-form-description-text-color:    var(--ds-text-subtlest);
  --aui-form-disabled-field-bg-color: 	var(--ds-surface-overlay);   /* var(--ds-text-disabled); */
  --aui-form-disabled-field-text-color: var(--ds-text);  /* default: --ds-text-subtlest */
  --aui-form-field-default-bg-color:    var(--ds-background-input);
  --aui-form-field-default-text-color:  var(--ds-text);
  --aui-form-field-focus-bg-color:      var(--ds-background-input);
  --aui-form-field-border-color:        var(--ds-border-input);
  --aui-form-field-hover-border-color:  var(--ds-border-focused);
  --aui-form-field-hover-bg-color:      var(--ds-background-input-hovered);
  --aui-form-label-text-color:          var(--ds-text-subtle);
  --aui-form-select-bg-color:           var(--ds-background-input);
  --aui-form-select-border-color:       var(--ds-border-input);
  --aui-form-select-hover-bg-color:     var(--ds-border-input);

  --aui-item-text: var(--ds-text);

  --aui-link-color:       var(--ds-link);
  --aui-link-hover-color: var(--ds-link);
  
  --aui-message-change-bg-color:    var(--ds-background-discovery);
  --aui-message-change-icon-color:  var(--ds-icon-discovery);
  --aui-message-change-text-color:  var(--ds-text);
  --aui-message-error-bg-color:     var(--ds-background-danger);
  --aui-message-error-icon-color:   var(--ds-icon-danger);
  --aui-message-error-text-color:   var(--ds-text);
  --aui-message-info-bg-color:      var(--ds-background-information);
  --aui-message-info-icon-color:    var(--ds-icon-information);
  --aui-message-info-text-color:    var(--ds-text);
  --aui-message-success-bg-color:   var(--ds-background-success);
  --aui-message-success-icon-color: var(--ds-icon-success);
  --aui-message-success-text-color: var(--ds-text);
  --aui-message-warning-bg-color:   var(--ds-background-warning);
  --aui-message-warning-icon-color: var(--ds-icon-warning);
  --aui-message-warning-text-color: var(--ds-text);

  --aui-table-row-text-color: var(--ds-text);

  .aui-page-panel {
    background-color: var(--ds-surface); 
  }

  /* aui tables 
  table.aui tr {
    color: var(--ds-text) !important;
    color: pink !important;
  }
  */

  /* Selectize overrides for dark */
  .selectize-control.multi .selectize-input>div {
    background-color: var(--ds-background-neutral);
    background-color: var(--ds-text-selected);
    color: var(--ds-text-inverse);
  }  
  .selectize-dropdown {
    background-color: var(--ds-background-input);
    color: var(--ds-text);
  }
  .selectize-input {
    background-color: var(--ds-background-input);
    border-color: var(--ds-border-input);
    border-width: 1px;
    color: var(--ds-text);
  }
  .selectize-input.disabled {
    background-color: var(--ds-text-disabled);
  }
  .selectize-input:focus-within {
    border-color: var(--aui-focus);
  }
  .selectize-input>input {
    background-color: var(--ds-background-input);
    color: var(--ds-text);
  }
  /* custom class selectize-option injected in js render html code */
  .selectize-option {
    background-color: var(--ds-border-input);
    color: var(--ds-text);
  }
  .selectize-option:hover {
    background-color: var(--ds-text-selected);
    color: var(--ds-text-inverse);
  }

} /* end - html dark theme */