export declare const FORM_ELEM_COLOR = "#6266A7";
export declare const ACTIVE_ITEM_COLOR = "#000339";
export declare const DISABLED_COLOR = "#B6B8E2";
export declare const LIGHT_COLOR = "#fff";
export declare const BORDER_COLOR = "#e8e4e4";
export declare const ERROR_COLOR = "#ee3f75";
export declare const MAIN_STYLES = "\n<style>\n  :host * {\n    font-size: 14px;\n  }\n  .sprinque-font-16 {\n    font-size: 16px;\n  }\n  :host h3, :host span, :host div {\n    color: #000339;\n  }\n  \n  :host .form-elem-color {color: #6266A7}\n  \n  :host h3 {\n    font-size: 20px;\n  }\n  :host .sdk-lang-de h3 {font-size: 18px;}\n  :host p {\n    margin: 0;\n  }\n  /* Embedded */\n  .embedded-true.sprinque-modal-wrapper {\n    position: static; \n    background: none;\n    height: inherit;\n    width: 400px;\n    max-width: 90%;\n  }\n  .embedded-true .close-btn {display: none}\n  /*main*/\n  .sprinque-modal-wrapper {\n    position: fixed;\n    z-index: 9999;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100vh;\n    background: rgba(0, 0, 0, .5);\n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    overflow-y: scroll;\n  }\n  .sprinque-modal {\n    position: relative;\n    font-family: sans-serif;\n    background: #fff;\n    width: 400px;\n    display: grid;\n    grid-template-columns: 1fr;\n    margin-bottom: 10px;\n    margin-top: 30px;\n    padding: 32px;\n    border-radius: 10px;\n    max-width: 90%;\n  }\n  .sprinque-header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n  }\n  .sprinque-stepper {\n    color: #000339;\n    font-weight: bold;\n    white-space: nowrap;\n    font-size: 16px;\n  }\n  .sprinque-api-error, .validation-error-from-api {\n    color: #ee3f75;\n    font-size: 14px;\n    text-align: center;\n  }\n  .validation-error-6:not(:empty) {\n    margin-bottom: -60px;\n  }\n  .close-btn {\n    font-size: 26px;\n    cursor: pointer;\n    font-weight: 100;\n    color: #000339;\n    position: absolute;\n    right: 32px;\n    top: 20px;\n  }\n  /* logo */\n  .sprinque-logo-wrapper {\n    text-align: center;\n    min-height: 50px;\n  }\n  .sprinque-logo {\n    max-width: 200px;\n    max-height: 50px;\n  }\n  .sprinque-blurred {\n    filter: blur(5px);\n    -webkit-filter: blur(5px);\n  }\n  /* form */\n  label {\n    display: block;\n    font-weight: bold;\n    color: #6266A7;\n    margin-top: 20px;\n    padding: 5px 0;\n  }\n  .sprinque-modal label span {color: #6266A7;}\n  \n  input, select {\n    display: block;\n    border: 1px solid #B6B8E2;\n    border-radius: 4px;\n    width: calc(100% - 20px);\n    font-size: 16px;\n    padding: 8px 10px;\n  }\n  input:active, input:focus, select:focus {\n    border-color: #000339;\n    color: #000339;\n    outline: none;\n  }\n  input::placeholder {\n    color: #D9DBF2;\n  }\n  select {\n    width: 100%;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n  }\n  select, .as-select {\n    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAPCAYAAAARZmTlAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADqSURBVHgBpdHNDYIwFAfw1yfx7AiMoHEB3cELXqwmuoa4gWc00BsnD04gCxhX6ByGFFuCiamltPBPCP14fb8mJSBDaTaBIJhCGXDGIg4Do/cjlOYhjuEh90L5cfGG5RDI1A9xLGizoFIXqELoEQ1o+gmKQmCh1faCDEAdUSFHdo0KOT4NgdoA1ZddIka+s90hj+XvqBV1vpENSJMoVgPyu+oLuQB/iA/kChgRF8gHaEWskCi3iEHmClgRC2RKK6AyAktez1sxm6/URRZ9gU7EAeoEnBAL5ASoEPAI3edUHtgQUt3TZH12PfcBJLGTJFbnlZQAAAAASUVORK5CYII=') no-repeat 97% 50%;\n    background-size: 12px 7px;\n  }\n   \n   /* powered by */\n   .sprinque-powered-img {\n      height: 16px;\n      margin-bottom: -4px;\n      opacity: 0.3\n   }\n    .powered-by {\n      margin-top: 10px;\n      color: #B6B8E2;\n      display: flex;\n      justify-content: space-between;\n    }\n    .powered-by span, .powered-by div {\n      font-size: 12px;\n      color: #B6B8E2;\n    }\n   /* buttons */\n   button {\n      color: #fff;\n      background: #000339;\n      border: 2px solid #000339;\n      border-radius: 4px;\n      transition: .3s;\n      font-weight: bold;\n      font-size: 16px;\n      padding: 8px 20px;\n      margin: 10px 0;\n      cursor: pointer;\n   }\n   button.secondary {\n      color: #000339;\n      background: #fff;\n   } \n   input:disabled, select:disabled {\n    color: #B6B8E2;\n    border-color: #B6B8E2;\n    background-color: #F7F7FF;\n   }\n   button:disabled, button:disabled:hover {\n      background: #B6B8E2;\n      border-color: #B6B8E2;\n   }\n   button:hover {\n      background: #6266A7;\n   }\n   button.secondary {\n      border: 2px solid #000339;\n      background: transparent;\n      color: #000339;\n   }\n   button.secondary:hover {\n    background: #e8e4e4;\n   } \n   button.secondary.sp-arrow {\n    border-color: #000339;\n   }\n   button.secondary .sp-arrow {\n    border-color: #000339;\n   }\n   button.secondary .sp-arrow::before {\n    background: #000339;\n   }\n   /* common */\n   .sprinque-text-right {\n      text-align: right;\n   }\n   .cursour-pointer {\n      cursor: pointer;\n   }\n   .justify-between {\n      display: flex;\n      justify-content: space-between;\n   }\n   /* validation */\n   div[class^=\"validation-error-\"] {\n      color: #ee3f75;\n      font-weight: bold;\n   }\n   .warning {\n    background: rgb(255, 244, 229);\n    padding: 10px;\n    color: rgb(102, 60, 0);\n    border-radius: 4px;\n    border: 1px solid #e8e4e4;\n   }\n   \n   .sp-arrow {\n      border: solid white;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 4px;\n    }\n   .sp-arrow::before {\n      content: \"\";\n      width: 14px;\n      height: 2px;\n      background: white;\n      position: absolute;\n      rotate: 45deg;\n      top: 3px;\n      right: -3px;\n   }\n  \n  .sp-right {\n    margin-left: 10px;\n    transform: rotate(-45deg);\n    -webkit-transform: rotate(-45deg);\n  }\n  \n  .sp-left {\n    margin-right: 10px;\n    transform: rotate(135deg);\n    -webkit-transform: rotate(135deg);\n  }\n  /*adaptive design*/\n  @media screen and (max-width: 640px) {\n    .sprinque-modal {\n      max-width: 86%;\n      padding: 5%;\n    }\n  }\n  .helper-description {\n    color: #819098;\n  }\n</style>\n";