@charset "UTF-8";
/* @import url(https://fonts.googleapis.com/css?family=Kanit:300,400,500,600,700,900); */

.cropper-container {
  font-size: 0;
  line-height: 0;

  position: relative;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  direction: ltr;
  -ms-touch-action: none;
      touch-action: none
}

.cropper-container img {
  /* Avoid margin top issue (Occur only when margin-top <= -height) */
  display: block;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
  height: 100%;
  image-orientation: 0deg
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cropper-wrap-box {
  overflow: hidden;
}

.cropper-drag-box {
  opacity: 0;
  background-color: #fff;
}

.cropper-modal {
  opacity: .5;
  background-color: #000;
}

.cropper-view-box {
  display: block;
  overflow: hidden;

  width: 100%;
  height: 100%;

  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
  position: absolute;

  display: block;

  opacity: .5;
  border: 0 dashed #eee
}

.cropper-dashed.dashed-h {
  top: 33.33333%;
  left: 0;
  width: 100%;
  height: 33.33333%;
  border-top-width: 1px;
  border-bottom-width: 1px
}

.cropper-dashed.dashed-v {
  top: 0;
  left: 33.33333%;
  width: 33.33333%;
  height: 100%;
  border-right-width: 1px;
  border-left-width: 1px
}

.cropper-center {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;

  width: 0;
  height: 0;

  opacity: .75
}

.cropper-center:before,
  .cropper-center:after {
  position: absolute;
  display: block;
  content: ' ';
  background-color: #eee
}

.cropper-center:before {
  top: 0;
  left: -3px;
  width: 7px;
  height: 1px
}

.cropper-center:after {
  top: -3px;
  left: 0;
  width: 1px;
  height: 7px
}

.cropper-face,
.cropper-line,
.cropper-point {
  position: absolute;

  display: block;

  width: 100%;
  height: 100%;

  opacity: .1;
}

.cropper-face {
  top: 0;
  left: 0;

  background-color: #fff;
}

.cropper-line {
  background-color: #39f
}

.cropper-line.line-e {
  top: 0;
  right: -3px;
  width: 5px;
  cursor: e-resize
}

.cropper-line.line-n {
  top: -3px;
  left: 0;
  height: 5px;
  cursor: n-resize
}

.cropper-line.line-w {
  top: 0;
  left: -3px;
  width: 5px;
  cursor: w-resize
}

.cropper-line.line-s {
  bottom: -3px;
  left: 0;
  height: 5px;
  cursor: s-resize
}

.cropper-point {
  width: 5px;
  height: 5px;

  opacity: .75;
  background-color: #39f
}

.cropper-point.point-e {
  top: 50%;
  right: -3px;
  margin-top: -3px;
  cursor: e-resize
}

.cropper-point.point-n {
  top: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize
}

.cropper-point.point-w {
  top: 50%;
  left: -3px;
  margin-top: -3px;
  cursor: w-resize
}

.cropper-point.point-s {
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: s-resize
}

.cropper-point.point-ne {
  top: -3px;
  right: -3px;
  cursor: ne-resize
}

.cropper-point.point-nw {
  top: -3px;
  left: -3px;
  cursor: nw-resize
}

.cropper-point.point-sw {
  bottom: -3px;
  left: -3px;
  cursor: sw-resize
}

.cropper-point.point-se {
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  opacity: 1
}

.cropper-point.point-se:before {
  position: absolute;
  right: -50%;
  bottom: -50%;
  display: block;
  width: 200%;
  height: 200%;
  content: ' ';
  opacity: 0;
  background-color: #39f
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  position: absolute;

  display: block;

  width: 0;
  height: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

/* ===== this for more css ====== */
  #myModalImg .modal-dialog {
    /* font-family: 'Open Sans', sans-serif;  */
    font-family: Kanit,'Helvetica Neue',Arial,Helvetica,sans-serif;
  }
  
  #myModalImg p { margin: 0 auto !important;}
 .w100p{ width: 100%; }
 .po{ position: relative; }
 .clear { clear: both; }
 .disableObj{ display:none;}
 .modal-dialog input[type="file"] { display:none; }
 .upload-div{ margin-bottom:5px; clear:both; padding:10px 0px 0px 0px; min-height:300px;}
 .modal-dialog .btn{ 
    background-color: #428bca;
    border-color: #357ebd;
    color:#fff; 
    font-size:14px; 
    padding: 7px 17px; 
    cursor:pointer; 
    border: 0px;
    border-radius : 0px; 
	text-transform: none !important;
  }
  
  .btn-addfile{
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
    font-size:14px; 
    padding: 7px 17px; 
    cursor:pointer;
    border: 0px;
  }
 
  .btn-clear{
    background-color: #f0ad4e;
    border-color: #eea236;
    color: #fff;
    font-size:14px; 
    padding: 7px 17px; 
    cursor:pointer;
    border: 0px;
  }  
  button#saveCropImg{ margin-bottom:0px !important; padding-bottom:8px !important}
  
  .btn-close{
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #fff;
    font-size:14px; 
    padding: 7px 10px; 
    cursor:pointer;
    border: 0px;
  }
 .modal-dialog .buton-disable { cursor:not-allowed; }

 .modal-dialog .btn.disabled, .modal-dialog .btn[disabled] { cursor:not-allowed;  pointer-events: all !important; }

 .modal-dialog .crop-btn-action { display:block; margin: 0 auto;}
 .modal-dialog .crop-btn-style1 { width:auto; display: block; float:none; padding-top:5px;}
 .modal-dialog .crop-btn-style2 { width:auto; display: block; float: none; padding-top:5px; padding-left:5px;}
 .modal-dialog .crop-btn-style3 { width:auto; padding:0px 0px 0px 6px; display: block; float: none; padding-top:5px; }
 .book-btn { position:relative; margin:10px 0px 0px 5px;}
 .book-btn a{background:#950001; color:#fff; font-size:13px; padding: 7px 20px; text-decoration:none;} 
 .book-btn span#txtResponseImgUpload { font-size:14px; color:#FF3800;}
 
 .head-tab-crop{ background-color:#1172c2; padding:5px 15px 0px 15px; margin:15px 0px 0px 0px; text-align:center; border-top-left-radius: 8px; border-top-right-radius: 8px; }
 .head-tab-text{ display:inline-block; color:#fff; font-size:18px; padding:9px 0px; font-weight:600; }
 button i{ padding-right:3px; font-size:14px;}
 
 #myModalImg .modal-dialog { width: 100%; margin: 30px auto;  }
 #myModalImg .modal-dialog .modal-header{ padding-top: 13px; padding-bottom: 12px; }
 #myModalImg .modal-dialog .modal-header h4 { color: #333333; font-weight: 400; }
 #myModalImg .modal-header .close { margin-top: -2px; font-size: 28px; font-weight: 600; }
 #myModalImg .modal-footer { text-align: center; padding:15px !important; border-top: 1px solid #e5e5e5 !important; }
 #myModalImg .modal-footer p{ margin-bottom: 0px !important; font-size: 14px; }

 .zone-img-crop { width: 100%; position: relative; padding: 30px 0px 20px 0px; }
 .zone-img-crop .crop-img{ border: 1px solid #e5e5e5; padding: 7px; clear: both; text-align: center; }
 .zone-img-crop .crop-img img{ max-width: 100%; text-align: center; }
 .zone-img-crop .add-border{ border: 1px solid #e5e5e5; padding-top: 8px; padding-bottom: 8px; padding-left: 7px !important; padding-right: 7px !important;  text-align: center; }
  
 .data-view { width: 100%; clear: both; }
 .data-view .col-md-8, .zone-img-crop .col-md-8 { padding-left: 0px; padding-right: 5px; }
 .data-view .col-md-4, .zone-img-crop .col-md-4 { padding-left: 5px; padding-right: 5px; }
 .crop-btn-style1 i { font-size: 16px; }
 .crop-btn-style1 p { font-size: 14px; font-weight: 400; padding-top: 5px;  }
 .data-view .col-md-6 { padding-left: 0px !important; padding-right: 0px !important; }
 .modal-dialog .data-view p{ margin-bottom: 2px; font-size: 13px; line-height: 22px; color: #333333; font-weight: 400;}
 .modal-dialog .data-view input[type="text"] {
    box-sizing: border-box;
    height: 32px;
    background: #fff url() 0 0 no-repeat;
    border: 1px solid #d2d2d2;
    width: 95%;
    font-size: 14px;
    text-indent: 5px;
    font-weight: 400;
}
.img-wait-process { width: 100%; position: relative; }
.img-wait-process img { padding: 20px 0px 10px 0px; }
.errMsgInfo { text-align: center; clear: both; }
.modal-dialog .errMsgInfo p{ color:#8a5701; font-size: 13px; font-weight: 300; text-align: center; margin-bottom: 2px; padding-top: 12px; line-height: 18px; }
.modal-dialog .errMsgInfo p > span{ font-size: 12px; }

 @media (min-width: 768px) {
   .modal-dialog .crop-btn-style1 { float: left; display: inline-block; padding-top:0px; }
   .modal-dialog .crop-btn-style2 {float: right; display: inline-block; padding-top:0px; padding-left:0px;}
   .modal-dialog .crop-btn-style3 { float: right; display: inline-block; padding-top:0px; } 	 
   #myModalImg .modal-dialog { width: 768px; } 
   .cropper-point.point-se {
     width: 15px;
     height: 15px
   }
}

@media (min-width: 992px) {

  .cropper-point.point-se {
    width: 10px;
    height: 10px
  }
}

@media (min-width: 1200px) {

  .cropper-point.point-se {
    width: 5px;
    height: 5px;
    opacity: .75
  }
}