/*======================*
   Syntax (or semantic) styles
   base styling for built in elements and combinations
   Applied based on tag name or attibute.
 *======================*/




/*==================*
   block iOS ui
 *==================*/
 

  html {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color:transparent;
    overscroll-behavior: contain;
  }
  html * {
    -webkit-user-select:none !important;
    -webkit-tap-highlight-color:transparent;
  }
  html .selectable,
  html .selectable *,
  html input,
  html textarea,
  html [contenteditable] {
    -webkit-user-select:text !important;
            user-select:text !important;
  }


  *,:after,:before {
    box-sizing:border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  a,button,[type="button"],[type="submit"],
  [data-ui-input-icon] input + i {
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
            user-select: none;
  }



/*==================*
  Colors
 *==================*/


:root {
  --clr-main: DarkTurquoise;
  --clr-tint: Azure;
  --clr-dark: DarkCyan;
}


/*==================*
  Semantic styles
 *==================*/
 

  html {
    font:500 16px/1.25 montserrat,sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow:hidden;
  }
  html[data-ui-text-size="large"] {
    font-size:20px;
  }
  * {
    box-sizing:border-box;
  }
  body {
    background-color:#f9f9f9;
    margin:0;
    overflow:hidden;
  }
  body > #main {
    position:fixed;
    top:0;left:0;bottom:0;right:0;width:100%;
  }
  main {
    flex-grow:1;
    flex-shrink:1;
    position:relative;
  }
  a,.link {
    cursor:pointer;
    color: var(--clr-main);
    text-decoration:none;
    font-weight:500;
    outline:none;
    position:relative;
    -webkit-font-smoothing: subpixel-antialiased;
  }
  :link,:visited {
    color: var(--clr-main);
    -webkit-font-smoothing: subpixel-antialiased;
  }
  [tabindex] {outline:none;}
  a:active,
  a:focus,
  [type="button"]:focus,
  [type="submit"]:focus {
    outline:none;
  }
  a:focus,.link:focus {-text-decoration:underline;}
  a:active {-color: var(--clr-main);}
  [href=""]:not(:empty):not(.arrow-left):before,
  [href=""].arrow-left:not(:empty):after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
  }
  a *,.btn *,button *,
  [href=""] * {pointer-events:none;}
  
  img {max-width:100%;}
  
  h1,h2,h3,h4,h5,h6 {
    margin:0 0 0.875rem;
    font-weight:500;
  }
  h1 {font-size: 1.6250rem;font-weight:700;line-height:1.125;}
  h2 {font-size: 1.375rem;line-height:1.125;}
  h3 {font-size: 1.125rem;line-height:1.125;}
  h4 {font-size: 1.000rem;}
  h5 {font-size: 0.875rem;margin-bottom:0em;}
  h6 {font-size: 0.750rem;margin-bottom:0em;}
  p,.p {
    margin:0 0 0.75rem;
    font-size:1.000rem;
    line-height:1.125;
  }
  hr,.hr {
    border:none 0px;
    border-top:solid 1px #ddd;
    margin:0;
  }
  ul {
    padding:0;
    margin:0;
    list-style-type: none;
    font-size:1.000rem;
  }
 ol {
    padding:0 0 0 1em;
    margin:0;
    font-size:1.000rem;
  }
  ol li,
  ul li {
    margin:0;
  }
  .bullet,
  .dash {
    padding-left:0;
  }
  .bullet >li,
  .dash   >li {
    padding-left:1em;
  }
  .bullet >li:before,
  .dash   >li:before {
    width:1em;
    display:inline-block;
    margin-left:-1em;
  }
  .bullet >li:before { content:'\25cf'; }
  .dash   >li:before { content:'-'; }
  
  table {
    border:none 0px;
    border-collapse: collapse;
    font-size:0.750rem;
  }
  table.table-fixed {table-layout:fixed;}
  tr {
    border-top:solid 1px #ddd; /* requires table border-collapse: collapse; */
  }
  thead tr {
    border-top:none 0px;
  }
  td {
    border:none 0px;
    padding:2px 2px 2px 2px;
    vertical-align:center;
    text-align:left;
  }
  th {
    border:none 0px;
    border-bottom:solid 1px #999;
    font-weight:normal;
    text-align:left;
  }
  
  details { display:block; }
  details summary {
    display:block;
    outline:none;
    cursor:pointer;
    padding-left:1em;
  }
  details:not([open]) > :not(summary) {display:none;}
  summary:before {
    content:'\ff0b';
    width:1em;
    margin-left: -1.5em;
    position: absolute;
    text-align:left;
    color:var(--clr-main);
    font-weight: 900;
  }
  details[open] summary:before { content:'\ff0d';}
  details.summary-only summary:before { content:none;}
  summary::-webkit-details-marker { display:none; }
  
  
  h1:last-child,
  h2:last-child,
  h3:last-child,
  h4:last-child,
  h5:last-child,
  h6:last-child,
  p:last-child {
    margin-bottom:0;
  }
  
  .hide,[hidden] {display:none;}
  .hidden {visibility:hidden;}
  [v-hide] {visibility:hidden;}
  


