/* ========================================================
*
* Pannonia - responsive admin template
*
* ========================================================
*
* File: plugins.css;
* Description: Contains styles for plugins, if you don't use any of plugins, you can remove its styling
* Version: 1.0
*
* ======================================================== */



/* # Uniform plugin (form elements styling)
================================================== */


/*===== Checkbox =====*/

.checker, .checker span, .checker input { width: 16px; height: 16px; }
.checker { position: relative; margin-right: 6px; margin-top: -3px; }
.checker span { background: url(../img/elements/forms/checkboxes.png); display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; text-align: center; background-position: 0 0; }
.checker input { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; border: none; background: none; display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1;  margin: 0; vertical-align: top;  margin: 0!important; }
.checker:active span, .checker.active span { background-position: 0 -34px; }
.checker.focus span, .checker:hover span { background-position: 0 -17px; box-shadow: 0 0 3px rgba(0,0,0,0.075); -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.075); -moz-box-shadow: 0 0 3px rgba(0,0,0,0.075); }
.checker.focus:active span, .checker:active:hover span, .checker.active:hover span, .checker.focus.active span { background-position: 0 -34px; }
.checker span.checked { background-position: -17px 0; }
.checker:active span.checked, .checker.active span.checked { background-position: -17px -34px; }
.checker.focus span.checked, .checker:hover span.checked { background-position: -17px -17px; }
.checker.focus:active span.checked, .checker:hover:active span.checked, .checker.active:hover span.checked, .checker.active.focus span.checked {   background-position: -17px -34px; }
.checker.disabled span, .checker.disabled:active span, .checker.disabled.active span { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; background-position: 0 0; }
.checker.disabled span.checked, .checker.disabled:active span.checked, .checker.disabled.active span.checked { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; background-position: -18px 0; }



/*===== Radio =====*/

.choice, .choice span, .choice input { width: 16px; height: 16px; }
.choice { position: relative; margin-right: 6px; margin-top: -3px; }
.choice span { background: url(../img/elements/forms/radios.png); display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; text-align: center; background-position: 0 0; }
.choice input { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; border: none; background: none; display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; text-align: center;  margin: 0; vertical-align: top;  }
.choice:active span, .choice.active span { background-position: 0 -34px; }
.choice.focus span, .choice:hover span { background-position: 0 -17px; box-shadow: 0 0 3px rgba(0,0,0,0.075); -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.075); -moz-box-shadow: 0 0 3px rgba(0,0,0,0.075); }
.choice.focus:active span, .choice:active:hover span, .choice.active:hover span, .choice.active.focus span { background-position: 0 -34px; }
.choice span.checked { background-position: -17px 0; }
.choice:active span.checked, .choice.active span.checked { background-position: -17px -34px; }
.choice.focus span.checked, .choice:hover span.checked { background-position: -17px -17px; }
.choice.focus:active span.checked, .choice:hover:active span.checked, .choice.focus.active span.checked, .choice.active:hover span.checked { background-position: -17px -34px; }
.choice.disabled span, .choice.disabled:active span, .choice.disabled.active span { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; background-position: 0 0; }
.choice.disabled span.checked, .choice.disabled:active span.checked, .choice.disabled.active span.checked { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; background-position: -18px 0; }


/* # jGrowl (popup notification)
================================================== */

