/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


html {
	scroll-behavior: smooth !important;
	outline: none !important;
}

:root {
	--red-bg: rgb(18, 18, 20);
	--black-wrapper: white;
	--purple-principal: rgb(130, 87, 229);
	--gray-principal: rgb(204, 204, 204);
	--dash-bg: red;
	--dash-wrapper: red;
	--dash-font-gray: red;
}

body {
	background: linear-gradient(-135deg, #C60000 20%, rgba(255, 0, 0, 0.8) 80%) center no-repeat;
	font-family: 'Poppins', sans-serif;
	/*overflow: overlay;*/
	width: 100%;
	outline: none !important;
}

button:hover, button:active, button:focus {
	outline: none;
}

section {
	outline: none;
}

.form-control {
	border: 0 !important;
}

.dropdown-toggle::after {
	display: none !important;
}

.new-span {
	background-color: #e0635a;
	padding: .3rem .5rem;
	color: white;
	font-weight: 500;
	font-size: .6rem;
	margin-left: 7px;
	bottom: 5px;
	position: relative;
	transition: .3s ease-in-out;
}

.jw-controlbar {
	z-index: 99999 !important;
}

.dropdown-menu {
	background: var(--dash-wrapper) !important;
	box-shadow: 0px 11px 15px 0px rgba(0,0,0,0.3) !important;
	margin-top: 2.5rem !important;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.dropdown-item {
	color: var(--dash-font-gray);
	font-size: .9rem;
	padding: .5rem 1rem;
}

.dropdown-item:hover {
	background: var(--dash-bg) !important;
	color: var(--dash-font-gray) !important;
}

.dropdown-item i {
	margin-right: .7rem;
	color: var(--purple-principal) !important;
}

.class-title:hover {
	transition: .3s ease-in-out;
	border-left: 7px solid var(--purple-principal);
	cursor: default;
}

.dropdown-menu .show {
	transform: translate3d(-10rem, 3rem, 0px) !important;
}



.old-price {
	color: rgba(255,255,255,0.5);
	text-decoration: line-through;
	font-size: .85rem;
}

.new-price {
	color: white;
	font-size: 1.05rem;
	font-weight: 500;
}

/* General */

.class-content span {
	color: white;
	font-weight: 400;
}

#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
}

#particles-js-class {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999999 !important;
}

.particles-js-canvas-el {
	z-index: 999 !important;
}

.h-100 {
	height: 100% !important;
}

.green-btn {
	background: #0acf97;
	padding: .6rem 1.3rem !important;
	color: white !important;
	font-weight: 600 !important;
	font-size: .8rem;
	border-radius: 15rem;
	position: relative;
	bottom: 3px;
	box-shadow: 0 0.15rem 1.75rem 0 rgba(31, 45, 65, 0.15);
	border: 0;
	transition: .2s ease-in-out;
	text-transform: uppercase;
	margin-top: 5rem;
	cursor: pointer;
	transition: .2s ease-in-out;
}

.green-btn i {
	font-size: .6rem;
	position: relative;
	bottom: 1px;
	transition: .2s ease-in-out;
	opacity: .7;
}

.green-btn:hover {
	cursor: pointer;
}

.green-btn:hover i {
	padding-left: .3rem;
	transition: .2s ease-in-out;
}


/* */


#landing {
	min-height: 100vh;
	width: 100%;
	/*background: url('../img/wave.png'), var(--black-bg) center no-repeat;*/
	background: url('../img/wave.png'), linear-gradient(135deg, #7b4397 0%, #dc2430 100%) center no-repeat;
	/*background: url('../img/wave.png'), linear-gradient(135deg, #ff00cc 0%, #333399 100%) center no-repeat;*/
	background-size: cover;
	overflow-x: hidden;
	padding-left: 7rem;
	padding-right: 7rem;
	overflow-y: hidden;
}

#class-section {
	min-height: 100vh;
	width: 100%;
	background: var(--black-bg);
	background-size: cover;
	overflow-x: hidden;
	padding-left: 7rem;
	padding-right: 7rem;
	z-index: 99999 !important;
}

.class-content {
	padding-top: 5rem;
	position: relative;
	z-index: 999999 !important;
}

.class-content p {
	color: white;
	font-weight: 400;
	padding-left: 1rem;
	border-left: 4px solid var(--purple-principal);
	display: inline-block;
}

.class-content img {
	width: 3.2rem;
	margin-right: 1rem;
	display: inline-block;
}

#landing .container {
	height: 100vh;
}

#landing svg {
	position: absolute;
	bottom: -5rem;
	right: 0rem;
	width: 100%;
	fill: black !important;
	opacity: .05;
}

.landing-text {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	z-index: 99;
}

.landing-text h1 {
	color: white;
	font-weight: 700;
	font-size: 2rem;
	width: 110%;
	margin-bottom: 1rem;
}

.landing-text p {
	color: white;
	font-weight: 400;
	font-size: .9rem;
	opacity: .7;
	width: 90%;
}

.landing-img {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.landing-img img {
	width: 70%;
	margin: 0 auto;
	z-index: 99999;
}

.landing-img #blob {
	opacity: .05;
	z-index: 999;
	position: absolute;
	width: 100%;
	right: 0rem;
}



#landing .social {
	background: rgba(255,255,255,0.1);
	position: absolute;
	left: 0;
	bottom: 5rem;
	padding: .5rem 1rem;
	border-top-right-radius: 5rem;
	border-bottom-right-radius: 5rem;
	z-index: 999;
	transition: .3s ease-in-out;
}

.down-page-btn a {
	position: absolute;
}

#landing .social:hover {
	transition: .3s ease-in-out;
	padding-left: 2rem;
}

#landing .social ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: inline-block;;
}

#landing .social ul li {
	display: inline-block;
}

#landing .social .social-circle {
	background: white;
	height: 2.3rem;
	width: 2.3rem;
	display: flex;
	align-items: center;
	border-radius: 50%;
	margin-left: .5rem;
	position: relative;
}

#landing .social .social-circle i {
	color: #727CF5;
	font-size: 1.1rem;
	margin: 0 auto;
}

#landing .down-page {
	position: absolute;
	bottom: 3rem;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 99999999;
}

#landing .down-page a {
	margin: 0 auto;
	background: none;
	border: 0;
	width: 2.2rem !important;
	height: 2.2rem;
	bottom: -1rem;
}

