/* LAYOUTS */
.postsaint-wrap{
  border-radius: 6px !important;
  background-color: #fff;
  padding:8px 6px;
}

/* HEADER */
#postsaint-logo{
  background: url("../images/postsaint-logo.png");
  background-repeat: no-repeat;
    background-size: 120px auto;
    width: 120px;
    height: 24px;
    float: right;
    margin-right: 8px;
}

#postsaint-heading{
  float:left;
}

h1.postsaint-heading{
  font-size:26px;
  color:#485e82;
  font-weight: 600;
}

h1.postsaint-heading a {
 text-decoration: none;
}

#postsaint-support{
  float: right;
}

#postsaint-support a{
  text-decoration: none;
}

/* HEADINGS */
h3.postsaint-section-heading{
  color:#779cdc;
  margin-top: 10px;
  margin-bottom: 0 !important;
}

/* MESSAGES */
.postsaint-succmsg{color:#390;}
.postsaint-warnmsg{color:#c68700;}
.postsaint-errormsg{color:red;}

/* inputs */
.postsaint-wrap input[type="file"]{
	border: none !important;
}

.postsaint-input-80{width:80px !important;}
.postsaint-input-320{width:320px;}
.postsaint-input-full-width{width:100%}

.postsaint-submit-button{
	padding:4px 20px !important;
	font-size:16px !important;
	background-color: #485e82 !important;
}

.postsaint-wrap input, select, textarea {
	border: 1px solid #779cdc !important;
	border-radius: 0;
}

.postsaint-wrap input[type="radio"] {
  border-radius:26px;
}

/* BULK IMPORT */
.postsaint-bulk-import-source{padding-bottom:10px}
.postsaint-wrap #import_data{min-height:100px;max-height: 400px;}
 
/* IMAGE GENERATION */
.postsaint-wrap .generated-image-container{    
  width: 240px;
  height: auto;
  display:inline-block;
  position:relative;
  margin-right:4px !important;
  margin-top: 4px;
}

/* key buttons */
.postsaint-generated-image-button {
  background:#779cdc;
  color:#FFF;
  border:none;
  padding: 8px;    
  border-radius: 6px;    
}

/* buttons attached to images with absolute positions */
.generated-image-container button.postsaint-add-image-to-media{
  position:absolute;
  bottom:10px;
  right:90px;
}

.generated-image-container button.postsaint-add-image-to-media-right{
  position:absolute;
  bottom:10px;
  right:10px;
}

.generated-image-container button.postsaint-add-image-to-post-content{
  position:absolute;
  bottom:10px;
  right:50px;
}

.generated-image-container button.postsaint-add-image-to-featured-image{
  position:absolute;
  bottom:10px;
  right:10px;
}

/* make generated image fit within container, not overhang (classic editor) */
.postsaint-wrap .generated-image-container img{  
  width:100%;
}

/* TEXT GENERATION */
#postsaint-copy-to-content, #postsaint-copy-to-clipboard{
  background:#779cdc;
  color:#FFF;
  border:none;
  padding: 6px;    
  border-radius: 6px;     
}

#postsaint-copy-to-clipboard{
  float:right;
}

/* spinning image */
#postsaint-loading{
  max-width: 80px;
}



/* AUTO POSTS */
.postsaint-auto-post-button{
  width:80px;
  background:#779cdc;
  color:#FFF;
  border:none;
  padding: 4px;    
  border-radius: 4px;       
}

.postsaint-edit-auto-post, .postsaint-delete-auto-post{
  margin-right:4px;
  margin-bottom: 4px;
}


/* LOGS */
.postsaint-logs-image-preview{
  max-width:120px !important;
}

/* highlight background area */
.postsaint-prompt-textarea{
  background-color:#d8eeff !important;
}

@media screen and (min-width: 700px) {

	.postsaint-wrap{
		padding:8px 12px;
	}	
}

/* ranges */
input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  max-width: 320px;
  border:none !important;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #2497E3;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #2497E3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2497E3;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #2497E3;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #2497E3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2497E3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #2497E3;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #2497E3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #A1D0FF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #2497E3;
}
input[type=range]:focus::-ms-fill-upper {
  background: #2497E3;
}

/* bootstrap responsive tables */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-table-color);
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}
.table th {
  text-align: left !important;
}