.cropThumbnailSettings .cpt_settings_paypal { border:1px solid #298CBA; border-radius:3px; background-color:#f6f6f6; max-width:30em; padding:0 0.5em; margin:2em 0; text-align:center; }
.cropThumbnailSettings .cpt_settings_submit { margin-top:2em; }

.cropThumbnailSettings #cpt_quicktest { white-space:nowrap; background:#fff; border:1px solid #ddd; margin: 1em auto; padding:1em; }
.cropThumbnailSettings #cpt_quicktest strong {display: inline-block; color:#fff; padding:3px 8px; margin-bottom: 1px; }
.cropThumbnailSettings #cpt_quicktest strong.success { background:#00cc00; }
.cropThumbnailSettings #cpt_quicktest strong.fails { background:#cc0000; }


/**** button icon ****/
a.cropThumbnailsLink .wp-media-buttons-icon::before { content: "\f165"; font: normal 12px/1 dashicons; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/**** featured image box ****/
#postimagediv.closed .cropFeaturedImageWrap { display: none; }
#postimagediv .cropFeaturedImageWrap { padding:0 12px; margin-top:0; }

/**** button in media dialog ****/
.media-modal .compat-field-cropthumbnails th { width: 0; min-width: 0; margin:0; }
.media-modal .compat-field-cropthumbnails td { width: auto; }





/**** MODAL ****/
/* @see https://www.w3schools.com/howto/howto_css_modals.asp */
body.cpt_ModalIsOpen { overflow: hidden; }
#cpt_Modal { display: block; position: fixed; z-index: 99999999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; padding:0; box-sizing: border-box; background-color: rgba(0,0,0,0.4); }
#cpt_Modal .cpt_ModalDialog { position: relative; background-color: #fff; overflow: hidden; margin: auto; padding: 0px; width: 100%; max-width: 100%; height: 100%; margin-top:0; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
#cpt_Modal .cpt_ModalHeader { height: 40px; }
#cpt_Modal .cpt_ModalHeader .cpt_ModalTitle { font-size:20px; font-weight: 300; line-height: 1; padding: 10px 50px 10px 20px; background: #eee; color:#000; }
#cpt_Modal .cpt_ModalContent { width:100%; height: 100%; padding-top:30px; margin-top:-30px; box-sizing: border-box; }

/* The Close Button */
#cpt_Modal .cpt_ModalClose { color: #000; border:none; background: transparent; position: absolute; right:0; top:0; font-size: 38px; font-weight: 300; padding:0px 8px 10px 8px; line-height: 30px; }
#cpt_Modal .cpt_ModalClose:hover,
#cpt_Modal .cpt_ModalClose:focus { opacity: .6; text-decoration: none; cursor: pointer; }

@media(min-width:900px) {
	#cpt_Modal { padding:40px; }
}

/* crop-editor-layout */
#cpt_crop_editor .mainWindow { width: 100%; height: 100%; }
#cpt_crop_editor .cptCropPane,
#cpt_crop_editor .cptSelectionPane { box-sizing: border-box; }

#cpt_crop_editor .cptCropPane { padding:0 20px 20px; }

@media(min-width:760px) {
	#cpt_crop_editor .cptCropPane { position: absolute; right: 0; top:0; width:350px; height: 100%; overflow-y: auto; overflow-x: hidden; border:0; border-left:3px solid #eee; margin-top:0; padding:10px 20px; }
	#cpt_crop_editor .cptSelectionPane { position: relative; width:100%; height: 100%; overflow:hidden; padding-right: 350px; }
	#cpt_crop_editor .cptSelectionPaneInner { width: 100%; overflow-y: auto; height: 100%; }
}
@media(min-width:1000px) {
	#cpt_crop_editor .cptCropPane { width: 500px; }
	#cpt_crop_editor .cptSelectionPane { padding-right: 500px; }
}




#cpt_crop_editor .header {background-color:#efefef; padding:5px; position: relative; z-index: 1000;}

#cpt_crop_editor .cptEditorInner { position: relative; overflow-y: auto; height: 100%; }
#cpt_crop_editor .cptEditorInner.loading { overflow-y: hidden; }

#cpt_crop_editor .listEmptyMsg { font-size:1.5em; text-align:center; padding:2em;}
#cpt_crop_editor .image-list .entry.post-thumbnail { border-color:#aad6f4; background-color:#efefef; }
#cpt_crop_editor .image-list { margin:0;padding:0;}
#cpt_crop_editor .image-list .entry { width:140px; float:left; border:1px solid #efefef; margin:5px;}
#cpt_crop_editor .image-list .entry h3 { font-weight: normal; font-size:1em; margin:0 5px; }
#cpt_crop_editor .image-list .entry img { width:130px; height:130px; margin:5px; }
#cpt_crop_editor .image-list .cursor, .image-list .cursor * { cursor:pointer;} 



#cpt_crop_editor .cptImageSizelist { border-top: 3px solid #efefef; padding-top:5px; margin-top:5px; }
#cpt_crop_editor .cptImageSizelist::after { content: ""; clear: both; display: block; }
#cpt_crop_editor .cptImageSizelist li { width: 50%; cursor:pointer; position: relative; float: left; padding: 8px; margin: 0; color: #444; cursor: pointer; list-style: none; text-align: center; box-sizing: border-box; -webkit-box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px transparent; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px transparent; transition:box-shadow .5s ease; }
#cpt_crop_editor .cptImageSizelist li.active { -webkit-box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #0073aa; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #0073aa; }
#cpt_crop_editor .cptImageSizelist li:hover,
#cpt_crop_editor .cptImageSizelist li:focus {background: #eee; }
@media(min-width:520px) { #cpt_crop_editor .cptImageSizelist li { width: 33.32%; } }
@media(min-width:760px) { #cpt_crop_editor .cptImageSizelist li { width: 50%; } }
@media(min-width:1100px) { #cpt_crop_editor .cptImageSizelist li { width: 33.32%; } }
@media(min-width:1400px) { #cpt_crop_editor .cptImageSizelist li { width: 25%; } }
@media(min-width:1600px) { #cpt_crop_editor .cptImageSizelist li { width: 20%; } }


#cpt_crop_editor .cptImageSizeInner header,
#cpt_crop_editor .cptImageSizeInner .dimensions,
#cpt_crop_editor .cptImageSizeInner .ratio { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#cpt_crop_editor .cptImageSizeInner { line-height: 1.4; };
#cpt_crop_editor .cptImageSizeInner header { font-size:1em; font-weight: bold; }
#cpt_crop_editor .cptImageSizeInner .dimensions { font-size:0.8em; }
#cpt_crop_editor .cptImageSizeInner .ratio { font-size:0.8em; }
#cpt_crop_editor .cptImageSizeInner .lowResWarning { color: #fff; position: absolute; bottom: 12px; left: 12px; background: #ea6c00; width: 30px; height: 30px; line-height: 28px; font-size: 23px; font-weight: 600; z-index: 1; border: 2px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); }
#cpt_crop_editor .cptImageSizeInner .cptImageBgContainer { width: 100%; padding-top:100%; background-size: contain; background-position: center; background-repeat: no-repeat; box-shadow: 0 0 1px rgba(0,0,0,0.5); box-sizing: border-box; }


#cpt_crop_editor .loadingcontainer { position: relative; }
#cpt_crop_editor .loadingcontainer .loadingMsg { opacity: 0; position: absolute; width: 100%; height: 100%; top:0; left:0; background: #fff; transition: opacity .4s linear; }
#cpt_crop_editor .loadingcontainer .cptLoadingSpinner { position: absolute; top:50%; left:50%; margin-left: -15px; margin-top: -15px; }
#cpt_crop_editor .loadingcontainer.loading .loadingMsg { opacity: 1; }
#cpt_crop_editor .loadingcontainer.loading .cptImageBgContainer { background: none !important; }
#cpt_crop_editor .loadingcontainer .fade-enter-active, 
#cpt_crop_editor .loadingcontainer .fade-leave-active { transition: opacity .5s }
#cpt_crop_editor .loadingcontainer .fade-enter, 
#cpt_crop_editor .loadingcontainer .fade-leave-to { opacity: 0; }

#cpt_crop_editor .cptSameRatioLabel { display: inline-block; margin:.3em 1em 0.3em 0; }

#cpt_crop_editor .cptSelectionPane>div>p { padding-left:1em; padding-right: 1em; margin:.3em; }

#cpt_crop_editor .cptCropPane .info { text-align: center; }
#cpt_crop_editor .cptCropPane h3 { margin:0;}
#cpt_crop_editor .cptCropPane button.cptGenerate { width: 100%; height:2em; font-size:1.4em; padding:0.5em 0; display:block; line-height: 0;}

#cpt_crop_editor .cropContainer { margin:.3em 0 .5em; opacity: .5; }
#cpt_crop_editor .cptEditorInner.cropEditorActive .cropContainer { opacity: 1; }
#cpt_crop_editor .cropContainer img.cptCroppingImage { max-width: 100%; height:auto; }

#cpt_crop_editor h4 { margin-bottom:0em;}
#cpt_crop_editor .step-info { font-size:0.9em; }

#cpt_crop_editor .jcrop-handle.ord-ne { margin-top: -8px; margin-right: -8px;}
#cpt_crop_editor .jcrop-handle.ord-nw { margin-top: -8px; margin-left: -8px;}
#cpt_crop_editor .jcrop-handle.ord-se { margin-bottom: -8px; margin-right: -8px;}
#cpt_crop_editor .jcrop-handle.ord-sw { margin-bottom: -8px; margin-left: -8px;}

#cpt_crop_editor .jcrop-handle.ord-ne,
#cpt_crop_editor .jcrop-handle.ord-nw,
#cpt_crop_editor .jcrop-handle.ord-se,
#cpt_crop_editor .jcrop-handle.ord-sw { width: 16px; height: 16px; }


#cpt_crop_editor .cpt-debug {clear: left; padding-left:5px;}
#cpt_crop_editor .cpt-debug .cpt-debug-handle { border:1px solid #aaa; background-color:#f1f1f1; padding:0.3em 1em;}
#cpt_crop_editor .cpt-debug.closed .content { display:none; }
#cpt_crop_editor .cpt-debug .content { font-family: monospace;margin-top:0.5em; }


#cpt_crop_editor .cptWaitingWindow { position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 10; background: rgba(255, 255, 255, 0.9); transition:all .5s ease; }
#cpt_crop_editor .cptWaitingWindow .msg { position: absolute; top:50%; width: 100%; margin-top:-4em; font-size: 2em; font-weight:bold; text-align: center; line-height: 1.3; padding: 0; }
#cpt_crop_editor .cptWaitingWindow .cptLoadingSpinner { height: 50px; width: 50px; margin-top:20px; }

.cptLoadingSpinner { height: 30px; width: 30px; border: 2px solid #0073aa; border-right-color: transparent; border-radius: 50%; display: inline-block;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: cptRotateForever;
  animation-name: cptRotateForever;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear; 
}

@-webkit-keyframes cptRotateForever {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes cptRotateForever {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes cptRotateForever {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}