#landing .down-page a .dot {
	width: 2.3rem;
	height: 2.3rem;
	display: flex;
	align-items: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	margin: 0 auto;
	color: white;
	font-size: 1rem;
	transition: .2s ease-in-out;
}


#landing .down-page a .dot:hover {
	transition: .2s ease-in-out;
}

#landing .down-page a .dot:hover i {
	transition: .2s ease-in-out;
	padding-top: .3rem;
}

#landing .down-page a .dot i {
	transition: .2s ease-in-out;
	margin: 0 auto;
}

#features {
	width: 100%;
	background: #fefefe;
	height: auto;
}

.landing-btn {
	/*margin-top: 2rem;*/
	margin-top: 3rem;
}

.features {
	padding-right: 10rem;
	padding-left: 10rem;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.features .features-subtitle {
	color: #687281;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
	opacity: .7;
}

.features .features-title {
	color: #687281;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
}

.features .features-title span {
	color: #727CF5;
}

.feature {
	width: 100%;
	margin: 0 auto;
	background: white;
	border-radius: 2rem;
	padding: 2rem 2rem;
	box-shadow: 0 0.15rem 1.75rem 0 rgba(31, 45, 65, 0.05);
	text-align: center;
	height: 100%;
}

.feature p {
	color: #687281;
	font-weight: 400;
	font-size: .85rem !important;
	opacity: .6;
	width: 100%;
	margin-bottom: 0;
}

.feature h2 {
	color: #687281;
	font-weight: 600;
	font-size: 1.2rem !important;
	opacity: .8;
	width: 100%;
	margin-bottom: 1rem;
}


.feature img {
	width: 4.4rem;
	height: 4.4rem;
	margin-bottom: 1rem;
}

.vh {
	height: 100vh;
}

/* Product */

#product {
	width: 100%;
	height: 100%;
	padding: 4rem;
	background: linear-gradient(135deg, #727cf5 0%, rgba(105, 0, 199, 0.8) 100%);
	padding-left: 10rem;
	padding-right: 8rem;
}

#product .product-title {
	color: white;
	font-weight: 700;
	font-size: 1.6rem;
	margin-bottom: 1rem;
}

#product .product-subtitle {
	color: white;
	font-weight: 400;
	font-size: .9rem;
	opacity: .7;
}

#product ul {
	list-style-type: none;
	padding: 0;
	/*padding-left: 17px;*/
}

#product ul li i {
	margin-right: 15px;
	opacity: .6;
}

#product ul li {
	font-size: .9rem;
	font-weight: 400;
	padding-top: .1rem;
	padding-bottom: .1rem;
	opacity: .8;
	color: white;
}

.product-img {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.product-img img {
	width: 60%;
	margin: 0 auto;
}

/* */


/* Feedback */

#feedback {
	width: 100%;
	background: #fefefe;
	height: auto;
	padding-right: 7rem;
	padding-left: 7rem;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

#feedback .feedback-title {
	color: #687281;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
}

#feedback .feedback-title span {
	color: #727CF5;
	font-weight: 600;
}

#feedback .feedback-subtitle {
	color: #687281;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
	opacity: .7;
}

.students-coments {
	width: 100% !important;
}

.comment {
	width: 100%;
	height: auto;
	background: white;
	padding: 2rem;
	margin-right: .5rem;
	border-radius: 2rem;
	outline: 0 !important;
	box-shadow: 0 0.15rem .8rem 0 rgba(31, 45, 65, 0.05);
	margin-top: 2rem;
	margin-bottom: 2rem;
	margin-left: .5rem;
	transition: bottom .3s ease-in-out !important;
	position: relative;
	bottom: 0;
} 

.comment:hover {
	position: relative;
	bottom: 10px;
	transition: bottom .3s ease-in-out !important;
}

.comment-title {
	width: 100%;
	height: auto;
	display: inline-block !important;
	position: relative;
	top: -.5rem;
}

.comment-title img {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(0,0,0,0.04);
	background-color: rgba(0,0,0,0.02);
	display: inline-block !important;
}

.comment-subtitle {
	display: inline-block !important;
	margin-left: .4rem;
	text-align: left;
	position: relative;
	top: .9rem;
}

.comment-subtitle p {
	margin: 0;
	color: #687281;
	font-size: .95rem;
	font-weight: 600;
	opacity: 1;
}

.comment-subtitle span {
	margin: 0;
	color: #687281;
	font-size: .85rem;
	font-weight: 400;
	opacity: .6;
	position: relative;
	bottom: .2rem;
}

.comment-text {
	margin-top: .5rem;
}

.comment-text p {
	color: #687281;
	font-weight: 400;
	font-size: .85rem !important;
	opacity: .5;
	width: 100%;
	margin-bottom: 0;
}

.comment-rating {
	width: 100%;
	height: auto;
	margin-top: .6rem;
}


.comment-rating ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.comment-rating ul li i {
	color: #edc842;
	font-size: .9rem;
}

.comment-rating ul li {
	display: inline-block;
}

/**/

/* Login */

#login-section, #register-section {
	background: var(--black-bg);
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	height: auto !important;
}

.login-wrapper, .register-wrapper {
	width: 100%;
	max-width: 480px;
	background: none;
	border-radius: 5px;
	padding: 64px;
	margin: 0 auto;
	z-index: 999;
	position: relative;
	border-top: 4px solid white;
}

