/*Cropper always above modal */
.cropper-container {
  z-index: 99999 !important;
}

.ui-dialog:has(#camera-wrapper) {
  width: 1200px !important;
  max-width: 1200px;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.ui-dialog .ui-dialog-content.ui-dialog:has(#camera-wrapper) {
  max-height: 80vh;
  overflow-y: auto;
}

#video {
  width: 100%;
  /* max-height: 300px; */
  max-width: 1000px;
  margin: 15px auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

/* #crop-image {
  max-height: 300px;
  object-fit: contain;
} */

#crop-image {
  max-width: 100%;
  display: block;
}

#capture-btn,
#save-btn,
#retake-btn {
  display: block;
  margin: 10px auto;
}

/* Capture Photo Postioning in scc status page */

.js-form-item:has(.cf-camera-btn-clone)>label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.js-form-item:has(.cf-camera-btn-clone)>label .cf-camera-btn-clone {
  margin-left: 6px;
}

a.cf-camera-btn-clone {
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* border-radius: 8px !important; */
  padding: 0px 18px !important;
}

.cf-camera-btn-clone.button.button--primary {
  font-size: 18px !important;
}

#camera-wrapper {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}

#camera-wrapper #start-camera {
  background-color: #0d6efd;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}

#camera-wrapper #start-camera:hover {
  background-color: #0b5ed7;
}


#camera-wrapper #capture-btn {
  background-color: #0b5ed7;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}

#camera-wrapper #capture-btn:hover {
  background: #084298;
}

#camera-wrapper #preview-btn {
  background-color: #6c757d;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}

#camera-wrapper #preview-btn:hover {
  background: #5c636a;
}

#camera-wrapper #retake-btn {
  background-color: #fd7e14;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}

#camera-wrapper #retake-btn:hover {
  background: #e66a00;
}

#camera-wrapper #save-btn {
  background-color: #198754;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}

#camera-wrapper #save-btn:hover {
  background: #157347;
}


#camera-wrapper #full-crop {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}

#camera-wrapper #full-crop:hover{
  background-color: #0056b3;
}


#camera-wrapper #manual-crop {
  background-color: #6c757d;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}

#camera-wrapper #manual-crop:hover{
  background-color: #545b62;
}