/* Form Styles */
@element 'form' {
  $this,
  $this * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: auto;
  }
  $this {
    font-size: 10pt;
    line-height: 1.4;
    font-weight: 400;
    font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
  }
  $this:after {
    content: '';
    display: block;
    clear: both;
  }
  $this fieldset {
    border: none;
    padding: 0;
  }
  $this select,
  $this .split-input > input,
  $this .split-input > select,
  $this input,
  $this textarea {
    float: left;
    margin: 0 0 2% 0;
    margin-bottom: 2%;
    padding: 5px 8px;
    width: 49%;
    height: 40px;
    outline: none;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 2px;
    background: rgba(255,255,255,.5);
    box-shadow: rgba(0,0,0,.15) 0 1px 0;
    color: rgba(0,0,0,.7);
    font-weight: 400;
    font-size: 12pt;
    transition: all .2s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
  }
  $this select:focus,
  $this .split-input > *:focus,
  $this input:focus,
  $this textarea:focus {
    outline: none;
    border-color: orange;
    box-shadow: #fc0 0 0 3px;
  }
  $this select,
  $this .split-input select {
    color: rgba(0,0,0,.5);
    background: rgba(255,255,255,.5);
    padding-right: 1.5em;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAjElEQVR4Ae2QxbkCARDGMlsB2sxe1ovCKR0uuOTh9jL3fH+Gu/DPP236dG+8Pm1IGTJmdMONGZJCQs78xstJAOJGVU6wJmd2lWRGzg5BcYVqRkHAoepS0aHGAz3KV/mao6ryT5qSQCmY6YsdD5QoCZQoCZSoG1bpGle5Rii3NI6v8jVO0Cwv+OefT2IBOYykNaMbWusAAAAASUVORK5CYII=') !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - .5em) 50% !important;
    background-size: 12px !important;
    text-indent: 0.01px;
    text-overflow: '';
  }
  $this select:active,
  $this .split-input select:active {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABBklEQVR4Ae3PQY7TQBCG0VfNLLgGd2SBhO207SBxuZgzcAsWIxfbHiuTFsnsyCd505Kf/gof1P8NPaHfX3z26rFe/IlfX7N6yT2kcFfFa9TYPuWYJw8Vc6yxyTCp7l9ULTIuIOo+3eVkWVSIDQg1x3+mMlZVthAlTyYSIZuvfWkLlpjt0ELIasq4AbUvaVEb9qKpRN3HkILDr8eXWLPa34NEMeegs4g4O7UMsTmWszHjBpRWJ4fiwrGiGt87Datqpw9RzIbri7RHdSFYDOKwKONscqwDRS4xvF3kbJJ96OqBukf1IVhzAOJshDuhKJb8Tvww2d0oNp1K/iS+2elDj/eEntCH9BdocplPRQvKAQAAAABJRU5ErkJggg==');
  }
  $this select::-ms-expand {
    display: none;
  }
  $this textarea {
    min-height: 5em;
  }
  $this select[class=three-quarters],
  $this input[class=three-quarters],
  $this textarea[class=three-quarters] {
    width: 74%;
  }
  $this select[class=quarter],
  $this input[class=quarter],
  $this textarea[class=quarter] {
    margin-left: 2% !important;
    width: 24%;
  }
  $this .split-input > select[class=three-quarters],
  $this .split-input > input[class=three-quarters],
  $this .split-input > textarea[class=three-quarters] {
    width: 73%;
  }
  $this .split-input > select[class=quarter],
  $this .split-input > input[class=quarter],
  $this .split-input > textarea[class=quarter] {
    margin-left: 4% !important;
    width: 23%;
  }
  $this .split-input {
    float: left;
    width: 49%;
    margin-bottom: 2%;
  }
  $this .split-input > input,
  $this .split-input > select {
    margin-bottom: 0;
    width: 48%;
  }
  $this .split-input input:nth-child(even),
  $this .split-input select:nth-child(even) {
    margin-left: 2%;
  }
  $this select:nth-child(even),
  $this input:nth-child(even),
  $this .split-input:nth-child(even) {
    margin-left: 2%;
  }
  $this .tooltip-inner {
    padding: 7px;
    border-radius: 2px;
    color: #fff;
    font-weight: 300;
    font-size: 12pt;
  }
  $this [type=number]::-webkit-inner-spin-button,
  $this [type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  $this [data-button] {
    width: auto;
    padding: .5em .75em;
    font-size: 18pt;
    font-weight: 700;
    font-style: italic;
    display: block;
    margin: 1em auto .5em auto;
  }
  $this .lockit {
    position: relative;
  }
  $this .lockit:after {
    content: '';
    display: block;
    width: 20px;
    height: 24px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACACAQAAABXPgRLAAAC10lEQVR4AczYBZIbMRBA0b8UTpYdZmZmJkPBMjMzg3ntvrniE0TSTBvqHcD1PSW1JIw6znCHDyQYZZEtDkiXHLDFIqMk+MAdzhi0YdRQzzW+MksSsUgyy1euUV9zIbTzhRUKiIcCK3yhvWZCuEQPKSSgFD1cqnoIEXo5QkI6opdI1UI4zk/SiJI0PzlehRCus4QoW+J6RUOo4wtHCPqO+EJdhUI4ST9SRv2crEAIzcwjZTZPc5lDaGcNqYA12ssYQivrSIWs01qmEM6wjFTQMmf0Q6CRMaTCxmnUD4kiVRBVDuERUiWPFENoZh8JoEiSHTZLdkhSRALYp1kvxH8A7tLHK67TykmaSk7SynVe0ceu/4BUCuGe5385wWNO/udc8JgJz+96TyGEJq/D4Rx3DXbcZc7rMNkUPuQF4ijLZxoMbmjgM1nE0YuQITSy4rwqbhr8cNN5xazQGC7kIeJklfaAd/1VxMnDUCGOy3KDFkMwtLDhtoWECKGTHGKV5KIhOC6SRKxydAYP+aSyELU2lE/BQ1y2yCFDeAy5bO0BQ2gjg1hk6FAJ6XD6rbZgIU8Qq4RBBwnE6kmAEBqIOizAiFpIxGFjidLgH9LMlP3iY9DDOGIxRbN/yBWHqftWNeStw+nhin/IE+tJKMdF1ZCL5KynuSf+IZ+tb4k7NKqGNLJjfYf87B9iX+rTBl1M25e7f0g3YtGjHtKDWHTbQ/yvtzH1kJj/tdceMohY/FUP+YtYDJYjJKoeEv3Xvn1bIRBDQQDc3q4BfBWY6JwiSoccz+GZt6ncZDJfHwgBAQEBAQEBAQEBAQEBWXzkmX1xO2R8cdDq4ZDq4pzjk32zSpfmSC5fKZc0D065fG1+tF+3V6TL9gfSJe1PQFoQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBCQrwgICAjID31N2qSk+/KUbHbkNUUFcs65wAAAAABJRU5ErkJggg==') no-repeat;
    background-size: 20px 24px;
    background-position: middle bottom;
    position: absolute;
    bottom: .25em;
    right: 0;
  }
}
@element 'form' and (max-width: 450px) {
  $this select,
  $this .split-input,
  $this .split-input > *,
  $this input {
    width: 100%;
  }
  $this .split-input {
    margin-bottom: 0;
  }
  $this .split-input > input,
  $this .split-input > select {
    margin-bottom: 2%;
    width: 100%;
  }
  $this select:nth-child(even),
  $this input:nth-child(even),
  $this .split-input:nth-child(even) {
    margin-left: 0;
  }
  $this .lockit:after {
    display: none;
  }
  $this .split-input > select[class=three-quarters],
  $this .split-input > input[class=three-quarters],
  $this .split-input > textarea[class=three-quarters] {
    width: 74%;
  }
  $this .split-input > select[class=quarter],
  $this .split-input > input[class=quarter],
  $this .split-input > textarea[class=quarter] {
    margin-left: 2% !important;
    width: 24%;
  }
}
/* Theme Support */
[data-theme=default] form select,
[data-theme=default] form .split-input > input,
[data-theme=default] form .split-input > select,
[data-theme=default] form input,
[data-theme=default] form textarea {
  border: 1px solid rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.5) !important;
  box-shadow: rgba(0,0,0,.15) 0 1px 0 !important;
  color: rgba(0,0,0,.7) !important;
}
[data-theme=default] form select:focus,
[data-theme=default] form .split-input > *:focus,
[data-theme=default] form input:focus,
[data-theme=default] form textarea:focus {
  border-color: orange !important;
  box-shadow: #fc0 0 0 3px !important;
}
[data-theme=code] form select,
[data-theme=code] form .split-input > input,
[data-theme=code] form .split-input > select,
[data-theme=code] form input,
[data-theme=code] form textarea {
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 2px;
  background: #002b36;
  box-shadow: rgba(0,0,0,.15) 0 1px 0;
  color: #eee8d5;
}
[data-theme=code] form select,
[data-theme=code] form .split-input > select {
  color: rgba(255,255,255,.3);
}
[data-theme=code] form select:focus,
[data-theme=code] form .split-input > *:focus,
[data-theme=code] form input:focus,
[data-theme=code] form textarea:focus {
  border-color: #2aa198;
  box-shadow: #2aa198 0 0 3px;
}
[data-theme=dark] form select,
[data-theme=dark] form .split-input > input,
[data-theme=dark] form .split-input > select,
[data-theme=dark] form input,
[data-theme=dark] form textarea {
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 2px;
  background: rgba(0,0,0,.3);
  box-shadow: rgba(0,0,0,.15) 0 1px 0;
  color: rgba(255,255,255,.8);
}
[data-theme=dark] form select,
[data-theme=dark] form .split-input > select {
  color: rgba(255,255,255,.3);
}
[data-theme=dark] form select:focus,
[data-theme=dark] form .split-input > *:focus,
[data-theme=dark] form input:focus,
[data-theme=dark] form textare:focus {
  border-color: #6c71c4;
  box-shadow: #6c71c4 0 0 3px;
}