@-webkit-keyframes growl-stripes {
  from {
    background-position: 10px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-moz-keyframes growl-stripes {
  from {
    background-position: 10px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-ms-keyframes growl-stripes {
  from {
    background-position: 10px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes growl-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10px 0;
  }
}

@keyframes growl-stripes {
  from {
    background-position: 10px 0;
  }
  to {
    background-position: 0 0;
  }
}



.jGrowl { z-index: 9999; color: #fff; font-size: 12px; }
.ie6 { position: absolute; }
.jGrowl { position: absolute; }
body > .jGrowl { position: fixed; }
.jGrowl.top-left { left: 0px; top: 0px; }
.jGrowl.top-right { right: 20px; top: 50px; }
.jGrowl.bottom-left { left: 0px; bottom: 0px; }
.jGrowl.bottom-right { right: 0px; bottom: 0px; }
.jGrowl.center { top: 0px; width: 50%; left: 25%; }
.center .jGrowl-notification, .center .jGrowl-closer { margin-left: auto; margin-right: auto; }
.jGrowl .jGrowl-notification { border: none; color: #fff; opacity: .95; filter: alpha(Opacity=95); zoom: 1; width: 194px; padding: 8px 12px; margin-top: 10px; text-align: left; display: none;

  background-color: #448fb2;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.025)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.025)), color-stop(0.75, rgba(255, 255, 255, 0.025)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0.025) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0.025) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0.025) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0.025) 75%, transparent 75%, transparent);
  background-repeat: repeat;

  -webkit-background-size: 10px 10px;
     -moz-background-size: 10px 10px;
       -o-background-size: 10px 10px;
          background-size: 10px 10px;

    -webkit-animation: growl-stripes 1s linear infinite;
     -moz-animation: growl-stripes 1s linear infinite;
      -ms-animation: growl-stripes 1s linear infinite;
       -o-animation: growl-stripes 1s linear infinite;
          animation: growl-stripes 1s linear infinite;

}
.jGrowl-notification.growl-error { background-color: #C95454; }
.jGrowl-notification.growl-success { background-color: #49a449; }
.jGrowl-notification.growl-warning { background-color: #D17E3D; }
.jGrowl .jGrowl-notification .jGrowl-header { font-weight: bold; font-size: 12px; line-height: 24px; }
.jGrowl  .jGrowl-notification  .jGrowl-close { z-index: 99; float: right; font-weight: bold; font-size: 12px; cursor: pointer; }
.jGrowl .jGrowl-closer { padding: 3px 0; cursor: pointer; font-size: 11px; margin-top: 10px; font-weight: bold; text-align: center; background: #454545; color: #ffffff; width: 218px; }
@media print { .jGrowl { display: none; } }






/* # Validation engine (form validation)
================================================== */

.formError { z-index: 990; }
.formError .formErrorContent { z-index: 991; line-height: 20px; }
.formError .formErrorArrow { z-index: 996; }
.formErrorInsideDialog.formError { z-index: 5000; }
.formErrorInsideDialog.formError .formErrorContent { z-index: 5001; }
.formErrorInsideDialog.formError .formErrorArrow { z-index: 5006; }
.inputContainer { position: relative; float: left; }
.formError { position: absolute; top: 300px; left: 300px; display: block; cursor: pointer; }
.ajaxSubmit { padding: 20px; background: #55ea55; border: 1px solid #999; display: none }

@-webkit-keyframes error-stripes {
  from {
    background-position: 25px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-moz-keyframes error-stripes {
  from {
    background-position: 25px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-ms-keyframes error-stripes {
  from {
    background-position: 25px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes error-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 25px 0;
  }
}

@keyframes error-stripes {
  from {
    background-position: 25px 0;
  }
  to {
    background-position: 0 0;
  }
}


.formError .formErrorContent { width: 100%; position:relative; color: #fff; width: 150px; font-size: 11px; text-shadow: 0 1px 0 rgba(0,0,0,0.3); padding: 6px 10px; text-align: center;

  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;

    background-color: #cf432c;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.05)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.05)), color-stop(0.75, rgba(255, 255, 255, 0.05)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  -webkit-background-size: 25px 25px;
     -moz-background-size: 10px 25px;
       -o-background-size: 25px 25px;
          background-size: 25px 25px;

  -webkit-animation: error-stripes 1s linear infinite;
   -moz-animation: error-stripes 1s linear infinite;
    -ms-animation: error-stripes 1s linear infinite;
     -o-animation: error-stripes 1s linear infinite;
        animation: error-stripes 1s linear infinite;

}

.greenPopup .formErrorContent { background: #7fba4a; }
.blackPopup .formErrorContent { background: #393939; color: #FFF; }
.formError .formErrorArrow { width: 15px; left: 14px; margin-top: -3px; position:relative; }
body[dir='rtl'] .formError .formErrorArrow, body.rtl .formError .formErrorArrow { margin: -2px 13px 0 0; }
.formError .formErrorArrowBottom { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin: 0px 0 0 12px; top:2px; }
.formError .formErrorArrow div { font-size: 0px; height: 1px; background: #cf432c; margin: 0 auto; line-height: 0; font-size: 0; display: block; }
.formError .formErrorArrowBottom div { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
.greenPopup .formErrorArrow div { background: #33be40; }
.blackPopup .formErrorArrow div { background: #393939; color: #FFF; }
.formError .formErrorArrow .line10 { width: 15px; border: none; }
.formError .formErrorArrow .line9 { width: 13px; border: none; }
.formError .formErrorArrow .line8 { width: 11px; }
.formError .formErrorArrow .line7 { width: 9px; }
.formError .formErrorArrow .line6 { width: 7px; }
.formError .formErrorArrow .line5 { width: 5px; }
.formError .formErrorArrow .line4 { width: 3px; }
.formError .formErrorArrow .line3 { width: 1px; }
.formError .formErrorArrow .line2 { width: 3px; border: none; background: none; }
.formError .formErrorArrow .line1 { width: 1px; border: none; background: none; }




/* # Dual select boxes
================================================== */

.dual-control .btn { padding: 0 8px; line-height: 24px; font-size: 11px; cursor: pointer; color: #999; height: 26px; margin: 2px 1px; }
.left-box, .right-box { width: 40%; position: relative; }
.left-box .multiple, .right-box .multiple { height: 300px; margin-top: 15px; }
.left-box { float: left; }
.right-box { float: right; }
.filter { position: absolute; right: 4px; top: 6px; font-size: 12px; background: none; border: none; color: gray; }
.dual-control { text-align: center; width: 90px; margin: 150px 1px; position: absolute; left: 50%; margin-left: -45px; } 
.count-label { color: gray; font-style:italic; margin-top: 10px; display: block; }
.box-filter {  background: white; width: 100%; border: 1px solid #D5D5D5; padding: 7px 8px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }





/* # Tags input
================================================== */

div.tagsinput { border: 1px solid #dadada; background: #fff; padding: 5px; width: 100%; overflow-y: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
div.tagsinput span.tag { border: 1px solid #a5d24a; display: block; float: left; padding: 0 8px; background: #cde69c; color: #638421; margin: 5px 5px 5px 5px; line-height: 23px; font-size: 11px; }
div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; font-size: 11px; float: right; } 
div.tagsinput input { width: 60px; border: none; padding: 6px 2px; background: transparent; margin: 5px 5px 5px 4px; font-size: 11px; }
div.tagsinput input:focus { outline: 0; }
div.tagsinput div { display: block; float: left; position: relative; } 
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid { background: #FBD8DB !important; color: #90111A !important;}
.tagsinput .ui-helper-hidden-accessible { display: none; }