.login-blur {
	position: absolute;
	top: 5rem;
	left: 0;
	right: 0;
	-webkit-transform: translateY(-25%);
	-ms-transform: translateY(-25%);
	transform: translateY(-25%);
	width: 90%;
	height: 100%;
	margin: 0 auto;
	background: radial-gradient( 50% 50% at 50% 50%,#8257e6 0%,rgba(18,18,20,0) 100% );
	opacity: 0.15;
}

.auth-form .submit {
	position: relative;
}

.auth-form .loading {
	position: absolute;
	left: 1rem;
	top: 2.2rem;
	display: none;
}

.auth-form .loading img {
	width: 1.5rem;
	height: 1.5rem;
}

.register-blur {
	position: absolute;
	top: 5rem;
	left: -6rem;
	right: 0;
	-webkit-transform: translateY(-25%);
	-ms-transform: translateY(-25%);
	transform: translateY(-25%);
	width: 130%;
	height: 100%;
	margin: 0 auto;
	background: radial-gradient( 50% 50% at 50% 50%,#8257e6 0%,rgba(18,18,20,0) 100% );
	opacity: 0.15;
}


.auth-form input {
	width: 100%;
	height: 50px;
	font-size: 16px;
	background: crimson;
	border-color: none;
	color: white !important;
	padding: 0px 1em 0px 2.65em;
	border-radius: 5px;
	margin-bottom: 1rem;
	font-weight: 400;
}

.auth-form input:placeHolder {
	color: gray !important;
	font-weight: 400 !important;
}

.auth-form .link {
	color: var(--purple-principal);
	font-weight: 500;
	font-size: .85rem;
	opacity: .8;
	transition: .2s ease-in-out;
}

.auth-form .link:hover {
	opacity: 1;
	transition: .2s ease-in-out;
}

.auth-form .submit-button {
	background: var(--purple-principal);
	border-radius: 5px;
	border: 0px;
	color: rgb(255, 255, 255);
	font-size: 16px;
	font-weight: bold;
	height: 50px;
	transition: background 0.2s ease 0s, color 0.2s ease 0s;
	text-transform: uppercase;
	width: 100%;
}

.purple-button:disabled {
	background: rgb(65, 53, 107);
	color: rgba(255, 255, 255, 0.35);
	cursor: not-allowed;
}

.auth-form .submit-button:disabled {
	background: rgb(65, 53, 107);
	color: rgba(255, 255, 255, 0.35);
	cursor: not-allowed;
}

.login-link, .register-link {
	width: 100%;
	text-align: left;
}

.auth-form .logo {
	margin-bottom: 2rem;
}

.auth-form .logo img {
	width: 4rem;
}

.auth-form h2 {
	color: var(--gray-principal);
	font-weight: 700;
	font-size: 1.5rem;
	transition: .2s ease-in-out;
	margin-bottom: 1rem;
	margin-top: 0;
}

.auth-form .logo span {
	color: white;
	font-weight: 500;
	font-size: 1.2rem;
	margin-left: .5rem;
}

.auth-form input:focus, .auth-form input:active {
	background: var(--black-bg);
	border-color: none !important;
	outline: 0 !important;
	box-shadow: 0 !important;
	border: 0 !important;
}

.auth-form p {
	color: var(--gray-principal);
	font-weight: 500;
	font-size: .85rem;
	transition: .2s ease-in-out;
}

.login-message-wrapper, .register-message-wrapper {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
}

.login-message-wrapper p, .register-message-wrapper p {
	color: var(--gray-principal);
	font-weight: 300;
	font-size: 1.2rem;
	transition: .2s ease-in-out;
	margin-bottom: .5rem;
}

.login-message-wrapper h1 {
	color: var(--gray-principal);
	font-weight: 700;
	font-size: 2.5rem;
	transition: .2s ease-in-out;
}

.register-message-wrapper h1 {
	color: var(--gray-principal);
	font-weight: 700;
	font-size: 2.5rem;
	transition: .2s ease-in-out;
	width: 80%;
}

.register-message-wrapper .link {
	color: var(--purple-principal);
	font-weight: 500;
	font-size: .85rem;
	opacity: .8;
	transition: .2s ease-in-out;
}

.register-message-wrapper .link:hover {
	opacity: 1;
	transition: .2s ease-in-out;
}

.input-icon {
	position: relative;
}

.input-icon i {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	fill: rgb(40, 39, 44);
	font-size: 14px;
	transition: fill 0.2s ease 0s;
}


/* Partners */

#partners {
	width: 100%;
	height: auto;
	padding-top: 3rem;
	padding-bottom: 3rem;
	background: #f7f7f7;
}

#partners .partners-title {
	color: #687281;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
}

#partners .partners-title span {
	color: #727CF5;
}

#partners .partners-subtitle {
	color: #687281;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
	opacity: .7;
}

#partners .partner {
	width: 100%;
	height: auto;
	text-align: center;
	margin-top: 1rem;
}

#partners .partner img {
	width: 40%;
	margin: 0 auto;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    
	-webkit-filter: grayscale(75%);
	-moz-filter: grayscale(75%);
	-ms-filter: grayscale(75%);
	filter: grayscale(75%);
	filter: gray; /* IE 6-9 */
	transition: .3s ease-in-out;
	border-radius: 50%;
	object-fit: cover;
	background-color: rgba(0,0,0,0.05);

}

#partners .partner img:hover {
	-webkit-filter: none;
	-moz-filter: none;
	-ms-filter: none;
	filter: none;
	transition: .3s ease-in-out;
}

.class-content a {
	color: var(--purple-principal);
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
}

.class-content a:hover {
	color: var(--purple-principal);
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
}

/* */

/* Footer */

footer {
	width: 100%;
	height: auto;
	padding: 3rem;
	text-align: center;
	background: #fefefe;
	padding-right: 5rem;
	padding-left: 5rem;
}

.footer-text {
	color: rgba(104, 114, 129, 0.5);
	font-size: .85rem;
	font-weight: 500;
	text-align: center;
}

.purple-txt:hover {
	color: #727CF5;
}

.purple-txt {
	color: #727CF5;
	opacity: 1 !important;
}


/* */

/* Navbar */

nav {
	box-shadow: none !important;
	z-index: 9999999999999;
	width: 101% !important;
}

nav img {
	width: 3.5rem;
	position: relative;
	bottom: 0px;
}

.nav-item a {
	text-transform: uppercase;
	font-weight: 500;
}

.nav-item a:hover {
	background: rgba(0,0,0,0.04);
}

.nav-item {
	padding: 0 10px;
	font-size: .8rem;
	font-weight: 500;
}

.nav-button {
	/*background: #0acf97;*/
	background: #727cf5;
	padding: .3rem 1.3rem !important;
	margin-top: 5px;
	color: white !important;
	font-weight: 600 !important;
	font-size: .8rem;
	border-radius: 15rem;
	position: relative;
	bottom: 3px;
	box-shadow: 0 0.15rem 1.75rem 0 rgba(31, 45, 65, 0.05);
	transition: .2s ease-in-out;
}

.off-span {
	background: #727cf5;
	color: white;
	font-weight: 600;
	font-size: .7rem;
	padding: .25rem .7rem;
	box-shadow: 0px 3px 10px rgba(0,0,0,0.05);
	border-radius: 1rem;
}

.navbar-dark {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

.nav-button i {
	font-size: .6rem;
	position: relative;
	bottom: 1px;
	transition: .2s ease-in-out;
	opacity: .6;
}

.nav-button a {
	color: white !important;
}

.nav-button:hover {
	/*background: #0acf97 !important;*/
	background: #727cf5 !important;
	color: white !important;
}

.nav-button:hover a {
	color: white !important;
}

#navbar {
	background: #060606;
	padding-left: 7rem !important;
	padding-right: 7rem !important;
}

