.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

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

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
  opacity: 0.7;
}

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

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

.cropper-view-box {
  /* outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75); */
  display: block;
  height: 100%;
  outline: 2px solid #000;
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: calc(100% / 3);
  left: 0;
  top: calc(100% / 3);
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: calc(100% / 3);
  top: 0;
  width: calc(100% / 3);
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

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

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

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

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #000;
  /* background-color: #39f; */
}

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

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

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

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

.cropper-point {
  background-color: #000;
  /* background-color: #39f; */
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

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

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

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

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

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

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

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

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

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}

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

.cropper-invisible {
  opacity: 0;
}

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

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 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;
}



/* ADDED ON 2024-10-24 */
.w-100 { width: 100% !important; }
.img_preview_input_outer { max-width: calc(100% - 110px); width: 100%; }
.upload_img_preview { max-width: 100px; max-height: 100px; overflow: hidden; border: 1px solid #ccc; padding: 2px; background: #eee; text-align: center; width: 90px; height: 90px; line-height: 77px; position: relative; }
.upload_img_preview img { max-width: 84px; max-height: 84px; }
.upload_img_preview .btn.edit_existing_image { position: absolute; right: 3px; bottom: 3px; padding: 0; font-size: 14px; line-height: 12px; border: 1px solid #fff; z-index: 999; box-shadow: 0px 0px 0px 1px #000; }
.upload_img_preview .btn.edit_existing_image i.fa-pencil-square-o { font-size: 10px; font-weight: bold; padding: 3px 3px 4px 4px; border-radius: 5px; }
.upload_img_preview i.fa-picture-o { color: #1c84c6; font-size: 60px; background: #fff; line-height: 60px; width: 70px; height: 58px; /* display: inline-block; */ border-radius: 5px; vertical-align: middle; }
.upload_img_preview .btn.edit_existing_image { position: absolute; right: 3px; bottom: 3px; padding: 0; font-size: 14px; line-height: 12px; border: 1px solid #fff; z-index: 999; box-shadow: 0px 0px 0px 1px #000; }
.upload_img_preview .btn.edit_existing_image i.fa-pencil-square-o { font-size: 10px; font-weight: bold; padding: 3px 3px 4px 4px; border-radius: 5px; }

.modal.inmodal .modal-header { padding: 18px 15px 15px 15px; text-align: center; display: block; }
.modal.inmodal .modal-header h4.modal-title { font-size: 18px; line-height: 20px; margin: 0; padding: 0; font-weight: bold; }
.modal-footer { margin-top: 0; clear:both; }
#action_cropper_btn_outer { float:left; }
.action_cropper_btn { margin: 0 2px !important; border: 1px solid #ccc; min-width: 30px; text-align: center; }
.modal-footer .btn + .btn { margin-left: 0; }

.form_note { color:#026775; font-weight: 500; font-size: 12px; line-height: 15px !important; display: block; margin: 4px 0 0 0; }
label.error, .custom_err_msg, .ci_error_msg > p, .custom_img_err { display: block; margin: 2px 0 0 0 !important; font-weight: 500; }

video { width: 100% !important; height: auto !important; }

.modal-content { background-clip: padding-box; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); outline: 0 none; position: relative; }
.inmodal .modal-body { background: #f8fafb; padding: 20px 30px 30px 30px; }

.mt-0,.my-0{margin-top:0!important}
.mr-0,.mx-0{margin-right:0!important}
.mb-0,.my-0{margin-bottom:0!important}
.ml-0,.mx-0{margin-left:0!important}
.m-1{margin:.25rem!important}
.mt-1,.my-1{margin-top:.25rem!important}
.mr-1,.mx-1{margin-right:.25rem!important}
.mb-1,.my-1{margin-bottom:.25rem!important}
.ml-1,.mx-1{margin-left:.25rem!important}
.m-2{margin:.5rem!important}
.mt-2,.my-2{margin-top:.5rem!important}
.mr-2,.mx-2{margin-right:.5rem!important}
.mb-2,.my-2{margin-bottom:.5rem!important}
.ml-2,.mx-2{margin-left:.5rem!important}
.m-3{margin:1rem!important}
.mt-3,.my-3{margin-top:1rem!important}
.mr-3,.mx-3{margin-right:1rem!important}
.mb-3,.my-3{margin-bottom:1rem!important}
.ml-3,.mx-3{margin-left:1rem!important}
.m-4{margin:1.5rem!important}
.mt-4,.my-4{margin-top:1.5rem!important}
.mr-4,.mx-4{margin-right:1.5rem!important}
.mb-4,.my-4{margin-bottom:1.5rem!important}
.ml-4,.mx-4{margin-left:1.5rem!important}
.m-5{margin:3rem!important}
.mt-5,.my-5{margin-top:3rem!important}
.mr-5,.mx-5{margin-right:3rem!important}
.mb-5,.my-5{margin-bottom:3rem!important}
.ml-5,.mx-5{margin-left:3rem!important}
.p-0{padding:0!important}
.pt-0,.py-0{padding-top:0!important}
.pr-0,.px-0{padding-right:0!important}
.pb-0,.py-0{padding-bottom:0!important}
.pl-0,.px-0{padding-left:0!important}
.p-1{padding:.25rem!important}
.pt-1,.py-1{padding-top:.25rem!important}
.pr-1,.px-1{padding-right:.25rem!important}
.pb-1,.py-1{padding-bottom:.25rem!important}
.pl-1,.px-1{padding-left:.25rem!important}
.p-2{padding:.5rem!important}
.pt-2,.py-2{padding-top:.5rem!important}
.pr-2,.px-2{padding-right:.5rem!important}
.pb-2,.py-2{padding-bottom:.5rem!important}
.pl-2,.px-2{padding-left:.5rem!important}
.p-3{padding:1rem!important}
.pt-3,.py-3{padding-top:1rem!important}
.pr-3,.px-3{padding-right:1rem!important}
.pb-3,.py-3{padding-bottom:1rem!important}
.pl-3,.px-3{padding-left:1rem!important}
.p-4{padding:1.5rem!important}
.pt-4,.py-4{padding-top:1.5rem!important}
.pr-4,.px-4{padding-right:1.5rem!important}
.pb-4,.py-4{padding-bottom:1.5rem!important}
.pl-4,.px-4{padding-left:1.5rem!important}
.p-5{padding:3rem!important}
.pt-5,.py-5{padding-top:3rem!important}
.pr-5,.px-5{padding-right:3rem!important}
.pb-5,.py-5{padding-bottom:3rem!important}
.pl-5,.px-5{padding-left:3rem!important}
.m-auto{margin:auto!important}
.mt-auto,.my-auto{margin-top:auto!important}
.mr-auto,.mx-auto{margin-right:auto!important}
.mb-auto,.my-auto{margin-bottom:auto!important}
.ml-auto,.mx-auto{margin-left:auto!important}

.guidelines_style1 { font-weight: 600;  text-align: justify;  margin: 0 0 10px 0; font-size: 16px; }
.guidelines_style2 > h4.guidelines_header { font-weight: 600; border-bottom: 1px dashed #534c4c; font-size: 20px; }
.guidelines_style2 > ul { padding: 0 0 0 14px; margin: 0; }
.guidelines_style2 > ul > li { font-weight: 600; margin: 0 0 5px 0; line-height: 20px; padding: 0 0 0 5px; }
.guidelines_style2 > ul > li > a { display: block; margin: 5px 0 0 0; max-width: 70px; }
.guidelines_style2 > ul > li > a > img { width:100%; }

.accept_btn { max-width: 300px; margin-left: auto; margin-right: auto; }