/* FXCropImage -  v0.9.15 */

.FXCropImage-holder {
  direction: ltr;
  text-align: left;
  /* IE10 touch compatibility */
  -ms-touch-action: none;
}
/* Selection Border */
.FXCropImage-vline,
.FXCropImage-hline {
  background: #ffffff url("FXCropImage.gif");
  font-size: 0;
  position: absolute;
}
.FXCropImage-vline {
  height: 100%;
  width: 1px !important;
}
.FXCropImage-vline.right {
  right: 0;
}
.FXCropImage-hline {
  height: 1px !important;
  width: 100%;
}
.FXCropImage-hline.bottom {
  bottom: 0;
}
/* Invisible click targets */
.FXCropImage-tracker {
  height: 100%;
  width: 100%;
  /* "turn off" link highlight */
  -webkit-tap-highlight-color: transparent;
  /* disable callout, image save panel */
  -webkit-touch-callout: none;
  /* disable cut copy paste */
  -webkit-user-select: none;
}
/* Selection Handles */
.FXCropImage-handle {
  background-color: #333333;
  border: 1px #eeeeee solid;
  width: 7px;
  height: 7px;
  font-size: 1px;
}
.FXCropImage-handle.ord-n {
  left: 50%;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.FXCropImage-handle.ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -4px;
  margin-left: -4px;
}
.FXCropImage-handle.ord-e {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 50%;
}
.FXCropImage-handle.ord-w {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 50%;
}
.FXCropImage-handle.ord-nw {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.FXCropImage-handle.ord-ne {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 0;
}
.FXCropImage-handle.ord-se {
  bottom: 0;
  margin-bottom: -4px;
  margin-right: -4px;
  right: 0;
}
.FXCropImage-handle.ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -4px;
  margin-left: -4px;
}
/* Dragbars */
.FXCropImage-dragbar.ord-n,
.FXCropImage-dragbar.ord-s {
  height: 7px;
  width: 100%;
}
.FXCropImage-dragbar.ord-e,
.FXCropImage-dragbar.ord-w {
  height: 100%;
  width: 7px;
}
.FXCropImage-dragbar.ord-n {
  margin-top: -4px;
}
.FXCropImage-dragbar.ord-s {
  bottom: 0;
  margin-bottom: -4px;
}
.FXCropImage-dragbar.ord-e {
  margin-right: -4px;
  right: 0;
}
.FXCropImage-dragbar.ord-w {
  margin-left: -4px;
}
/* The "FXCropImage-light" class/extension */
.FXCropImage-light .FXCropImage-vline,
.FXCropImage-light .FXCropImage-hline {
  background: #ffffff;
  filter: alpha(opacity=70) !important;
  opacity: .70!important;
}
.FXCropImage-light .FXCropImage-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #000000;
  border-color: #ffffff;
  border-radius: 3px;
}
/* The "FXCropImage-dark" class/extension */
.FXCropImage-dark .FXCropImage-vline,
.FXCropImage-dark .FXCropImage-hline {
  background: #000000;
  filter: alpha(opacity=70) !important;
  opacity: 0.7 !important;
}
.FXCropImage-dark .FXCropImage-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #ffffff;
  border-color: #000000;
  border-radius: 3px;
}
/* Simple macro to turn off the antlines */
.solid-line .FXCropImage-vline,
.solid-line .FXCropImage-hline {
  background: #ffffff;
}
/* Fix for twitter bootstrap et al. */
.FXCropImage-holder img,
img.FXCropImage-preview {
  max-width: none;
}

/* Custom classes for model popup to crop image */
.FXImageCropConatiner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 9;
    display: none;
}
.FXImageCropWrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    opacity: .6;
    z-index: 10;
}
.FXImageCropPreviewContainer {
    position: absolute;
    left: 20%;
    top: 10%;
    z-index: 11;
    border:1px solid #000;
}
.FXImageCropPreviewImageHolder {
    width: 100%;
    float: left;
    background:#FFF;
    padding:10px;
}
.FXImageCropButtonHolder {
    width: 100%;
    float: left;
    padding: 5px;
    background:#FFF;
}
.FXImageCropButtonHolder input {
    padding:5px;
    padding-left:20px;
    padding-right:20px;
}
.FXImageCloseButtonHolder {
    width: 100%;
    float: left;
    height: 40px !important;
    background: #111;
}
.fxCloseButton {
    width: 40px;
    height: 40px;
    float: right;
    cursor: pointer;
    color: #FFF;
    background: #333;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
.fxCloseButton:hover {
    background: #444;
}
.FXImageCropConatiner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    display: none;
    z-index: 9;
}
.FXImageCropWrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    opacity: .6;
    z-index: 10;
}

.FXImageGalleryIconWrapper {
    width: 200px !important;
    height: 250px !important;
    margin: 15px !important;
    display: inline-block;
}
.FXImageGalleryIcon {
    width: 200px !important;
    height: 200px !important;
    display: block;
}
.FXImageGalleryIcon img {
    max-width: 100% !important;
    max-height: 100% !important;
}
.FXImageCropButtonWrapper {
    background: #0093a8;
    color:#FFF;
}
.FXImageCropAddButton{
    padding:3px;
    display:block;
    color:#FFF;
    cursor:pointer;
}
.FXImageCropAddButton span {
    color: #FFF;
}
.FXImageCropBrowseBtn{
    margin-top:15px !important;
}