.navbar-light {
	box-shadow: 0 0.15rem 1.75rem 0 rgba(31, 45, 65, 0.10) !important;
	padding-top: .3rem !important;
	padding-bottom: .3rem !important;
}

.navbar-dark {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

.navbar.navbar-light .breadcrumb .nav-item .nav-link, .navbar.navbar-light .navbar-nav .nav-item .nav-link {
	color: #687281;
}

.navbar.navbar-light .breadcrumb .nav-item .nav-link .green-btn, .navbar.navbar-light .navbar-nav .nav-item .nav-link .green-btn {
	color: white !important;
}

.nav-button:hover i {
	margin-left: .5rem !important;
}

.navbar-white {
	background: white !important;
}

.nav-white .nav-text {
	color: #687281;	
}

.navbar-transparent {
	background: transparent !important;
}

.nav-transparent .nav-text {
	color: white;	
}

.white-text {
	color: white !important;
}

.nav-logo {
	color: white;
	font-size: 1.8rem;
	text-shadow: -0.06em 0 rgba(255, 4, 171, 0.75), 0.06em 0 rgba(0,255,255, 0.75);
	display: none;
}

.nav-logo:hover {
	text-shadow: -0.06em 0 rgba(0,255,255, 0.75), 0.06em 0 rgba(255, 4, 171, 0.75);
}

.terms-div {
	color: white;
	font-size: .8rem !important;
	margin-bottom: 1.5rem;
	font-weight: 500;
}

.terms-div a {
	color: #0acf97;
	font-weight: 400;
}

.terms-div input {
	margin-right: 5px;
	position: relative;
	top: 2px;
}

/* Dashboard */


#dashboard-body {
	background: var(--dash-bg) !important;
	color: white;
}

#dash-nav {
	background: var(--dash-wrapper);
	width: 100% !important;
	height: auto;
	padding: 1rem 3rem;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0px 11px 15px 0px rgba(0,0,0,0.08) !important;
	z-index: 999;
}

#dash-nav .nav-content-left {
	text-align: left;
	width: 100%;
}

#dash-nav .nav-content-left img {
	width: 4rem;
}

#dash-nav .nav-content-right {
	text-align: left;
	width: 100%;
}

#dash-nav .nav-profile img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,0.2);
}

#dash-nav .nav-profile {
	display: flex;
	align-items: center;
	width: auto;
	height: 100%;
	float: right;
}

#dash-nav .nav-profile .username {
	text-align: right;
	display: inline-grid;
	margin-right: .7rem;
}

#dash-nav .nav-profile .username p {
	margin-bottom: 0;
	color: var(--dash-font-gray);
	font-size: .9rem;
	font-weight: 400;
	display: inline-block;
}

#dash-nav .nav-profile .username span {
	color: var(--dash-font-gray);
	font-size: .75rem;
	font-weight: 400;
	display: inline-block;
	opacity: .6;
}

#dash-section {
	width: 100%;
	min-height: 100vh;
	height: auto;
	padding-top: 9rem;
	padding-bottom: 5rem;
}

.home-progress-wrapper {
	display: flex;
	align-items: center;
}

.home-progress-wrapper p {
	color: var(--dash-font-gray);
	font-size: 1.4rem;
	font-weight: 500;
}

.home-progress-wrapper .username {
	color: white;
	font-weight: 600;
	font-size: 1.7rem;
}

#strings-load {
	width: 100%;
	height: 55vh;
	display: flex;
	align-items: center;
	display: none;
}

#strings-load img {
	margin: 0 auto;
	width: 4rem;
	opacity: .7;
}

.filter-title p {
	font-weight: 900 !important;
	text-transform: uppercase;
	opacity: .7;
}

.filter-title {
	margin-bottom: 2.5rem !important;
}

.dash-wrapper {
	background: var(--dash-wrapper);
	width: 100%;
	height: auto;
	border-radius: 20px;
	padding: 50px;
	box-shadow: 0px 11px 15px 0px rgba(0,0,0,0.08) !important;
}

.dash-wrapper .title {
	margin-bottom: 0;
	color: var(--dash-font-gray);
	font-size: 1.1rem;
	font-weight: 400;
	display: inline-block;
}

.announcements-date .date {
	margin-bottom: 1.5rem;
}


.announcements-date .date .dot {
	background: rgba(130, 87, 229, 0.3);
	display: inline-flex;
	align-items: center;
}

.announcements-date .date span {
	color: white;
	font-weight: 500;
	font-size: 1.1rem;
	margin-left: .5rem;
	position: relative;
	bottom: 2px;
}

.announcement-time {
	margin-bottom: 0;
	font-size: .95rem;
	font-weight: 400;
}

.announcement-time .new-span {
	position: relative;
	top: -3px;
	left: 4px;
	background: #E55E5E;
	font-weight: 500;
	padding-right: .7rem;
	padding-left: .7rem;
	border-radius: 2px;
}

.announcements-date .date .dot .inner-dot {
	width: 1rem;
	height: 1rem;
	margin: 0 auto;
	background: var(--purple-principal);
	border-radius: 50%;
}

.wrapper-strings {
	width: 25rem !important;
}

.home-data i {
	color: var(--purple-principal);
	font-size: 1.4rem;
	margin-right: .5rem;
}

.home-data p {
	margin-bottom: 0;
	color: var(--dash-font-gray);
	font-size: 1.1rem;
	font-weight: 400;
	display: inline-block;
}

.home-data .data-number {
	color: var(--purple-principal);
	font-size: 2.5rem;
	font-weight: 700;
	text-align: right;
	float: right;
	position: relative;
	bottom: 1rem;
}

.changelogs ul {
	padding-left: 0;
	list-style-type: none;
}

#video-container{
	position:relative;
	width:auto;
}

.jw-logo {
	opacity: .065 !important;
	/*right: calc(50% - 130px) !important;
	top: calc(50% - 65px) !important;
		width: 15rem !important;
		height: 6rem !important;*/

/*	right: calc(50% - 290px) !important;
top: calc(50% - 125px) !important;
width: 35rem !important;
height: 13rem !important;*/
/*
right: calc(50% - 40rem) !important;
top: calc(50% - 135px) !important;
width: 80rem !important;
height: 14rem !important;*/
background-repeat: unset !important;

top: calc(30%) !important;
left: calc(-12%) !important;
width: 120% !important;
height: 100% !important;
top: -1rem !important;
}

