/*
* Safelayout Cute Preloader Admin Stylesheet
*
* Version: 2.1.2
*
* Table of Contents:
*
* Styles of feedback form and rate reminder message
*/

#sl-pl-feedback-modal {
	background: rgba(0, 0, 0, 0.6);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999999;
}
.sl-pl-feedback-window {
	background-color: #fff;
	box-shadow: 0 3px 6px #000;
	height: auto;
	left: calc(50% - 300px);
	position: absolute;
	top: 15%;
	width: 600px;
}
.sl-pl-feedback-header {
	background: #a0e6ff;
	border-bottom: 1px solid #dadadb;
	font-size: 18px;
	font-weight: 600;
	height: 36px;
	line-height: 2;
	padding: 0 10px;
}
.sl-pl-feedback-body {
	padding: 0 20px;
}
.sl-pl-feedback-title {
	font-size: 16px;
	font-weight: 700;
	margin: 20px 0;
}
.sl-pl-feedback-item {
	margin-top: 12px;
}
.sl-pl-feedback-body p {
	margin: 15px 0;
}
.sl-pl-feedback-footer {
	border-top: 1px solid #dadadb;
	font-size: 18px;
	height: 50px;
	margin-top: 20px;
	text-align: center;
}
.sl-pl-feedback-footer .button {
	background: #a2ff6f;
	color: #000;
	margin: 10px 70px;
}
#sl-pl-feedback-skip {
	background: #f7f8f8;
	border-color: #a0e6ff;
	color: #707070;
}
#sl-pl-feedback-submit:hover {
	background: #e6fc2c;
}
.sl-pl-feedback-window textarea,
.sl-pl-feedback-window input[type=text] {
	display: none;
	margin: 10px 20px 0 20px;
	width: calc(100% - 30px);
}
#sl-pl-feedback-loader {
	background: rgba(0, 0, 0, 0.7);
	border-radius : inherit;
	color: #fff;
	display : none;
	height: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
}
#sl-pl-feedback-loader-msg {
	overflow: visible !important;
	width: 200px !important;
}
#sl-pl-feedback-loader-msg-tr {
	display:none;
}
.sl-pl-spin-rate {
	display: inline-block;
	height: 50px;
	position: relative;
	top: 50%;
	white-space: nowrap;
}
#sl-pl-dots-rate div {
	height: 100%;
	left: 50%;
	overflow: hidden;
	position: absolute;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 72px;
}
#sl-pl-dots-rate span {
	background: linear-gradient(90deg, #ff8c59, #ffb37f 24%, #a3bf5f 49%, #7ca63a 75%, #527f32);
	border-radius: 50%;
	height: 4px;
	left: 10px;
	opacity: 0.5;
	position: absolute;
	top: 50%;
	width: 4px;
}
#sl-pl-dots-rate span::before,
#sl-pl-dots-rate span::after {
	background-color: inherit;
	background-image: inherit;
	border-radius: 50%;
	content: "";
	height: 100%;
	position: absolute;
	width: 100%;
}
#sl-pl-dots-rate span::before {
	left: -8px;
}
#sl-pl-dots-rate span::after {
	left: 8px;
}
#sl-pl-dots-rate span:nth-child(2) {
	left: 34px;
}
#sl-pl-dots-rate span:nth-child(3) {
	left: 58px;
}
#sl-pl-dots-rate span:nth-child(4) {
	animation: sl-pl-dots-rate-anim 0.9s steps(11, end) infinite;
	-webkit-animation: sl-pl-dots-rate-anim 0.9s steps(11, end) infinite;
	height: 6px;
	left: 9px;
	opacity: 1;
	top: 48%;
	width: 6px;
}
#sl-pl-dots-rate span:nth-child(4):before {
	height: 4px;
	left: -7px;
	top: 1px;
	width: 4px;
}
#sl-pl-dots-rate span:nth-child(4):after {
	height: 8px;
	left: 7px;
	top: -1px;
	width: 8px;
}
@-webkit-keyframes sl-pl-dots-rate-anim {
	0% {
		-webkit-transform: translateX(-16px);
	}
	100% {
		-webkit-transform: translateX(72px);
	}
}
@keyframes sl-pl-dots-rate-anim {
	0% {
		transform: translateX(-16px);
	}
	100% {
		transform: translateX(72px);
	}
}
.sl-pl-msg-container {
	display: inline-block;
	padding: 10px;
	vertical-align: bottom;
	width: calc(100% - 160px);
}
.sl-pl-rate-reminder-footer .button,
.sl-pl-upgrade-reminder-footer .button {
	color: #fff !important;
	display: inline-block;
	margin: 10px 20px;
	padding: 3px 15px;
	text-transform: uppercase;
}
.sl-pl-rate-reminder-footer .button span,
.sl-pl-upgrade-reminder-footer .button span {
	padding: 3px;
}
#sl-pl-rate-ok {
	background: #2271b1;
	border: 1px solid #1c00ff;
}
#sl-pl-rate-ok:hover {
	background: #1d629a;
}
#sl-pl-rate-later,
#sl-pl-upgrade-later {
	background: #c00;
	border: 1px solid #c00;
}
#sl-pl-rate-later:hover,
#sl-pl-upgrade-later:hover {
	background: #b30000;
}
#sl-pl-upgrade,
#sl-pl-rate-already {
	background: #46b450;
	border: 1px solid #1e4d22;
}
#sl-pl-upgrade:hover,
#sl-pl-rate-already:hover {
	background: #3fa247;
}