*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

body {
	box-sizing: border-box;
	position: relative;
	overflow-x: hidden;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

@font-face {
	font-family: "icomoon-custom-star";
	src: url("../fonts/custom-star.woff?ykhmih");
	src: url("../fonts/custom-star.woff?ykhmih#iefix") format("woff"),
		url("../fonts/custom-star.ttf?ykhmih") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: "icomoon-custom0-star" !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-custom-star-empty:before {
	content: "\e9d7";
}
.icon-custom-star-full:before {
	content: "\e9d9";
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Italic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Roboto Thin";
	src: url("../fonts/Roboto-Thin.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto Thin";
	src: url("../fonts/Roboto-ThinItalic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Roboto Light";
	src: url("../fonts/Roboto-Light.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto Light";
	src: url("../fonts/Roboto-LightItalic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Roboto Medium";
	src: url("../fonts/Roboto-Medium.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto Medium";
	src: url("../fonts/Roboto-MediumItalic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Roboto Bold";
	src: url("../fonts/Roboto-Bold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto Bold";
	src: url("../fonts/Roboto-BoldItalic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Roboto Black";
	src: url("../fonts/Roboto-Black.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto Black";
	src: url("../fonts/Roboto-BlackItalic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Roboto Condensed";
	src: url("../fonts/Roboto-Condensed.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto Condensed";
	src: url("../fonts/Roboto-CondensedItalic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Roboto BoldCondensed";
	src: url("../fonts/Roboto-BoldCondensed.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto BoldCondensed";
	src: url("../fonts/Roboto-BoldCondensedItalic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

body {
	font-family: "Roboto", Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
}

h1 {
	font-family: "Roboto BoldCondensed";
	font-style: italic;
	font-size: 40px;
	font-size: 2.5rem;
}
@media only screen and (min-width: 1024px) {
	h1 {
		font-size: 70px;
		font-size: 4.375rem;
	}
}

h2 {
	font-family: "Roboto BoldCondensed";
	font-style: italic;
	font-size: 30px;
	font-size: 1.875rem;
}
@media only screen and (min-width: 1024px) {
	h2 {
		font-size: 60px;
		font-size: 3.75rem;
	}
}

h3 {
	font-family: "Roboto Bold";
	font-style: italic;
	font-size: 20px;
	font-size: 1.25rem;
}
@media only screen and (min-width: 1024px) {
	h3 {
		font-size: 30px;
		font-size: 1.875rem;
	}
}

h4 {
	font-family: "Roboto BoldCondensed";
	font-size: 20px;
	font-size: 1.25rem;
}
@media only screen and (min-width: 1024px) {
	h4 {
		font-size: 30px;
		font-size: 1.875rem;
	}
}

p {
	font-family: "Roboto Thin";
	font-style: normal;
	line-height: 24px;
	font-size: 12px;
	font-size: 0.75rem;
}
@media only screen and (min-width: 1024px) {
	p {
		font-size: 17px;
		font-size: 1.0625rem;
	}
}

.container {
	max-width: 1380px;
	width: 100%;
	margin: 0 auto;
	padding: 30px;
}

.background {
	background-size: cover;
	height: 800px;
}

.is-hidden {
	display: none;
}

.form-content {
	padding: 30px;
	max-width: 670px;
	margin: 0 auto;
	width: 100%;
}
@media only screen and (min-width: 1024px) {
	.form-content--two {
		padding-top: 0;
	}
}
@media only screen and (min-width: 1024px) {
	.form-content--three {
		padding-top: 60px;
	}
}

::-webkit-input-placeholder {
	color: #999999;
}

:-moz-placeholder {
	/* Firefox 18- */
	color: #999999;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: #999999;
}

:-ms-input-placeholder {
	color: #999999;
}

:focus::-webkit-input-placeholder {
	color: transparent;
}

button {
	background: none;
	border-radius: 0;
	border: none;
	cursor: pointer;
	transition: ease all 0.3s;
}

.button-primary {
	background: #ed1c27;
	color: #ffffff;
	width: 100%;
	height: 44px;
	border-radius: 10px;
}
.button-primary:hover,
.button-primary:focus {
	opacity: 0.9;
}

.card {
	padding: 50px 0 30px 0;
}
@media only screen and (min-width: 1024px) {
	.card {
		display: flex;
	}
}
.card__number {
	background: #ffffff;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	color: #ed1c27;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	margin-right: 30px;
	padding: 20px;
}
@media only screen and (min-width: 1024px) {
	.card__container {
		max-width: 470px;
		padding-bottom: 50px;
	}
}
.card__container__title {
	padding-bottom: 40px;
}
.card__container__paragraph {
	padding-bottom: 30px;
}
.card__container__image-container {
	position: relative;
}
.card__container__image {
	width: 100%;
	border-radius: 10px;
	z-index: 100;
	max-width: 600px;
}
.card__container__wave {
	position: absolute;
	bottom: -25px;
	left: -2px;
	width: 101%;
	max-width: 602px;
}

.header-brand {
	position: fixed;
	top: -10px;
	left: -10px;
	z-index: 2000;
}
.header-brand__link__img {
	max-width: 149px;
}

.footer {
	background: #000000;
	color: #ffffff;
	text-align: center;
	padding: 20px 30px;
}
@media only screen and (min-width: 1024px) {
	.footer {
		padding: 50px 30px;
	}
}
.footer__top {
	padding-bottom: 30px;
}
.footer__top__paragraph {
	font-size: 10px;
}
@media only screen and (min-width: 1024px) {
	.footer__top__paragraph {
		font-size: 13px;
	}
}
@media only screen and (min-width: 1024px) {
	.footer__bottom {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.footer__bottom__vigilado {
	padding-bottom: 10px;
}
@media only screen and (min-width: 1024px) {
	.footer__bottom__vigilado {
		padding-bottom: 0;
		padding-right: 40px;
	}
}
.footer__bottom__copyright {
	padding-bottom: 10px;
	font-size: 10px;
	font-size: 0.625rem;
}
@media only screen and (min-width: 1024px) {
	.footer__bottom__copyright {
		padding-bottom: 0;
		padding-right: 40px;
	}
}

.hero {
	background: url(../img/hero-bg.jpg) no-repeat center 100%;
	background-size: cover;
	height: 800px;
	display: flex;
	align-items: center;
	position: relative;
}
@media only screen and (min-width: 1024px) {
	.hero__container {
		display: flex;
		justify-content: space-between;
	}
}
.hero__container__text {
	padding-bottom: 100px;
}
@media only screen and (min-width: 600px) {
	.hero__container__text {
		padding-bottom: initial;
		width: 50%;
	}
}
@media only screen and (min-width: 1024px) {
	.hero__container__text {
		max-width: 560px;
	}
}
.hero__container__text__title {
	color: #333333;
	padding-bottom: 30px;
}
.hero__container__text__title--red {
	color: #ed1c27;
}
.hero__container__text__paragraph {
	color: #999999;
}
.hero__container__image {
	max-width: 600px;
	position: absolute;
	bottom: -180px;
	left: 50%;
	transform: translate(-45%);
}
@media only screen and (min-width: 600px) {
	.hero__container__image {
		left: 90%;
		max-width: 800px;
		bottom: -50px;
	}
}
@media only screen and (min-width: 768px) {
	.hero__container__image {
		left: 90%;
		max-width: 1000px;
		bottom: -200px;
	}
}
@media only screen and (min-width: 1024px) {
	.hero__container__image {
		left: 90%;
		max-width: 1200px;
		bottom: -300px;
	}
}
@media only screen and (min-width: 1380px) {
	.hero__container__image {
		left: 70%;
		max-width: 1400px;
		bottom: -360px;
	}
}

.content {
	background: #ed1c27;
	padding-top: 80px;
	padding-bottom: 40px;
	color: #ffffff;
}
@media only screen and (min-width: 1024px) {
	.content__container__title {
		padding-bottom: 50px;
	}
}
@media only screen and (min-width: 768px) {
	.content__container__instructions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}
}

.login {
	background: url(../img/login-bg.jpg) no-repeat center center;
	background-size: cover;
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.login__box {
	background: #ffffff;
	max-width: 475px;
	width: 100%;
	height: 570px;
	margin: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 55px 20px;
	border-radius: 10px;
}
@media only screen and (min-width: 768px) {
	.login__box {
		padding: 55px 80px;
	}
}
.login__box__brand {
	max-width: 125px;
	padding-bottom: 40px;
}
.login__box__title {
	padding-bottom: 40px;
	color: #333333;
	text-align: center;
	font-size: 23px;
	font-size: 1.4375rem;
}
.login__box__title--red {
	color: #ed1c27;
}
.login__box__alert {
	margin-bottom: 20px;
	font-size: 13px;
	font-size: 0.8125rem;
	color: #ed1c27;
	padding: 10px;
	border-left: 3px solid #ed1c27;
}
.login__box__form {
	width: 100%;
}
.login__box__form input[type="text"],
.login__box__form input[type="password"] {
	width: 100%;
	background: #f8f8f8;
	border: 1px solid #dbdbdb;
	border-radius: 10px;
	height: 44px;
	padding-left: 50px;
	font-size: 13px;
	font-size: 0.8125rem;
	color: #999999 !important;
	position: relative;
	margin-bottom: 25px;
	transition: ease all 0.3s;
}
.login__box__form input[type="text"]:focus,
.login__box__form input[type="password"]:focus {
	border: 1px solid #ed1c27 !important;
	outline: 0 none;
}
.login__box__form__input {
	position: relative;
}
.login__box__form__input .form-icon {
	position: absolute;
	bottom: 50%;
	transform: translateY(-25%);
	left: 20px;
}
.login__box__form__footer {
	font-size: 13px;
	font-size: 0.8125rem;
	color: #999999;
	padding-bottom: 40px;
}
@media only screen and (min-width: 768px) {
	.login__box__form__footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.login__box__form__footer__div {
	margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
	.login__box__form__footer__div {
		margin: initial;
	}
}
.login__box__form__footer__checkbox {
	margin-right: 5px;
}
.login__box__form__footer__forget {
	color: #ed1c27;
	font-family: "Roboto Bold";
	transition: ease all 0.3s;
}
.login__box__form__footer__forget:hover {
	opacity: 0.9;
}

.template-1 {
	min-height: 100vh;
	width: 100%;
}

.template-1__bgr {
	background-color: #f5f5f5;
	background-size: cover;
	background-position: center 0;
	background-repeat: no-repeat;
	background-blend-mode: overlay, darken;
	background-attachment: fixed;
	display: block;
	filter: grayscale(100%);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.template-1__content {
	z-index: 2;
	position: relative;
}

.template-2 {
	height: 100vh;
	width: 100%;
}
@media only screen and (min-width: 1024px) {
	.template-2 {
		display: flex;
		max-width: 1360px;
		margin: 0 auto;
		padding: 30px;
	}
}
.template-2__left {
	flex-basis: 50%;
	height: 20%;
	background-color: #f8f8f8;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}
.template-2__left::before {
	background: linear-gradient(rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0.5));
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

@media only screen and (min-width: 1024px) {
	.template-2__left {
		height: 80%;
		border-radius: 10px;
	}
}
.template-2__right {
	flex-basis: 50%;
	height: 100%;
}

.template-3 {
	height: 100vh;
	width: 100%;
	background-size: cover;
}
@media only screen and (min-width: 1024px) {
	.template-3 {
		display: flex;
	}
}
.template-3__left {
	background-color: #f8f8f8;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	flex-basis: 40%;
	height: 20%;
	position: relative;
}
.template-3__left::before {
	background: linear-gradient(rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0.5));
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

@media only screen and (min-width: 1024px) {
	.template-3__left {
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 60% center;
		position: fixed;
		width: 40%;
	}
}
.template-3__right {
	flex-basis: 60%;
	height: 100%;
}
@media only screen and (min-width: 1024px) {
	.template-3__right {
		margin-left: 40%;
	}
}

.template-4 {
	height: 100vh;
	width: 100%;
	background-size: cover;
}
@media only screen and (min-width: 1024px) {
	.template-4 {
		max-width: 1360px;
		margin: 0 auto;
		padding: 0 30px;
	}
}
.template-4__top {
	background-color: #f8f8f8;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	flex-basis: 40%;
	height: 20%;
}
@media only screen and (min-width: 1024px) {
	.template-4__top {
		height: 215px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center 70%;
		width: 100%;
		margin-top: 40px;
		border-radius: 10px;
	}
}
.template-4__bottom {
	flex-basis: 60%;
	height: 100%;
}

.template-5 {
	height: 100vh;
	width: 100%;
	background-size: cover;
}
.template-5__top {
	background-color: #f8f8f8;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	flex-basis: 40%;
	height: 20%;
}
@media only screen and (min-width: 1024px) {
	.template-5__top {
		height: 215px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center 70%;
		width: 100%;
	}
}
.template-5__bottom {
	flex-basis: 60%;
	height: 100%;
}

.template__title {
	text-align: center;
	padding: 100px 30px 50px 30px;
	position: relative;
	z-index: 2;
}

@media only screen and (min-width: 1024px) {
	.template__title {
		font-size: 24px;
		font-size: 1.5rem;
	}
}
.template__title--red {
	color: var(--form-custom-color-primary);
}
.template__title--secondary {
	color: #ffffff;
}
@media only screen and (min-width: 1024px) {
	.template__title--secondary {
		font-size: 36px;
		font-size: 2.25rem;
	}
}

.not-found {
	background: url(../img/template-bg-1.jpg) no-repeat center 0;
	background-size: cover;
	min-height: 100vh;
	background-attachment: fixed;
	width: 100%;
}
.not-found div {
	font-size: 250px;
	font-size: 15.625rem;
	color: #333333;
	opacity: 0.2;
	text-align: center;
	padding: 40px;
}
.not-found h5 {
	font-size: 40px;
	font-size: 2.5rem;
	text-align: center;
	color: #ed1c27;
	text-transform: uppercase;
	padding: 0 40px 40px 40px;
}
.not-found p {
	font-size: 20px;
	font-size: 1.25rem;
	text-align: center;
}

.nf-form-fields-required {
	display: none;
}

/*
	Init Styles:
	Form custom colors
*/

/* Stars list */

.form-custom-colors .starrating {
	display: block;
}

.form-custom-colors .stars {
	overflow: inherit !important;
	margin: 0 !important;
	display: inline-flex;
	position: relative;
	flex-wrap: wrap;
}

.nps .stars,
.satisfaccion .stars,
.sencillo-1 .stars,
.sencillo-2 .stars,
.confiable-1 .stars,
.confiable-2 .stars,
.amigable-1 .stars,
.amigable-2 .stars {
	padding-top: 24px;
}

.nps .stars::after,
.satisfaccion .stars::after,
.sencillo-1 .stars::after,
.sencillo-2 .stars::after,
.confiable-1 .stars::after,
.confiable-2 .stars::after,
.amigable-1 .stars::after,
.amigable-2 .stars::after {
	left: inherit !important;
	right: 0;
}

/* Star item */

.form-custom-colors .star {
	background: none !important;
	cursor: pointer !important;
	font-size: 9vw;
	line-height: inherit !important;
	position: relative !important;
	transform: none !important;
	width: 9vw !important;
	height: 9vw !important;
}

@media screen and (min-width: 501px) {
	.form-custom-colors .star {
		font-size: 45px;
		width: 45px !important;
		height: 45px !important;
	}

	.template-root.is-template-indicators .form-custom-colors .star {
		font-size: 9vw;
		width: 9vw !important;
		height: 9vw !important;
	}
}

@media screen and (min-width: 713px) {
	.template-root.is-template-indicators .form-custom-colors .star {
		font-size: 64px;
		width: 64px !important;
		height: 64px !important;
	}
}

@media screen and (min-width: 1024px) {
	.template-2.template-root.is-template-indicators .form-custom-colors .star {
		font-size: 4.3vw;
		width: 4.3vw !important;
		height: 4.3vw !important;
	}

	.template-3.template-root.is-template-indicators .form-custom-colors .star {
		font-size: 5.6vw;
		width: 5.6vw !important;
		height: 5.6vw !important;
	}
}

@media screen and (min-width: 1146px) {
	.template-3.template-root.is-template-indicators .form-custom-colors .star {
		font-size: 64px;
		width: 64px !important;
		height: 64px !important;
	}
}

@media screen and (min-width: 1445px) {
	.template-2.template-root.is-template-indicators .form-custom-colors .star {
		font-size: 61px;
		width: 61px !important;
		height: 61px !important;
	}
}

.form-custom-colors .star:last-child {
	margin-right: 0;
}

.form-custom-colors .star::before {
	content: "\e9d7";
	font-family: "icomoon-custom-star";
	color: var(--form-custom-color-primary);
}

.template-root.is-template-indicators .form-custom-colors .star::before {
	content: "\e9d9";
	opacity: 0.2;
}

.template-root.is-template-indicators .form-custom-colors .star:after {
	content: attr(title);
	font-size: 11px;
	position: absolute;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%);
	line-height: 1;
}

@media screen and (min-width: 375px) {
	.template-root.is-template-indicators .form-custom-colors .star:after {
		font-size: 13px;
	}
}

@media screen and (min-width: 500px) {
	.template-root.is-template-indicators .form-custom-colors .star:after {
		font-size: 16px;
		top: 60%;
	}
}

.template-root.is-template-indicators .form-custom-colors .star:nth-child(1)::before,
.template-root.is-template-indicators .form-custom-colors .star:nth-child(2)::before,
.template-root.is-template-indicators .form-custom-colors .star:nth-child(3)::before,
.template-root.is-template-indicators .form-custom-colors .star:nth-child(4)::before,
.template-root.is-template-indicators .form-custom-colors .star:nth-child(5)::before,
.template-root.is-template-indicators .form-custom-colors .star:nth-child(6)::before {
	color: var(--form-custom-color-detractor);
}

.template-root.is-template-indicators .form-custom-colors .star:nth-child(7)::before,
.template-root.is-template-indicators .form-custom-colors .star:nth-child(8)::before {
	color: var(--form-custom-color-neutral);
}

.template-root.is-template-indicators .form-custom-colors .star:nth-child(9)::before,
.template-root.is-template-indicators .form-custom-colors .star:nth-child(10)::before {
	color: var(--form-custom-color-promoter);
}

.form-custom-colors .star.fullStar::before {
	content: "\e9d9";
	color: var(--form-custom-color-primary);
}

.form-custom-colors .star.fullStar.detractorStar::before {
	color: var(--form-custom-color-detractor);
	opacity: 0.8;
}

.form-custom-colors .star.fullStar.neutralStar::before {
	color: var(--form-custom-color-neutral);
	opacity: 0.8;
}

.form-custom-colors .star.fullStar.promoterStar::before {
	color: var(--form-custom-color-promoter);
	opacity: 0.8;
}

.form-custom-colors .star.tmp_fs::before,
.form-custom-colors .star.fullStar.tmp_fs::before {
	content: "\e9d9";
	color: var(--form-custom-color-primary);
}

.form-custom-colors .star.tmp_es::before,
.form-custom-colors .star.fullStar.tmp_es::before {
	content: "\e9d7";
	color: var(--form-custom-color-primary);
}

.template-root.is-template-indicators .form-custom-colors .star.tmp_fs::before,
.template-root.is-template-indicators .form-custom-colors .star.fullStar.tmp_fs::before {
	opacity: 0.8;
}

.template-root.is-template-indicators .form-custom-colors .star.fullStar.tmp_es::before {
	opacity: 0.2;
	content: "\e9d9";
}

/* Label */

.form-custom-colors .nf-form-content .nf-field-label label {
	color: var(--form-custom-color-primary) !important;
}

/* Submit button */

.form-custom-colors .nf-form-content .nf-field-container.submit-container .nf-field-element .ninja-forms-field {
	background-color: var(--form-custom-color-primary) !important;
	border: 1px solid var(--form-custom-color-primary) !important;
}

.form-custom-colors .nf-form-content .nf-field-container.submit-container .nf-field-element .ninja-forms-field:hover {
	color: var(--form-custom-color-primary) !important;
	background-color: #fff !important;
}

/* Breadcrumb */

.form-custom-colors .nf-breadcrumbs .active > .nf-breadcrumb {
	background-color: var(--form-custom-color-primary) !important;
}

/* Header */

.form-custom-colors .nf-mp-header .nf-progress {
	background-color: var(--form-custom-color-primary) !important;
}

/* Navigation */

.form-custom-colors .nf-next-item .nf-next,
.form-custom-colors .nf-previous-item .nf-previous {
	color: var(--form-custom-color-primary) !important;
}

.form-custom-colors .nf-next-item::before,
.form-custom-colors .nf-previous-item::before {
	color: var(--form-custom-color-primary) !important;
}

.form-custom-colors .nf-next-previous input:hover {
	background-color: var(--form-custom-color-primary) !important;
	color: #fff !important;
}

.form-custom-colors .nf-next-item:hover::before,
.form-custom-colors .nf-previous-item:hover::before {
	color: #fff !important;
}

/* Rating */

.listradio-wrap .nf-field-element ul label {
	cursor: pointer !important;
}

.listradio-wrap .nf-field-element ul label:hover::after {
	background: var(--form-custom-color-primary);
	opacity: 0.07;
}

.listradio-wrap .nf-field-element ul.list-radio-indicators li label::after {
	opacity: 0.12;
}

.listradio-wrap .nf-field-element ul.list-radio-indicators li label:hover::after {
	opacity: 0.3;
}

.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(1) label::after,
.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(2) label::after,
.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(3) label::after,
.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(4) label::after,
.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(5) label::after,
.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(6) label::after,
.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(7) label::after {
	background: var(--form-custom-color-detractor);
}

.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(8) label::after,
.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(9) label::after {
	background: var(--form-custom-color-neutral);
}

.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(10) label::after,
.listradio-wrap .nf-field-element ul.list-radio-indicators li:nth-child(11) label::after {
	background: var(--form-custom-color-promoter);
}

.listradio-wrap .nf-field-element ul label.nf-checked-label {
	border: 1px solid var(--form-custom-color-primary) !important;
	border-radius: 5px !important;
	overflow: hidden !important;
}

.listradio-wrap .nf-field-element ul label:after {
	border: none !important;
	border: 0 !important;
	transition: none !important;
}

.listradio-wrap .nf-field-element ul label.nf-checked-label:after {
	background: var(--form-custom-color-primary) !important;
	opacity: 0.07;
}

.listradio-wrap .nf-field-element ul label.nf-checked-label:before {
	color: var(--form-custom-color-primary) !important;
}

.listradio-wrap .nf-field-element ul.list-radio-indicators label.nf-checked-label:after {
	opacity: 0.3;
}

.listradio-wrap .nf-field-element ul.list-radio-indicators.detractorRating label.nf-checked-label {
	border: 1px solid var(--form-custom-color-detractor) !important;
}

.listradio-wrap .nf-field-element ul.detractorRating label.nf-checked-label:after {
	background: var(--form-custom-color-detractor) !important;
}

.listradio-wrap .nf-field-element ul.detractorRating label.nf-checked-label:before {
	color: var(--form-custom-color-detractor) !important;
}

.listradio-wrap .nf-field-element ul.list-radio-indicators.neutralRating label.nf-checked-label {
	border: 1px solid var(--form-custom-color-neutral) !important;
}

.listradio-wrap .nf-field-element ul.neutralRating label.nf-checked-label:after {
	background: var(--form-custom-color-neutral) !important;
}

.listradio-wrap .nf-field-element ul.neutralRating label.nf-checked-label:before {
	color: var(--form-custom-color-neutral) !important;
}

.listradio-wrap .nf-field-element ul.list-radio-indicators.promoterRating label.nf-checked-label {
	border: 1px solid var(--form-custom-color-promoter) !important;
}

.listradio-wrap .nf-field-element ul.promoterRating label.nf-checked-label:after {
	background: var(--form-custom-color-promoter) !important;
}

.listradio-wrap .nf-field-element ul.promoterRating label.nf-checked-label:before {
	color: var(--form-custom-color-promoter) !important;
}