#particles-js-class {
	height: 100vh !important;
	position: fixed !important;
}

#foreground-text{
	position: absolute;
	top: 50%;
	/* width: 100%; */
	text-align: center;
	margin: 0 auto;
	color: white;
	font: bold 20px;
	left: 45%;
	opacity: .6;
	font-size: 2rem;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}

/* Profile */

.perfil-banner {
	background: url('../img/wave-banner.png'), linear-gradient(135deg, #727cf5 0%, rgba(105, 0, 199, 0.8) 100%) center no-repeat;
	background-size: cover;
	width: 100%;
	height: 20rem;
	position: absolute;
	top: 0;
	left: 0;
}

.perfil-img {
	width: 100%;
	padding: 1rem;
	text-align: center;
	position: relative;
	top: 6rem;
}

.perfil-img .content {
	display: block;
}

.perfil-img img {
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid rgba(0,0,0,0.2);
}

.perfil-img .username {
	margin-bottom: 0;
	color: var(--dash-font-gray);
	font-size: 1.2rem;
	font-weight: 400;
	margin-top: 1rem;
}

#levelupModal .modal-content {
	background: var(--dash-wrapper);
	border-radius: 20px;
	box-shadow: 0px 11px 15px 0px rgb(0 0 0 / 8%) !important;
	padding: 2rem;
	text-align: center;
	padding-bottom: 2rem;
	padding-top: 3rem;
}

#levelupModal .modal-content .levelup-icon i {
	color: var(--purple-principal);
	font-size: 8rem;
}

#levelupModal .modal-content .levelup-title {
	margin-top: 2rem;
	font-size: 1.5rem;
	font-weight: 700 !important;
	color: white !important;
}

#levelup-level {
	color: var(--purple-principal);
}

#levelupModal .modal-content .levelup-subtitle {
	margin-top: .3rem;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--purple-principal);
}

#levelupModal .modal-content .levelup-desc p{
	margin-top: 2rem;
	color: rgba(255,255,255,0.6);
	font-size: 1rem;
	font-weight: 400;
	width: 80%;
	margin: 3rem auto;
}

#levelupModal .modal-content .levelup-desc span {
	color: rgba(255,255,255,1);
	margin: 0;
}

.perfil-img .group {
	color: var(--dash-font-gray);
	font-size: .85rem;
	font-weight: 400;
	display: inline-block;
	opacity: .6;
}

.section-title {
	margin-bottom: 0;
	color: var(--dash-font-gray);
	font-size: 1.1rem;
	font-weight: 400;
	display: inline-block;
}

.client-select button {
	background: rgba(31, 31, 36, 0.5);
	width: 100%;
	height: auto;
	border-radius: 5px;
	padding: 50px;
	box-shadow: 0px 11px 15px 0px rgba(0,0,0,0.08) !important;
	border: 0;
	transition: .3s ease-in-out;
	outline: none;
	height: 100%;
}

.dash-wrapper {
	position: relative;
}

.dash-wrapper .bottom-bar{
	width: 100% !important;
	height: 4rem;
	background: rgba(65,64,81,0.15);
	position: absolute;
	bottom: 0;
	left: 0;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	margin: 0 auto;
	display: block;
	pointer-events: none !important;
}

.home-data-profile p {
	font-size: 1rem !important;
	font-weight: 400 !important;
	color: white !important;
}

.level-number {
	color: white;
	font-size: 1.5rem;
	font-weight: 700;
}

.level-number i {
	color: #8257E5;
	margin-right: 5px;
}

.progress {
	border-radius: 1rem !important;
	background-color: #25252B !important;
	height: .8rem !important;
}

.progress-bar {
	border-radius: 50rem;
}

.progress-bar .percent {
	color: white;
	font-weight: 400;
	font-size: .65rem;
	opacity: .75;
	margin-bottom: 0;
	margin-top: 2px;
}

.action-progress {
	width: 95% !important;
}

.level-wrapper .progress {
	width: 95% !important;
}

.action-progress span {
	position: absolute;
	right: 3rem;
	display: block;
	top: 11.6rem;
	font-weight: 700;
	opacity: .6;
}

.level-wrapper .progress span {
	position: absolute;
	right: 3rem;
	display: block;
	top: 9.25rem;
	font-weight: 700;
	opacity: .6;
}