/*==================*
  Modal Dialog
 *==================*/
 
  
  dialog {
    z-index: 1001;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    margin:0px;
    border:none;
    width: auto;
    height: auto;
    padding:16px;
    background: transparent;
    visibility:hidden;
    transition:visibility 0ms linear 400ms, padding-top 250ms ease-out;
    overflow:hidden;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
  }
  dialog[open] {
    visibility:visible;
    transition:visibility 0ms linear 0ms, padding-top 250ms ease-out;
  }
  dialog:before {
    content:'';
    position:fixed;
    z-index: 1;
    top:0;left:0;right:0;bottom:0;
    background:rgba(42,44,76,0.0);
    backdrop-filter: none;
    transition:background 400ms ease-in 0ms, backdrop-filter 0ms ease-in 0ms;
  }
  dialog[open]:before {
    background:rgba(42,44,76,0.6);
    backdrop-filter: blur(1.5px);/* contrast(0.5);*/
  }
  
  dialog > * {
    width: 100%;
    background:white;
    border-radius:24px;
    padding:0;
    z-index: 1;
    max-width:520px;
    max-height:720px;
    transform:translateY(100vh);
    transition:transform 100ms ease-out 0ms;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  dialog[open] > * {
    transform:translateY(0vh);
    transition:transform 100ms ease-out 200ms;
  }
  
  @media(max-height:640px){
    .dialog-input {
      overflow: hidden;
      overflow-y: auto;
    }
    .dialog-input > * {
      flex-shrink:0;
    }
  }
  
  
  
  [data-ui-close~="corner"] {
    position:absolute;
    top:0;
    left:0;
    right:auto;
    padding:0;
    width:2.0em;
    height:2.0em;
    z-index: 100;
    padding:0;
    font-size:24px;
    line-height:2.0;
    font-weight:300;
    text-align:center;
    border-radius:24px;
  }
  [data-ui-close~="corner"],
  [data---ui-close~="corner"]:link {
    color:rgba(0,0,0,0.5);
  }
  [data-ui-close~="right"] {
    left:auto;
    right:0;
  }
  [data-ui-close]:empty:focus {
    text-decoration:none;
    color:rgba(0,0,0,1);
  }
  [data-ui-close]:empty:after {
    content:'\2715';
    color:inherit;
  }
  [data-ui-close]:empty:active {
    background-color:rgba(0,0,0,0.05);
  }
  
  
  
  .dialog-alert > *,
  .dialog-input > * {
    width:360px;
    max-width: 100%;
    padding:0;
    margin-top: env(safe-area-inset-top);
  }
  .dialog-alert,
  .dialog-input {
    padding: 8px;
  }
  .dialog-input {
    justify-content: start;
  }
  .dialog-input > * {
    transform:translateY(-100vh);
  }
  
  
  .dialog-sheet > * {
    width:640px;
    max-width: 100%;
    padding:0;
    max-height:none;
    margin-top:24px;
    margin-bottom:0;
    border-bottom-left-radius:  0px;
    border-bottom-right-radius: 0px;
    flex-grow: 1;
  }
  dialog.dialog-sheet {
    justify-content: flex-end;
    padding:0;
    margin-top:env(safe-area-inset-top);
  }
  
  .dialog-super {
    z-index: 1000;
  }
  .dialog-super,
  .dialog-super:before,
  .dialog-super[open] ~ dialog,
  .dialog-super[open] ~ dialog:before {
    top:-64px;
  }
  .dialog-super > * {
    border-radius:0;
    transform:translateY(0px);
    max-width:none;
    width:100%;
  }
  
  [data-ui-growler].growl .dialog-alert,
  [data-ui-growler].growl .dialog-input {
    padding-top: 42px;
  }
  
  
  
  @media (min-width:521px) {
    dialog > * {
      max-width:500px;
      margin:30px auto 30px;
    }
  }
  
  
  
  
/*==================*
   Buttons
 *==================*/
  
  
  
  button,
  [type="button"],
  [type="submit"] {
    font:inherit;
  }
  .btn,
  button,
  [type="button"],
  [type="submit"] {
    text-shadow:none;
    position:relative;
    border:solid 2px transparent;
    border-radius:1.25em;
    display:inline-block;
    -webkit-appearance:none;
    text-decoration:none;
    padding:0.625em 1.2em;
    overflow:hidden;
    background-image:none;
    text-decoration:none;  
    line-height: 1.25;
    color: white;
    background-color: var(--clr-main);
    font-weight:600;
  }
  
  .btn:not(:empty):before,
  button:not(:empty):before,
  [type="button"]:not(:empty):before,
  [type="submit"]:not(:empty):before {
    content:'';
    background-color:rgba(255,255,255,0.2);
    opacity:0;
    position:absolute;
    top:50%;left:50%;
    border-radius:50%;
    padding-bottom:100%;
    width:100%;
    margin:0;
    transform-origin:50% 50%;
    transform: translate(-50%,-50%) scale(0.1);
    transition:transform 300ms ease-in,opacity 50ms linear,box-shadow 200ms linear;
    
    padding-bottom:200%;
    width:200%;
  }
  .btn-clear {
    background-color:transparent;
    color:var(--clr-main);
    border-color:transparent;
  }
  .btn-shade {
    background-color:rgba(0,0,0,0.1);
    color:var(--clr-main);
    border-color:transparent;
  }
  .btn-light {
    background-color:rgba(255,255,255,0.2);
    color:var(--clr-main);
    border-color:transparent;
  }
  .btn-oline {
    border:solid 2px currentColor;
    color:var(--clr-main);
    background-color:transparent;
  }
  .btn-uline {
    border:none 0px currentColor;
    border-bottom:solid 2px;
    border-radius:0:
    color:var(--clr-main);
    background-color:transparent;
  }
  .btn-round {
    border-radius:50% !important;
    width:2em;
    height:2em;
    line-height:1.875;
    padding:0;
    text-align:center;
    transition:box-shadow 200ms linear;
    overflow:visible;
  }
  .btn-round.waiting:before {
    width: auto !important;
    margin: -3px;
    border-radius: 50%;
    border: inherit;
    opacity: 1;
    background: transparent;
    border-top-color: black;
    transform: none !important;
    -webkit-animation: ui-loading-spin 1500ms infinite;
            animation: ui-loading-spin 1500ms linear infinite;
  }
  .btn-round[title] {
    margin-bottom:2.75rem;
  }
  .btn-round[title]:after {
    content: attr(title);
    color: #000;
    font-size: 0.75rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    line-height: 1;
    padding-top: 0.625em;
    margin: 0 -0.25em;
    text-transform:none;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .btn-round:hover {
    box-shadow:2px 2px 8px 0px rgba(0,0,0,0.2);
  }
  .btn-round > svg {
    width:1em;
    height:1em;
    font-size:1.8em;
    transition:all 200ms linear;
  }
  .btn-clear:before,
  .btn-oline:before,
  .btn-uline:before {
    background-color:rgba(0,0,0,0.05);
  }
  .btn:hover,
  button:hover,
  [type="button"]:hover,
  [type="submit"]:hover,
  .btn:focus,
  button:focus,
  [type="button"]:focus,
  [type="submit"]:focus {
    text-decoration:none;  
  }
  .btn:active:before,
  button:active:before,
  [type="button"]:active:before,
  [type="submit"]:active:before {
    transform: translate(-50%,-50%) scale(2.1);
    opacity:1;
  }
  .btn-round:not(:empty):before {
    transform: translate(0%,0%) scale(0.0);
    padding-bottom: 100%;
    width: 100%;
  }
  .btn-round:active:before {
    transform: translate(0%,0%) scale(1.0);
  }
  
  
  .btn:focus,
  button:focus,
  select.btn:focus,
  select.btn-oline:focus,
   label input:focus + .btn,
  .label input:focus + .btn,
  [type="button"]:focus,
  [type="submit"]:focus {
    box-shadow:2px 2px 2px 1px rgba(0,0,0,0.15);
    background-image: linear-gradient(to top,rgba(0,0,0,0.05),rgba(0,0,0,0.05));
    outline: none;
  }`
  .btn-clear:focus {
    background-image: linear-gradient(to top,rgba(0,0,0,0.05),rgba(0,0,0,0.05));
  }
  .btn-oline:focus,
  .btn-uline:focus,
  select.btn-oline:focus,
  select.btn-uline:focus {
    box-shadow:0px 2px 0px 0px rgba(0,0,0,0.2);
  }
  .disabled,
  .btn.disabled,
  .btn[disabled],
  button[disabled],
  [type="button"][disabled],
  [type="submit"][disabled] {
    background-color:#ccc;
    color: #999;
    pointer-events:none;
    filter:saturate(0);
  }
  .btn-oline[disabled] {
    background-color:#f6f6f6;
    color: #ddd;
    filter:saturate(0);
  }
  .disabled:hover
  .btn.disabled:hover
  .btn[disabled]:hover,
  [type="button"][disabled]:hover,
  [type="submit"][disabled]:hover,
  .btn[disabled]:focus,
  [type="button"][disabled]:focus,
  [type="submit"][disabled]:focus {
    color:#999;
  }
  .disabled svg {
    filter:saturate(0.0);
  }
  
  
  
  .btn-set > .btn {
    padding:0.5em;
    margin-left:-1px;
    margin-right:-1px;
    z-index:1;
    border-width:1px;
  }
  .btn-set > .btn:focus {
    z-index:2;
    background-image:none;
    box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,0.15);
  }
  .btn-set > .btn:first-child {
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
  }
  .btn-set > .btn:last-child {
    border-top-left-radius:0px;
    border-bottom-left-radius:0px;
  }
  .btn-set > .btn:not(:last-child):not(:first-child) {
    border-radius:0px;
  }
  .btn-set > .btn:not(:last-child) {
    -border-right:0px none;
  }
  
  
  
  
/*==================*
   Growler
 *==================*/
 
 
  
  [data-ui-growler]:after {
    position:absolute;
    content:attr(data-ui-growler);
    background:rgba(0,0,0,0.8);
    top:0;left:0;right:0;
    margin:0;
    padding:10px;
    padding-top:calc(10px + env(safe-area-inset-top));
    font-weight: 400;
    font-size:14px;
    line-height:1;
    white-space:pre-line;
    word-wrap:break-word;
    text-align: center;
    color:white;
    opacity:0;
    pointer-events:none;
    -webkit-transform:translateY(-100%);
            transform:translateY(-100%);
    -webkit-transition:-webkit-transform 250ms ease-out,opacity 0ms linear 250ms;
            transition:        transform 250ms ease-out,opacity 0ms linear 250ms;
  }
  .growl[data-ui-growler]:after {
    opacity:1;
    -webkit-transform:translateY(0%);
            transform:translateY(0%);
    -webkit-transition:-webkit-transform 250ms ease-out,opacity 0ms linear 0ms;
            transition:        transform 250ms ease-out,opacity 0ms linear 0ms;
  }
  
  

/*==================*
   Form Styles
 *==================*/
  
  
  
  
  label[data-ui-switchbox]{
    position:relative;
    cursor:pointer;
  }
  label[data-ui-switchbox] input[type="checkbox"]{
    position:absolute;
    opacity:0;
  }
  label[data-ui-switchbox] input[type="checkbox"] ~ i {
    font-style:normal;
    border-radius: 0.15em;
    line-height: 0.3em;
    margin:0.3em 0;
    background: #000;
    font-size: 2.4em;
    width: 0.8em;
    text-align: left;
  }
  label[data-ui-switchbox] input[type="checkbox"][disabled] ~ i {
    opacity:0.25;
  }
  label[data-ui-switchbox] input[type="checkbox"]:not(:checked) ~ i {
    background:#000;
  }
  label[data-ui-switchbox] input[type="checkbox"]:checked ~ i {
    text-align: right;
    background:currentColor;
  }
  label[data-ui-switchbox] input[type="checkbox"] ~ i:after {
    content: '';
    white-space: nowrap;
    float: left;
    height: 1em;
    font-size: 0.5em;
    width: 1em;
    box-sizing:border-box;
    margin: -0.2em;
    display: inline-block;
    background: white;
    border-radius: 50%;
    transition:margin-left 100ms ease-in;
  }
  label[data-ui-switchbox] input[type="checkbox"]:checked ~ i:after {
    margin-left:0.8em;
  }
  
  
  label[data-ui-switchbox] input ~ i {
    float:right;
  }
  label[data-ui-switchbox] input ~ i:after {
    box-shadow:1px 1px 8px rgba(0,0,0,0.5);
  }
  [data-ui-switchbox] *:focus {
    text-decoration:none;
    color:var(--clr-main);
    outline:none;
  }
  label[data-ui-switchbox] input[type="checkbox"]:focus  ~ i:after {
    background-color:currentColor;
  }
  label[data-ui-switchbox] input[type="checkbox"]:focus  ~ * {
    color:;
  }
  
  [data-ui-checkbox] {
    padding:20px 8px;
  }
  label[data-ui-checkbox] {
    line-height: 1.25;
  }
  label[data-ui-checkbox] input {
    position:relative;
  }
  label[data-ui-checkbox] input {
    position:absolute;
    opacity:0;
  }
  label[data-ui-checkbox] input ~ mark {
    display:block;
    padding-left:40px;
    position:relative;
  }
  label[data-ui-checkbox] input:checked ~ mark {
  }
  label[data-ui-checkbox] input[disabled] ~ mark {
    color:#ccc;
  }
  label[data-ui-checkbox] mark:before {
    content:'';
    position:absolute;
    left:0;
    left:1.0em;
    top:0.75em;
    border-radius:50%;
    width:2em;
    font-size:12px;
    height:2em;
    line-height:2;
    margin:-1em;
    color:#ccc;
    box-sizing:border-box;
    background:inherit;
  }
  label[data-ui-checkbox] input[data-error] ~ mark:before {
    color:red;
  }
  label[data-ui-checkbox] input:checked ~ mark:before {
  }
  label[data-ui-checkbox] mark:after {
    content:'';
    position:absolute;
    left:0;
    left:1.0em;
    top:0.75em;
    border-radius:0;
    width:1em;
    font-size:12px;
    height:2em;
    line-height:2;
    margin:-1em;
    border:solid 2px;
    border-color:currentColor;
    border-top-color:transparent;
    border-left-color:transparent;
    color:inherit;
    -webkit-transform:translateX(80%) translateY(-30%) rotate(45deg);
            transform:translateX(80%) translateY(-30%) rotate(45deg);
    box-sizing:border-box;
  }
  label[data-ui-checkbox] input:not(:checked) ~ mark:after {
    display:none;
  }
  
  
  
  
  
  label.checkbox input {
    position:absolute;
    opacity:0;
  }
  label.checkbox input[disabled] ~ mark {
    color:#ccc;
  }
  label.checkbox mark {
    display:inline-block;
    position:relative;
    border-radius:50%;
    width:2em;
    height:2em;
    line-height:2;
    box-sizing:border-box;
  }
  label.checkbox input[data-error] ~ mark:before {
    border-color:red;
  }
  label.checkbox mark:after {
    content:'';
    display:none;
    position:absolute;
    left:0;
    left:1.25em;
    top:1.25em;
    border-radius:0;
    width:1em;
    height:2em;
    line-height:2;
    margin:-1.25em;
    border:solid 3px;
    border-color:currentColor;
    border-top-color:transparent;
    border-left-color:transparent;
    color:inherit;
    -webkit-transform:translateX(80%) translateY(-30%) rotate(45deg);
            transform:translateX(80%) translateY(-30%) rotate(45deg);
    box-sizing:border-box;
  }
  label.checkbox input:checked ~ mark:after {
    display:block;
  }
  label.checkbox input:focus  ~ mark,
  label.checkbox input:active ~ mark {
    border-color:currentColor;
    background:#f3f3f3;
  }
  input:checked ~ img.checked-hide { display:none; }
  input:not(:checked) ~ img.checked-show { display:none; }
  
  
  
  label {
    display:inline-block;
    font-size:1.0em;
    line-height:2;
    width:auto;
    max-width:100%;
    position:relative;
  }
  label.radiobox {
    border:1px solid #ccc;
    margin:4px;
    padding:10px 8px 8px 12px;
    display: flex;
    align-items: center;
  }
  label.radiobox input[type="radio"],
  label.radiobox input[type="checkbox"] {
    position: absolute;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    border: solid 1px #ccc;
    padding: 2px;
    margin:0 0 0 -2px;
    display: block;
    background-clip: content-box;
    border-radius: 50%;
    -webkit-appearance: none;
    -webkit-transform:translateY(-50%);
            transform:translateY(-50%);
  }
  label.radiobox input:checked {
    background-color: var(--clr-main);
  }
  label.radiobox input ~ p {
    margin:0 0 0 24px;
    line-height: 1.2;
  }
  label.radiobox input:checked ~ p {
    color:var(--clr-main);
  }
  header label {
    line-height:inherit;
  }
  
  label > small,
  .label > small {
    font-size:0.75rem;
    line-height:1;
    display:block;
    color:#999;
  }
  
  
  
  textarea {
    display:block;
    width:100%;
    max-width:100%;
    line-height:1.25;
    font-size:1.000rem;
    font-size:1.0em;
    padding:0.5em;
    border:none 0px;
    border:solid 1px #ccc;
    margin-left:auto;
    margin-right:auto;
    font-weight:400;
    font-family:inherit;
    border-radius:0;
    height:4.75em;
    -webkit-transition:height 250ms ease-out 500ms;
            transition:height 250ms ease-out 500ms;
  }
  textarea:focus {
    height:13.5em;
    -webkit-transition:height 250ms ease-out;
            transition:height 250ms ease-out;
  }
  input,
  select {
    display:block;
    width:auto;
    max-width:100%;
    line-height:2;
    font-size:inherit;
    padding:0 1em;
    border:none 0px;
    background: transparent;
    color:inherit;
    border-bottom:solid 1px #ccc;
    margin-left:auto;
    margin-right:auto;
    font-family:inherit;
    border-radius:0;
    padding-left:16px;
    padding-left:0;
    padding-right:16px;/* osX lock icon appears on password + space for icons */
  }
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select {
    -webkit-appearance:none;
  }
  select.right {
    text-align-last: right;
  }
  input[type="image"] {
    border:solid 1px #ccc;
    padding:0;
    margin: 4px 8px;
  }
  input[type="radio"],
  input[type="checkbox"] {
    display:inline-block;
    margin-right:0.25em;
  }
  input[type="radio"].float-left,
  input[type="checkbox"].float-left {
    margin: 0em 0.5em 1.25em 0;
  }
  
  input[disabled],
  select[disabled],
  texarea[disabled] {
    background: #eee;
  }
  
  input,
  select {
    font-weight:500;
  }
  select {
    background:transparent;
    border-radius:0;
    -webkit-appearance:none;
    text-align:left;
    padding-left: 8px;
    padding-right:2em;
  }
  .select,
  select,
  select.btn,
  select.btn-oline,
  select.btn-clear  {
    background-repeat:no-repeat;
    background-position:right center;
    background-size:auto 16px;
  }
  select.btn {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' width='16' height='10'><polyline points='4 3.5 7 6 10 3.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /></svg>");
    padding-right:1.6em;
  }
  .select,
  select,
  select.btn-oline,
  select.btn-clear  {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' width='16' height='10'><polyline points='4 3.5 7 6 10 3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /></svg>");
  }
  select.btn-reverse,
  select.btn-reverse:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' width='16' height='10'><polyline points='4 3.5 7 6 10 3.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /></svg>");
  }
  select.btn:focus {
    color:white;
  }
  input:focus {
    outline:none;
  }
  select.center {
    padding-right:1.5em;
    text-align-last:center;
  }
  form [type="submit"] {
    margin: 10px 0;
    min-width:8em;
  }
  form > label,
  form > input,
  form > textarea,
  label,
  .label {
    margin-bottom:0.5rem;
  }
  
  
  :focus {
    outline:none;
  }
  input:focus,
  select:focus,
  textarea:focus {
    border-color:currentColor;
  }
  ::-webkit-input-placeholder {font-family:inherit;font-size:inherit;color:#ccc;}
  ::-ms-input-placeholder {font-family:inherit;font-size:inherit;color:#ccc;}
  ::-moz-placeholder {font-family:inherit;font-size:inherit;color:#ccc;}
  ::placeholder {font-family:inherit;font-size:inherit;color:#ccc;}
  .center::-webkit-input-placeholder {text-align:center;}
  .center::-ms-input-placeholder {text-align:center;}
  :focus::-moz-placeholder {opacity:0;}
  :focus::placeholder {opacity:0;}
  
  :focus::-webkit-input-placeholder {opacity:0;}
  :focus::-ms-input-placeholder {opacity:0;}
  :focus::-moz-placeholder {opacity:0;}
  :focus::placeholder {opacity:0;}

  .small-placehoder::placeholder {
    font-size:0.75em;
    color:#999;
    font-weight:500;
  }

  input:not(:empty):invalid {border-color:red;color:red;}
  [data-error] a,[data-error]:focus a,
  [data-error],[data-error]:focus {border-color:red;color:red;}
  input[data-error] {border-color:red;color:red;}
  input[data-error]::-webkit-input-placeholder {color:red;}
  input[data-error]::-ms-input-placeholder {color:red;}
  input[data-error]::-moz-placeholder {color:red;}
  input[data-error]::placeholder {color:red;}
  textarea[data-error],textarea[data-error]:focus {border-color:red;color:red;}/*
  textarea[data-error]::-webkit-input-placeholder {color:red;}
  textarea[data-error]::-ms-input-placeholder {color:red;}
  textarea[data-error]::-moz-placeholder {color:red;}
  textarea[data-error]::placeholder {color:red;}*/
  @media (min-width:0) {
    input {text-align:left;}
    input::-webkit-input-placeholder {text-align:inherit;}
    input::-ms-input-placeholder {text-align:inherit;}
    input::-moz-placeholder {text-align:inherit;}
    input::placeholder {text-align:inherit;}
  }
  
  
  fieldset {
    border:none 0px;
    padding:0;
    margin:0;
  }
  .fullwidth {
    display:block;
    width:100%;
    box-sizing:border-box;
  }
   [type="digit"] {
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    width:1.25em;
    padding:0;
    -webkit-touch-callout: none !important;
  }
  .bdr-focus:not(mark),
  mark.bdr-focus:before,
  [type="digit"] {
    background-color:#fff;
    border-radius:4px;
    border:solid 2px transparent;
  }
  .bdr-focus:focus,
  [type="digit"]:focus {
    background-color:#fafafa;
    border-color:currentColor;
  }
  [type="digit"]:focus {
    caret-color:transparent !important; 
  }
  [type="digit"]:focus {
    background-color:#fff;
    border-color:currentColor;
  }
  [type="digit"]:focus::-webkit-input-placeholder {color:inherit;opacity:0.375;}
  [type="digit"]:focus::-ms-input-placeholder {color:inherit;opacity:0.375;}
  [type="digit"]:focus::-moz-placeholder {color:inherit;opacity:0.375;}
  [type="digit"]:focus::placeholder {color:inherit;opacity:0.375;}
  
  
  /* input with icon or button */
  
  
  [data-ui-input-icon] {
    line-height:2;
    font-weight:500;
    color:#ccc;
    min-width:0;
  }
  form [data-ui-input-icon][type="button"],
  form [data-ui-input-icon][type="submit"] {
    /* override theme styles on type=button */
    background:transparent;
    min-width:0;
  }
  input ~ [data-ui-input-icon] {
    font-style:normal;
    display:inline-block;
    width: 1.5rem;
    margin:0 0 0 -1.5rem;
    padding: 0 0 0;
    cursor:pointer;
    vertical-align:middle;
    text-align:center;
  }
  input ~ [data-ui-input-icon]:not(button) {
    pointer-events:none;
  }
  input ~ button[data-ui-input-icon] {
    -webkit-appearance:none;
    background:none;
    border:none 0px;
    cursor:pointer;
  }
  input:focus ~ [data-ui-input-icon],
  input       ~ [data-ui-input-icon]:focus {
    /*color:var(--clr-main);*/
    background:transparent;
    outline:none;
    box-shadow:none;
  }
  input ~ button[data-ui-input-icon]:before {
    content:none;
  }
  input ~ [data-ui-input-icon]:empty:after{
    content:'\2190';
    opacity:0;
    display: inline-block;
    transform:translateX(50%);
    transition:opacity 100ms linear 200ms,transform 200ms 200ms;
  }
  input ` [data-ui-input-icon=""]:empty:after {
    -line-height: 1;
    -font-size: 1.25em;
  }
  input[data-valid] ~ [data-ui-input-icon]:empty:after {
    content:'\2713';
    color:LimeGreen;
  }
  input[data-error]:not(:placeholder-shown) ~ [data-ui-input-icon]:empty:after{
    color:red;
  }
  
  input:focus ~ [data-ui-input-icon]:after,
  input       ~ [data-ui-input-icon]:focus:after {
    opacity:1;
    transform:translateX(0%);
    transition:opacity 100ms linear,transform 200ms linear;
  }
  
  
  input                   + [data-ui-input-icon="show-password"]:empty:after {
    font-size: 1.5em;
    line-height: 0.6666667;
    line-height:1.0em;
  }
  input:not([data-error]) + [data-ui-input-icon="show-password"]:empty:after,
  input                   + [data-ui-input-icon="show-password"]:empty:after {
    content:'\2A7A';
    color:var(--clr-main);
  }
  input:not([data-error]) + [data-ui-input-icon="show-password"] {
    margin-right:-0.2rem;
    padding-top:0;
  }
  input[data-error]       + [data-ui-input-icon="show-password"]:empty:after {
    content:'\2A7A';
    font-size:1.375em;
    color:red;
  }
  input[type="text"]      + [data-ui-input-icon="show-password"]:empty:after {
    content: '\2A7A\2216';
    letter-spacing: -0.825em;
    text-indent: -0.625em;
  }
  
  
  
  
  [data-ui-input-icon="search"] {
    color:var(--clr-main);
  }
  input + [data-ui-input-icon="search"] {
    font-size:1em;
    line-height: 1;
    height:1.75em;
    position:relative;
  }
  input + [data-ui-input-icon="search"]:empty:after {
    content:'\29c3';
    content:'\26b2\FE0E';
    transform: rotate(-45deg);
    opacity:1;
    font-size:1.75rem;
    line-height: 1;
  }