/** Styling page upload_manager **/
.login-overlay,
.warning-overlay,
.change-log-overlay {
	position: fixed;
	/*display: none;*/
	margin: 0 !important;
	padding-top: 60px !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	overflow: auto;
	z-index: 9999;
}
.warning-overlay,
.change-log-overlay {
	display: none;
}
.change-log-dialog {
	position: absolute;
	top: 60px;
	bottom: 60px;
	left: 60px;
	right: 60px;
	.change-log-container {
		position: absolute;
		border: 1px solid var(--wp--preset--color--cyan-bluish-gray);
		padding: 5px 10px;
		top: 160px;
		bottom: 90px;
		left: 35px;
		right: 35px;
		overflow: auto;
	}
	.btn-close-change-log {
		position: absolute;
		bottom: 20px;
	}
}
.change-log-bold {
	font-weight: 600;
}
.btn_browse {
	display: inline-block;
	margin: 0;
	padding: 2px 8px;
	border-radius: 2px;
	/*border: 1px solid #FF9D00;*/
	background-color: #FFAA55;
	color: #333333;
	transition: background 0.2s, color 0.2s;
	cursor: pointer;
	caret-color: transparent;
	font-size: 0.9rem;
}
.btn_browse:hover {
	background-color: #FF9D00;
	color: #FFFFFF;
}
.file_name,
.file_size {
	display: inline-block;
	margin: 0;
	padding: 2px 6px;
	font-size: 0.85rem;
	color: #0000FF;
}
.btn_remove_file {
	display: inline-block;
	margin: 0;
	padding: 2px;
	background-color: #FF5555;
	caret-color: transparent;
	cursor: pointer;
	width: 14px;
	height: 14px;
	vertical-align: middle;
	border-radius: 2px;
	color: #FFFFFF;	
}
.btn_remove_file::before {
	content: 'x';
	position: relative;
	display: inline-block;
	width: 100%;
	top: -18px;
	text-align: center;
	box-sizing: border-box;
	font-size: 0.95rem;
	font-weight: 500;
}
.btn_remove_file:hover {
	background-color: #FF0000;
}
span.uploading {
	color: #ff9d00;
}
span.uploading svg{
	animation-name: bounce;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
.upload-setup-file-btn-container {
	display: inline-flex;
}
.table-file-list {
	thead > tr {
		th:nth-child(1){
			width: 5%;
		}
		th:nth-child(2){
			width: 25%;
		}
		th:nth-child(3){
			width: 30%;
		}
		th:nth-child(4){
			width: 10%;
		}
		th:nth-child(5){
			width: 10%;
		}
		th:nth-child(6){
			width: 20%;
		}
	}
	tbody > tr {
		td:nth-child(1){
			text-align: center;
		}
		td:nth-child(4){
			text-align: center;
		}
		td:nth-child(5){
			text-align: center;
		}
		td:nth-child(6){
			text-align: center;
		}
		td a {
			color: var(--wp--preset--color--vivid-cyan-blue) !important;
		}
	}
}
.table-change-log {
	thead > tr {
		th:nth-child(1){
			width: 5%;
		}
		th:nth-child(2){
			width: 55%;
		}
		th:nth-child(3){
			width: 10%;
		}
		th:nth-child(4){
			width: 10%;
		}
		th:nth-child(5){
			width: 20%;
		}
	}
	tbody > tr {
		td:nth-child(1){
			text-align: center;
		}
		td:nth-child(3){
			text-align: center;
		}
		td:nth-child(4){
			text-align: center;
		}
		td:nth-child(5){
			text-align: center;
		}
		td a {
			color: var(--wp--preset--color--vivid-cyan-blue) !important;
		}
		td a.view-change-log {
			margin-left: 5px;
			display: inline-block;
			padding: 2px 8px;
			color: #ff6900 !important;
		}
	}
}
.table-file-list,
.table-change-log {
	tbody > tr > td {
		transition: all 0.7s ease-out;
	}
	tbody > tr.success {
		td{
			color: var(--wp--preset--color--vivid-green-cyan);
		}
	}
}
#btn-refresh.spin .wp-rich-text-font-awesome-icon > svg {
	animation-name: spin;
  	animation-duration: 2000ms;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@keyframes bounce{
	50% { transform: translateY(-3px)}
}

::placeholder {
  color: rgb(186, 186, 186);
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: rgb(186, 186, 186);
}

form div {
	gap: 5px !important;
}
form label {
	font-size: 0.95rem;
	padding: 0 5px;
}

form input,
form select {
	font-family: var(--wp--preset--font-family--kanit);
	font-size: 0.9rem;
	font-weight: 300;
	margin: 5px 0 0 !important;
	box-sizing: border-box;
	padding: 2px 8px;
	width: 100%;
	/*background-color: #FFFFFF;*/
	transition: background 0.2s;
}

form input[type="radio"] {
	width: auto !important;
}

form input:read-only:not([disabled]) {
	background-color: #F2F2F2;
	border: 1px solid #666666;
	border-radius: 2px;
	padding: 3px 8px;
}

form input[type="text"],
form input[type="email"],
form input[type="file"],
form input[type="number"],
form input[type="password"],
form input[type="tel"],
form input[type="url"] {

}

form input[type="radio"],
form input[type="checkbox"],
.order-item-overlay input[type="radio"],
.order-item-overlay input[type="checkbox"] {
	display: inline-block;
	margin-top: 0;
	width: auto;
}

.err {
	display: block;
	margin: 5px 0 0;
	padding: 2px 8px;
	font-size: 0.8rem;
	color: #DD3636;
}

input.stricted,
div.stricted {
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	animation-iteration-count: infinite;
	background-color: #FFCFCF;
	border-radius: 3px;
  /*transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;*/
}