/*
sass --watch  /opt/webfriend/sites/kas_freelancer/htdocs/projects/592_kommentarfunktion/forms_all_cases/css
*/
/* colors */
/* catrin rot */
/* error */
/* margins */
/* text */
/* buttons */
.org_webfriend_user {
  /* why do we use the wrapper "wrap_error"?
      We try to position error bubble on top of input or textarea field.
      Because there can be different text length in field comment and
      also in error text length (bubble height). And as the height of textarea
      is not defined in height, we need a position relativ
      to bottom of a wrapper that does not change its bottom position
      to the top of the input field. */
  /* @import '_fieldCheckbox'; */
  margin: 40px 0; }
  .org_webfriend_user .form_group {
    /* we have to define a width as
       input fields with size attribute
       might be to broad for mobile devices
     */
    max-width: 280px;
    /* for small screens we center
       input fields (for now).
     */
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 24px;
    /* tablet */ }
    @media (min-width: 480px) {
      .org_webfriend_user .form_group {
        max-width: 400px; } }
    @media (min-width: 768px) {
      .org_webfriend_user .form_group {
        max-width: 500px; } }
    @media (min-width: 995px) {
      .org_webfriend_user .form_group {
        /* dont center for bigger screens */
        margin: 24px; } }
  .org_webfriend_user label {
    font-style: normal;
    font-size: 14px;
    text-align: left;
    display: block;
    margin: 24px 0 4px 1px;
    color: #76777b; }
    @media (max-width: 479px) {
      .org_webfriend_user label {
        margin: 9px auto 4px auto; } }
  .org_webfriend_user .help_field {
    font-size: 12px;
    line-height: 20px;
    color: #C9C9C9;
    text-align: left;
    margin: 6px 0 0 0; }
    .org_webfriend_user .help_field a {
      color: #C9C9C9;
      text-decoration: underline; }
    @media (max-width: 479px) {
      .org_webfriend_user .help_field {
        margin: 8px auto 0 auto; } }
  .org_webfriend_user .wrap_error {
    position: relative; }
  .org_webfriend_user .error {
    display: none;
    position: absolute;
    bottom: 10px;
    width: 80%;
    min-height: 24px;
    color: #333;
    background-color: #FDF2F3;
    border: 1px solid #EA9584;
    border-radius: 4px;
    padding: 14px;
    margin: 0 0 0 10%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: left;
    z-index: 10000;
    /* tablet */ }
    @media (min-width: 480px) {
      .org_webfriend_user .error {
        padding: 20px; } }
    .org_webfriend_user .error::after {
      background-color: #FDF2F3;
      border-left-color: #EA9584;
      border-left-style: solid;
      border-left-width: 1px;
      border-top-color: #EA9584;
      border-top-style: solid;
      border-top-width: 1px;
      content: "";
      height: 11px;
      left: 50%;
      margin-left: -5px;
      position: absolute;
      width: 11px;
      bottom: -7px;
      transform: rotate(225deg);
      -webkit-transform: rotate(225deg); }
  .org_webfriend_user .active-error {
    color: #333 !important;
    background-color: #FFF;
    border: 1.5px solid #EA5F5F !important; }
  .org_webfriend_user .hide {
    display: none; }
  .org_webfriend_user input[type="text"],
  .org_webfriend_user input[type="password"],
  .org_webfriend_user textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    border: 1px solid #C9C9C9;
    width: 100%;
    height: 40.9px;
    border-radius: 0;
    padding: 0 10px; }
    .org_webfriend_user input[type="text"]:hover,
    .org_webfriend_user input[type="password"]:hover,
    .org_webfriend_user textarea:hover {
      border: 1px solid #A6A6A6; }
    .org_webfriend_user input[type="text"]:focus,
    .org_webfriend_user input[type="password"]:focus,
    .org_webfriend_user textarea:focus {
      border: 1px solid #2896D1;
      color: #333; }
      .org_webfriend_user input[type="text"]:focus + div div,
      .org_webfriend_user input[type="password"]:focus + div div,
      .org_webfriend_user textarea:focus + div div {
        display: block; }
  .org_webfriend_user textarea {
    padding: 4px 0 0 10px;
    height: auto;
    line-height: 28px; }
  .org_webfriend_user .alert-box, .org_webfriend_user .info-box {
    font-size: 14px;
    line-height: 28px;
    color: #333;
    min-height: 24px;
    padding: 14px;
    text-align: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 40px 0; }
    .org_webfriend_user .alert-box a, .org_webfriend_user .info-box a {
      color: #333;
      text-decoration: underline; }
    @media (min-width: 768px) {
      .org_webfriend_user .alert-box, .org_webfriend_user .info-box {
        width: 80%; } }
  .org_webfriend_user .alert-box {
    background-color: #FDF2F3;
    border: 1px solid #EA9584;
    border-radius: 4px; }
  .org_webfriend_user .text_primary, .org_webfriend_user .text_secondary {
    font-size: 14px;
    text-align: center !important;
    margin: 24px 0; }
    .org_webfriend_user .text_primary a, .org_webfriend_user .text_secondary a {
      text-decoration: underline; }
    @media (min-width: 768px) {
      .org_webfriend_user .text_primary, .org_webfriend_user .text_secondary {
        text-align: left !important; } }
  .org_webfriend_user .text_secondary {
    color: #C9C9C9;
    /* we also have do override
    the default a text color */ }
    .org_webfriend_user .text_secondary a {
      color: #C9C9C9; }
  .org_webfriend_user .text_primary {
    color: #2896D1; }
  .org_webfriend_user .wrap_button {
    margin: 24px auto; }
    @media (min-width: 768px) {
      .org_webfriend_user .wrap_button {
        margin: 24px 0; } }
  .org_webfriend_user .button_group {
    margin: 0 -10px;
    /* place font here to allow inherit in submit */
    font-size: 14px;
    text-transform: uppercase; }
    .org_webfriend_user .button_group a {
      text-decoration: none; }
  .org_webfriend_user .button_primary,
  .org_webfriend_user .button_secondary,
  .org_webfriend_user .button_inactive {
    padding: 0px 16px;
    display: inline-block;
    letter-spacing: 1px;
    margin: 10px;
    text-align: center !important;
    /* min-width: 180px; */ }
  .org_webfriend_user .button_primary,
  .org_webfriend_user .button_secondary {
    transition: background-color 500ms ease-out 0s;
    -webkit-transition: background-color 500ms ease-out 0s;
    -moz-transition: background-color 500ms ease-out 0s;
    -o-transition: background-color 500ms ease-out 0s; }
  .org_webfriend_user .button_primary {
    color: #FFF;
    background-color: #2896D1;
    border: 0;
    line-height: 38px; }
    .org_webfriend_user .button_primary:hover {
      background-color: #004381; }
  .org_webfriend_user .button_secondary {
    color: #2896D1;
    background-color: #FFF;
    border: 1.5px solid #2896D1;
    line-height: 35px; }
    .org_webfriend_user .button_secondary:hover {
      border-color: #004381;
      color: #004381; }
  .org_webfriend_user .button_inactive {
    color: #C9C9C9;
    background-color: #FFF;
    border: 1.5px solid #C9C9C9;
    line-height: 35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .org_webfriend_user input[type="submit"] {
    font: inherit;
    height: 38px; }
  @media (min-width: 995px) {
    .org_webfriend_user {
      margin: 40px -24px; } }

/* this stuff might go to site style */
.comments .form_group {
  max-width: 100%; }
.comments .org_webfriend_user {
  margin-top: 0;
  margin-bottom: 0; }

@media (min-width: 995px) {
  .nav_placeholder {
    height: 14px; } }

@media (min-width: 995px) {
  .nav_lang_placeholder {
    height: 24px; } }

.mykas_subtitle {
  font-size: 14px;
  line-height: 28px; }

/*# sourceMappingURL=base.css.map */