/* >> Groups
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
%clearFix{
  &:after{
    clear: both; content:' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0;
  }
}
%stickyFooter{
  /*Fix szelessegu footer eseten mukodik, ill kell bele a .contentWrapper csak IE-ben szetesik width: 100%-on*/
  display: flex; flex-direction: column;
  .stickyWrapper{
    flex: 1 1 auto; display: flex; flex-flow: column wrap; min-height: 100vh; margin: 0; padding: 0;
    .pageWrapper{
      width: 100%; flex: 1 1 auto;
    }
  }
}
%statText{ @extend %clearFix;
  line-height: 1.42; font-size: 14px; font-family: $baseFont;
  @media #{$mq-tab_720}{font-size: 15px; line-height: 1.6;}
  @media #{$mq-pc_1400}{font-size: 16px;}
  p{
    font-size: 14px; margin-bottom: 1em;
    &:last-child{margin-bottom: 0;}
    @media #{$mq-tab_720}{font-size: 15px;}
    @media #{$mq-pc_1400}{font-size: 16px;}
  }
  a{@include transition; text-decoration:underline;font-weight: normal; color: $color-primary;
    &:hover{ color: lighten($color-primary, 10%)}
  }
  i{font-style: italic;}
  b, strong{font-weight: 700;}
  ul, ol{
    margin-left: 0; 
    margin-bottom: 1em;
  }
  ul{
    list-style-type: none; 
    /*list-style-image: url("../images/svg-listImg.svg");*/
    li{
      font-size: 16px;
    }
  }
  ol{
    list-style-type: decimal;
    padding-left: 1.5em;
  }
  ol li{ font-size: 16px; margin-bottom: 1em; padding-left: 0.5em;
    &:last-child{margin-bottom: 0;}
  }
  ul li{
    background-size: 12px 12px; 
    margin-bottom: 0.5rem; 
    padding-left: 1.5rem;
    &:last-child{margin-bottom: 0;}
    @media #{$mq-tab_720}{padding-left: 1.75rem;}
    &:before{
      content:''; 
      display: block;
      position: absolute; 
      width: 7px; 
      height: 7px; 
      left: 0.5rem; 
      top: 13px; 
      background-color: $color-primary; 
      border-radius: $radius-round;
    }
  }
  table{
    display: none;
    @media #{$mq-tab_720} {
      display: table;
    }
  }
}

