/* Tooltips helpers */
.item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
.item .tooltip:hover{ z-index:3; }
   .item .tooltip > span{ 
    border: 1px solid #323232;
    border-radius: 25px;
    color: #323232;
    cursor: help;
    display: inline-block;
    font-size: 1em;
    height: 15px;
    line-height: 18px;
    padding: 3px 5px 5px;
    position: relative;
    text-align: center;
    top: -3px;
    width: 13px;
    font-weight: bold;
  }
    .item .tooltip .content{ 
      opacity:0; 
      width:200px; 
      background-color:#333; 
      color:#FFF; 
      font-size:0.9em; 
      position:absolute; 
      top:-5px; 
      left:20px; 
      padding:8px; 
      border-radius: 3px;
      pointer-events:none; 
      transition:0.2s cubic-bezier(0.1, 0.1, 0.25, 2); 
      -webkit-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); 
      -moz-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); 
      font-family: 'Noto Sans', sans-serif;
    }
        .item .tooltip p{ padding:0; }
   .item .tooltip.down .content{ left:auto; right:0; top:30px; }
   .item .tooltip:hover .content{ opacity:1; left:30px; }
      .item .tooltip .content b{ 
        height:0; 
        width:0; 
        border-color:#333 #333 transparent transparent; 
        border-style:solid; 
        position:absolute; 
        left:-14px; 
        top:8px; 
      }
        .item .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; }

/* alerts (when validation fails) */
        .item .alert{ 
          float:left; 
          margin:2px 0 0 20px; 
          padding:5px 10px; 
          color:#FFF; 
          border-radius: 2px; 
          background-color:#9f0000; 
          max-width:170px; 
          white-space:pre; 
          position:relative; 
          left:-15px; 
          opacity:0; 
          z-index:1; 
          font-size: .8em;
          transition:0.15s ease-out; 
         }
        .item .alert:after{ 
          content:''; 
          display:block; 
          height:0; 
          width:0; 
          border-color:
          transparent #9f0000 transparent transparent; 
          border-style:solid; 
          position:absolute; 
          left:-10px; 
          top:7px; 
        }

        .item.bad .alert{ 
          left:0; 
          opacity:1; 
        }


@keyframes shake{
    15%{ transform:translateX(-5px); }
    30%{ transform:translateX(5px); }
45%{ transform:translateX(-3px); }
60%{ transform:translateX(3px); }
75%{ transform:translateX(2px); }
100%{ transform:none; }
}
@-webkit-keyframes shake{
    25%{ -webkit-transform:translateX(-6px); }
    75%{ -webkit-transform:translateX(6px); }
}

form fieldset{ clear:both; margin:0 0 10px 0; }
form .item{ 
  padding: 10px 0; 
  position:
  relative; 
  height:2em; 
  }

form .item.items{ height:auto; }
.item label, .item .label{ 
  float:left; 
  cursor:default; 
  }

.item label span, .item .label{ 
  float:left; 
  width:130px; 
  text-transform:capitalize; 
  line-height:2em; 
  cursor: default;
  }

.item input, .item textarea{ 
  float:left; 
  padding:10px; 
  margin-top: -7px;
  width:210px; 
  -webkit-transition:0.2s; 
  -moz-transition:0.2s; 
  transition:0.2s;
  border: 1px solid #fff;
  resize: none;
  }
.item input[type=checkbox]{ width:auto; }

.label ~ label{ vertical-align:middle; margin:0.3em 1.2em 0 0; }

.item input.short{ width:90px; }
.item input:focus:not([type="checkbox"]), .item textarea:focus{ box-shadow:0 0 4px #323232;  }
.item textarea{ }

.item select {
    border: 1px solid #fff;
    float: left;
    margin: -7px 0 0;
    padding: 8px 10px 6px;
    text-transform: capitalize;
    width: 231px;
    font-family: 'Noto Sans', sans-serif;
    cursor: pointer;
    }

    .item select option{ padding:1px; }

    .item > .extra{ float:left; font-size:0.9em; color:#999; line-height:2em; margin-left:13px; }
    
.item.multi .input{ float:left; }
.item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
form .item.multi input:nth-last-child(-n+2){ margin:0; }

.bad input,
.bad select,
.bad textarea{  
  box-shadow:0 0 4px 0px #CE5454; 
  position:relative; left:0; 
  -moz-animation:.7s 1 shake linear; 
  -webkit-animation:0.7s 1 shake linear; 
  font-family: 'Noto Sans', sans-serif;
  margin-top: -8px;
  border: 1px solid #9f0000;

}
    

/* mode2 - where the label's text is above the field and not next to it
--------------------------------------------------------------------------- */
.mode2 .item{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; }
.mode2 .item.bad{ margin-bottom:8px; }
.mode2 .item::before, .mode2 .item::after{ content:''; display:table; }
.mode2 .item::after{ clear:both; }
.mode2 .item label{ }
.mode2 .item label span{ float:none; display:block; line-height:inherit; }
.mode2 .item input, .item textarea{ width:210px; height: 210px; margin:0; }
.mode2 .item textarea{ width:350px; margin:0; }
.mode2 .item select{ width:260px; float:none; }
.mode2 .item.multi label{ float:none; }
.mode2 .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
.mode2 .item .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
.mode2 .item .alert::after{ display:none; }
.mode2 .item .alert{ float:none; clear:left; margin:0; padding:0 5px; border-radius:0 0 3px 3px; max-width:100%; height:22px; line-height:1.8em; }
    .mode2 .item > .extra{ position:absolute; right:0; }