.progress-bar {
	background: linear-gradient(to right, #8257E5, #C653FF) !important;
} 

.last-action .circle-check {
	width: 3rem;
	height: 3rem;
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(90, 255,172, 0.2);
	border-radius: 50%;
}

.last-action .circle-check i {
	margin: 0 auto;
	font-size: 2.5rem;
	color: #5AFFAC;
	margin-left: .6rem;
	margin-bottom: .4rem;
	display: block;
	transition: .13s ease-in-out;
}

.last-action:hover .circle-check i {
	margin-left: .8rem;
	margin-bottom: .6rem;
	text-shadow: -5px 1px 6px rgba(0, 0, 0, 0.22);
	transition: .13s ease-in-out;
}

.last-action:hover {
	cursor: default;
}

.last-action {
	margin-bottom: 2rem;
}

.dash-wrapper .top-bar{
	width: 100% !important;
	height: 4rem;
	background: rgba(65,64,81,0.15);
	position: absolute;
	top: 0;
	left: 0;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	margin: 0 auto;
	display: block;
	pointer-events: none !important;
}

.level-wrapper {
	background: var(--dash-wrapper) url(../img/wave-level) center no-repeat;
	background-size: contain;
	background-position: center bottom;
	padding-bottom: 9rem;
	height: 100% !important;
}


.last-action {
	width: 100%;
	padding: .5rem;
	display: inline-flex;
}

.last-action-data {
	margin-left: 1rem;
}

.last-action-name {
	color: white;
	font-size: .9rem;
	font-weight: 400;
	margin-bottom: 0;
	word-wrap: break-word;
}

.last-action-date {
	color: #FBCE80;
	font-size: .8rem;
	font-weight: 400;
	margin-bottom: 0;
	word-wrap: break-word;
}

.last-action-date i {
	margin-right: .2rem;
}

.last-action-name span {
	opacity: .5;
	margin-left: .5rem;
}

.action-progress .progress-bar {
	background: linear-gradient(to right, #57E56A, #66FCAC) !important;
}

.profile-label {
	font-size: .75rem;
	font-weight: 400;
	color: rgba(226,226,226,0.4);
	margin-bottom: 0;
}

.profile-data-btn {
	width: 6rem !important;
	position: absolute;
	right: 3rem;
	bottom: 3rem;
	z-index: 999999999;
}

.profile-edit-btn {
	width: 6rem !important;
	position: absolute;
	right: 3rem;
	top: 3.5rem;
	z-index: 999999999;
	transition: .3s ease-in-out;
}

.product-profile {
	width: 100%;
	height: 100%;
}

.product-bg {
	background: var(--dash-wrapper) url(../img/product-img.png) center no-repeat;
	background-size: contain;
	background-position: left bottom;
}

.product-profile-data {
	padding-left: 19rem;
}

.terms-product {
	margin-bottom: 1rem !important;
	font-size: .85rem !important;
	color: rgba(226,226,226,0.4) !important;
}

.terms-product a {
	color: var(--purple-principal);
}

.product-profile-data h1 {
	font-size: 1.4rem;
	font-weight: 700;
	color: white;
	margin-bottom: .5rem;
}

.product-profile-data p {
	font-size: 1rem;
	font-weight: 400;
	color: rgba(226,226,226,0.6);
	margin-bottom: 0;
	max-width: 70%;
	word-wrap: break-word;
}

.product-profile-data .purple-button {
	width: 6rem;
}

.profile-edit-btn:hover {
	transition: .3s ease-in-out;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(255, 255, 255,0.1) !important;
}

.gray-edit {
	background: #414051 !important;
	transition: .3s ease-in-out;
}

.gray-edit:hover {
	transition: .3s ease-in-out;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(255, 255, 255,0.1) !important;
}

.profile-data {
	font-size: 1rem;
	font-weight: 400;
	color: white;
	display: block;
	background: transparent;
	border: none;
	padding-left: 0 !important;
	width: 100%;
}

.profile-data:focus, .profile-data:enabled {
	border: 0 !important;
	box-shadow: none;
	outline: 0 !important;
}

.principal-profile-wrapper {
	height: 100% !important;
	text-align: center;
}

.principal-profile-wrapper .account-username {
	color: white;
	font-weight: 500;
	font-size: 1.15rem;
	text-align: center;
	margin-bottom: 0 !important;
	margin-top: .7rem;
}

.principal-profile-wrapper .account-tag {
	color: rgba(255,255,255,0.45);
	font-weight: 400;
	font-size: .9rem;
	text-align: center;
	margin-bottom: 0;
	margin-top: 0;
}

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999999999999 !important;
	background-color: #151826;
	background: url('../img/icons/loader.png') 50% 50% no-repeat var(--purple-principal);
}

.jw-settings-menu {
	z-index: 99999999999999 !important;
}

.profile-img-wrapper {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

#loading-span-perfil img {
	width: 2rem;
	height: 2rem;
	position: absolute;
	left: 1rem;
	top: 1rem;
	display: none;
}

.perfil-img-select {
	height: 100px;
	width: 100px;
	border-radius: 50%;
	background: transparent;
	margin: 0 auto;
	position: relative;
}

.perfil-camera:hover {
	cursor: pointer;
	background: var(--purple-principal);
	color: rgba(255,255,255,1);
	transition: .3s ease-in-out;
}

.perfil-img-select input[type="file"] {
	display: none;
}

.perfil-img-select img {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid rgba(65,64,81,0.15);
	background-color: rgba(65,64,81,0.15);
}

.perfil-img-select label {
	background: transparent;
	width: 139px;
	height: 139px;
	display: block;
	border-radius: 50%;
	position: relative;
	text-align: center;
	z-index: 100;
	top: -8.5rem;
	left: 0;
	transition: .3s;
}

.perfil-camera {
	background: #1F1F24;
	border-radius: 100%;
	color: rgba(255,255,255,0.5);
	text-align: center;
	font-size: .85rem;
	width: 35px;
	height: 35px;
	padding: 5px;
	position: absolute;
	top: 2rem;
	right: 2rem;
	font-weight: 600;
	border: 3px solid #26262B;
	display: flex;
	align-items: center;
	transition: .3s ease-in-out;
}

.r-1rem {
	right: -1rem;
}

.perfil-camera i{
	margin: 0 auto;
}

.profile-data:disabled {
	pointer-events: none !important;
	-webkit-touch-callout: none !important; /* iOS Safari */
	-webkit-user-select: none !important; /* Safari */
	-khtml-user-select: none !important; /* Konqueror HTML */
	-moz-user-select: none !important; /* Old versions of Firefox */
	-ms-user-select: none !important; /* Internet Explorer/Edge */
	user-select: none !important; /* Non-prefixed version, currently*/
}

.profile-data::placeHolder {
	font-size: 1rem;
	font-weight: 400;
	color: rgba(255,255,255,0.5);
}

.client-select {
	height: 100% !important;
}

.client-select button img {
	width: 70%;
	filter: grayscale(90%);
	filter: gray;
	transition: .3s ease-in-out;
}


.client-select .selected {
	background: var(--purple-principal);
}

.client-select .selected:hover {
	background: #663fbf;
	transition: .3s ease-in-out;
}

.client-select .selected img {
	filter: grayscale(0%);
	filter: gray;
}

.client-select button:hover {
	background: rgba(31, 31, 36, 1);
	transition: .3s ease-in-out;
}

.client-select button:hover img {
	transition: .3s ease-in-out;
	filter: grayscale(0%);
	filter: gray;
}

/* */

.announcement-text, .strings-text {
	margin-bottom: 0;
	color: var(--dash-font-gray);
	font-size: .9rem;
	font-weight: 400;
	display: inline-block;
	opacity: .6;
	margin-bottom: 2rem;
	word-break: break-all;
}

.announcement-text {
	display: block !important;
	margin-bottom: 1.5rem !important;
}

.error-msg-announcement-content {
	margin: 0 auto;
}

.error-msg-announcement {
	height: 70vh;
	display: flex;
	align-items: center;
	text-align: center;
}

.error-msg-announcement p {
	margin: 0 auto;
	margin-bottom: 1rem;
}

.error-msg-announcement button {
	width: 60%;
}

.announcements a, .changelogs a {
	color: var(--purple-principal);
	margin-bottom: 0;
	font-size: .9rem;
	font-weight: 400;
	display: inline-block;
}

.string-wrapper {
	padding: .7rem 1rem;
	width: 100%;
	border-radius: .50rem;
	background: rgba(65,64,81,0.15);
	line-break: auto;
	margin-bottom: .7rem;
}

.string-wrapper p {
	font-size: .9rem;
}

.string-wrapper .client {
	display: inline-block;
	float: left;
	font-size: .7rem;
	position: relative;
	text-transform: uppercase;
	margin-right: 1rem;
	background: rgb(130, 87, 229, 0.2);
	padding: .3rem .7rem;
	border-radius: .35rem;
	color: rgb(130, 87, 229);
	margin-bottom: .7rem;
	font-weight: 500;

}

.string-wrapper .process {
	display: inline-block;
	font-size: .7rem;
	position: relative;
	text-transform: uppercase;
	background: rgba(31, 31, 36, 1);
	padding: .3rem .7rem;
	border-radius: .35rem;
	opacity: .7;
	margin-bottom: .7rem;
	float: right; 
	right: 0; 
	margin-right: 0;
	font-weight: 500;
}

.string-wrapper .free {
	display: inline-block;
	font-size: .7rem;
	position: relative;
	text-transform: uppercase;
	background: rgba(21, 150, 125, 0.25) !important;
	padding: .3rem .7rem;
	border-radius: .35rem;
	opacity: .7;
	margin-bottom: .7rem;
	float: right; 
	right: 0; 
	margin-right: 0;
	font-weight: 500;
	margin-left: .7rem;
	color: rgb(79, 231, 201) !important;

}

div.boxItem { 
	display: inline-block;
	margin-right: 5em;
	position:relative
}

.boxItem:before,
.boxItem:after
{
	content:'';
	width:5em;/* size of your margin */
	border-bottom: 1px solid rgba(204, 204, 204,0.1);
	position:absolute;
	top:50%;

}
:after {
	left:100%;
}
:before {
	right:100%;
}
.boxItem:first-of-type:before,
.boxItem:last-of-type:after {
	display:none;
}
.myBox {
	white-space:nowrap; 
	text-align:center;
}


.dot {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(204, 204, 204,0.2);
	display: flex;
	align-items: center;
}

.dot-green {
	background: rgba(79, 231, 201, 0.2) !important;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(79, 231, 201, 0.2) !important;
}

.dot .inner {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #808080;
	margin: 0 auto;
}

.dot-green .inner {
	background: rgba(79, 231, 201, 0.8) !important;

}

.align-center {
	display: flex;
	align-items: center;
}

.announcements img, .announcement img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,0.05);
}