%flexBox{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
}
%baseForm{
  @extend %clearFix;
  .formItem{margin-bottom: 12px;}
  .formItem__title{margin-bottom: 4px; color: $color-baseText; font-size: 0.9rem; font-weight: 600;
    b{
      font-size: 14px; 
      font-weight: 500;
      margin-left: 0.1rem; 
      color: $color-gray;
    }
  }
  .formItem__note{font-size: 13px; margin: 6px 0; color: white; font-style: italic; font-weight: 600;}
  .formItem__alert{font-size: 13px; color: $color-error; margin: 5px 0;}
  input, select, textarea {
    @include appearencNone;
    width: 100%; 
    padding: 0 8px; 
    outline-color: $color-primary; 
    color: $color-baseText; 
    background:transparent; 
    font-weight: 400; 
    font-size: 14px; 
    border-bottom: 1px solid $color-border!important; 
    &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: $color-gray;
      opacity: 1; /* Firefox */
    }

    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: darken($color-gray-light,30%);
    }

    &::-ms-input-placeholder { /* Microsoft Edge */
      color: darken($color-gray-light,30%);
    }
  }
  input, select{height: 44px; }
  input{
    &:read-only{background-color: $color-gray; border-color: $color-gray;}
  }
  textarea{min-height: 60px; resize: vertical; padding: 8px}
  select{background-image: url("../images/easydent/svg-select.svg"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
    option{line-height: 44px;}
  }
  input::-ms-clear{display: none;}
  .submit{display: block; width: 130px; height: 44px; margin: 0 auto; line-height: inherit; border: none; outline: none; color: white; cursor: pointer;}

  input{
   &.btn--submitForm{
    display: inline-block; 
    width: auto; 
    min-width: 240px; 
    margin: 0; 
    color: white; 
    background:  $color-primary; 
    border: none; 
    cursor: pointer; 
    font-family: #{$baseFont}; 
    padding: 0 5rem;  
    font-size: 14px;  
    font-weight: bold;  
    line-height: 52px;  
    height: 52px;
     &:hover{background: lighten($color-primary, 8%);}
   }
   &.btn--submitCenter{
    display: block;
    margin: 2rem auto 0 auto;
   }
  }
  fieldset{ width: 100%; padding: 1rem; background: transparent;
    legend{font-size: 18px; font-weight: bold; line-height: 1.2; color: $color-gray; padding: 1rem;}
    @media #{$mq-iPad_land}{padding: 1rem 3rem;}
  }
  /* --- --- --- */
  .formItem--checkBox{
    margin-bottom: 12px;
    .regular-checkbox{
      display: none; width: 100%;
      & + label{
        display: inline-block; 
        vertical-align: middle; 
        width: 18px; 
        height: 18px; 
        background-color: white; 
        padding: 0; 
        position: relative; 
        z-index: 2; 
        overflow: hidden; 
        border: 1px solid $color-gray;
        border-radius: $radius;
      }
    }
    .regular-checkbox + label:active,
    .regular-checkbox:checked + label{ border-color: $color-title!important; background-color: $color-title!important;}
    .regular-checkbox:checked + label{
      &:active{border-color: $color-title;}
      &::after{background: $color-title url("../images/easydent/checked.svg") no-repeat center center; 
        background-size: 12px 12px; 
        width: 100%; 
        height: 100%; 
        display: block; 
        content:'';
        background-color: $color-title!important;
      }
    }
    .checkbox-text{
      width: calc(100% - 50px); 
      font-size: 14px;
      line-height: 1.5;
      font-weight: 400; 
      text-align: left; 
      display: inline-block; 
      vertical-align: middle; 
      padding-left: 10px; 
      color: $color-title!important;
      a{
        color: $color-baseText; text-decoration: underline;
        transition: 0.3s;
        &:hover{color: $color-primary!important;}
      }
      b{color: $color-video-icon; margin-left: 0.2rem;}
    }
    &:last-child{margin-bottom: 0;}
    .formItem__alert{margin-top: 10px;}
    /*extra*/
    &.formItem--checkBox--extra{ border-bottom: 1px solid $color-border; border-top: 1px solid $color-border; padding: 12px 0;
      input{margin: 10px 0 5px;}
    }
  }
  /* --- --- --- */
  /* --- --- --- */
  .formItem--btn_checkBox{
    margin-bottom: 12px;
    label{
      display: block; width: 100%; margin-bottom: 8px; background-color: #fff; cursor: pointer;
      span{
        @include selectDisable;
        display: block; width: 100%; padding: 10px 8px; border: 1px solid $color-formBorder;
      }
      input{display: none;}
      input:checked + span {background: $color-primary; color: #fff; border: 1px solid $color-primary;}
    }
  }
  /* --- --- --- */
  .formItem--radioButton{
    margin-bottom: 15px;
    .regular-checkbox{
      display: none; width: 100%;
      & + label{
        display: block; 
        width: 18px; 
        height: 18px; 
        background-color: #fff; 
        border: 1px solid $color-gray; 
        padding: 0; 
        position: relative; 
        float: left; 
        margin-right: 0.5em; 
        z-index: 2; 
        border-radius: 50%; 
        cursor: pointer;
      }
    }
    .regular-checkbox + label:active,
    .regular-checkbox:checked + label{
      box-shadow: 0 1px 2px rgba(0,0,0,0.05), 
      inset 0 -15px 10px -12px rgba(0,0,0,0.05), 
      inset 15px 10px -12px rgba(255,255,255,0.1); 
      background-color: $color-title; 
      border-color: $color-title;
    }
    .regular-checkbox:checked + label{
      &:active{box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 3px rgba(0,0,0,0.1);}
      &::after{background: url("../images/easydent/svg-radio.svg") no-repeat center center; background-size: 8px; width: 100%; height: 100%; display: block; content: " ";}
    }
    .checkbox-text{
      font-size: 12px;
      font-weight: 500;
      line-height: 1.5; 
      text-align: left; 
      display: block;
      a{
        color: $color-baseText; text-decoration: underline;
        &:hover{color: $color-primary!important;}
      }
    }
  }
  /* --- --- --- */
  .formItem--btn_radioBox{
   display: block; width: 100%; margin-bottom: 15px;
    label{
      display: block; width: 100%; margin-bottom: 8px; background-color: #fff; cursor: pointer;
      span{
        @include selectDisable;
        display: block; width: 100%; padding: 12px 10px; border: 2px solid $color-primary;
      }
      input{display: none;}
      input:checked + span {background: $color-primary; color: #fff; border: 2px solid $color-primary;}
    }
    &.small{
      label {display: inline-block; width: auto; cursor: pointer;
        span {display: inline-block; width: auto;}
      }
    }
  }

  .formItem__upload{
    margin-bottom: 16px;
    input{display: block; width: 100%; visibility: hidden; background-color: transparent;}
    .btn--upload{display: block; width: 100%; cursor: pointer; text-indent: -1000px; border: none;}
    input{background-color: darken($color-section,8%);}
    label{transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1); position: absolute; left: 0; top: 0; line-height: 52px; height: 100%; width: 100%; font-size: 1rem; font-weight: 700; text-transform: uppercase;text-align: center; background: lighten($color-primary,40%); color: $color-title; cursor: pointer;
      &:hover{ background: $color-primary; color: white;}
    }
  }
}

input[type='submit']{ -webkit-appearance: none; -moz-appearance: none; appearance: none; }