.changelogs ul li {
	margin-bottom: 0;
	color: var(--dash-font-gray);
	font-size: .9rem;
	font-weight: 400;
	opacity: .6;
	margin-bottom: .5rem;
}

.changelogs ul {
	margin-bottom: 2rem;
}

.changelogs ul li .changelog-type {
	padding: .25em .5em;
	font-size: .65rem;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25rem;
	margin-right: .3rem;
}

.changelogs ul li .added {
	background-color: rgba(21, 150, 125, 0.25) !important;
	color: rgb(79, 231, 201) !important;
	transition: .3s ease-in-out;
}

.changelogs ul li:hover{
	cursor: default;
}

.changelogs ul li:hover .added {
	background-color: rgba(21, 150, 125, 0.5) !important;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(79, 231, 201, 0.2) !important;
	transition: .3s ease-in-out;
}

.changelogs ul li .fixed {
	background-color: rgba(157, 102, 7, 0.25) !important;
	color: rgb(247, 186, 80) !important;
	transition: .3s ease-in-out;
}

.changelogs ul li:hover .fixed {
	background-color: rgba(157, 102, 7, 0.5) !important;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(157, 102, 7, 0.2) !important;
	transition: .3s ease-in-out;
}

.wrapper-footer {
	position: absolute;
	width: 82%;
	bottom: 2rem;
	height: 2rem;
}

.dash-footer {
	background: transparent;
}

.dash-footer span {
	color: var(--dash-font-gray);
	font-size: .75rem;
	font-weight: 400;
	display: inline-block;
	opacity: .6;
}

.dash-footer a {
	color: var(--purple-principal);
	opacity: 1 !important;
	font-size: .75rem;
	font-weight: 500;
	display: inline-block;
	opacity: .6;
	transition: .2s ease-in-out;
	
}

.announcements .username, .changelogs .changelog-date, .announcement .username {
	color: var(--dash-font-gray);
	margin-bottom: 0;
	font-size: .9rem;
	font-weight: 400;
	display: inline-block;
	opacity: .8;
	margin-right: 5px;
}

.home-pack {
	text-align: center;
}

.home-strings {
	text-align: center;
}

.home-pack i {
	color: var(--purple-principal);
	font-size: 4rem;
}

.home-pack .regular-text {
	width: 80%;
	margin-top: .5rem;
	margin-bottom: 1rem;
}

.h-100 {
	height: 100%;
}

.purple-button {
	background: var(--purple-principal);
	border-radius: 5px;
	border: 0px;
	color: rgb(255, 255, 255);
	font-size: 1rem;
	font-weight: bold;
	transition: background 0.2s ease 0s, color 0.2s ease 0s;
	text-transform: uppercase;
	width: 100%;
	padding: .5rem 1.5rem;
	transition: .3s ease-in-out;
	outline: none;
}

.purple-button:active, .purple-button:focus {
	border: 0 !important;
	outline: none !important;
}

.purple-button:hover {
	color: white;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(130, 87, 229,0.3);
}

.small-btn {
	padding: .5rem 1rem !important;
	font-size: .75rem !important;
}

.regular-text {
	margin-bottom: 0;
	color: var(--dash-font-gray);
	font-size: .9rem;
	font-weight: 400;
	display: inline-block;
	opacity: .6;
}

.dash-wrapper-form {
	margin-top: 2rem;
}

.dash-wrapper-form textarea {
	resize: none;
	background: #16161a;
	width: 100%;
	height: auto;
	border-radius: 5px;
	padding: 2rem 1.5rem;
	color: rgba(255,255,255,0.6);
}

.dash-wrapper-form button .loading {
	width: 1.5rem;
	position: relative;
	bottom: 2px;
	display: none;
}


.dash-wrapper-form textarea::placeHolder {
	color: rgba(255,255,255,0.4);
}

.dash-wrapper-form textarea:focus, .dash-wrapper-form textarea:active {
	background: #16161a;
	color: rgba(255,255,255,0.4);
}

.filter-wrapper {
	/*position: fixed;
	left: 0;
	bottom: 5vh;
	width: 25%;
	height: 30rem;
	background: var(--purple-principal);*/
	width: 100%;
	height: 100vh;
	position: absolute;
	right: 0;
	z-index: 0;
	display: contents;
}

.list-results {
	margin-bottom: 5rem !important;
}

.filter-wrapper .dash-wrapper {
	position: fixed;
	top: 10rem;
	width: 25%;
	height: 65%;
	padding: 40px !important;
	overflow-y: auto;
	z-index: 99999999999999 !important;
}

.filter-wrapper .title {
	font-size: 1rem;
	color: var(--dash-font-gray);
	font-weight: 400;
}

.filter-wrapper .sub-title {
	font-size: .9rem;
	opacity: .6;
	color: var(--dash-font-gray);
	font-weight: 400;
	margin-top: 1rem;
}

.filter-div {
	width: 100%;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgb(204, 204, 204,0.07);
}

.pretty.p-switch .state:before {
	left: 0 !important;
}

.pretty {
	margin-top: 1rem;
}

.pretty.p-switch .state label {
	text-indent: 2.6em !important;
	transition: .3s ease-in-out;
}

.pretty .state {
	color: rgb(204, 204, 204,0.4);
}

.pretty .state label {
	font-weight: 400 !important;
}

.pretty .state label span {
	font-size: .9rem !important;
	font-weight: 500 !important;
}

.pretty.p-switch.p-fill input:checked~.state:before {
	border-color: #5a656b !important;
	background-color: #5a656b!important;
}

.pretty.p-switch.p-fill input:checked~.state label {
	color: white !important;
	transition: .3s ease-in-out;
}

.pretty.p-switch .state:before {
	border: 1px solid rgb(204, 204, 204,0.5) !important;
}

.pretty.p-switch .state label:after {
	background-color: rgb(204, 204, 204, 0.5) !important;
}

.strings-wrapper {
	width: 100%;
	min-height: 55vh;
	height: auto;
	padding-left: 65vh;
	position: relative;
	display: block;
	color: white;
	text-align: center;
	z-index: 99999999999;
}

.strings-wrapper .strings {
	position: relative;
	float: right;
	top: 1rem;
	width: 40rem;
}

.pretty.p-switch .state:before {
	height: calc(1.1em + 2px) !important;
}

.strings-number {
	color: var(--dash-font-gray);
	opacity: .5;
	font-weight: 400;
}

.wrapper-footer-strings{
	position: absolute;
	width: 80%;
	margin-bottom: 2rem !important;
}

.strings-wrapper .error-msg {
	width: 100%;
	height: 55vh;
	display: flex;
	align-items: center;
}

.strings-wrapper .error-msg p {
	margin: 0 auto;
}

.strings-wrapper .strings .string-wrapper {
	text-align: left;
	background: var(--dash-wrapper) !important;
}

.buy-wrapper {
	width: 100%;
	height: auto;
	padding: .5rem;
	position: fixed;
	bottom: 0;
	left: 0;
	color: rgba(255,255,255,0.9);
	background: var(--purple-principal);
	z-index: 999999999999 !important;
	font-size: .85rem;
	text-align: center;
	font-weight: 500;
	box-shadow: 0 0 1.75rem 0 rgba(0, 0, 0, 0.25) !important;
	opacity: .85;

}

.buy-wrapper .buy-btn {
	color: rgba(255,255,255,0.9);
	background: transparent;
	border: 1px solid rgba(255,255,255,0.6);
	padding: .2rem .4rem;
	border-radius: .35rem;
	margin-left: .5rem;
	font-size: .75rem;
	font-weight: 500;
}

.strings-wrapper .strings .string-wrapper p {
	display: inline-block;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
	color: var(--gray-principal);
	max-width: 40%;
	word-break: break-word;
}

.strings-wrapper .strings .string-wrapper .string-blur {
	filter: blur(3.5px);
}

.strings-wrapper .strings .string-wrapper .process {
	background: rgba(255, 255, 255, 0.1) !important;
}

.strings-wrapper .strings .copy-btn {
	background: var(--purple-principal);
	border-radius: .35rem;
	border: 0px;
	color: rgb(255, 255, 255);
	font-size: .7rem;
	font-weight: bold;
	transition: background 0.2s ease 0s, color 0.2s ease 0s;
	text-transform: uppercase;
	width: 100%;
	padding: .3rem .7rem;
	transition: .3s ease-in-out;
	outline: none;
	display: inline-block;
	width: auto;
	float: right;
	margin-left: .7rem;
}

.strings-wrapper .strings .copy-btn:hover {
	color: white;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(130, 87, 229,0.5) !important;
}

.strings-wrapper .strings .string-wrapper .client,  .strings-wrapper .strings .string-wrapper p, .strings-wrapper .strings .string-wrapper .free, .strings-wrapper .strings .string-wrapper .process {
	margin-bottom: 0 !important;
}

/* Mobile */

@media only screen and (max-width: 769px) {
	#class-section {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	#class-section iframe {
		width: 100% !important;
	}
	#feedback {
		padding-right: 1rem !important;
		padding-left: 1rem !important;
		padding-top: 5rem !important;
		padding-bottom: 5rem !important;
	}

	#partners .partner {
		margin-bottom: 1rem !important;
	}

	.footer-text {
		text-align: center !important;
	}
	#navbar {
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}
	.features {
		padding-right: 2rem !important;
		padding-left: 2rem !important;
	}
	.feature {
		margin-bottom: 1.5rem !important;
	}
	#product {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}

	.prices {
		position: relative !important;
		top: 1rem !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	.product-img img {
		width: 70% !important;
		margin: 0 auto !important;
		margin-top: 5rem !important;
	}

	#product ul li i {
		margin-right: 7px !important;
	}

	#landing {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}

	.landing-text {
		padding-top: 5rem !important;
	}

	.landing-img {
		padding-bottom: 7rem !important;
	}

	.landing-img img {
		width: 35% !important;
	}

	#landing .down-page {
		bottom: 1.5rem !important;
	}
	#blob {
		display: none !important;
	}
	#landing .social {
		right: 0 !important;
		border-top-left-radius: 5rem !important;
		border-bottom-left-radius: 5rem !important;
		left: unset !important;
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
		bottom: 3.5rem !important;
	}
	#landing .social:hover {
		transition: .3s ease-in-out !important;
		padding-right: 2rem !important;
	}
}

::-webkit-scrollbar {
	width: .7rem !important;
	background: transparent !important;
	direction: rtl;
}

::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.2) !important;
	border-radius: 2rem !important;
	direction: rtl;
}