.overlay {
margin-bottom: 0;
padding-bottom: 0;
}
/*earn page*/
.latest-activites .single-box .number {
padding: 13px 57px;
background: none; /* Set background to none or transparent */
border-radius: 18px;
color: #ebebeb;
margin-left: -2px;
}
.header-section .navbar-area form .form-group {
padding: 0 30px;
border-radius: 10px;
background: #25263d;
border: 1px solid #636467;
border-radius: 15px;
}
.header-section .navbar-area {
padding: 10px 40px;
padding-right: 20px;
position: absolute;
background: #25263d;
overflow-x: clip;
}
.earn-select-dropdown-toggle-left-content {
display: flex;
align-items: center;
flex-direction: row;
gap: 8px; /* Adjust the spacing between icons as needed */
}
.earn-select-dropdown-icon {
display: flex;
align-items: center;
}
.lightAnimation {
animation: lightBlink 1s infinite alternate;
}
.css-rzyl8m {
display: flex;
-webkit-box-align: center;
align-items: center;
gap: 12px;
margin-top: 10px;
cursor: pointer;
}
.css-98o5l5 {
color: rgb(169, 169, 202);
font-weight: 500;
font-size: 12px;
line-height: 165%;
margin: 0px;
}
svg:not(:root) {
overflow: hidden;
}
@media screen and (min-width: 768px){
.css-1qfb8uj {
margin-top: 24px;
}
}
.css-1qfb8uj {
display: flex;
margin-top: 32px;
}
.css-12u1ezy {
display: flex;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
flex: 1 1 0%;
}
.css-1n80aq3 {
margin-right: 4px;
border-radius: 2px;
width: 47px;
height: 16px;
}
.css-6k17nn {
font-weight: 500;
font-size: 12px;
line-height: 165%;
text-align: center;
color: rgb(169, 169, 202);
opacity: 0.6;
margin-top: 8px;
margin-bottom: 0px;
}
.css-rhbqqc {
background: rgb(36, 37, 55);
border-radius: 16px;
font-weight: 500;
font-size: 14px;
line-height: 165%;
color: rgb(1, 214, 118);
padding: 6px 12px;
}
.css-1hm5hf {
line-height: var(--chakra-lineHeights-base);
font-weight: 500;
font-size: 14px;
color: rgb(255, 255, 255);
}
.css-194qof2 {
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
height: 22px;
white-space: nowrap;
}
.css-1od6a13 {
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
}
.css-1od6a13 {
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
}
.css-6k17nn {
font-weight: 500;
font-size: 12px;
line-height: 165%;
text-align: center;
color: rgb(169, 169, 202);
opacity: 0.6;
margin-top: 8px;
margin-bottom: 0px;
}
@keyframes lightBlink {
0% {
opacity: 1;
}
100% {
opacity: 0.5;
}
}
body {
font-family: var(--body-font);
background-color: #181929;
font-size: 18px;
line-height: 27px;
color: #feffff;
padding: 0;
margin: 0;
font-weight: 400;
overflow-x: hidden;
}
.latest-activites .single-box {
padding: 3px 17px;
background: #25263d;
margin: 0 1px;
border-radius: 13px;
display: flex;
/* justify-content: flex-end; */
}
.header-section .sidebar-wrapper {
position: absolute;
top: 0;
width: 150px;
left: -220px;
padding: 20px;
background: #212134;
box-shadow: 0px 20px 50px rgba(44, 63, 88, 0.15);
transform: translateX(150px);
transition: 0.3s;
height: 100vh;
z-index: 1;
overflow-x: hidden;
overflow-y: scroll;
}
.header-section .navbar-area .dashboard-nav .single-item .user-content {
padding: 20px;
background: #090c15;
border: 1px solid #d6d9e2;
border-radius: 15px;
}
.header-section .navbar-area .dashboard-nav .single-item .user-content .head-area {
background: #000000;
border-radius: 51px;
padding: -4px;
}
.header-section .sidebar-wrapper ul li span, .header-section .sidebar-wrapper ul li i {
color: #ffffff;
font-weight: 600;
transition: 0.3s;
}
.header-section .sidebar-wrapper ul li {
padding: 9px 10px;
transition: 0.3s;
background: #1b1f2b;
margin-bottom: 25px;
border-radius: 30px;
position: relative;
}
.cmn-btn.alt:before, .cmn-btn.alt:after {
background: #f28801;
}
.header-section .sidebar-wrapper ul li .abs-item.amount {
/*color: #e7ab20;*/
background: #333137;
}
.carousel-navigation {
text-align: left;
}
.carousel-navigation .text-center {
text-align: left !important;
}
.carousel-navigation {
margin-top: 10px;
}
h6,
h6 > a {
font-size: 20px;
line-height: 33.6px;
}
.green-icon {
color: white;
}
.header-section .navbar-area .dashboard-nav .single-item .balance span {
padding: 6px 16px;
background: #25263d;
border: 1px solid #bcbcbc;
border-radius: 30px;
font-weight: 700;
color: var(--bs-white);
}
.social-area .social a {
border-radius: 50%;
background: transparent;
border: 1px solid #ffffff;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.social-area .social i {
color: #ffffff;
font-size: 24px;
transition: 0.3s;
}
@media only screen and (max-width: 700px) {
.mobile-navigation {
padding: 0;
gap: 5px;
bottom: -1px;
}
}
.mobile-navigation {
position: fixed;
z-index: 20;
left: 0;
bottom: 0;
display: none;
align-items: center;
flex-direction: row;
background: #141523;
width: 100%;
justify-content: space-between;
padding: 0 60px;
overflow-y: visible;
border-top: 1px solid #1e1e2e;
}
.mobile-navigation .nav-item.bottom-navigation-open-menu {
display: flex;
height: 100%;
padding: 0;
align-items: center;
justify-content: center;
}
.mobile-navigation .nav-item {
display: inline-flex;
flex-direction: column;
align-items: center;
height: var(--bottom-nav-height);
padding-top: 15px;
position: relative;
top: 0;
transition: .3s;
flex: 1;
}
@charset "UTF-8";@import url("https://fonts.googleapis.com/css?family=Anton&display=swap");.tooltip {
--bs-tooltip-zindex: 1080;
--bs-tooltip-max-width: 400px;
--bs-tooltip-padding-x: 10px;
--bs-tooltip-padding-y: 5px;
--bs-tooltip-margin: ;
--bs-tooltip-font-size: 1rem;
--bs-tooltip-color: var(--bs-body-bg);
--bs-tooltip-bg: #333853;
--bs-tooltip-border-radius: var(--bs-border-radius);
--bs-tooltip-opacity: .9;
--bs-tooltip-arrow-width: .8rem;
--bs-tooltip-arrow-height: .4rem;
z-index: var(--bs-tooltip-zindex);
display: block;
margin: var(--bs-tooltip-margin);
font-family: var(--bs-font-sans-serif);
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
font-size: var(--bs-tooltip-font-size);
word-wrap: break-word;
opacity: 0
}
.tooltip.show {
opacity: var(--bs-tooltip-opacity)
}
.tooltip .tooltip-arrow {
display: block;
width: var(--bs-tooltip-arrow-width);
height: var(--bs-tooltip-arrow-height)
}
.tooltip .tooltip-arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid
}
.bs-tooltip-top .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
bottom: calc(-1 * var(--bs-tooltip-arrow-height))
}
.bs-tooltip-top .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
top: -1px;
border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
border-top-color: var(--bs-tooltip-bg)
}
.bs-tooltip-end .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
left: calc(-1 * var(--bs-tooltip-arrow-height));
width: var(--bs-tooltip-arrow-height);
height: var(--bs-tooltip-arrow-width)
}
.bs-tooltip-end .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
right: -1px;
border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
border-right-color: var(--bs-tooltip-bg)
}
.bs-tooltip-bottom .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
top: calc(-1 * var(--bs-tooltip-arrow-height))
}
.bs-tooltip-bottom .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
bottom: -1px;
border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
border-bottom-color: var(--bs-tooltip-bg)
}
.bs-tooltip-start .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
right: calc(-1 * var(--bs-tooltip-arrow-height));
width: var(--bs-tooltip-arrow-height);
height: var(--bs-tooltip-arrow-width)
}
.bs-tooltip-start .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
left: -1px;
border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
border-left-color: var(--bs-tooltip-bg)
}
.tooltip-inner {
max-width: var(--bs-tooltip-max-width);
padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
color: var(--bs-tooltip-color);
text-align: center;
background-color: var(--bs-tooltip-bg);
border-radius: var(--bs-tooltip-border-radius)
}
.dropup,.dropend,.dropdown,.dropstart,.dropup-center,.dropdown-center {
position: relative
}
.dropdown-toggle {
white-space: nowrap
}
.dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent
}
.dropdown-toggle:empty::after {
margin-left: 0
}
.dropup .dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: 0;
border-right: .3em solid transparent;
border-bottom: .3em solid;
border-left: .3em solid transparent
}
.dropup .dropdown-toggle:empty::after {
margin-left: 0
}
.dropend .dropdown-menu[data-bs-popper] {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: var(--bs-dropdown-spacer)
}
.dropend .dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid transparent;
border-right: 0;
border-bottom: .3em solid transparent;
border-left: .3em solid
}
.dropend .dropdown-toggle:empty::after {
margin-left: 0
}
.dropend .dropdown-toggle::after {
vertical-align: 0
}
.dropstart .dropdown-menu[data-bs-popper] {
top: 0;
right: 100%;
left: auto;
margin-top: 0;
margin-right: var(--bs-dropdown-spacer)
}
.dropstart .dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: ""
}
.offer-page .offer-page-content-section:last-child {
padding-bottom: 96px
}
.offer-page .offer-page-content-section:not(:last-child) {
border-bottom: 1px solid var(--offer-page-background)
}
.offer-page .offer-page-content-section-title {
font-weight: 600;
font-size: 16px;
color: #a9a9ca;
margin: 0 0 8px 0
}
.offer-page .offer-page-content-section-content {
margin-top: 8px;
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #a9a9ca
}
.offer-page .offer-page-description-text {
font-size: 12px;
font-weight: 400;
margin: 0
}
.offer-page .offer-page-rewards-item {
display: flex;
background-color: #252539;
padding: 7px 8px;
border-radius: 8px;
align-items: center;
justify-content: space-between
}
.offer-page .offer-page-rewards-item-left {
display: flex;
align-items: center
}
.offer-page .offer-page-rewards-item-step {
width: 30px;
height: 30px;
background: #242537;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
font-weight: 500;
font-size: 14px;
line-height: 160%;
text-align: center;
color: #a9a9ca
}
.offer-page .offer-page-rewards-item-title {
margin-left: 12px;
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #a9a9ca;
opacity: .6
}
.offer-page .offer-page-rewards-item-coins {
display: flex;
align-items: center;
justify-content: center;
background: rgba(1,214,118,0.1019607843);
border-radius: 8px;
padding: 0 14px;
font-weight: 500;
font-size: 13px;
line-height: 160%;
color: #01d676;
height: 30px;
margin-left: 8px
}
.offer-page .offer-page-rewards-item-coins img {
margin-right: 6px
}
.offer-page .offer-page-rewards-item:not(:last-child) {
margin-bottom: 8px
}
.offer-page .offer-page-steps {
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #71718c
}
.offer-page .offer-page-steps p {
margin-top: 0
}
.offer-page .offer-page-steps p:last-child {
margin-bottom: 0
}
.offer-page .offer-page-steps ol {
list-style: none;
counter-reset: item;
padding-inline-start:0}
.offer-page .offer-page-steps li {
counter-increment: item;
margin-bottom: 12px;
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #71718c
}
.offer-page .offer-page-steps li:before {
margin-right: 10px;
content: counter(item);
color: #01d676;
text-align: center;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
background: #1b3036
}
.offer-page .offer-page-action-buttons {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 24px
}
.offer-page .offer-page-start-offer-button {
width: 300px;
height: 52px;
background: #01d676;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: black
}
@media only screen and (max-width: 700px) {
.offer-page .offer-page-start-offer-button {
width:100%;
font-weight: 700
}
}
.offer-page .offer-page-start-offer-button:disabled {
opacity: .5;
cursor: not-allowed
}
.offer-page .offer-page-start-offer-button svg {
margin-right: 12px;
color: black
}
.offer-page .offer-logo {
width: 120px;
height: 120px;
border-radius: 6px;
object-fit: cover
}
@media only screen and (max-width: 700px) {
.offer-page .offer-logo {
width:100px;
height: 100px
}
}
.offer-page .offer-name {
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #fff;
margin: 0 0 16px 0
}
.offer-page .offer-base-info {
margin-left: 18px
}
@media only screen and (max-width: 700px) {
.offer-page .offer-base-info {
margin-left:16px
}
}
.offer-page .offer-base-info .offer-payout-amount {
font-weight: 700;
font-size: 24px;
line-height: 27px;
color: #fff
}
@media only screen and (max-width: 700px) {
.offer-page .offer-base-info .offer-payout-amount {
margin:0
}
}
.offer-page .offer-base-info .popularity-heading {
font-size: 12px;
font-weight: 500;
color: #a9a9ca;
margin: 4px 0
}
.offer-page .offer-base-info .offer-payout {
display: flex;
align-items: center
}
.offer-page .offer-base-info .offer-payout-coins-icon {
width: 22px;
margin-right: 8px
}
.offer-page .offer-base-info .offer-devices {
display: flex;
align-items: center
}
@media only screen and (max-width: 700px) {
.offer-page .offer-base-info .offer-devices {
display:none
}
}
.offer-page .offer-base-info .offer-device {
width: 40px;
height: 40px;
background: #242537;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center
}
.offer-page .offer-base-info .offer-device:not(:last-child) {
margin-right: 18px
}
.offer-page .offer-base-info .offer-device img {
width: 18px
}
.offer-page .offer-info {
padding: 0 32px;
border-color: #554c50
}
@media only screen and (max-width: 700px) {
.offer-page .offer-info {
padding:0 4px
}
}
.offer-not-found-page {
min-height: 100vh;
padding-top: 30vh;
background-color: #141523
}
.offer-not-found-page .offer-not-found-text {
font-weight: 700;
font-size: 20px;
line-height: 150%;
text-align: center;
letter-spacing: .01em;
color: #fff
}
.offer-not-found-page .offer-not-found-icon-container {
display: flex;
align-items: center;
justify-content: center
}
.offer-not-found-page .offer-not-found-subtitle {
text-align: center;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: rgba(169,169,202,0.6)
}
.offers-page {
min-height: 100vh;
background-color: #141523;
padding: 24px;
font-family: "Poppins",sans-serif
}
.offers-page .offers-page-go-back-button {
height: 40px;
background: #242537;
border-radius: 6px;
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #a9a9ca;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px
}
.offers-page .offers-page-go-back-button svg {
margin-right: 12px
}
.offers-page .offers-page-go-back-link-container {
margin: 24px 0 24px;
display: flex;
align-items: flex-start
}
.offers-page .offers-page-header {
padding: 0 0 22px;
border-bottom: 1px solid #1e1e2e
}
.offers-page .offers-page-search-input {
background: #1e1e2e !important;
border-radius: 6px !important;
height: 40px !important;
border: none !important;
padding-left: 16px !important;
padding-right: 30px !important;
color: #a9a9ca !important;
margin: 0 !important;
width: calc(100% - 46px) !important
}
.offers-page .offers-page-search-input:focus {
box-shadow: none !important
}
.offers-page .offers-page-search-input::placeholder {
color: #a9a9ca !important;
opacity: 1
}
.offers-page .offers-page-search-input:-ms-input-placeholder {
color: #a9a9ca !important
}
.offers-page .offers-page-search-input::-ms-input-placeholder {
color: #a9a9ca !important
}
.offers-page .offers-page-search-input-container {
position: relative;
margin: 0 0 0 24px !important
}
.offers-page .offers-page-search-input-icon-container {
position: absolute;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
right: 13px;
top: 0;
bottom: 0
}
.offers-page .offers-page-not-found-container {
margin-top: 48px
}
.offers-page .offers-page-not-found-container .offers-not-found-text {
font-weight: 700;
font-size: 20px;
line-height: 150%;
text-align: center;
letter-spacing: .01em;
color: #fff
}
.offers-page .offers-page-not-found-container .offers-not-found-icon-container {
display: flex;
align-items: center;
justify-content: center
}
.offers-page .offers-page-not-found-container .offer-not-found-subtitle {
text-align: center;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: rgba(169,169,202,0.6)
}
.offers-page .offers-page-sort-dropdown .dropdown-toggle,.offers-page .offers-page-sort-dropdown ul {
min-width: 200px
}
@media only screen and (max-width: 700px) {
.offers-page .offers-page-device-dropdown {
display:none
}
}
.offers-page .offers-page-device-dropdown .dropdown-toggle,.offers-page .offers-page-device-dropdown ul {
min-width: 120px
}
@media only screen and (max-width: 700px) {
.offers-page .offers-page-device-dropdown .dropdown-toggle,.offers-page .offers-page-device-dropdown ul {
min-width:auto
}
}
@media only screen and (max-width: 700px) {
.offers-page .offers-page-sort-dropdown {
display:none !important
}
}
@media only screen and (max-width: 700px) {
.myProfileInnerRoot {
margin-top:-25px
}
}
.myProfileInnerRoot .earningsTab {
display: flex;
justify-content: space-between;
padding: 8px
}
@media only screen and (max-width: 700px) {
.myProfileInnerRoot .earningsTab {
display:block;
margin-bottom: 10px
}
}
.myProfileInnerRoot .earningsFilterDropdown {
margin: 0;
width: 600px;
top: -12px
}
@media only screen and (max-width: 1199px) {
.myProfileInnerRoot .earningsFilterDropdown {
width:250px
}
}
@media only screen and (max-width: 700px) {
.myProfileInnerRoot .earningsFilterDropdown {
width:calc(100% - 2px);
top: 10px
}
}
@media only screen and (max-width: 700px) {
.myProfileInnerRoot .earningsBtnOptions {
display:grid
}
}
.myProfileInnerRoot .earningsTabFilters {
display: flex;
gap: 12px
}
@media only screen and (max-width: 560px) {
.myProfileInnerRoot .earningsTabFilters {
display:grid;
text-align: center
}
}
.myProfileInnerRoot .pendingOffersLabel {
font-size: 16px;
color: #a9a9ca
}
.myProfileInnerRoot .pendingOffersToggle {
margin-top: -7px
}
@media only screen and (max-width: 560px) {
.myProfileInnerRoot .pendingOffersToggle {
margin-top:14px;
display: flex;
justify-content: center
}
}
.myProfileInfoSection {
font-family: Poppins;
margin-bottom: 70px
}
.myProfileInfoSection h5 {
color: #00da72;
font-weight: bold;
font-size: 30px
}
.myProfileInfoSection .myProfileGeneralInfo .myProfileInfoItem {
background-color: #2a2c4a;
padding: 15px 30px;
margin-top: 4px;
border-radius: 3px;
font-size: 16px
}
.myProfileInfoSection .myProfileGeneralInfo .myProfileInfoItem .itemRight {
float: right;
color: #00da72;
font-weight: bold
}
.myProfileInfoSection .myProfileGeneralInfo .myProfileInfoItem .itemRight .verificationBtn {
position: relative;
bottom: 6px
}
@media only screen and (max-width: 700px) {
.myProfileInfoSection .myProfileGeneralInfo .myProfileInfoItem .itemRight .verificationBtn {
bottom:10px;
font-size: 10px !important
}
}
@media only screen and (max-width: 700px) {
.myProfileInfoSection .myProfileGeneralInfo .myProfileInfoItem {
font-size:12px
}
}
.myProfileInfoSection .myProfileGeneralInfo .myProfileInfoItem:nth-child(even) {
background-color: #34365c
}
.myProfileInfoSection .myProfileChangeSettingsSection h6 {
color: #9193c3;
font-size: 14px;
margin-bottom: 0
}
.myProfileInfoSection .myProfileChangeSettingsSection .changeSettingsMiniSection {
margin-top: 30px
}
.myProfileInfoSection .myProfileChangeSettingsSection .changeSettingsMiniSection .myprofileChangeDisplayNameBtn {
margin-left: 10px;
height: 45px;
line-height: 45px
}
.myProfileInfoSection .myProfileChangeSettingsSection .changeSettingsMiniSection .privateProfileSwitchContain {
display: inline-block;
background-color: #2a2c4c;
padding: 10px 20px
}
.myProfileInfoSection .myProfileChangeSettingsSection .changeSettingsMiniSection .privateProfileSwitchContain label {
color: #9193c3
}
.myProfileInfoSection .myProfileChangeSettingsSection .changeSettingsMiniSection .privateProfileSwitchContain .privateProfileLever:after {
background-color: #01d676
}
.myProfileInfoSection .myProfileChangeSettingsSection .changeSettingsMiniSection .privateProfileSwitchContain .privateProfileLever,.myProfileInfoSection .myProfileChangeSettingsSection .changeSettingsMiniSection .privateProfileSwitchContain #myProfilePrivateCheckbox:checked+.privateProfileLever {
background-color: #18192d !important
}
.myProfileInfoSection .myProfileChangeSettingsSection .changeSettingsMiniSection .deleteAccountBtn {
height: 45px;
line-height: 45px;
padding: 0 40px
}
.myProfileInfoSection .email-actions-container {
display: flex;
gap: 10px;
flex-wrap: wrap
}
#affiliatesModal .modalTitle {
color: #01d676;
font-size: 30px;
font-weight: bold
}
.myProfileSectionTabs {
display: flex;
justify-content: center;
gap: 15px
}
@media only screen and (max-width: 700px) {
.myProfileSectionTabs {
display:flex;
flex-direction: column;
flex-wrap: wrap;
height: 240px;
justify-content: center;
gap: 1px
}
}
.myProfileSectionTabs .myProfileHistoryTabsBtn {
width: 24.2%;
height: 60px;
background: #2c2e49;
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 19px;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: #bdbdbd;
cursor: pointer
}
@media only screen and (max-width: 700px) {
.myProfileSectionTabs .myProfileHistoryTabsBtn {
flex:0 0 68px;
width: 47%;
padding: 20px;
border: 10px;
margin: 6px
}
}
.myProfileSectionTabs .ticketsCount {
display: flex;
width: 24px;
height: 24.46px;
background: rgba(1,255,149,0.15);
justify-content: center;
align-items: center;
font-family: "Poppins";
font-weight: 600;
font-size: 11px;
line-height: 14px;
color: #01ff97;
border-radius: 50%;
margin-left: 5px
}
.myProfileHistoryTabsBtn {
background-color: #2a2c4a;
color: #6a6d91;
text-align: center;
font-size: 20px;
padding: 10px 40px;
border-radius: 2px;
cursor: pointer;
margin-top: 5px
}
.myProfileHistoryTabsBtn.active {
background-color: #34365c;
color: white
}
.myProfilePhoneVerification {
overflow: visible;
left: 50%;
top: 50% !important;
transform: translate(-50%,-50%) !important
}
.myProfilePhoneVerification .verificationBody {
display: flex;
justify-content: center
}
@media only screen and (max-width: 700px) {
.myProfilePhoneVerification .verificationBody {
display:grid;
padding-bottom: 10px
}
}
.myProfilePhoneVerification .verificationBody .phoneInputDiv {
margin-left: 79px;
margin-right: 30px;
padding-bottom: 10px
}
@media only screen and (max-width: 700px) {
.myProfilePhoneVerification .verificationBody .phoneInputDiv {
margin-right:10px
}
}
.myProfilePhoneVerification .title {
color: #01d676;
font-weight: bolder;
text-align: center
}
.myProfilePhoneVerification .subtitle {
color: #bdcfde;
text-align: center;
padding-bottom: 5px
}
.myProfilePhoneVerification .sendSms-btn {
margin-left: 8px;
width: 8rem;
height: 3.2rem !important;
text-align: center;
border-radius: 5px;
background-color: #01d676
}
.myProfilePhoneVerification .close-btn {
margin-left: 5px;
width: 8rem;
height: 3.2rem !important;
text-align: center;
border-radius: 5px;
background-color: #3c3b4f
}
.myProfilePhoneVerification .alert .card-content span {
font-weight: bold;
font-size: 1.1em;
margin-right: 4px
}
.myProfilePhoneVerification .alert .card-content .material-icons {
font-size: 1.5em;
position: relative;
top: 5px;
margin-right: .5em
}
.myProfilePhoneVerification .card-content {
padding: 0
}
.myProfilePhoneVerification .card {
padding: 10px 50px 10px 50px;
border-radius: 10px;
z-index: -1
}
.myProfilePhoneVerification .row-align-right {
display: grid;
justify-items: end
}
.myProfilePhoneVerification .phoneInput {
padding-right: 3px !important;
color: white;
background: #1b1c27 !important;
height: 3.2rem !important;
outline: none !important;
border-bottom: none !important;
box-shadow: none !important;
padding-left: 8px !important
}
@media only screen and (max-width: 700px) {
.myProfilePhoneVerification .phoneInput {
height:3.2rem !important
}
}
.myProfilePhoneVerification .centerBtns {
display: flex;
justify-content: center
}
.myProfileSectionHeading {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-size: 23px;
display: flex;
align-items: center;
gap: 10px;
line-height: -1px;
color: #01d676;
top: 5% !important
}
.myProfileSectionHeading .subHeading {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #a9a9ca;
width: 65%
}
.createTicketModal {
font-family: "Poppins";
font-style: normal;
width: 743px;
background: #1e1e2e;
border-radius: 12px;
top: 6% !important;
max-height: 90vh;
overflow-y: auto;
padding: 26px !important
}
@media only screen and (max-width: 560px) {
.createTicketModal {
width:95%;
overflow-y: auto
}
}
.createTicketModal .modal-header .closeModal {
position: absolute;
right: 25px;
top: 20px;
border: 1.5px solid #2f3043;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer
}
@media only screen and (max-width: 700px) {
.createTicketModal .modal-header .closeModal {
width:32px;
height: 32px;
right: 9px;
top: 9px
}
}
.createTicketModal .modal-header .closeModal .close {
width: 25px;
height: 25px
}
@media only screen and (max-width: 700px) {
.createTicketModal .modal-header .closeModal .close {
width:20px;
height: 20px
}
}
.profile-card {
background-color: #222339;
border-radius: 15px;
padding: 30px 35px
}
@media only screen and (max-width: 1199px) {
.profile-card {
padding:20px
}
}
.profile-avatar {
--avatar-size: 9vw;
border-radius: 999px;
width: var(--avatar-size);
height: var(--avatar-size);
max-width: 142px;
max-height: 142px;
display: block
}
@media only screen and (max-width: 1199px) {
.profile-avatar {
--avatar-size:80px
}
}
.profile-username {
font-size: 24px;
font-weight: 600;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis
}
@media only screen and (max-width: 1199px) {
.profile-username {
max-width:calc(100vw - 250px)
}
}
.profile-divider {
margin: 20px 0;
border: 0;
border-top: 1px solid #454659
}
.profile-level {
padding: 5px 10px;
border-radius: 5px;
display: inline-block
}
.profile-location {
margin: 10px 0 20px 0
}
.profile-country-flag {
width: 32px;
height: 32px
}
@media only screen and (max-width: 1199px) {
.profile-country-flag {
width:20px;
height: 20px
}
}
.myProfileProgress {
background-color: #575869;
height: 5px;
margin: 1rem 0
}
.statistic-grid {
display: grid;
grid-template-areas: "a b" "c d";
grid-template-rows: min-content;
gap: 15px;
height: 100%;
padding-top: 20px
}
@media only screen and (max-width: 1199px) {
.statistic-grid {
grid-template-areas:"a" "c" "b" "d"
}
}
.userProfileDeterminate {
height: 100%
}
.statistic-item {
display: flex;
gap: 10px
}
.statistic-item .statistic-item-icon {
background: #1b4745;
border-radius: 10px
}
.statistic-item .statistic-item-icon svg {
width: 56px;
height: 56px
}
.statistic-item .top-text {
font-size: 24px;
font-weight: bold
}
.statistic-item .bottom-text {
font-size: 14px
}
.account-standing-box {
margin: 30px auto
}
.account-standing-box .generic-infobox {
width: 100%;
padding: 15px
}
.account-standing-box .generic-infobox+.generic-infobox {
margin-top: 5px
}
.profile-navigations .profile-navigation-item,.profile-navigations--small .profile-navigation-item {
white-space: nowrap;
padding: var(--tabs-vertical-padding) var(--tabs-horizontal-padding);
background: var(--tabs-background);
border-radius: var(--tabs-border-radius);
color: var(--tabs-color);
font-weight: var(--tabs-font-weight);
font-size: var(--tabs-font-size);
height: var(--tabs-height)
}
.profile-navigations .profile-navigation-item:focus,.profile-navigations--small .profile-navigation-item:focus {
background-color: #20212e
}
.profile-navigations .profile-navigation-item:hover,.profile-navigations .profile-navigation-item.active,.profile-navigations--small .profile-navigation-item:hover,.profile-navigations--small .profile-navigation-item.active {
color: var(--tabs-active-color)
}
.profile-navigations .profile-navigation-item.active,.profile-navigations--small .profile-navigation-item.active {
background-color: var(--tabs-active-bg);
font-weight: var(--tabs-font-weight-active)
}
.profile-navigations {
gap: var(--tabs-spacing);
overflow-y: hidden;
overflow-x: auto
}
@media only screen and (max-width: 1199px) {
.profile-navigations {
flex-wrap:nowrap;
width: 100vw;
padding-right: 30px;
margin-left: -16px;
padding-left: 16px
}
}
.profile-navigations--small {
gap: var(--tabs-spacing);
overflow-y: auto;
overflow-x: auto;
flex-wrap: nowrap
}
@media only screen and (max-width: 1199px) {
.profile-navigations--small {
width:100vw;
padding-left: 16px;
margin-left: -16px
}
}
.profile-navigations--small .profile-navigation-item {
white-space: nowrap;
padding: 6px 15px;
background: 0
}
.my-profile-main {
margin-bottom: 100px
}
.earnings-sub-navigations {
height: 44px
}
@media only screen and (max-width: 1199px) {
.earnings-sub-navigations {
flex-direction:column;
align-items: flex-start;
gap: 30px;
height: auto;
margin-left: -16px;
padding-left: 16px
}
}
.offer-rows,.reward-rows,.refearning-rows,.offer-in-progress-rows,.withdrawal-rows,.chargeback-rows,.ticket-support-rows {
display: grid;
padding: 15px 0;
border-top: 1px solid #404043;
align-items: center;
gap: 10px;
text-transform: capitalize;
min-height: 75px
}
.offer-rows.header,.reward-rows.header,.refearning-rows.header,.offer-in-progress-rows.header,.withdrawal-rows.header,.chargeback-rows.header,.ticket-support-rows.header {
height: 50px;
min-height: 50px;
border-top: 0;
display: grid
}
.offer-rows.loading-skeleton,.reward-rows.loading-skeleton,.refearning-rows.loading-skeleton,.offer-in-progress-rows.loading-skeleton,.withdrawal-rows.loading-skeleton,.chargeback-rows.loading-skeleton,.ticket-support-rows.loading-skeleton {
min-height: 55px;
height: 55px;
margin-bottom: 10px
}
@media only screen and (max-width: 1199px) {
.offer-rows.header,.reward-rows.header,.refearning-rows.header,.offer-in-progress-rows.header,.withdrawal-rows.header,.chargeback-rows.header,.ticket-support-rows.header {
display:none !important
}
}
.empty-message {
border-top: 1px solid #404043;
margin-top: 0;
padding-top: 14px
}
@media only screen and (max-width: 1199px) {
.empty-message {
border-top:0
}
}
@media only screen and (max-width: 1199px) {
template+.offer-rows,template+.reward-rows,template+.refearning-rows,template+.offer-in-progress-rows,template+.withdrawal-rows,template+.chargeback-rows,template+.ticket-support-rows {
border-top:0
}
}
.offer-rows {
grid-template-columns: 400px .8fr 1fr 1.2fr 1fr
}
@media only screen and (max-width: 1199px) {
.offer-rows {
grid-template-columns:auto 130px
}
}
@media only screen and (max-width: 700px) {
.offer-rows .offer-title {
max-width:150px
}
}
.chargeback-rows {
grid-template-columns: 400px .7fr 1.1fr 1.2fr 1fr
}
@media only screen and (max-width: 1199px) {
.chargeback-rows {
grid-template-columns:auto 130px
}
}
.offer-in-progress-rows {
grid-template-columns: 310px 100px 130px 1.2fr 1fr 180px
}
.offer-in-progress-rows .open-new-tab {
transform: translateY(3px)
}
@media only screen and (max-width: 1199px) {
.offer-in-progress-rows {
grid-template-columns:auto 130px;
display: grid !important
}
}
.offer-in-progress-rows .request-in-review {
display: flex;
align-items: center;
gap: 10px
}
.offer-in-progress-rows .request-in-review .add-new-ticket-option {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer
}
.offer-in-progress-rows .request-in-review .add-new-ticket-option .add-ticket {
width: 85px;
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 160%;
letter-spacing: .01em;
text-decoration-line: underline;
color: #fff;
text-shadow: 0 4px 4px rgba(0,0,0,0.25)
}
.surveys-in-progress-rows {
grid-template-columns: 310px 100px 250px 1.2fr 1fr
}
@media only screen and (max-width: 1199px) {
.surveys-in-progress-rows {
grid-template-columns:auto 130px;
display: grid !important
}
}
.row-chevron-right {
stroke: white;
width: 7px;
height: 23px
}
.reward-rows {
grid-template-columns: 400px 1fr 1fr 1fr 1fr
}
@media only screen and (max-width: 1199px) {
.reward-rows {
grid-template-columns:auto 130px
}
}
.refearning-rows {
grid-template-columns: 400px 1fr
}
@media only screen and (max-width: 1199px) {
.refearning-rows {
grid-template-columns:130px 1fr
}
}
.withdrawal-rows {
grid-template-columns: 200px .7fr 1fr 1fr .8fr .8fr;
word-break: break-all
}
.withdrawal-rows>div:nth-child(3) {
padding-right: 20px
}
@media only screen and (max-width: 1199px) {
.withdrawal-rows {
grid-template-columns:auto 130px
}
}
.ticket-support-rows {
grid-template-columns: 250px 135px 120px 1fr 1fr 1fr
}
@media only screen and (max-width: 1199px) {
.ticket-support-rows {
grid-template-columns:auto 130px
}
}
.ticket-status-multi-task {
display: flex;
align-items: center;
gap: 6px
}
.ticket-status-multi-task .show-hide-tickets {
font-weight: 500;
font-size: 14px;
line-height: 160%;
text-decoration-line: underline;
color: #fff;
padding-left: 12px
}
.multi-ticket-collapsable {
background: #1e1e2e;
padding: 10px 20px;
border-radius: 10px;
margin-bottom: 20px
}
.multi-ticket-collapsable .flex-box {
display: flex;
gap: 8px;
align-items: center
}
.multi-ticket-collapsable .textellipsis {
max-width: 225px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.multi-ticket-collapsable table th {
border-bottom: 1px solid rgba(255,255,255,0.16);
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #fff
}
.multi-ticket-collapsable table td {
font-weight: 500;
font-size: 14px;
line-height: 160%
}
.multi-ticket-collapsable table td:nth-child(1) {
color: #a9a9ca;
width: 30%
}
.multi-ticket-collapsable table td:nth-child(2) {
color: #a9a9ca;
width: 20%
}
.multi-ticket-collapsable table td:nth-child(3) {
color: #ccd;
width: 15%
}
.multi-ticket-collapsable table td:nth-child(4) {
color: #a9a9ca;
width: 20%
}
.multi-ticket-collapsable table td:nth-child(4) {
color: #a9a9ca
}
@media only screen and (max-width: 1199px) {
.wall-filter-wrapper,.wall-filter {
width:100%
}
}
.wall-filter {
padding: 12px 10px;
border-radius: 8px;
background: #222339;
color: white;
border: 0;
font-family: "Poppins";
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='30' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.25 0.75L4 4.25L0.75 0.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-position: 100%;
background-repeat: no-repeat
}
.survey-walls {
padding-right: 25px
}
.chart-container {
background-color: #1e1f30;
border-radius: 8px;
padding: 30px;
width: 80%;
margin: 100px auto
}
@media only screen and (max-width: 1199px) {
.chart-container {
width:100%;
padding: 30px 10px
}
}
@media only screen and (max-width: 1199px) {
.offer-in-progress>:nth-child(1)>.text-semibold {
max-width:calc(100vw - 160px)
}
.offer-in-progress>:nth-child(2)>.flex {
flex-wrap: nowrap;
white-space: nowrap;
max-width: 40vw;
overflow: hidden;
word-break: break-all
}
}
#modal-myprofile-extra-info {
background-color: #1e1e2e
}
#modal-myprofile-extra-info .offer-support-state-img {
width: 64px;
height: auto
}
#modal-myprofile-extra-info .modal-close {
border: 1px solid;
width: 30px;
height: 30px;
border-radius: 20px;
display: flex;
opacity: .3;
position: absolute;
right: 20px
}
#modal-myprofile-extra-info .modal-close img {
display: block;
margin: auto
}
@media only screen and (max-width: 1199px) {
#modal-myprofile-extra-info .offer-in-progress-actions {
align-items:flex-end
}
}
#modal-myprofile-extra-info .offer-in-progress-actions .add-new-ticket-option {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer
}
#modal-myprofile-extra-info .offer-in-progress-actions .add-new-ticket-option .add-ticket {
width: 85px;
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 160%;
letter-spacing: .01em;
text-decoration-line: underline;
color: #fff;
text-shadow: 0 4px 4px rgba(0,0,0,0.25)
}
#modal-myprofile-extra-info .profile-mobile-section {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 0;
border-bottom: 1px solid #454659
}
#modal-myprofile-extra-info .profile-mobile-section:last-child,#modal-myprofile-extra-info .profile-mobile-section:last-of-type {
border: 0
}
#modal-myprofile-extra-info .profile-mobile-section>:nth-child(1) {
flex: 1;
padding-right: 30px;
text-transform: capitalize
}
#modal-myprofile-extra-info .profile-mobile-section>:nth-child(2) {
flex: none;
color: #a8aac9;
text-transform: capitalize
}
#modal-myprofile-extra-info .modal-title {
display: flex;
align-items: center;
gap: 10px;
width: 100%
}
#modal-myprofile-extra-info .support-ticket-actions .mobile-multi-tickets-section {
padding-top: 10px
}
#modal-myprofile-extra-info .support-ticket-actions .mobile-multi-tickets-section .total-tickets {
font-weight: 500;
font-size: 12px;
line-height: 165%;
color: #fff;
padding-bottom: 12px
}
#modal-myprofile-extra-info .support-ticket-actions .mobile-multi-tickets-section .task-title {
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #a9a9ca;
max-width: 225px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
#modal-myprofile-extra-info .support-ticket-actions .mobile-multi-tickets-section .ticket-info {
padding: 10px 0 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.16)
}
#modal-myprofile-extra-info .support-ticket-actions .mobile-multi-tickets-section .ticket-info .ticket-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
padding-bottom: 0
}
#modal-myprofile-extra-info .support-ticket-actions .mobile-multi-tickets-section .ticket-info .ticket-row>:nth-child(1) {
flex: 1;
padding-right: 30px
}
#modal-myprofile-extra-info .support-ticket-actions .mobile-multi-tickets-section .ticket-info .ticket-row>:nth-child(2) {
flex: none;
color: #a8aac9
}
.wd-failed {
color: #8a3333
}
.wd-pending {
color: #f29c35
}
.wd-completed {
color: #01d676
}
.btn-reveal-code {
padding: 4px 10px;
border: 1px solid white;
background-color: #2b2c39;
border-radius: 8px;
font-size: 12px;
color: white
}
.btn-claim-cashout {
padding: 4px 10px;
display: inline-block;
border: 1px solid #01d676;
color: #01d676;
background-color: #12282b;
border-radius: 8px;
font-size: 12px
}
.unseen-support-tickets-num {
color: #01d676;
font-weight: bold;
display: inline-block;
background-color: #2f5b4f;
padding: 2px;
width: 20px;
height: 20px;
border-radius: 10px;
font-size: 12px;
margin-left: 4px
}
@media only screen and (max-width: 1199px) {
.profileCampaignGridItem {
max-width:100% !important
}
}
#profile-resend-verification:focus,#profile-resend-verification:hover,.openPhoneVerifcationModal:focus,.openPhoneVerifcationModal:hover {
background: #01ff97
}
#modal-myprofile-settings {
width: 900px;
background: #1e1e2e
}
@media only screen and (max-width: 1199px) {
#modal-myprofile-settings {
width:100%
}
}
#modal-myprofile-settings .profile-avatar {
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px
}
@media only screen and (max-width: 700px) {
.gainSurveysDailyBonusBox .claimBonusLabel {
width:100%;
margin-bottom: 15px
}
}
.gainSurveysDailyBonusBox .dailyBonusProgressContainer {
height: 16px;
background: #383855;
padding: 6px;
border-radius: 20px;
margin-bottom: 5px;
margin-top: 10px
}
.gainSurveysDailyBonusBox .dailyBonusProgress {
background: #2f2f49;
border-radius: 20px;
margin: 0
}
.promoCodeBox .promoBgLeft {
position: absolute;
width: 31px;
left: 0;
bottom: 10px
}
.promoCodeBox .promoBgRight {
position: absolute;
width: 57px;
right: 0;
bottom: 0
}
.promoCodeBox .promoBgTopRight {
position: absolute;
width: 24px;
right: 0;
top: 20px
}
.promoCodeBox .promoDescContainer {
margin-bottom: 5px
}
.promoCodeBox .promoDescContainer div {
display: inline-block
}
.promoCodeBox .promoSocialLinksContainer {
display: inline-block
}
.promoCodeBox .promoSocialLinksContainer svg {
vertical-align: middle;
margin-left: 7px
}
.promoCodeBox .promoContainer {
display: flex;
justify-content: center;
align-items: center
}
.promoCodeBox .promoCodeBodySection {
position: relative;
padding: 30px 20px;
background: #2c2c44;
border-radius: 5px;
border-radius: 10px;
-webkit-box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2);
box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2)
}
@media only screen and (max-width: 700px) {
.promoCodeBox .promoCodeBodySection {
flex-direction:column
}
}
.promoCodeBox .promoInputText {
font-weight: 500;
font-size: 12px;
display: flex;
align-items: center;
color: #616184;
padding-top: 0;
margin: 2px 0 0 21px
}
.promoCodeBox .promoInputText .textHighlighted {
color: #01d676
}
@media only screen and (max-width: 700px) {
.promoCodeBox .promoInputText {
margin:0;
display: inline-block;
margin-top: 20px
}
}
.promoCodeBox .promoImgContainer {
position: absolute;
max-width: 224px;
height: 64px;
left: 30px;
top: -29px;
z-index: 5
}
.promoCodeBox .promoInputContainer {
background: #383855;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
border-radius: 4px;
width: 100%;
overflow: hidden
}
.promoCodeBox .promoInputContainer ::placeholder {
font-weight: 400;
font-size: 12px;
color: #787ead
}
.promoCodeBox .promoInputContainer .promoCodeInput {
margin-bottom: 0;
padding-left: 20px;
font-size: 14px;
height: 43px
}
.customBtn {
display: flex;
justify-content: center;
align-items: center;
min-width: 163px;
height: 44px;
margin-left: 10px;
font-weight: 600;
font-size: 12px;
line-height: 12px;
padding: 0 19px;
background: #01d676;
box-shadow: inset 0 1px 0 rgba(0,255,194,0.15);
border-radius: 4px
}
@media only screen and (max-width: 700px) {
.customBtn {
min-width:auto;
height: 40px
}
}
.customBtn[disabled] {
background: #303149 !important;
color: #8083b2 !important
}
.gainSurveysModalTitle {
color: #01d676;
font-weight: bold;
font-size: 30px;
margin: 0
}
@media only screen and (max-width: 700px) {
.gainSurveysModalTitle {
font-size:28px
}
}
@media only screen and (max-width: 700px) {
.downloadRewardModalTitle {
font-size:18px;
margin-left: 7px
}
}
#rewardsTimerModal {
top: 5% !important;
right: 44px;
margin-top: 89px
}
.rewardsModal {
padding: 25px;
top: 5% !important;
max-width: 1920px;
max-height: 685px;
width: 80%;
font-family: "Poppins",sans-serif
}
.rewardsModal #rewardsPage {
width: 100%
}
.downloadRewardModal {
padding: 25px;
min-width: 60%;
width: 96%;
top: 2% !important;
max-width: 1920px;
max-height: 685px;
font-family: "Poppins",sans-serif
}
#rewardsPage {
padding: 25px;
min-width: 60%;
width: 96%;
top: 2% !important;
font-family: "Poppins",sans-serif
}
@media only screen and (max-width: 700px) {
#rewardsPage {
max-width:100%;
padding-left: 0;
padding-right: 0
}
}
#rewardsPage .btnsContainerHeader {
display: flex;
justify-content: space-between;
align-items: center
}
@media only screen and (max-width: 700px) {
#rewardsPage .btnsContainerHeader {
flex-wrap:wrap;
justify-content: flex-start
}
}
#rewardsPage .headerContainerLeftSide {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 10px
}
#rewardsPage .headerContainerRightSide {
display: flex
}
@media only screen and (max-width: 700px) {
#rewardsPage .headerContainerRightSide {
flex-wrap:wrap;
align-items: center;
align-self: normal;
margin: 10px 0 14px -10px
}
}
#rewardsPage .rewardsModalLabel,#rewardsPage .downloadRewardLabel {
background: rgba(1,214,118,0.2);
font-weight: 500;
font-size: 12px;
color: #01d676;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center
}
#rewardsPage .comingSoonLabel {
background: #383855;
border-radius: 4px;
padding: 7px 12px;
color: #8083b2;
display: flex;
align-items: center;
justify-content: center
}
.downloadRewardModal {
min-width: 483px;
max-width: 483px
}
@media only screen and (max-width: 700px) {
.downloadRewardModal {
min-width:299px;
max-width: 299px;
padding: 23px
}
}
.downloadRewardSection {
padding: 6px !important
}
.downloadRewardLabel {
width: 100% !important;
height: 66px !important;
font-size: 18px !important;
line-height: 27px;
font-weight: 700 !important;
border-radius: 10px !important
}
.downloadClaimDescription {
font-weight: 600;
font-size: 14px;
line-height: 21px;
text-align: center;
color: #01d676
}
.downloadClaimDescription.hide {
display: none
}
.claimDownloadQRCode {
width: 250px;
height: 250px;
background-color: #1e1e2d;
margin: auto;
position: relative;
margin-top: 23px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center
}
@media only screen and (max-width: 700px) {
.claimDownloadQRCode {
width:150px;
height: 150px;
margin-top: 10px;
margin-bottom: 10px
}
}
.claimDownloadQRCode img {
width: 80%
}
.openAppLink {
display: flex;
align-items: center;
width: 100%;
background: #2f2f4a;
margin-top: 18px;
margin-bottom: 18px;
color: #adade2;
line-height: 136.19%;
font-size: 12px;
font-weight: 500;
border-radius: 10px;
padding: 16px
}
.openAppLink>i {
margin-right: 10px;
font-size: 16px;
color: #4a4a70
}
.openAppLink .openAppLinkText>img {
display: inline-block;
height: 12px;
width: 10px
}
.gainSurveysSectionTitle {
color: white;
padding: 5px 30px;
margin-bottom: 10px
}
.freeskinsRewardsBodySection {
padding: 10px;
background-color: #2a2b42;
border-radius: 5px;
margin-bottom: 10px
}
.gainSurveysGainCoinImg {
height: 20px;
margin-left: 2px;
margin-right: 10px;
margin-top: 7px
}
.gainSurveyInstruction {
margin: 5px 0 15px 0
}
.gainSurveyInstruction a {
color: black
}
.socialMediaSection {
display: flex;
gap: 10px;
align-items: center
}
@media only screen and (max-width: 700px) {
.socialMediaSection {
flex-wrap:wrap
}
}
.socialMediaSection .mr-lr {
margin-left: 10px;
margin-right: 10px
}
@media only screen and (max-width: 700px) {
.socialMediaSection .mr-lr {
margin-left:0;
margin-right: 0
}
}
.socialMediaSection .socialBox {
display: flex;
align-items: stretch;
justify-content: space-between;
background: #2c2c44;
box-shadow: 0 2px 5px rgba(27,27,43,0.15);
border-radius: 5px;
padding: 20px;
min-width: 200px;
width: 286px;
height: 132px
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.socialMediaSection .socialBox {
width:100%
}
}
@media only screen and (max-width: 700px) {
.socialMediaSection .socialBox {
width:100%
}
}
.socialMediaSection .socialBox .socialLeftBox {
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 86px;
background: #383855;
box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px #47476a;
border-radius: 4px;
flex-shrink: 0
}
@media only screen and (max-width: 380px) {
.socialMediaSection .socialBox .socialLeftBox {
width:40px;
height: 40px
}
}
@media only screen and (min-width: 600px) and (max-width:750px) {
.socialMediaSection .socialBox .socialLeftBox {
width:40px;
height: 40px
}
}
.socialMediaSection .socialBox .socialRightBox {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
max-width: 250px
}
.socialMediaSection .socialBox .socialRightBoxText {
font-weight: 600;
font-size: 19px;
text-align: right;
color: #fff;
line-height: 19px
}
.socialMediaSection .socialBox .socialAppText {
font-weight: 600;
font-size: 15px;
text-align: right;
color: #01d676
}
.socialMediaSection .socialBox .claimRewardBtn {
height: 32px;
width: 100%;
min-width: auto;
position: relative;
bottom: 8px
}
.socialMediaSection .socialBox .comingSoonLabel {
font-weight: 600;
font-size: 12px
}
.downloadRewardSection {
display: flex;
align-items: center;
justify-content: space-between;
background: #2c2c44;
box-shadow: 0 2px 5px rgba(27,27,43,0.15);
border-radius: 5px;
padding: 20px;
font-weight: 600;
font-size: 14px
}
.downloadRewardSection .downloadRewardLabel {
display: flex;
align-items: center;
justify-content: center;
width: 163px;
height: 46px;
background: rgba(1,214,118,0.2);
border-radius: 4px;
color: #01d676
}
@media only screen and (max-width: 700px) {
.downloadRewardSection .downloadRewardLabel {
width:48%;
height: 42px
}
}
.downloadRewardSection .comingSoonLabel {
width: 163px;
height: 46px
}
@media only screen and (max-width: 700px) {
.downloadRewardSection .comingSoonLabel {
width:48%;
height: 42px
}
}
.downloadRewardSection {
background: 0;
box-shadow: none;
border-radius: 0
}
.promoModal .btn {
box-shadow: none
}
.comingSoonBtn {
background-color: #383855;
color: #01d676
}
.comingSoonBtn:hover {
background-color: rgba(1,214,118,0.1803921569)
}
.smallBtn {
font-size: 12px;
height: 32px
}
.transparentBtn {
background-color: rgba(1,214,118,0.1803921569);
color: #01d676
}
.transparentBtn:hover {
background-color: rgba(1,214,118,0.1803921569)
}
footer.page-footer {
margin-left: 0;
transition: .25s;
background-color: #1d1e31;
position: relative
}
footer.page-footer>.footer-container {
max-width: 1080px;
margin: 0 auto;
font-family: "Poppins",sans-serif;
padding: 0 20px;
padding-right: 40px
}
footer.page-footer>.footer-container>a {
font-size: 28px;
color: #01d676
}
@media only screen and (max-width: 700px) {
footer.page-footer>.footer-container {
padding-bottom:200px
}
}
footer.page-footer .footerLogo {
height: 38px;
margin-top: 20px;
margin-bottom: 20px
}
footer.page-footer .footerNav {
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 90px
}
footer.page-footer .footerBlock--1 {
width: 164px
}
footer.page-footer .footerBlock--2 {
flex: 1
}
@media only screen and (max-width: 700px) {
footer.page-footer .footerBlock--3 {
position:absolute;
top: 215px
}
}
footer.page-footer .footerSubHeading {
color: #545683;
font-size: 21px;
font-weight: 500
}
@media only screen and (max-width: 700px) {
footer.page-footer .footerList>li {
margin-bottom:3px
}
}
footer.page-footer .footerList a,footer.page-footer .footerList span {
color: #9194c8;
font-size: 15px;
font-weight: 500
}
footer.page-footer img.footerCharacter {
position: absolute;
bottom: 0;
left: 40%;
height: 330px;
filter: grayscale(100%);
opacity: .25;
transform: scaleX(-1)
}
@media only screen and (max-width: 1199px) {
footer.page-footer img.footerCharacter {
width:300px;
height: auto;
bottom: 70px;
left: 50%;
transform: translate(-50%) scaleX(-1)
}
}
#loader {
width: 100vw;
height: 100vh;
background-color: #191a2b;
position: fixed;
top: 0;
left: 0;
z-index: 2100;
text-align: center
}
.loaderLogo {
max-height: 65px
}
.loaderLoader {
display: block;
margin: 0 auto
}
.text-hightlight {
color: #01d676
}
@media only screen and (min-width: 1200px) and (max-width:1399px) {
.chatActive .leaderboardPage .leaderboardTopThree {
flex-direction:column
}
.chatActive .leaderboardPage .leaderboxTopBox {
width: 100%;
margin-bottom: 100px
}
.chatActive .leaderboardPage .leaderboardEventBannerImg--daily,.chatActive .leaderboardPage .leaderboardEventBannerImg--monthly {
width: 100%
}
.chatActive .leaderboardPage .leaderboxTopBox--place1 {
top: 0;
order: -1
}
}
.leaderboardPage {
font-family: "Poppins",sans-serif;
position: relative;
background: url("/public/img/leaderboard-bg-top.png") top center no-repeat;
background-color: #1f1f30;
z-index: 1
}
@media only screen and (max-width: 700px) {
.leaderboardPage {
background-size:140vw 240px
}
.leaderboardPage[data-time=weekly] .leaderboardSecondaryBackground {
top: 510px
}
.leaderboardPage[data-time=monthly] .leaderboardSecondaryBackground {
display: none
}
}
.leaderboardPage .leaderboardSecondaryBackground {
background: url("/public/img/leaderboard-summer-bg-bottom.png") top center no-repeat;
background-size: 100%;
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
top: 500px
}
@media only screen and (max-width: 700px) {
.leaderboardPage .leaderboardSecondaryBackground {
top:440px
}
}
.leaderboardPage .leaderboardTimeSectionOuter {
max-width: 1220px;
margin: 0 auto;
padding: 30px 10px
}
@media only screen and (max-width: 700px) {
.leaderboardPage .leaderboardTimeSectionOuter {
max-width:100%;
padding: 15px 10px
}
}
.leaderboardPage .leaderboardTopRow {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 50px
}
@media only screen and (max-width: 700px) {
.leaderboardPage .leaderboardTopRow {
justify-content:center
}
}
.leaderboardPage .leaderboardTopRow .leaderboardNavButtons,.leaderboardPage .leaderboardTopRow .leaderboardTopInfoContainer {
margin-bottom: 10px;
display: flex;
gap: 10px
}
.leaderboardPage .leaderboardTopRow .leaderboardNavButtons .leaderboardFlag {
width: 30px;
border-radius: 5px
}
@media only screen and (max-width: 700px) {
.leaderboardPage .leaderboardTopRow .leaderboardNavButtons {
width:100%;
text-align: center;
display: flex;
flex-wrap: wrap;
gap: 3px
}
}
@media only screen and (max-width: 700px) {
.leaderboardPage .leaderboardTopRow .leaderboardTopInfoContainer {
width:100%;
display: flex;
justify-content: flex-end
}
}
.leaderboardPage .changeLeaderboardBtn {
height: 48px;
line-height: 48px;
border-radius: 9px;
border: 2px solid #443e5e;
background-color: transparent;
color: #575973;
font-weight: 500;
font-size: 14px;
box-shadow: none;
cursor: pointer;
display: inline-flex;
gap: 10px;
align-items: center;
white-space: nowrap
}
.leaderboardPage .changeLeaderboardBtn:not(:last-child) {
margin-right: 10px
}
@media only screen and (max-width: 700px) {
.leaderboardPage .changeLeaderboardBtn {
width:calc(50% - 1.5px) !important;
margin: 0 !important;
height: 55px;
display: inline-block
}
.leaderboardPage .changeLeaderboardBtn [data-time=daily] {
order: 1
}
.leaderboardPage .changeLeaderboardBtn [data-time=monthly] {
order: 3
}
.leaderboardPage .changeLeaderboardBtn [data-time=easter] {
order: 2
}
.leaderboardPage .changeLeaderboardBtn [data-time=custom] {
order: 4
}
}
.leaderboardPage .changeLeaderboardBtn.isSelected {
background: #383a56;
border: 1px solid #414365;
box-sizing: border-box;
border-radius: 9px;
color: #01d676
}
.leaderboardPage .changeLeaderboardBtn.easterLeaderboardBtn {
width: 149px;
background-image: url("/public/img/easter/easter-leader-btn-bg.png");
background-size: contain;
background-repeat: no-repeat;
border: 0;
background-color: unset
}
.leaderboardPage .leaderboardTopInfo {
height: 48px;
width: 48px;
background: rgba(255,184,0,0.1);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer
}
@media only screen and (max-width: 700px) {
.leaderboardPage .leaderboardTopInfo {
z-index:1
}
}
.leaderboardPage .leaderboardTopThree {
margin-top: 120px;
display: flex;
justify-content: space-between;
padding: 0 10px
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.leaderboardPage .leaderboardTopThree {
padding:0 5px
}
}
@media only screen and (max-width: 700px) {
.leaderboardPage .leaderboardTopThree {
flex-direction:column;
padding: 0;
margin-bottom: 10px
}
.leaderboardPage .leaderboardTopThree .leaderboxTopBox--place1 {
order: -1
}
}
.leaderboardPage .leaderboardTopThree--mobile {
display: none
}
@media only screen and (max-width: 700px) {
.leaderboardPage .leaderboardTopThree--mobile {
display:block;
margin-top: 90px
}
}
.leaderboardPage .leaderboxTopBox--place1 {
border: 1px solid transparent;
background: linear-gradient(#574c36,#222438) padding-box,linear-gradient(to bottom,#f4d355,#222438) border-box;
top: -91px;
position: relative
}
@media only screen and (max-width: 700px) {
.leaderboardPage .leaderboxTopBox--place1 {
top:0
}
}
.leaderboardPage .leaderboxTopBox--place1 .leaderAvatar {
border: 1px solid transparent;
background: #f3d354
}
.leaderboardPage .leaderboxTopBox--place1 .leaderPrizeBox {
border: 1px solid transparent;
background: linear-gradient(#383333,#222438) padding-box,linear-gradient(to bottom,#9d8945,#222438) border-box
}
.leaderboardPage .leaderboxTopBox--place2 {
border: 1px solid transparent;
background: linear-gradient(#4b4b59,#222438) padding-box,linear-gradient(to bottom,#cacaca,#222438) border-box
}
.leaderboardPage .leaderboxTopBox--place2 .leaderAvatar {
border: 1px solid transparent;
background: #cacaca
}
.leaderboardPage .leaderboxTopBox--place2 .leaderPrizeBox {
border: 1px solid transparent;
background: linear-gradient(#2a2f41,#222438) padding-box,linear-gradient(to bottom,#cacaca,#222438) border-box
}
.leaderboardPage .leaderboxTopBox--place3 {
border: 1px solid transparent;
background: linear-gradient(#4d3948,#222438) padding-box,linear-gradient(to bottom,#905c69,#222438) border-box
}
.leaderboardPage .leaderboxTopBox--place3 .leaderAvatar {
border: 1px solid transparent;
background: #905c69
}
.leaderboardPage .leaderboxTopBox--place3 .leaderPrizeBox {
border: 1px solid transparent;
background: linear-gradient(#292b40,#222438) padding-box,linear-gradient(to bottom,#905c69,#222438) border-box
}
.leaderboardTooltip .tooltip-inner {
color: #9496b9;
background: #383a56;
max-width: 300px;
border-radius: 8px;
font-family: "Poppins",sans-serif;
font-weight: 500;
font-size: 12px;
padding: 17px 22px
}
.leaderboxTopBox {
width: 291px;
height: 410px;
background: #292b4a;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between
}
@media only screen and (max-width: 700px) {
.leaderboxTopBox {
width:100%;
margin-bottom: 100px
}
}
.leaderboxTopBox .gainProfileLink {
text-align: center;
margin-top: -40px;
margin-bottom: 10px
}
.leaderboxTopBox .leaderAvatar {
border-radius: 50%;
width: 90px;
height: 90px;
position: relative;
z-index: 1
}
.leaderboxTopBox .leaderUsername {
max-width: 150px;
color: #fff;
font-size: 13px;
margin-top: 3px
}
.leaderboxTopBox .leaderPointsEarned {
color: rgba(232,232,232,0.6196078431);
font-weight: 600;
font-size: 14px
}
.leaderboxTopBox .leaderPrizeBox {
width: 251px;
height: 100%;
background: #22243f;
border-radius: 8px;
position: relative
}
.leaderboxTopBox .leaderReward {
background: rgba(119,119,119,0.4705882353);
border-radius: 5px;
height: 29px;
margin: 10px;
display: flex;
align-items: center;
justify-content: space-between;
color: #01d676;
padding: 5px 7px;
font-weight: 600;
font-size: 13px;
display: inline-block
}
.leaderboxTopBox .leaderReward .winnerPointsCoinLogo {
height: 12px;
width: 12px
}
.leaderboxTopBox .leaderCrown {
position: absolute;
top: 15px;
right: 50%;
width: 70px;
transform: translate(50%,-100%)
}
.leaderboxTopBox .leaderPrizeImage {
width: 200px;
position: absolute;
right: 0;
bottom: 0
}
.leaderboxTopBox .leaderPrizeName {
font-weight: bold;
text-align: right;
color: white;
padding-right: 20px;
position: relative;
z-index: 1
}
.leaderboxTopBox .leaderPlaceImage {
position: absolute
}
.leaderboxTopBox .leaderPlaceImage--place2 {
left: -28px;
bottom: -27px
}
.leaderboxTopBox .leaderPlaceImage--place1 {
left: 75px;
bottom: -36px
}
.leaderboxTopBox .leaderPlaceImage--place3 {
right: -28px;
bottom: -27px
}
@media only screen and (max-width: 1199px) {
.leaderboxTopBox .leaderPlaceImage--place1,.leaderboxTopBox .leaderPlaceImage--place2,.leaderboxTopBox .leaderPlaceImage--place3 {
left:-60px;
bottom: -16px
}
}
.leaderboardCountdown {
margin: 0 auto;
text-align: center;
font-size: 15px;
font-weight: 600;
margin-top: -45px;
letter-spacing: .04em
}
@media only screen and (max-width: 700px) {
.leaderboardCountdown {
margin-top:120px;
margin-top: -90px
}
}
.leaderboardCountdown .digit {
width: 22px;
display: inline-block
}
.leaderboardCountdown .muted {
color: #555673;
margin-right: 7px
}
.leaderboardPositionBox {
margin: 0 auto;
text-align: center;
background: #292b4a;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
max-width: 730px;
padding: 19px;
margin-top: 25px;
letter-spacing: .04em;
color: #cfd0e0;
position: relative;
line-height: 1.75
}
@media only screen and (max-width: 700px) {
.leaderboardPositionBox {
margin:20px
}
}
.leaderboardPositionBox .leaderboardRank {
padding: 2px 15px;
margin: 0 5px;
border-radius: 3px
}
.leaderboardPositionBox .leaderboard--gold {
background: rgba(255,184,0,0.1);
color: #fcce00
}
.leaderboardPositionBox .leaderboard--red {
background: rgba(255,70,70,0.1);
color: #ff4646
}
.leaderboardPositionBox .leaderboard--pink {
background: rgba(255,104,240,0.1);
color: #ff68f0
}
.leaderboardPositionBox .leaderboard--blue {
background: rgba(45,129,255,0.1);
color: #2d81ff
}
.leaderboardPositionBox .leaderboard--cyan {
background: rgba(167,255,255,0.1);
color: #a7ffff
}
.leaderboardPositionBox .leaderboard--white {
background: rgba(255,255,255,0.1);
color: white
}
.leaderboardPositionBox .leaderboardPositionBoxAvatar {
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 20px
}
.leaderboardPositionBox .exag {
color: #01d676;
font-weight: 600
}
.leaderboardTable {
margin-top: 10px;
border-collapse: separate;
border-spacing: 0 6px
}
.leaderboardTable th {
color: #515477;
font-weight: 500;
font-size: 14px
}
.leaderboardTable .leaderboardTableTh--rank {
padding-left: 30px
}
@media only screen and (max-width: 700px) {
.leaderboardTable .leaderboardTableTh--rank {
padding-left:15px
}
}
.leaderboardTable tbody tr {
background: #2c2c44;
box-shadow: 0 2px 5px rgba(27,27,43,0.15);
border: 0;
border-radius: 5px;
height: 60px
}
.leaderboardTable .leaderboardTableUser {
max-width: 50px;
text-overflow: ellipsis;
overflow: hidden
}
.leaderboardTable .leaderboardTableRank {
border-radius: 8px;
padding: 11px 27px;
margin-left: 5px;
font-weight: 600;
font-size: 14px
}
.leaderboardTable .leaderboard--gold {
background: rgba(255,184,0,0.1);
color: #fcce00
}
.leaderboardTable .leaderboard--red {
background: rgba(255,70,70,0.1);
color: #ff4646
}
.leaderboardTable .leaderboard--pink {
background: rgba(255,104,240,0.1);
color: #ff68f0
}
.leaderboardTable .leaderboard--blue {
background: rgba(45,129,255,0.1);
color: #2d81ff
}
.leaderboardTable .leaderboard--cyan {
background: rgba(167,255,255,0.1);
color: #a7ffff
}
.leaderboardTable .leaderboardTablePrize,.leaderboardTable .leaderboardTablePoints {
text-align: right;
color: #01d676;
padding-right: 30px;
font-weight: 600;
font-size: 14px
}
.leaderboardTable .gainProfileLink {
color: #fff
}
.leaderboardEventBanner {
width: 100%;
text-align: center
}
@media only screen and (max-width: 700px) {
.leaderboardEventBanner {
margin-bottom:20px;
margin-top: -40px
}
}
.leaderboardEventBanner .leaderboardEventBannerImg--daily {
width: 500px;
height: auto
}
.leaderboardEventBanner .leaderboardEventBannerImg--weekly {
width: 500px;
height: auto
}
@media only screen and (max-width: 1199px) {
.leaderboardEventBanner .leaderboardEventBannerImg--weekly {
width:100%
}
}
@media only screen and (max-width: 700px) {
.leaderboardEventBanner .leaderboardEventBannerImg--weekly {
margin-top:60px
}
}
.leaderboardEventBanner .leaderboardEventBannerImg--monthly {
width: 500px;
height: auto
}
@media only screen and (max-width: 700px) {
.leaderboardEventBanner img {
width:100% !important;
height: auto !important
}
}
.leaderboardInfobox {
max-width: 640px;
padding: 20px;
margin: 10px auto 190px auto;
background: linear-gradient(#243b4a,#202536) padding-box,linear-gradient(to bottom,#6ee4e8,#222438) border-box;
border: 1.5px solid transparent;
border-radius: 5px;
text-align: center
}
.leaderboardInfobox.gold {
background: linear-gradient(#574c36,#282533) padding-box,linear-gradient(to bottom,#f4d355,#282533) border-box;
font-size: 13px
}
.leaderboardInfobox.green {
background: linear-gradient(#233942,#22273f) padding-box,linear-gradient(to bottom,#04b386,#222438) border-box
}
.leaderboardInfobox.green em {
color: #01d676
}
.leaderboardInfobox em {
font-style: normal;
color: #6ee4e8;
font-weight: bold;
font-size: 15px;
white-space: nowrap
}
.leaderboardInfobox .leaderboardInfobox-heading {
font-size: 20px;
margin: 0;
margin-bottom: 10px;
font-weight: bold;
color: #ffd904
}
.leaderboardEventHomeBanner,.christmasEventHomeBanner {
position: absolute;
top: 25px;
right: 0
}
@media only screen and (max-width: 700px) {
.leaderboardEventHomeBanner,.christmasEventHomeBanner {
position:relative;
min-height: 60px;
margin-top: 15px;
margin-bottom: -5px;
top: 0;
right: 41px
}
.leaderboardEventHomeBanner img,.christmasEventHomeBanner img {
width: 80%
}
}
.easterLeaderboardOuter::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url("/public/img/easter/easter-leaderboard-bg.png");
background-size: contain;
background-repeat: no-repeat
}
@media only screen and (max-width: 700px) {
.easterLeaderboardOuter::before {
background-image:url("/public/img/easter/easter-leaderboard-bg-mobile.png");
background-size: contain;
background-repeat: repeat-y;
height: 100%;
max-height: 1720px
}
}
.easterLeaderboardOuter .easter-btn-container {
text-align: center
}
.easterLeaderboardOuter .easter-btn-container .easter-show-all-btn {
width: 282px;
height: 50px;
background: #01d676;
box-shadow: 0 1.54px 3.08px rgba(0,0,0,0.2),inset 0 1.54px 0 #00ffc2;
border-radius: 4px;
font-weight: 600;
font-size: 15px;
text-align: center;
color: #1d1d2e;
line-height: 50px;
cursor: pointer;
margin-top: 20px
}
.easterLeaderboardOuter.show-all .easter-show-all-btn {
display: none
}
.easterLeaderboardOuter:not(.show-all) .leaderboardTable tbody tr:nth-child(n+248) {
display: none
}
.easterLeaderboardOuter .leaderboardTopInfoContainer {
display: none !important
}
@media only screen and (max-width: 700px) {
.easterLeaderboardOuter .leaderboardTopInfoContainer {
display:none !important
}
}
.easterLeaderboardOuter .easterPointsInfo {
width: 48%;
position: relative;
padding: 19px 40px 24px 40px;
margin: 30px auto;
font-weight: 500;
font-size: 15px;
line-height: 22px;
text-align: center;
color: #fff;
z-index: 1
}
@media only screen and (max-width: 700px) {
.easterLeaderboardOuter .easterPointsInfo {
width:calc(100% - 40px)
}
}
.easterLeaderboardOuter .easterPointsInfo::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
background: linear-gradient(180deg,rgba(1,214,118,0.05) 0,rgba(1,214,118,0) 100%),linear-gradient(0,rgba(70,70,98,0.4),rgba(70,70,98,0.4));
border: 1px solid;
border-image-slice: 1;
border-width: 1px;
border-image-source: linear-gradient(180deg,#01d676 0,rgba(1,214,118,0) 100%);
transform: perspective(200px) rotateX(345deg);
z-index: -1
}
.easterLeaderboardOuter .leaderboardEventBannerImg--easter {
width: 78%
}
.easterLeaderboardOuter .leaderboardTopThree {
position: relative
}
@media only screen and (max-width: 700px) {
.easterLeaderboardOuter .leaderboardTopThree {
display:flex;
flex-direction: column;
align-items: center;
padding: 0 10px;
margin-bottom: 40px
}
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox {
position: relative;
background: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
padding: 0;
width: 275px;
height: 412.5px
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .leaderCrown,.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .leaderPrizeBox,.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .gainProfileLink {
display: none
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place1 {
background-image: url("/public/img/easter/leaderboard-place-1.png");
width: 330px;
height: 495px
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place1 .leaderUsername.easterElement {
font-size: 22px
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place1 .leaderPointsEarned.easterElement {
bottom: 3%;
font-size: 18px
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place2 {
background-image: url("/public/img/easter/leaderboard-place-2.png")
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place2 .profileLinkBlock.easterElement {
left: 52%
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place3 {
background-image: url("/public/img/easter/leaderboard-place-3.png")
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .profileLinkBlock.easterElement {
position: absolute;
top: 16%;
left: 50%;
transform: translateX(-50%);
display: block;
z-index: -1;
width: 31%
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .profileLinkBlock.easterElement div,.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .profileLinkBlock.easterElement .leaderAvatar {
height: 100%;
width: 100%;
border-radius: 50%
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .leaderUsername.easterElement {
position: absolute;
top: 42%;
display: block;
font-weight: 600;
font-size: 19px;
background: linear-gradient(180deg,#01d676 0,#10f18c 53.88%,#89f9c6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
opacity: .9;
cursor: pointer
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .leaderPointsEarned.easterElement {
position: absolute;
bottom: 2.5%;
display: block;
font-weight: 700;
font-size: 16px;
text-align: center;
color: #fff
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .empty.easterElement {
display: none
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.emptyTopBox .leaderUsername.easterElement:not(.empty) {
display: none
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.emptyTopBox .empty.easterElement {
display: block
}
@media only screen and (max-width: 700px) {
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place1,.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place2,.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place3 {
height:unset;
min-width: 300px;
min-height: 450px;
width: calc(100% - 20px);
padding-bottom: calc((100% - 20px) * 1.5);
top: unset
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place1 .leaderPointsEarned.easterElement,.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place2 .leaderPointsEarned.easterElement,.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place3 .leaderPointsEarned.easterElement {
bottom: 3%;
font-size: 18px
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox .leaderUsername.easterElement {
font-size: 22px
}
.easterLeaderboardOuter .leaderboardTopThree .leaderboxTopBox.leaderboxTopBox--place1 {
order: -1
}
}
.easterLeaderboardOuter .leaderboardTopThree--mobile {
display: none
}
.easterElement {
display: none
}
.leaderboardPage.leaderboardPage--country {
background-repeat: no-repeat;
background-size: 100%
}
.leaderboardPage.leaderboardPage--country .leaderboardEventBannerImg--daily,.leaderboardPage.leaderboardPage--country .leaderboardEventBannerImg--monthly {
max-width: 850px
}
@media only screen and (min-width: 1200px) {
.leaderboardPage.leaderboardPage--country .leaderboardEventBannerImg--daily,.leaderboardPage.leaderboardPage--country .leaderboardEventBannerImg--monthly {
width:auto !important;
height: 270px !important
}
}
@media only screen and (max-width: 1199px) {
.leaderboardPage.leaderboardPage--country .leaderboardEventBannerImg--daily,.leaderboardPage.leaderboardPage--country .leaderboardEventBannerImg--monthly {
width:100%
}
}
@media only screen and (min-width: 1200px) {
.leaderboardPage.leaderboardPage--country .leaderboardCountdownTop {
display:none
}
}
@media only screen and (max-width: 1199px) {
.leaderboardPage.leaderboardPage--country {
background-size:110% 200px;
background-position: top center
}
.leaderboardPage.leaderboardPage--country .leaderboardTimeSectionOuter {
padding: 10px;
padding-top: 30px
}
.leaderboardPage.leaderboardPage--country .leaderboardCountdown {
margin-top: -25px
}
.leaderboardPage.leaderboardPage--country .leaderboardCountdownBottom,.leaderboardPage.leaderboardPage--country .leaderboardPositionBox {
display: none
}
.leaderboardPage.leaderboardPage--country .leaderboardTopThree--mobile {
margin-top: 120px;
padding: 0 15px
}
.leaderboardPage.leaderboardPage--country .leaderboardTopThree--mobile .leaderboxTopBox--place1 {
top: 0
}
}
.leaderboardPage.leaderboardPage--country .leaderboardTopThree {
margin-top: 200px
}
.leaderboard-rank-plate {
color: white;
margin-top: -20px;
position: relative;
z-index: 1
}
.leaderboard-rank-plate .leaderboard-rank-plate--rank {
position: absolute;
top: 45%;
left: 50%;
font-weight: bold;
font-size: 20px;
transform: translate(-50%,-50%)
}
.leaderboard-rank-plate.leaderboard-rank-plate--place1 .outer-path {
fill: #756631;
stroke: #cda90e
}
.leaderboard-rank-plate.leaderboard-rank-plate--place2 .outer-path {
fill: #545a6d;
stroke: #87879e
}
.leaderboard-rank-plate.leaderboard-rank-plate--place3 .outer-path {
fill: #6e4d5d;
stroke: #925f6c
}
.leaderboardPagination {
text-align: center
}
@media only screen and (max-width: 700px) {
.customLeaderboardBtn {
margin-top:20px
}
.customLeaderboardBtn[data-contest=Subreddit] {
margin-top: -28px
}
.customLeaderboardBtn[data-contest=Anomaly] {
margin-top: 0;
height: 64px
}
}
.navigation .customLeaderboardBtn {
position: relative;
margin-right: 20px;
width: 200px;
transform: scale(0.85);
transform-origin: left center
}
.left-navigation .customLeaderboardBtn {
margin-top: 0;
padding-right: 5px
}
.changeLeaderboardBtn .customLeaderboardBtn {
height: 48px
}
.custom-leaderboard.changeLeaderboardBtn {
border: 0
}
.customLeaderboardCTAImage {
width: auto;
height: 100%
}
.navigation .customLeaderboardCTAImage {
width: 100%
}
@media only screen and (max-width: 700px) {
.customLeaderboardCTAImage {
width:100%
}
}
.leaderboxTopBox--real-life-prize .leaderPrizeImage {
width: 100%
}
.earnPage {
font-family: "Poppins",sans-serif
}
.earnPage .earnGetStartedBoxes {
display: inline-flex;
justify-content: flex-start;
background: #1d1e2f;
margin: 0;
padding: 15px 70px 25px 25px;
position: relative;
min-height: 124px
}
@media only screen and (max-width: 700px) {
.earnPage .earnGetStartedBoxes {
flex-direction:column;
align-items: center;
display: none
}
}
.earnPage .earnGetStartedBoxes .earn-start-guide {
display: flex;
justify-content: center;
align-items: center
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.earnPage .earnGetStartedBoxes .earn-start-guide {
width:95%
}
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item {
position: relative;
width: calc(33.3333333333% - 20px);
min-width: 290px;
height: 190px;
padding: 15px;
text-align: center
}
@media only screen and (max-width: 700px) {
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item {
width:100%;
height: 175px
}
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item::before {
content: "";
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #242539;
opacity: .8;
border-radius: 20px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(1) {
text-align: left
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(3) {
text-align: center
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(3) .guide-card {
padding-bottom: 27px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(3) .guide-card::before {
background-image: url("/public/img/template/body/guideBg2.png")
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(3) .guide-card .title {
margin-bottom: 3px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(3) .guide-card .description {
margin-bottom: 23px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(3) .guide-card .has-pointer::after {
right: -10px;
left: unset;
transform: rotate(322deg)
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(3) .guide-card .task-start-btn {
background-color: #01d676
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(5) {
text-align: right
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(5) .guide-card::before {
background-image: url("/public/img/template/body/guideBg3.png");
filter: none
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(5) .guide-card .title {
margin-bottom: 3px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(5) .guide-card .description {
margin-bottom: 23px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(5) .guide-card .cashout-btn {
width: max-content;
max-width: 200px;
background-color: #01d676
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item:nth-child(5) .guide-card .has-pointer::after {
left: 60%;
transform: rotate(339deg)
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card {
position: relative;
z-index: 3;
width: 100%;
height: 100%;
background: rgba(40,41,66,0.5);
border-radius: 10px;
overflow: hidden;
padding: 14px 21px;
-webkit-box-shadow: 0 0 8px #222339;
box-shadow: 0 0 8px #222339
}
@media only screen and (max-width: 700px) {
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card {
padding:17px
}
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(5px);
background: url("/public/img/template/body/guideBg1.png");
background-color: #333350;
border-radius: 10px;
background-size: cover;
background-repeat: no-repeat;
border-radius: 20px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .title {
font-weight: 600;
font-size: 18px;
color: #01d676;
margin-bottom: 6px
}
@media only screen and (max-width: 700px) {
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .title {
font-size:16px
}
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .description {
font-weight: 500;
font-size: 12px;
color: #fff
}
@media only screen and (max-width: 700px) {
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .description {
font-size:10px
}
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul {
position: relative;
margin-left: 15px;
background: #24253a;
border-radius: 5px;
margin: 0
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(40,41,65,0.5);
border-radius: 5px 5px 0 0
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul li {
list-style-type: disc;
font-weight: 500;
font-size: 10px;
letter-spacing: -0.03em;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 5px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul li.active {
position: relative;
left: -12.5px;
z-index: 1;
width: calc(100% + 25px);
background: #292a42;
box-sizing: border-box;
border: .2px solid rgba(1,214,118,0.2);
box-shadow: 0 0 19px 1px rgba(1,214,118,0.3);
border-radius: 5px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul li.active img {
width: 33px;
height: 33px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul li.active .task-title {
color: #fff;
font-size: 12px
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul li.active .task-prize {
color: #01d676;
font-size: 12px;
position: relative
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul li img {
width: 26px;
height: 26px;
border-radius: 4px;
background-color: #6aad21
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul li .task-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - 100px);
text-align: center
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul li .task-prize {
background: #222339;
box-shadow: inset 0 .8px 0 #4a4f75;
border-radius: 4px;
padding: 4px 8px
}
@media only screen and (max-width: 700px) {
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card ul li {
font-size:10px
}
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .task-start-btn,.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .cashout-btn {
width: 101px;
height: 34px;
background: #222339;
box-shadow: inset 0 1px 0 #4a4f75;
border-radius: 5px;
text-align: center;
font-weight: 600;
font-size: 12px;
display: inline-block;
line-height: 34px;
padding: 0 10px
}
@media only screen and (max-width: 700px) {
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .task-start-btn,.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .cashout-btn {
font-size:10px
}
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .coins {
position: absolute;
z-index: -1;
top: 10px;
left: 10px;
width: 54%;
height: 100%;
background: url("/public/img/template/body/coins.png");
background-size: contain;
background-repeat: no-repeat
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .has-pointer {
position: relative
}
.earnPage .earnGetStartedBoxes .earn-start-guide .guide-item .guide-card .has-pointer::after {
content: "";
position: absolute;
left: -20px;
bottom: -30px;
width: 50px;
height: 60px;
background: url("/public/img/template/body/hand.png");
background-size: contain;
background-repeat: no-repeat
}
.earnPage .earnGetStartedBox {
width: 25%;
max-width: 358px;
min-width: 250px
}
@media only screen and (max-width: 700px) {
.earnPage .earnGetStartedBox {
width:100%
}
}
.earnPage .earnGetStartedArrows {
margin: 0;
z-index: 2
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.earnPage .earnGetStartedArrows {
transform:scale(0.8);
margin: 0 -40px
}
}
@media only screen and (max-width: 700px) {
.earnPage .earnGetStartedArrows {
margin:-40px 0;
transform: rotate(90deg);
opacity: .6
}
}
.earnPage p {
font-size: 14px;
font-weight: 500
}
.earnPage h5 {
color: #00da72;
font-weight: bold;
font-size: 35px
}
.earnPage .earnHeader {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
display: flex;
justify-content: space-between
}
.earnPage .earnHeader .earnHeaderTitle {
color: #fff;
flex: 1;
font-style: normal;
font-weight: 700;
font-size: 20px
}
.earnPage .earnHeader .earnHeaderIcon {
margin-right: 12px;
display: flex;
align-items: center
}
.earnPage .earnHeader .earnHeaderIcon img {
width: 15px
}
.earnPage .earnHeader .earnHeaderTitleContainer {
display: flex;
flex-direction: row;
align-items: center
}
.earnPage .earnHeader .earnHeaderGreenDotLeft {
background: #01d676;
border-radius: 200px;
width: 12px;
height: 12px;
margin-right: 15px
}
.earnPage .earnHeader .earnHeaderPopularity {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 90px;
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #a9a9ca
}
@media only screen and (max-width: 700px) {
.earnPage .earnHeader .earnHeaderPopularity {
margin-right:0;
display: none
}
}
.earnPage .earnHeader .earnHeaderPopularity .switch {
margin-left: 5px;
position: relative;
top: -1px
}
.earnPage .earnHeader .earnHeaderPopularity .earnHeaderPopularityTooltip {
margin-left: 4px;
position: relative;
top: 2px
}
.earnPage .offerWallBox {
display: inline-block;
border-radius: 2px;
overflow: hidden
}
@media only screen and (min-width: 701px) {
.earnPage .offerWallBox {
height:115px
}
}
.earnPage .offerWallBox .openOfferWallBtn {
cursor: pointer;
height: 100%
}
.earnPage .offerWallBox .topSection {
padding: 15px;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
.earnPage .offerWallBox .bottomSection {
text-align: center;
padding: 4px;
color: rgba(0,0,0,0.69);
background-color: white
}
.earnPage .featuredOffers .earnOfferContainer,.earnPage .featuredOffers .offerWallBoxContainer,.earnPage .offerWalls .earnOfferContainer,.earnPage .offerWalls .offerWallBoxContainer,.earnPage .earnSurveys .earnOfferContainer,.earnPage .earnSurveys .offerWallBoxContainer {
display: flex;
flex-wrap: wrap;
align-items: flex-start
}
.earnPage .earnOfferContainer {
gap: var(--earn-offers-spacing);
overflow: scroll;
padding: 0 var(--earn-page-section-padding-horizontal);
-ms-overflow-style: none;
scrollbar-width: none
}
.earnPage .earnOfferContainer::-webkit-scrollbar {
display: none
}
.earnPage .offerWalls,.earnPage .earnSurveys {
background-color: #141522
}
.earnPage .earnSurveys {
padding-bottom: 25px
}
.earnPage .featuredOffers {
background-color: #171828;
padding-top: 30px;
padding-bottom: 30px;
min-height: 185px
}
@media only screen and (max-width: 700px) {
.earnPage .featuredOffers {
min-height:155px
}
}
.earnPage .featuredOffers .featuredOffersSubContainer {
display: flex;
flex-wrap: wrap
}
.earnPage .featuredOffersText {
position: relative;
margin-top: 8px;
margin-bottom: 20px;
color: #a9a9ca;
font-size: 14px
}
.earnPage .featuredOfferHot {
margin-left: 6px;
font-weight: 700;
font-size: 9px;
color: #ff6c62;
vertical-align: top
}
.earnPage .featuredOffersOfferWallBox {
width: 100%;
position: relative
}
@media only screen and (max-width: 700px) {
.earnPage .featuredOffersOfferWallBox {
width:100%;
height: 100%
}
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements {
position: absolute;
width: 100%;
bottom: 6px;
border-radius: 0 0 5px 5px;
z-index: 1;
color: white;
font-size: 10px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 5px 5px 0 5px;
display: flex
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverlayerRequirementsText {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
height: 15px
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverlayerRequirementsText br,.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverlayerRequirementsText ol,.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverlayerRequirementsText ul {
display: contents;
list-style: none
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverlayerRequirementsText b {
font-weight: normal
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverlayerRequirementsText>div *:first-child {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverlayerRequirementsText>div *:not(:first-child) {
display: none
}
@media only screen and (max-width: 700px) {
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements {
font-size:2vw;
padding: 1.5vw 5px 0 5px;
top: 80%
}
}
@media only screen and (min-width: 1200px) {
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverlayerRequirementsText {
padding-right:8px
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverLayerHelp {
flex: none;
color: #01d676;
position: relative;
z-index: 0;
margin-right: 2px
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements .offerWallOverLayerHelp::after {
content: "";
background-color: rgba(0,0,0,0.4);
position: absolute;
inset: 1px -4px;
z-index: -1;
border-radius: 10px
}
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements br,.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements ol,.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements ul {
display: contents;
list-style: none
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements b {
font-weight: normal
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements>div *:first-child {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerRequirements>div *:not(:first-child) {
display: none
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerText {
margin: 7px 5px;
color: white;
font-weight: bold;
font-size: 12px;
display: block;
z-index: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
flex: 1;
text-align: left
}
@media only screen and (max-width: 700px) {
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerText {
font-size:2.5vw
}
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerPrice {
font-size: 10px;
color: white;
margin: 5px
}
@media only screen and (max-width: 700px) {
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerPrice {
font-size:2.5vw
}
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerPriceBg {
position: relative;
z-index: 0;
top: 2px;
right: 2px;
font-weight: 600
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayerPriceBg::after {
content: "";
background: rgba(0,0,0,0.5882352941);
inset: -2px -4px;
z-index: -1;
position: absolute;
border-radius: 6px
}
.earnPage .featuredOffersOfferWallBox .offerWallOverLayer {
position: absolute;
width: 100%;
height: 40%;
bottom: 0;
display: flex;
background: rgba(0,0,0,0.4901960784);
border-radius: 0 0 5px 5px;
opacity: .95;
text-align: center;
z-index: 1
}
@media only screen and (max-width: 700px) {
.earnPage .featuredOffersOfferWallBox .offerWallOverLayer {
height:11vw
}
}
.earnPage .featuredOffersOfferWallBox .offerWallImageOuter {
position: absolute;
inset: 0
}
.earnPage .featuredOffersOfferWallBox .offerWallImageOuter .offerWallImageV2 {
width: 100%;
height: 100%;
border-radius: 5px
}
.earnPage .featuredOffersOfferWallBox .offerWallImageOuter .offerWallImageText {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
top: 15px;
font-weight: bold;
color: rgba(0,0,0,0.5215686275);
font-size: 20px;
line-height: 100%
}
.earnPage .featuredOffersOfferWallBox .topSection {
height: 80px;
border-radius: 3px
}
.earnPage .featuredOffersOfferWallBox .bottomSection {
display: none
}
.earnPage .featuredOffersOfferWallBox .offerValueBtnOuter {
position: absolute;
bottom: -14px;
left: 0;
width: 100%;
text-align: center
}
.earnPage .featuredOffersOfferWallBox .offerValueBtnOuter .offerValueBtn {
display: inline-block;
background-color: #00da72;
color: white;
border-radius: 30px;
padding: 3px 0;
width: 75%;
height: 25px;
line-height: 21px;
font-size: 14px;
font-weight: normal
}
.earnPage .offerwallContainer {
position: relative;
cursor: pointer;
display: inline-table;
overflow: hidden
}
.earnPage .offerwallContainer .offerwallAboveTriangle {
background: #292c46
}
.earnPage .offerwallContainer .offerwallBelowTriangle {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
min-height: 230px
}
@media only screen and (max-width: 700px) {
.earnPage .offerwallContainer .offerwallBelowTriangle {
width:100%;
min-height: 160px
}
}
.earnPage .offerwallContainer .offerwallGradientBar {
height: 1px
}
.earnPage .offerwallContainer .wallName {
color: #fff;
text-align: center
}
.earnPage .offerwallContainer.deactivated {
cursor: pointer
}
.earnPage .offerwallContainer.deactivated .offerwallBelowTriangle {
opacity: .5
}
.earnPage .offerwallContainer.deactivated .offerwallPadlock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1
}
.earnPage .offerwallContainer.deactivated .offerWallTooltipTrigger {
position: absolute;
top: 10px;
right: 10px;
z-index: 1
}
.earnPage .offerwallContainer.deactivated .offerWallTooltipTrigger svg {
width: 26px;
height: 26px;
color: #635dff
}
.earnPage .offerwallContainer.deactivated .offerwallImageV2,.earnPage .offerwallContainer.deactivated .offerwallPopularity,.earnPage .offerwallContainer.deactivated .offerWallBonusNotification {
filter: blur(3px);
opacity: .4
}
.earnPage .offerWallBonusNotification {
position: absolute;
top: var(--earn-page-card-padding);
right: var(--earn-page-card-padding);
background: rgba(1,214,118,0.2);
border-radius: 5px;
padding: 4px;
font-weight: 500;
font-size: 12px;
color: #01d676;
line-height: 12px
}
@media only screen and (max-width: 700px) {
.earnPage .offerWallBonusNotification {
border-radius:4px
}
}
.earnPage .offerWallBonusNotification .offerWallBonusWord {
display: inline-block
}
@media only screen and (max-width: 700px) {
.earnPage .offerWallBonusNotification .offerWallBonusWord {
display:none
}
}
.earnPage .offerwallPopularity {
margin-bottom: 16px;
border-radius: 12px;
padding: 5px 9px;
background: rgba(255,255,255,0.08)
}
.earnPage .offerwallPopularity .popularityText {
font-size: 12px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.8)
}
.earnPage .offerwallPopularity .popularityText .popularityIcon {
margin-right: 5px;
width: 10px;
height: 14px
}
.earnPage.earnPage--hidePopularity .offerwallPopularity {
display: none
}
.earnPage .offerwallContainer--adgem .offerwallImage {
height: 220px;
left: 35%
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--adgem .offerwallImage {
height:140px
}
}
.earnPage .offerwallContainer--adgem .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(173,134,246,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--adgem .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#af87f9 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--ayetstudios .offerwallImage {
height: 40px
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--ayetstudios .offerwallImage {
height:30px
}
}
.earnPage .offerwallContainer--ayetstudios .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(233,143,5,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--ayetstudios .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#f29300 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--offertoro .offerwallImage {
height: 43px
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--offertoro .offerwallImage {
height:30px
}
}
.earnPage .offerwallContainer--offertoro .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(212,60,66,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--offertoro .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#e73a3b 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--adgate .offerwallImage {
height: 90px;
top: 40%
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--adgate .offerwallImage {
height:60px
}
}
.earnPage .offerwallContainer--adgate .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(49,188,255,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--adgate .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#31bcff 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--revu .offerwallImage {
height: 37px
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--revu .offerwallImage {
height:30px
}
}
.earnPage .offerwallContainer--revu .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(191,191,191,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--revu .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#b1b1b1 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--lootably .offerwallImage {
height: 42px
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--lootably .offerwallImage {
height:35px
}
}
.earnPage .offerwallContainer--lootably .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(253,145,1,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--lootably .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#fd9101 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--wannads .offerwallImage {
height: 20px
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--wannads .offerwallImage {
height:18px
}
}
.earnPage .offerwallContainer--wannads .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(253,145,1,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--wannads .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#fd9101 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--adscend .offerwallImage {
height: 60px
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--adscend .offerwallImage {
height:50px
}
}
.earnPage .offerwallContainer--adscend .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(26,255,217,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--adscend .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#1affd9 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--freecash .offerwallImage {
height: 31px
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--freecash .offerwallImage {
height:26px
}
}
.earnPage .offerwallContainer--freecash .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(1,213,118,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--freecash .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#01d676 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--bitlabs-offers {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(191,191,191,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--bitlabs-offers .offerwallImage {
height: 50px
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--bitlabs-offers .offerwallImage {
height:39px
}
}
.earnPage .offerwallContainer--bitlabs-offers .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(0,123,255,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--bitlabs-offers .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#007bff 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--playtime .offerwallImage {
height: 85px;
top: 46%
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--playtime .offerwallImage {
height:65px
}
}
.earnPage .offerwallContainer--playtime .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(99,93,255,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--playtime .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#635dff 48.19%,#4a4f75 100%)
}
.earnPage .offerwallContainer--timewall .offerwallImage {
height: 50px
}
@media only screen and (max-width: 500px) {
.earnPage .offerwallContainer--timewall .offerwallImage {
height:39px
}
}
.earnPage .offerwallContainer--timewall .offerwallBelowTriangleBg {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(76,165,113,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .offerwallContainer--timewall .offerwallGradientBar {
background: linear-gradient(270deg,#4a4f75 0,#4ca571 48.19%,#4a4f75 100%)
}
.earnPage .surveyBoxContainer {
display: flex;
align-items: center;
flex-wrap: wrap
}
.earnPage .surveyBoxContainer .surveyOfferWallBox {
cursor: pointer;
background-color: #1e1e2e
}
.earnPage .surveyBoxContainer .surveyOfferWallBox .topSection {
padding: 40px 10px;
height: 80px;
position: relative
}
.earnPage .surveyBoxContainer .surveyOfferWallBox .topSection .newWallIcon {
position: absolute;
top: 10px;
right: -4px;
background: #16d981;
background: linear-gradient(90deg,#16d981 0,#18f5c8 100%);
color: white;
font-weight: bold;
padding: 0 10px;
font-size: 18px;
border-radius: 3px;
text-shadow: 0 0 25px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox .bottomSection {
display: none
}
.earnPage .surveyBoxContainer .surveyOfferWallBox.deactivated {
position: relative
}
.earnPage .surveyBoxContainer .surveyOfferWallBox.deactivated .surveyEarnContainer {
filter: blur(2px);
opacity: .5
}
.earnPage .surveyBoxContainer .surveyOfferWallBox.deactivated .surveywallPadlock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1
}
.earnPage .surveyBoxContainer .surveyOfferWallBox.deactivated .surveyTooltipTrigger {
position: absolute;
top: 10px;
right: 10px;
z-index: 1
}
.earnPage .surveyBoxContainer .surveyOfferWallBox.deactivated .surveyTooltipTrigger svg {
width: 26px;
height: 26px;
color: #635dff
}
.earnPage .surveyBoxContainer .surveyEarnContainer {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
min-height: 230px
}
@media only screen and (max-width: 700px) {
.earnPage .surveyBoxContainer .surveyEarnContainer {
min-height:160px
}
}
.earnPage .surveyBoxContainer .surveyEarnLeftBar {
background: #2a2d47;
box-shadow: inset 0 2px 5px #171a2f;
border-radius: 10px;
position: absolute;
height: 57px;
width: 15px;
left: 9px;
top: 50%;
transform: translateY(-50%)
}
.earnPage .surveyBoxContainer .surveyEarnLeftBar .surveyEarnLeftBarInner {
width: 5px;
height: 43px;
border-radius: 5px;
left: 5px;
top: 8px;
position: relative
}
.earnPage .surveyBoxContainer .surveyEarnContent {
flex: 1;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
.earnPage .surveyBoxContainer .surveyEarnContent .offerwallPopularity {
position: absolute;
bottom: 12px;
color: rgba(255,255,255,0.8);
font-size: 11px
}
.earnPage .surveyBoxContainer .surveyEarnNewButton {
position: absolute;
right: 4px;
top: 4px;
padding: 2px 13px 1px 13px;
font-weight: 600;
font-size: 9px;
line-height: 11px;
border-radius: 2px;
letter-spacing: 1.1px;
background: rgba(1,255,149,0.25);
color: #01ff97
}
.earnPage .surveyBoxContainer .surveyEarnHotButton {
position: absolute;
right: 4px;
top: 4px;
padding: 2px 13px 1px 13px;
font-weight: 700;
font-size: 9px;
line-height: 11px;
border-radius: 2px;
letter-spacing: 1.1px;
background: rgba(255,1,1,0.22);
color: #ff6c62
}
.earnPage .surveyBoxContainer .surveyEarnLogoV2 {
width: 80%
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--cpxresearch {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(233,143,5,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--cpxresearch .surveyEarnLeftBarInner {
background: #fff
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--cpxresearch .surveyEarnLogo {
height: 22px;
position: relative;
top: 2px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--cpxresearch .surveyEarnLogo--popularity {
margin-top: -21px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--revenuewall .surveyEarnLeftBarInner {
background: #f90
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--revenuewall .surveyEarnLogo {
height: 20px;
position: relative;
top: 2px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--revenuewall .surveyEarnLogo--popularity {
margin-top: -19px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--bitlabs {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(191,191,191,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--bitlabs .surveyEarnLeftBarInner {
background: #007bff
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--bitlabs .surveyEarnLogo {
height: 35px;
position: relative
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--bitlabs .surveyEarnLogo--popularity {
margin-top: -19px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--your-surveys .surveyEarnLeftBarInner {
background: #01ff98
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--your-surveys .surveyEarnLogo {
height: 40px;
position: relative
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--your-surveys .surveyEarnLogo--popularity {
margin-top: -28px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--your-surveys-unlimited .surveyEarnLeftBarInner {
background: #01ff98
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--your-surveys-unlimited .surveyEarnLogo {
height: 45px;
position: relative
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--your-surveys-unlimited .surveyEarnLogo--popularity {
margin-top: -28px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--freecash-exclusive {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(1,213,118,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--freecash-exclusive .surveyEarnLeftBarInner {
background: #01d676
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--freecash-exclusive .surveyEarnLogo {
height: 22px;
position: relative;
top: 2px;
margin-left: 10px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--freecash-exclusive .surveyEarnLogo--popularity {
margin-top: -21px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--tapresearch {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(212,60,66,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--tapresearch .surveyEarnLeftBarInner {
background: #f15d4b
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--tapresearch .surveyEarnLogo {
height: 40px;
position: relative
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--tapresearch .surveyEarnLogo--popularity {
margin-top: -23px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--inbrain {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(191,191,191,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--inbrain .surveyEarnLeftBarInner {
background: #184ef2
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--inbrain .surveyEarnLogo {
height: 30px;
position: relative
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--inbrain .surveyEarnLogo--popularity {
margin-top: -23px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--pollfish .surveyEarnLeftBarInner {
background: #dd4247
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--pollfish .surveyEarnLogo {
height: 90px;
position: relative
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--pollfish .surveyEarnLogo--popularity {
margin-top: -23px
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--theoremreach {
background: linear-gradient(360deg,rgba(74,79,117,0.2) -61.96%,rgba(173,134,246,0.2) -18.07%,rgba(74,79,117,0.2) 93.09%)
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--theoremreach .surveyEarnLeftBarInner {
background: #9855fc
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--theoremreach .surveyEarnLogo {
height: 33px;
position: relative
}
.earnPage .surveyBoxContainer .surveyOfferWallBox--theoremreach .surveyEarnLogo--popularity {
margin-top: -23px
}
.earnPage.earnPage--hidePopularity .surveyEarnContainer {
height: 80px
}
.earnPage.earnPage--hidePopularity .surveyEarnLogo--popularity {
margin-top: 0 !important
}
.featuredOfferTooltipContainer {
max-width: 320px
}
.featuredOfferTooltipContainer * {
color: white;
text-align: left
}
.featuredOfferTooltipContainer.tooltip.show {
opacity: .95;
font-family: "Poppins"
}
.featuredOfferTooltipContainer .tooltip-title {
font-weight: bold;
font-size: 14px;
margin-top: 0;
margin-bottom: 5px;
color: #9297d0
}
.featuredOfferTooltipContainer .tooltip-inner {
padding: 10px 12px;
border-radius: 4px;
background: #2a2f42;
font-size: 13px
}
.featuredOfferTooltipContainer .tooltip-inner ul,.featuredOfferTooltipContainer .tooltip-inner ol {
padding-left: 10px;
margin: 0
}
.featuredOfferTooltipContainer .tooltip-inner li::before {
content: counter(requirements-counter);
color: #01d676;
position: relative;
left: -5px
}
.featuredOfferTooltipContainer .tooltip-inner li {
counter-increment: requirements-counter;
list-style: none
}
.featuredOfferTooltipContainer .modal-trigger {
width: 100%;
text-align: center;
margin-top: 20px;
border-radius: 16px;
color: black;
display: flex;
align-items: center;
justify-content: center;
gap: 10px
}
.featuredOfferTooltipContainer .offer-tooltip-heading {
display: flex;
margin-bottom: 24px
}
.featuredOfferTooltipContainer .offer-tooltip-name {
flex: 1;
font-weight: 600;
margin: 0
}
.featuredOfferTooltipContainer .offer-tooltip-price {
position: relative;
z-index: 0;
font-size: 20px;
font-weight: 500
}
.featuredOfferTooltipContainer .offer-tooltip-price::after {
position: absolute;
z-index: -1;
content: "";
inset: -4px -8px;
border-radius: 6px;
background-color: rgba(0,0,0,0.4784313725)
}
.featuredOfferTooltipContainer .offer-tooltip-more-info {
text-align: center;
color: black
}
.featured-survey-question-mark {
font-size: 10px;
color: #01d676;
position: relative;
z-index: 0;
display: inline-block;
top: -2px
}
.offerWallOverLayerRequirements .featured-survey-question-mark {
top: 0
}
.featured-survey-question-mark .tooltip-content {
display: none
}
.featured-survey-question-mark::after {
content: "";
position: absolute;
z-index: -1;
inset: 1px -4px;
background-color: rgba(0,0,0,0.3098039216);
border-radius: 12px
}
@media only screen and (max-width: 1199px) {
.featured-survey-question-mark {
display:none
}
}
.disabledTooltipContainer .tooltip-arrow::before {
border-bottom-color: #5d6288
}
.disabledTooltipContainer .tooltip-inner {
background: #5d6288
}
.disabledTooltipContainer .tooltip-inner a {
color: white;
font-weight: bold;
display: inline-block;
border-bottom: 2px solid;
line-height: 100%
}
#promocodeModal {
overflow-y: visible;
top: 15% !important;
border: 10px solid #2c2b42
}
#promocodeModal .topRightArrow {
position: absolute;
right: -4px;
top: 100px
}
#promocodeModal .topLeftArrow {
position: absolute;
left: 20px;
top: -2px
}
#promocodeModal .bottomLeftArrow {
position: absolute;
left: -4px;
bottom: 30px
}
#promocodeModal .bottomRightArrow {
position: absolute;
right: 50px;
bottom: -5px
}
#promocodeModal .topTextContainer {
position: absolute;
top: -50px;
left: 0;
width: 100%;
text-align: center
}
#promocodeModal .topTextContainer img {
width: 400px
}
@media only screen and (max-width: 780px) {
#promocodeModal .topTextContainer img {
width:70%
}
}
@media only screen and (max-width: 650px) {
#promocodeModal .topTextContainer {
top:-40px
}
}
@media only screen and (max-width: 550px) {
#promocodeModal .topTextContainer {
top:0
}
}
#promocodeModal .enterCodeText {
color: #787ead;
text-align: center;
font-size: 16px;
margin-top: 65px
}
#promocodeModal .enterCodeText .enterCodeEmph {
color: #00e375
}
#video-container {
position: relative;
display: none;
align-items: center;
justify-content: center
}
#video-wrapper {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 0 #141427;
width: 64.1025641026%;
filter: drop-shadow(0 12px 43px rgba(0,0,0,0.13))
}
@media screen and (max-width: 992px) {
#video-wrapper {
border-radius:5px
}
}
#video-wrapper #video {
transition: 333ms ease;
width: 100%
}
#video-wrapper #modal-video {
transition: 333ms ease;
width: 100%
}
#video-wrapper #playpause {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
mix-blend-mode: overlay;
transition: .33s ease;
cursor: pointer
}
#video-wrapper #modal-playpause {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 15%;
mix-blend-mode: overlay;
transition: .33s ease;
cursor: pointer
}
#modal {
background: rgba(11,7,23,0.75);
opacity: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100vh;
transition: 250ms ease;
display: none;
align-items: center;
justify-content: center
}
#modal #modal-container {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
width: 40%;
background: #222437;
transition: 250ms ease;
transform: translateY(100px);
overflow: hidden
}
@media only screen and (max-width: 1440px) {
#modal #modal-container {
width:50%
}
}
@media only screen and (max-width: 992px) {
#modal #modal-container {
width:58.8235294118%
}
}
@media only screen and (max-width: 992px) {
#modal #modal-container {
width:83.3333333333%
}
}
#modal #modal-container #modal-header {
display: flex;
align-items: center;
flex-direction: row;
width: calc(100% - 50px);
margin: 1rem 0;
height: 30px
}
#modal #modal-container #modal-header div {
color: white;
font-size: 1.35vw;
font-family: "Roboto",Tahoma,Geneva,Verdana,sans-serif;
font-weight: bold
}
@media only screen and (max-width: 992px) {
#modal #modal-container #modal-header div {
font-size:2.2vw
}
}
@media only screen and (max-width: 500px) {
#modal #modal-container #modal-header div {
font-size:4vw
}
}
#modal #modal-container #modal-header div span {
color: #01d676;
text-shadow: 0 0 20px
}
#modal #modal-container #modal-header #close {
display: flex;
margin-left: auto;
filter: drop-shadow(0 0 10px #ff4b4b);
cursor: pointer
}
#modal #modal-container #video-wrapper {
height: fit-content;
width: calc(100% - 50px) !important
}
.auth-container #leftside-container .leftside-content .leftside-posible-winnings .possible-wins-block-container .possible-wins-block .win-item {
width: 100%;
height: 54px;
padding-top: 27px
}
.auth-container #leftside-container .leftside-content .leftside-posible-winnings .possible-wins-block-container .possible-wins-block .win-item .coin-icon {
bottom: 33px;
left: 30%;
width: 40%
}
.auth-container #leftside-container .leftside-content .leftside-posible-winnings .possible-wins-block-container .possible-wins-block .win-item:nth-child(2) .coin-icon {
bottom: 33px;
left: 25%;
width: 50%
}
.auth-container #leftside-container .leftside-content .leftside-posible-winnings .possible-wins-block-container .possible-wins-block .win-item:nth-child(3) .coin-icon {
left: 41%;
width: 22%;
bottom: 40px
}
.auth-container #leftside-container .leftside-content .leftside-posible-winnings .possible-wins-block-container .possible-wins-block .win-item:nth-child(4) .coin-icon {
left: 35%;
width: 30%
}
.auth-container #leftside-container .leftside-content .leftside-posible-winnings .possible-wins-block-container .possible-wins-block .win-item .coin-amount {
font-size: 12px
}
.auth-container #leftside-container .logo-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: center
}
.auth-container #leftside-container .logo-container img {
width: 250px
}
.auth-container #leftside-container .logo-container #cashout-container {
display: flex;
justify-content: space-between;
align-items: center
}
.auth-container #leftside-container .logo-container #cashout-container img {
width: 34px;
transform: translateY(5px)
}
.auth-container #leftside-container .logo-container #cashout-container #cashout-wrapper {
font-weight: 200;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
background: #3a3b5b;
width: 100%;
padding: .3rem
}
.auth-container #leftside-container .logo-container #cashout-container #cashout-wrapper .num-container {
background: #434468;
margin: 0 2px;
padding: .25rem .35rem;
border-radius: 0 0 3px 3px
}
.auth-container #leftside-container .logo-container #cashout-container #cashout-wrapper .decimal-container {
align-self: flex-end;
margin: 0 2px
}
.auth-container #rightside-container {
display: block;
width: 60%;
height: 100%
}
@media only screen and (max-width: 700px) {
.auth-container #rightside-container {
width:100%
}
}
.auth-container #rightside-container #auth-form-container {
display: block;
height: 100%;
width: 100%
}
.auth-container #rightside-container #auth-form-container #login-register-toggle {
margin-bottom: 3rem;
width: 100%;
display: flex
}
.auth-container #rightside-container #auth-form-container #login-register-toggle a {
transition: 400ms all ease-in-out;
position: relative;
cursor: pointer;
color: #444564;
font-size: 1.25rem;
font-weight: 400
}
.auth-container #rightside-container #auth-form-container #login-register-toggle a:first-child {
margin: 0 1rem
}
.auth-container #rightside-container #auth-form-container #login-register-toggle a.active {
color: #fff
}
.auth-container #rightside-container #auth-form-container #login-register-toggle a.active:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background: #00da71;
left: 0;
bottom: -0.5rem
}
.auth-container #rightside-container #auth-form-container #register-form-container label,.auth-container #rightside-container #auth-form-container #login-form-container label {
left: 0 !important
}
.auth-container #rightside-container #auth-form-container #register-form-container#register-form-container,.auth-container #rightside-container #auth-form-container #login-form-container#register-form-container {
display: none
}
.auth-container #rightside-container #auth-form-container #register-form-container#login-form-container,.auth-container #rightside-container #auth-form-container #login-form-container#login-form-container {
display: block
}
.auth-container #rightside-container #auth-form-container #register-form-container#login-form-container #login-form,.auth-container #rightside-container #auth-form-container #login-form-container#login-form-container #login-form {
display: block
}
.auth-container #rightside-container #auth-form-container #register-form-container#login-form-container #reset-email-container,.auth-container #rightside-container #auth-form-container #login-form-container#login-form-container #reset-email-container {
display: none
}
.auth-container #rightside-container #auth-form-container #register-form-container#login-form-container #reset-password-container,.auth-container #rightside-container #auth-form-container #login-form-container#login-form-container #reset-password-container {
display: none
}
.auth-container #rightside-container #auth-form-container #auth-social-divider {
display: flex;
align-items: center;
margin: .5rem 0
}
.auth-container #rightside-container #auth-form-container #auth-social-divider p {
margin: auto;
color: #32344f
}
.auth-container #rightside-container #auth-form-container #auth-social-divider div {
width: 45%;
height: 1px;
background: #343652
}
.auth-container #rightside-container #auth-form-container #auth-social-divider div:first-child {
left: 0
}
.auth-container #rightside-container #auth-form-container #auth-social-divider div:last-child {
right: 0
}
.auth-container #rightside-container #auth-form-container #auth-social-register {
position: relative;
display: flex;
align-items: center
}
.auth-container #rightside-container #auth-form-container #auth-social-register .auth-button {
position: relative;
width: 100%;
background: #33334c;
justify-content: space-between;
padding-left: 1.5rem;
padding-right: 1.5rem
}
.auth-container #rightside-container #auth-form-container #auth-social-register .auth-button img {
width: 20px
}
.auth-container #rightside-container #auth-form-container #auth-social-register .auth-button span {
color: white;
font-weight: 600;
text-shadow: 0 0 30px rgba(255,255,255,0.5)
}
.auth-container #rightside-container #auth-form-container #auth-social-register div {
margin: 0 .25rem
}
.auth-container #rightside-container #auth-form-container #auth-policies {
padding: .5rem 0
}
.auth-container #rightside-container #auth-form-container #auth-policies p {
color: #63658e;
font-size: 12px
}
.auth-container #rightside-container #auth-form-container #auth-policies p a {
color: #63658e
}
.auth-container #rightside-container #auth-form-container #auth-policies p a span {
color: #00da71
}
.auth-button {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
min-width: 130px;
background: #33334c;
color: #00e375;
border-radius: 5px;
box-shadow: none;
text-shadow: 0 0 15px #00e375
}
.auth-button:hover {
background: #33334c
}
.auth-input {
background: #1d1e2e !important;
border: none !important;
padding: 0 1rem !important;
width: calc(100% - 2rem) !important;
margin-top: .75rem !important;
border-radius: 5px !important
}
.auth-input[type]:focus {
border-bottom: none !important;
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important
}
.auth-label {
position: relative;
display: flex;
align-items: center;
color: white !important;
width: max-content !important
}
.auth-label:after {
content: "" !important;
position: relative !important;
width: 300px !important;
margin-left: 10px !important;
height: 1px !important;
background: linear-gradient(to right,#33334c,transparent) !important;
left: auto !important;
opacity: 1 !important
}
#auth-register-button,#auth-login-button {
display: flex;
align-items: center;
height: 50px;
border-radius: 4px;
margin-right: 1rem
}
#auth-register-button#auth-login-button,#auth-login-button#auth-login-button {
color: #00da71;
background: #33334c
}
#auth-register-button#auth-register-button,#auth-login-button#auth-register-button {
background: #00da71;
color: white
}
#auth-register-button span,#auth-login-button span {
font-weight: 600;
font-size: 1rem;
margin-right: 1rem
}
#auth-register-button img,#auth-login-button img {
width: 1.25rem;
margin: 0 .2rem
}
.reset-cancel-actions {
transition: all 300ms ease-in-out;
color: #63658e;
font-weight: 600
}
.reset-cancel-actions:hover {
cursor: pointer;
color: #7f80a5
}
.login-button-wrapper {
display: flex
}
.login-button-wrapper button {
margin-right: 2rem
}
.auth-register-check {
color: #63658e;
position: relative;
top: -10px;
display: block;
margin-bottom: 2px;
font-family: "Poppins",sans-serif
}
.auth-register-check [type=checkbox]+span:not(.lever) {
font-size: 12px;
padding-left: 38px;
line-height: 18px
}
.auth-register-check [type=checkbox]+span:not(.lever) a {
color: #63658e
}
.auth-register-check [type=checkbox]+span:not(.lever) span {
color: #00da71;
text-decoration: underline
}
.auth-register-check [type=checkbox]:not(:checked)+span:not(.lever):before,.auth-register-check [type=checkbox]:not(.filled-in)+span:not(.lever):after {
border-color: #474971;
border-radius: 5px
}
.auth-register-check [type=checkbox]:checked+span:not(.lever):before {
border-right: 2px solid #00da71;
border-bottom: 2px solid #00da71
}
.notifications-container {
display: inline-block;
height: 80px;
line-height: 100px;
padding: 0 10px;
vertical-align: middle;
z-index: 9999;
cursor: pointer
}
@media only screen and (min-width: 701px) {
.notifications-container {
right:-15px
}
}
.notifications-container .notifications-bell {
max-width: 40px;
cursor: pointer
}
#notifications-popup {
position: fixed;
display: none;
width: 500px;
height: 300px;
left: 0;
right: 40px;
top: 90px;
border-radius: 7px;
margin-left: auto;
z-index: 9999999
}
@media only screen and (max-width: 1400px) {
#notifications-popup {
width:300px;
right: 20px
}
}
#notifications-popup .notifications--header {
height: 50px;
background: #232333;
border-radius: 7px 7px 0 0;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center
}
#notifications-popup .notifications--header p:nth-child(1) {
font-size: 16px;
line-height: 3px;
color: #fff;
font-weight: bold;
font-family: "Effra"
}
#notifications-popup .notifications--header p:nth-child(2) {
font-size: 13px;
line-height: 3px;
color: #01d676;
font-family: "Effra";
text-align: right;
cursor: pointer
}
#notifications-popup .notifications--header p:nth-child(2):hover {
filter: drop-shadow(0 0 8px #01d676)
}
#notifications-popup #notifications--content--container {
background: #232333;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden
}
#notifications-popup #notifications--content--container .notifications--content--wrapper {
display: flex;
flex-direction: column;
padding: 0 1rem;
max-height: 450px;
overflow-y: auto;
background: #262638
}
#notifications-popup #notifications--content--container .notifications--content--wrapper:hover {
background: #222339;
cursor: pointer
}
#notifications-popup #notifications--content--container .notifications--content--wrapper:last-child {
border-radius: 0 0 7px 7px
}
#notifications-popup #notifications--content--container .notifications--content--wrapper:last-child .notifications--content {
border-bottom: 0 !important
}
#notifications-popup #notifications--content--container .notifications--content--wrapper .notifications--content {
transition: all 250ms ease-in-out;
padding: .75rem 0;
display: flex;
width: 100%;
height: 100%;
align-items: center;
border-bottom: 1px solid #3b3b57
}
#notifications-popup #notifications--content--container .notifications--content--wrapper .notifications--content .category-image img {
max-width: 40px
}
#notifications-popup #notifications--content--container .notifications--content--wrapper .notifications--content .notification-text {
padding: 0 1rem;
display: block
}
#notifications-popup #notifications--content--container .notifications--content--wrapper .notifications--content .notification-text .category-header {
font-size: 16px;
color: #fff;
font-weight: bold;
line-height: initial;
font-family: "Effra";
margin: 0;
margin-bottom: .25rem
}
#notifications-popup #notifications--content--container .notifications--content--wrapper .notifications--content .notification-text .notification {
line-height: initial;
font-size: 13px;
color: #9b9bb9;
font-family: "Effra";
margin: 0
}
.rebrandingModal {
max-width: 891px;
width: 100%;
max-height: 393px;
padding: 30px;
font-family: "Poppins",sans-serif
}
@media only screen and (min-width: 701px) {
.rebrandingModal {
top:20% !important
}
}
@media only screen and (max-width: 700px) {
.rebrandingModal {
padding:20px 15px;
max-height: 90vh;
max-width: 95vw;
border-radius: 15px;
top: 5vh !important
}
}
.rebrandingModal .rebrandingModalBanner {
width: 100%;
margin-top: -30px
}
@media only screen and (max-width: 700px) {
.rebrandingModal .rebrandingModalBanner {
display:none
}
}
.rebrandingModal .rebrandingModalBanner--mobile {
display: none
}
@media only screen and (max-width: 700px) {
.rebrandingModal .rebrandingModalBanner--mobile {
display:block;
width: 100%;
margin-bottom: 15px
}
}
.rebrandingModal .firstParagraph {
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #8b8baa;
margin: 5px 15px
}
@media only screen and (max-width: 700px) {
.rebrandingModal .firstParagraph {
margin:8px 0;
font-size: 13.5px
}
}
.rebrandingModal .secondSection {
display: flex;
margin: 10px 15px
}
@media only screen and (max-width: 700px) {
.rebrandingModal .secondSection {
flex-direction:column;
margin: 0
}
}
.rebrandingModal .secondParagraph {
flex: 1;
color: #01d676;
font-size: 14px;
font-weight: 700;
margin: 0;
margin-right: 40px
}
@media only screen and (max-width: 700px) {
.rebrandingModal .secondParagraph {
margin:8px 0;
font-size: 13.5px
}
}
.rebrandingModal .goToFreecashBtn {
display: flex;
align-items: center;
justify-content: space-between;
width: 329px;
height: 59px;
background: linear-gradient(0,#01d676 23.39%,#36ff62 155.65%);
box-shadow: 0 3px 15px rgba(1,214,118,0.25);
border-radius: 8px
}
.rebrandingModal .goToFreecashBtn:hover {
transform: scale(1.05)
}
@media only screen and (max-width: 700px) {
.rebrandingModal .goToFreecashBtn {
width:100%;
margin-top: 15px
}
}
.rebrandingModal .goToFreecashBtn .goToFreecashBtnText {
margin-left: 21px
}
.rebrandingModal .goToFreecashBtn .goToFreecashSquare {
background: linear-gradient(0,rgba(0,142,78,0.4),rgba(0,142,78,0.4));
box-shadow: inset 0 4px 4px rgba(0,0,0,0.1),inset 0 -0.5px 1px rgba(59,243,159,0.4);
border-radius: 8px;
width: 42px;
height: 39px;
margin-right: 11px;
display: flex;
align-items: center;
justify-content: center
}
.rebrandingModal .goToFreecashBtn .goToFreecashSquare img {
width: 25px
}
.bonusCodeModal {
top: 25% !important;
background: transparent;
box-shadow: none
}
.bonusCodeModal .promoCodeBox {
margin: 25px 5px 5px 5px
}
@media only screen and (max-width: 700px) {
.bonusCodeModal .promoContainer {
flex-direction:column
}
}
.bonusCodeModal .promoInputContainer {
margin-right: 15px
}
@media only screen and (max-width: 700px) {
.bonusCodeModal .promoInputContainer {
margin:0 0 20px 0
}
}
.bonusCodeModal .claimGainBonusCodeBtn {
margin-left: 0;
font-size: 13px;
font-weight: 700
}
@media only screen and (max-width: 700px) {
.bonusCodeModal .claimGainBonusCodeBtn {
width:80%
}
}
#rewardsPage {
background: #1c1925;
width: 100%
}
.rewards-container {
background: #242438;
border-radius: 10px;
padding: 27px 16px 15px 16px
}
.rewards-container .btnsContainerHeader {
margin-bottom: 26px
}
.rewards-container .promoCodeBox {
margin-bottom: 20px;
max-width: 1918px
}
.rewards-container .promoCodeBox .promoCodeBodySection {
max-width: calc(70% + 500px)
}
.rewards-container .rewardsSection {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 14px;
max-width: 1918px
}
.rewards-container .rewardsSection .dailyRewordsSection {
width: calc(70% - 14px)
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.rewards-container .rewardsSection .dailyRewordsSection {
width:calc(60% - 14px)
}
}
@media only screen and (max-width: 700px) {
.rewards-container .rewardsSection .dailyRewordsSection {
width:100%
}
}
.rewards-container .rewardsSection .dailyLadderSection {
width: 30%;
max-width: 500px
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.rewards-container .rewardsSection .dailyLadderSection {
width:40%
}
}
@media only screen and (max-width: 700px) {
.rewards-container .rewardsSection .dailyLadderSection {
width:100%
}
}
.rewards-container .rewardsSection .socialMediaSection {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap
}
.rewards-container .rewardsSection .socialMediaSection .socialBox {
height: 105px;
width: 331px;
gap: 18px
}
@media only screen and (max-width: 700px) {
.rewards-container .rewardsSection .socialMediaSection .socialBox {
width:calc(50% - 5px);
min-width: 292px;
gap: 13px
}
}
.rewards-container .rewardsSection .socialMediaSection .socialBox .socialLeftBox {
width: 65px;
height: 62px
}
.rewards-container .rewardsSection .socialMediaSection .socialBox .socialRightBox .socialRightBoxText a,.rewards-container .rewardsSection .socialMediaSection .socialBox .socialRightBox .socialRightBoxText div {
font-size: 14px;
font-weight: 600;
color: #fff
}
.rewards-container .affiliateBanner {
width: 100%;
height: auto;
margin-bottom: 15px;
display: block
}
.rewards-container .freecashRewardsStdSection {
background: #2c2c44;
padding: 30px 20px 20px 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(27,27,43,0.15);
width: 100%;
margin-bottom: 15px
}
.rewards-container .freecashRewardsStdSection .ladderTitle {
font-weight: bold;
font-size: 18px;
color: #01d676;
margin-bottom: 22px;
display: flex;
align-items: center;
gap: 10px
}
.rewards-container .freecashRewardsStdSection .ladderTitle span:last-child {
font-size: 0
}
.rewards-container .freecashRewardsStdSection .stdTitle {
color: #01d676;
font-weight: bold;
font-size: 18px;
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
margin-bottom: 7px
}
@media only screen and (max-width: 1199px) {
.rewards-container .freecashRewardsStdSection .stdTitle {
flex-direction:column;
justify-content: flex-start;
align-items: flex-start
}
}
.rewards-container .freecashRewardsStdSection .stdTitle .supportText {
font-size: 11px;
font-weight: normal;
color: #505070
}
.rewards-container .freecashRewardsStdSection .stdTitle .supportText span {
color: #01d676
}
.rewards-container .freecashRewardsStdSection .affiliate-info {
display: flex;
align-items: center;
margin-bottom: 5px
}
.rewards-container .freecashRewardsStdSection .affiliate-info>div {
display: inline-block
}
.rewards-container .freecashRewardsStdSection .affiliate-info .stdP {
font-weight: 600;
font-size: 13px;
margin-right: 12px
}
.rewards-container .freecashRewardsStdSection .affiliate-info .stdP span {
color: #01d676
}
.rewards-container .freecashRewardsStdSection .affiliate-info .nav-referral {
display: flex;
margin-left: auto;
background: #01d676
}
@media only screen and (min-width: 1400px) {
.rewards-container .freecashRewardsStdSection .affiliate-info .nav-referral {
display:none
}
}
@media only screen and (max-width: 1199px) {
.rewards-container .freecashRewardsStdSection .affiliate-info .nav-referral {
display:none
}
}
.rewards-container .freecashRewardsStdSection .affiliate-info .affiliate-socials {
font-size: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 5px;
min-width: 85px;
margin-right: 12px
}
.rewards-container .freecashRewardsStdSection .affiliate-info .affiliate-socials .social-btn {
width: 73px;
height: 25px;
background: #01d676;
box-shadow: inset 0 1px 0 #00ffc2;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer
}
.rewards-container .freecashRewardsStdSection .affiliate-info .affiliate-socials .social-btn span {
font-weight: 600;
font-size: 12px;
color: #fff;
margin-right: 5px
}
.rewards-container .freecashRewardsStdSection .affiliate-info .affiliate-socials .social-btn img {
width: 20px;
height: 20px
}
.rewards-container .freecashRewardsStdSection .affiliate-info .affiliate-socials .social-item {
display: inline-block;
width: 25px;
height: 25px;
background: #383855;
box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px #47476a;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer
}
.rewards-container .freecashRewardsStdSection .affiliate-rewards {
overflow-x: hidden;
padding-top: 10px
}
.rewards-container .freecashRewardsStdSection .affiliate-rewards .rewards-slider-container {
margin-bottom: 5px
}
.rewards-container .freecashRewardsStdSection .affiliate-rewards .rewards-slider-container .rewards-slider {
left: calc(50% - 744px)
}
@media only screen and (max-width: 700px) {
.rewards-container .freecashRewardsStdSection .affiliate-rewards .rewards-slider-container {
height:90px
}
.rewards-container .freecashRewardsStdSection .affiliate-rewards .rewards-slider-container .win-line {
height: 90px
}
.rewards-container .freecashRewardsStdSection .affiliate-rewards .rewards-slider-container .rewards-slider {
left: calc(50% - 480px)
}
.rewards-container .freecashRewardsStdSection .affiliate-rewards .rewards-slider-container .rewards-slider .reward-item {
height: 80px;
width: 80px;
padding: 8px
}
.rewards-container .freecashRewardsStdSection .affiliate-rewards .rewards-slider-container .rewards-slider .reward-item .coin-icon {
height: 28px;
background-size: contain
}
.rewards-container .freecashRewardsStdSection .affiliate-rewards .rewards-slider-container .rewards-slider .reward-item .coin-amount {
font-size: 12px
}
}
.rewards-container .freecashRewardsStdSection .seeAffiliatesText {
color: #b6b6cb;
font-size: 12px;
margin-top: 15px;
cursor: pointer
}
.rewards-container .freecashRewardsStdSection .seeAffiliatesText i {
position: relative;
top: 1px
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer {
margin-top: 20px;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(7,1fr);
grid-gap: 10px
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox {
background-color: #383855;
color: #616184;
padding: 15px 0;
text-align: center;
margin-top: 5px;
border-radius: 4px
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox .claimStreakRewordBtn {
display: none
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.active button {
display: none
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.active .claimStreakRewordBtn {
display: inline-block;
background: #01d676;
box-shadow: inset 0 1px 0 #00ffc2;
color: white;
cursor: pointer
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.claimed button:not(.claimStreakRewordBtn) {
background: #434364;
color: #616184
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.claimed button:not(.claimStreakRewordBtn) span:first-child {
display: none
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.claimed button:not(.claimStreakRewordBtn) span:last-child {
display: inline
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.active,.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.claimed {
background: rgba(1,214,118,0.1)
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.active .topIcon,.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.claimed .topIcon {
color: #00d676
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.active .topIcon .activeDisplay,.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.claimed .topIcon .activeDisplay {
display: inline-block
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.active .topIcon .inactiveDisplay,.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.claimed .topIcon .inactiveDisplay {
display: none
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.active h5,.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.claimed h5 {
color: #01d676
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.active h6,.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.claimed h6 {
color: #01d676
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.day7 .blinkingCoinsContainer {
height: 15px;
overflow: hidden;
position: relative
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.day7 .blinkingCoinsContainer .blinkingCoins {
width: 100%;
text-align: center;
position: absolute;
color: #ffcc4d;
animation-name: blinkingCoins;
animation-duration: 2.5s;
animation-delay: 2s
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.day7 .blinkingCoinsContainer .blinkingCoins h6 {
height: 15px;
font-weight: 500
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox.day7 h6 {
color: #ffcc4d
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox .topIcon {
color: #8a8aac;
font-size: 20px;
text-align: center;
line-height: 20px
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox .topIcon .activeDisplay {
display: none
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox .topIcon .inactiveDisplay {
display: inline-block
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox h5 {
font-size: 11px;
font-weight: bold;
margin-top: 10px;
margin-bottom: 5px
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox h6 {
font-size: 9px;
margin: 0
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox button {
padding: 3px 11px;
border-radius: 6px;
display: inline-block;
margin-top: 9px;
background: #434364;
color: #616184;
cursor: default;
max-width: 90%;
transition: .3s;
font-size: 10px
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox button span:last-child {
display: none
}
.rewards-container .freecashRewardsStdSection .streakBoxesContainer .streakBox .goldCoins {
color: #ffcc4d
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.rewards-container .freecashRewardsStdSection .streakBoxesContainer {
grid-template-columns:repeat(auto-fill,minmax(75px,1fr))
}
}
@media only screen and (max-width: 700px) {
.rewards-container .freecashRewardsStdSection .streakBoxesContainer {
grid-template-columns:repeat(auto-fill,minmax(95px,1fr))
}
}
.rewards-container .freecashRewardsStdSection .alreadyEarnedBox {
background: #383855;
color: #616184;
padding: 10px 15px;
width: 100%;
margin-top: 15px;
border-radius: 4px;
font-size: 13px;
display: flex
}
.rewards-container .freecashRewardsStdSection .alreadyEarnedBox span {
color: #01d676
}
.rewards-container .freecashRewardsStdSection .alreadyEarnedBox i {
font-size: 17px;
margin-right: 7px
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection {
margin-top: 15px;
display: flex;
gap: 10px;
flex-wrap: wrap
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection>div:first-child,.rewards-container .freecashRewardsStdSection #affiliateDetailsSection>div:nth-child(2) {
flex-grow: 1
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection>div:last-child {
flex-grow: 2
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox {
background: linear-gradient(0,#242438,#242438),linear-gradient(0,#242438,#242438),linear-gradient(0,#242438,#242438),#242438;
box-shadow: 0 2px 5px rgba(27,27,43,0.15);
padding: 0 15px;
border-radius: 5px;
min-height: 90px;
display: flex;
align-items: center;
gap: 15px
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox .leftSection {
float: left;
margin-right: 15px
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox .leftSection img {
height: 26px
}
@media only screen and (max-width: 700px) {
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox>svg {
display:none
}
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox .referralInfo,.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox h6 {
margin: 0;
font-family: Poppins
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox .referralInfo {
color: #01d676;
font-size: 14px;
position: relative;
bottom: 5px
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox .referralInfo svg {
margin-right: 5px;
display: none
}
@media only screen and (max-width: 700px) {
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox .referralInfo svg {
display:inline-block
}
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .usersReferredBox h6 {
font-size: 10px;
position: relative;
top: 5px
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .codeDetailsBox .buttons-container {
display: flex;
gap: 10px
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .codeDetailsBox .yourCodeBox {
margin: 0
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .codeDetailsBox .yourCodeBox input {
margin-bottom: 10px;
height: 39px
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .codeDetailsBox .yourCodeBox label.active {
display: none
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .codeDetailsBox .yourCodeBox label span {
color: #00d676
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .codeDetailsBox .changeCodeBtn,.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .codeDetailsBox .copyLinkBtn {
margin: 0;
display: inline-block;
width: 100%;
font-family: Poppins;
font-size: 12px;
font-weight: 600;
border-radius: 4px;
height: 40px;
background: #01d676;
box-shadow: inset 0 1px 0 #00ffc2;
transition: .2s
}
.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .codeDetailsBox .changeCodeBtn.inactive,.rewards-container .freecashRewardsStdSection #affiliateDetailsSection .codeDetailsBox .copyLinkBtn.inactive {
background: #383855;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
color: #707095
}
.rewards-container #dailyBonusCooldownLadderSection {
text-align: center
}
.rewards-container #dailyBonusCooldownLadderSection .cooldownTitle {
font-size: 14px;
font-weight: 500;
text-align: center;
margin-top: 40px
}
.rewards-container #dailyBonusCooldownLadderSection #countdownBox {
margin-top: 15px;
width: 80%;
display: inline-block
}
.rewards-container #dailyBonusCooldownLadderSection #countdownBox .tick-label.tick-text {
display: none
}
.rewards-container #dailyBonusCooldownLadderSection #countdownBox .tick-group:not(:last-child) {
margin-right: 15px
}
.rewards-container #dailyBonusCooldownLadderSection #countdownBox .tick-flip-panel {
color: #484867;
background: #fff
}
.rewards-container #dailyBonusCooldownLadderSection #dontWantWaitSection .dontWantWaitTitle {
margin-top: 30px;
font-size: 18px;
color: #01d676;
font-weight: 600
}
.rewards-container #dailyBonusCooldownLadderSection #dontWantWaitSection p {
font-size: 10px;
font-weight: 600;
margin-bottom: 25px
}
.rewards-container #dailyBonusCooldownLadderSection #dontWantWaitSection .imgsContainer {
text-align: center;
margin-top: 20px
}
.rewards-container #dailyBonusCooldownLadderSection #dontWantWaitSection .imgsContainer img {
width: 49%
}
.rewards-container #dailyBonusCooldownLadderSection #dontWantWaitSection .surveysList {
width: 100%;
margin-bottom: 10px
}
.rewards-container #dailyBonusCooldownLadderSection #dontWantWaitSection .surveysList .surveysRow {
text-align: center
}
.rewards-container #dailyBonusCooldownLadderSection #dontWantWaitSection .surveysList .surveysRow img {
box-shadow: 0 0 20px rgba(28,28,42,0.5607843137);
width: calc(50% - 4px)
}
.rewards-container #dailyBonusCooldownLadderSection #dontWantWaitSection .surveysList .surveysRow:not(:first-child) {
position: relative;
top: -15px
}
.rewards-container #dailyBonusCooldownLadderSection #yourTicketsSection {
background: rgba(36,36,56,0.8);
padding: 20px 0;
border-radius: 5px;
margin-bottom: 15px
}
.rewards-container #dailyBonusCooldownLadderSection #yourTicketsSection h6 {
color: #616184;
font-size: 19px;
font-weight: bold;
vertical-align: top
}
.rewards-container #dailyBonusCooldownLadderSection #yourTicketsSection h6 span {
position: relative;
bottom: 6px;
margin-left: 10px
}
.rewards-container #dailyBonusCooldownLadderSection #yourTicketsSection h6 span .user-tickets-count {
position: initial;
margin: 0
}
.rewards-container #dailyBonusCooldownLadderSection #earnTicketsBox {
background: #242438;
padding: 8px;
border-radius: 5px;
display: flex;
gap: 10px
}
.rewards-container #dailyBonusCooldownLadderSection #earnTicketsBox .customBtn {
min-width: auto;
margin-left: 0;
flex-grow: 1;
background: #01d676;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 0 0 #00ffc2 inset
}
.rewards-container #dailyBonusCooldownLadderSection #earnTicketsBox .customBtn.inactive {
background: linear-gradient(0,rgba(1,214,118,0.5),rgba(1,214,118,0.5)),#2c2c44;
box-shadow: inset 0 1px 0 rgba(0,255,194,0.19);
backdrop-filter: blur(30px);
color: #8ac0ae;
cursor: not-allowed
}
.rewards-container .dailyBonusActualLadderSection #dailyBonusActualLadderContainer {
background: #242438;
text-align: center;
padding: 10px 0;
border-radius: 4px
}
.rewards-container .dailyBonusActualLadderSection.active .bonusLadderItem:last-child .ladder path {
animation-duration: .35s;
animation-name: blinkingRed;
animation-iteration-count: infinite;
animation-delay: 1.175s
}
.rewards-container .dailyBonusActualLadderSection.active .bonusLadderItem.blink .textContainer h6,.rewards-container .dailyBonusActualLadderSection.active .bonusLadderItem.blink .textContainer h6 svg {
animation-duration: .4s;
animation-name: blinkingText;
animation-iteration-count: infinite;
animation-delay: 1s
}
.rewards-container .dailyBonusActualLadderSection.active .bonusLadderItem:last-child.blink .textContainer h6,.rewards-container .dailyBonusActualLadderSection.active .bonusLadderItem:last-child.blink .textContainer h6 svg {
animation-duration: .4s;
animation-name: blinkingText;
animation-iteration-count: infinite;
animation-delay: 1.2s
}
.rewards-container .dailyBonusActualLadderSection.active .bonusLadderItem.blink:not(:last-child) .ladder {
position: relative
}
.rewards-container .dailyBonusActualLadderSection.active .bonusLadderItem.blink:not(:last-child) .ladder path {
animation-duration: .35s;
animation-name: blinkingGreen;
animation-iteration-count: infinite;
animation-delay: 1s
}
.rewards-container .dailyBonusActualLadderSection.losed .bonusLadderItem:last-child .ladder path {
fill: #ee6e73
}
.rewards-container .dailyBonusActualLadderSection:not(.losed) .bonusLadderItem:not(.blink).active h6 {
color: white
}
.rewards-container .dailyBonusActualLadderSection:not(.losed) .bonusLadderItem:not(.blink).active h6 svg {
fill: #fff
}
.rewards-container .dailyBonusActualLadderSection:not(.losed) .bonusLadderItem:not(.blink).active .ladder path {
stroke-width: 0;
fill: #01d676
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem {
position: relative;
margin: 0 auto;
position: relative
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem.active.blink .ladder path {
animation-duration: .35s;
animation-name: blinkingGreen;
animation-iteration-count: 3
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem.active .textContainer h6 {
color: #fff
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:last-child .ladder path {
fill: #19192a
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(1) .ladder {
height: 67px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(2) .ladder {
height: 50px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(2) .ladder {
height: 50px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem .ladder {
width: 100%;
height: 40px;
overflow: visible;
display: block;
transition: transform .175s;
position: relative
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem .ladder path {
transition: .175s
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem .ladder-icon {
position: absolute;
top: -10px;
right: -2px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem .textContainer {
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem .textContainer h6 {
margin: 0;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: rgba(156,156,194,0.6980392157)
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem .textContainer h6 svg {
margin-right: 3px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(1) {
width: 90%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(1)::after {
content: "";
position: absolute;
top: -12px;
right: -1.5%;
width: 35px;
height: 35px;
background-image: url("/public/img/rewards/crown.png");
background-size: cover
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(1) h6 {
font-size: 20px;
color: black
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(1) h6 svg {
margin-right: 7px
}
@media only screen and (max-width: 992px) {
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(1)::after {
right:1%
}
}
@media only screen and (max-width: 514px) {
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(1)::after {
right:-1%
}
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(2) {
width: 79.47%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(2) h6 {
font-size: 13px;
color: #aaaac9
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(2) h6 svg {
margin-right: 4px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(3) {
width: 71.84%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(3) h6 {
font-size: 12px;
color: #bb967b
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(4) {
width: 67.5%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(4) h6 {
font-size: 11px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(5) {
width: 60.26%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(5) h6 {
font-size: 10px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(6) {
width: 53.68%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(6) h6 {
font-size: 10px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(7) {
width: 47.89%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(7) h6 {
font-size: 10px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(8) {
width: 43%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(8) h6 {
font-size: 9px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(9) {
width: 38.15%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(9) h6 {
font-size: 9px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(10) {
width: 33.68%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(10) h6 {
font-size: 9px
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(11) {
width: 28.94%
}
.rewards-container .dailyBonusActualLadderSection .bonusLadderItem:nth-child(11) h6 {
font-size: 9px
}
.rewards-container .dailyBonusActualLadderSection.win #doubleOrNothingBox .btnContainer:first-child {
display: none
}
.rewards-container .dailyBonusActualLadderSection.win #doubleOrNothingBox .btnContainer:last-child {
width: 70%
}
.rewards-container #doubleOrNothingBox {
margin-top: 10px;
background: #242438;
padding: 10px 8px;
text-align: center;
border-radius: 4px
}
.rewards-container #doubleOrNothingBox .btnContainer {
transition: .3s;
width: calc(50% - 12.5px);
display: inline-block
}
.rewards-container #doubleOrNothingBox .btnContainer:first-child {
margin-right: 9px
}
.rewards-container #doubleOrNothingBox .btnContainer .customBtn {
min-width: 0;
margin-left: 0;
background: #01d676;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 0 0 #00ffc2 inset
}
@media only screen and (max-width: 700px) {
.rewards-container #doubleOrNothingBox .btnContainer .customBtn {
font-size:10px;
letter-spacing: -0.03em
}
}
.rewards-container #doubleOrNothingBox .btnContainer .customBtn svg {
margin-right: 6px;
min-width: 18px
}
.rewards-container #levelProgressSection {
margin-top: 15px
}
.rewards-container #levelProgressSection h6.levelsHeading {
color: #616184;
font-size: 10px;
margin-bottom: 0;
font-weight: 600;
text-align: left
}
.rewards-container #levelProgressSection h6.levelsBottom {
color: #616184;
font-size: 10px;
margin-top: 13px;
font-weight: 600;
text-align: center;
display: flex;
justify-content: space-between
}
.rewards-container #levelProgressSection h6.levelsBottom .bottomLeft {
margin-left: 10px;
float: left
}
.rewards-container #levelProgressSection h6.levelsBottom .bottomMiddle {
display: inline-block;
position: relative;
top: 1px;
width: 80%
}
.rewards-container #levelProgressSection h6.levelsBottom .bottomRight {
margin-right: 8px;
float: right
}
.rewards-container #levelProgressSection h6.levelsBottom .bottomLeft.active,.rewards-container #levelProgressSection h6.levelsBottom .bottomRight.active {
color: #01d676
}
.rewards-container #levelProgressSection .levelProgressContainer {
height: 11px;
padding: 6px 0;
border-radius: 20px;
margin-bottom: 5px;
position: relative
}
.rewards-container #levelProgressSection .levelProgressContainer[data-progress="0"] .progressArrow:first-child {
fill: #242438
}
.rewards-container #levelProgressSection .levelProgressContainer[data-progress="90"] .progressArrow:last-child,.rewards-container #levelProgressSection .levelProgressContainer[data-progress="100"] .progressArrow:last-child {
fill: #01d676
}
.rewards-container #levelProgressSection .levelProgressContainer .progressArrow {
position: absolute;
bottom: -10px;
z-index: 1
}
.rewards-container #levelProgressSection .levelProgressContainer .progressArrow:first-child {
left: 10px
}
.rewards-container #levelProgressSection .levelProgressContainer .progressArrow:last-child {
right: 10px;
fill: #242438
}
.rewards-container #levelProgressSection .levelProgressContainer .levelProgressProgress {
background: #242438;
border-radius: 20px;
margin: 0;
height: 11px
}
.rewards-container #topWinnersContainer {
background: #242438;
padding: 15px 12px;
margin-top: 20px;
border-radius: 8px
}
.rewards-container #topWinnersContainer h5 {
color: #616184;
text-align: center;
font-size: 11px;
margin: 0;
font-weight: 500
}
.rewards-container #topWinnersContainer #winnerBoxesContainer {
margin-top: 15px;
display: flex;
flex-direction: row;
gap: 6px
}
.rewards-container #topWinnersContainer #winnerBoxesContainer .winnerBox {
width: calc((100% - 12px) / 3);
height: 38px;
position: relative;
border-radius: 5px
}
.rewards-container #topWinnersContainer #winnerBoxesContainer .winnerBox:first-child::after {
content: "";
position: absolute;
top: -8px;
left: -6px;
width: 14px;
height: 14px;
background-image: url("/public/img/rewards/crown.png");
background-size: cover;
transform: scaleX(-1)
}
.rewards-container #topWinnersContainer #winnerBoxesContainer .winnerBox:nth-child(1) {
background: #ffcc4d;
box-shadow: 0 1px 7px rgba(255,227,158,0.25),inset 0 1px 0 #ffe39e;
border: 1px solid #ffe39e
}
.rewards-container #topWinnersContainer #winnerBoxesContainer .winnerBox:nth-child(2) {
background: linear-gradient(273.49deg,rgba(156,156,194,0.392) .03%,rgba(156,156,194,0.7) 100%),linear-gradient(0,#2c2c44,#2c2c44);
border: 1px solid rgba(197,197,228,0.7);
box-shadow: 0 2px 5px rgba(27,27,43,0.15);
color: white
}
.rewards-container #topWinnersContainer #winnerBoxesContainer .winnerBox:nth-child(3) {
background: linear-gradient(272.92deg,rgba(158,124,101,0.392) .25%,rgba(170,132,104,0.7) 100%),#2c2c44;
border: 1px solid #bb967b;
box-shadow: 0 2px 5px rgba(27,27,43,0.15);
color: white
}
.rewards-container #topWinnersContainer #winnerBoxesContainer .winnerBox .winAmountBox {
position: absolute;
right: 6px;
top: -7px;
background: #01d676;
border-radius: 3px;
padding: 1px 6px;
font-size: 10px
}
.rewards-container #topWinnersContainer #winnerBoxesContainer .winnerBox .winContent {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
height: 100%
}
.rewards-container #topWinnersContainer #winnerBoxesContainer .winnerBox .winContent .winAva {
width: 20px;
height: 20px;
border: 1px solid #fff;
border-radius: 5px;
margin-left: 9px
}
.rewards-container #topWinnersContainer #winnerBoxesContainer .winnerBox .winContent .winUsername {
margin: 0;
display: inline-block;
font-size: 10px;
vertical-align: super;
color: black;
width: calc(100% - 44px);
overflow: hidden;
text-overflow: ellipsis
}
.rewards-container.ladder .bonus-ladder-timer-block {
visibility: hidden;
position: absolute
}
.rewards-container.ladder .bonus-ladder-ladder-block {
display: block
}
.rewards-container .bonus-ladder-ladder-block {
display: none
}
@keyframes blinkingGreen {
0% {
stroke-width: 1px
}
50% {
stroke-width: 0;
fill: #01d676
}
100% {
stroke-width: 1px
}
}
@keyframes blinkingRed {
0% {
stroke-width: 1px
}
50% {
fill: #ee6e73;
top: -2px
}
100% {
stroke-width: 1px
}
}
@keyframes blinkingText {
0% {
color: rgba(156,156,194,0.6980392157);
fill: rgba(156,156,194,0.6980392157)
}
50% {
color: #fff;
fill: #fff
}
100% {
color: rgba(156,156,194,0.6980392157);
fill: rgba(156,156,194,0.6980392157)
}
}
#streakCaseModal .rolling-case-heading {
width: 250px;
left: calc(50% - 125px)
}
@keyframes scroll {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-11430px)
}
}
@keyframes progress {
0% {
left: -24%;
opacity: .5
}
25% {
opacity: 1
}
50% {
opacity: .5
}
75% {
opacity: 1
}
100% {
left: 100%;
opacity: .5
}
}
.rollingCaseModal {
overflow: visible;
width: 900px;
max-width: 90%;
font-family: Poppins;
max-height: 90%
}
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(1) {
background-image: url("/public/img/rewards/goldLayer.svg");
background-size: cover;
background-position: center
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(1)::after {
background: linear-gradient(270deg,#4a4f75 0,#f0c220 48.19%,#4a4f75 100%)
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(2)::before,.possible-wins-block-container .possible-wins-block .win-item:nth-child(2)::after {
background: linear-gradient(360deg,#4a4f75 -61.96%,#01d676 -18.07%,#4a4f75 93.09%)
}
.possible-wins-block-container .possible-wins-block .win-item:last-child {
margin: 0
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(1) .coin-icon {
background-image: url("/public/img/rewards/coinsWin1.png")
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(1) .coin-amount svg {
position: absolute;
fill: #ebbe23;
display: inline-block
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(1) .coin-amount svg:nth-child(2) {
top: 11px;
left: 7%;
transform: scale(0.5)
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(1) .coin-amount svg:nth-child(3) {
top: -8px;
left: 23%;
transform: scale(0.5)
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(1) .coin-amount svg:nth-child(4) {
top: -7px;
left: 66%;
transform: scale(0.5)
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(1) .coin-amount svg:nth-child(5) {
top: 10px;
left: 69%;
transform: scale(0.5)
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(2) {
background-image: url("/public/img/rewards/greenLayer.svg");
background-size: cover;
background-position: center
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(2) .coin-icon {
background-image: url("/public/img/rewards/coinsWin2.png")
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(2) .coin-amount svg {
position: absolute;
display: inline-block
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(2) .coin-amount svg:nth-child(2) {
top: 12px;
left: 34%;
transform: scale(0.5)
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(2) .coin-amount svg:nth-child(3) {
top: -8px;
left: 23%;
transform: scale(0.5)
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(2) .coin-amount svg:nth-child(4) {
top: -7px;
left: 66%;
transform: scale(0.5)
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(2) .coin-amount svg:nth-child(5) {
top: 10px;
left: 69%;
transform: scale(0.5)
}
.possible-wins-block-container .possible-wins-block .win-item:nth-child(3) .coin-icon {
background-image: url("/public/img/rewards/coinsWin3.png")
}
.possible-wins-block-container .possible-wins-block .win-item .coin-icon {
position: absolute;
bottom: 60px;
left: 21%;
width: 58%;
height: 77px;
background-repeat: no-repeat;
background-position: center;
background-image: url(/public/img/rewards/coinsWin4.png);
background-position-y: bottom;
background-size: contain
}
.possible-wins-block-container .possible-wins-block .win-item .coin-amount {
position: relative;
font-family: Poppins;
font-weight: 700;
font-size: 20px
}
.possible-wins-block-container .possible-wins-block .win-item .coin-amount svg {
display: none
}
@media only screen and (max-width: 700px) {
.possible-wins-block-container .possible-wins-block .win-item .coin-amount {
font-size:15px
}
}
.possible-wins-block-container .possible-wins-block .win-item .coin-chance {
position: absolute;
top: 10px;
left: 11px;
font-weight: 700;
font-size: 8px;
text-transform: uppercase;
color: rgba(199,199,225,0.5);
text-shadow: 0 4px 8px rgba(0,0,0,0.15)
}
.rewards-slider-container {
position: relative;
height: 134px;
border-top: 2px solid rgba(64,66,96,0.6392156863);
border-bottom: 2px solid rgba(64,66,96,0.6392156863);
background: #1a1a29;
margin-bottom: 43px
}
.rewards-slider-container .slider-layer {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden
}
.rewards-slider-container .slider-layer::before {
content: "";
position: absolute;
z-index: 1;
width: 50%;
height: 500%;
left: -28%;
top: -200%;
background: rgba(35,35,55,0.5);
transform: rotate(38.85deg)
}
.rewards-slider-container .slider-layer::after {
content: "";
position: absolute;
z-index: 1;
width: 122px;
height: 100%;
top: 0;
right: 0;
background: linear-gradient(90deg,transparent,rgba(35,35,55,0.5))
}
.rewards-slider-container .win-line {
position: absolute;
height: 134px;
top: -2px;
left: 50%;
z-index: 2;
width: 2px;
background: #6f73a7;
box-shadow: 0 4px 14px rgba(0,0,0,0.25)
}
.rewards-slider-container .win-line svg {
position: absolute;
top: -6px;
left: -10px
}
.rewards-slider-container .rewards-slider {
position: absolute;
top: 0;
left: 0;
padding: 3px 0;
white-space: nowrap;
overflow: visible;
font-size: 0;
display: flex;
width: 12700px
}
.rewards-slider-container .rewards-slider.play {
animation: scroll 6s cubic-bezier(0.3,0.9,0.3,1) 1 forwards
}
.rewards-slider-container .rewards-slider .reward-item {
position: relative;
display: inline-block;
height: 124px;
width: 124px;
text-align: center;
border-radius: 2px;
background: #242538;
margin: 0 1.5px;
padding: 14px;
transition: .3s;
flex-shrink: 0
}
.rewards-slider-container .rewards-slider .reward-item::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
left: 0;
bottom: 1px;
border-radius: 0 0 2px 2px;
opacity: .8;
background: linear-gradient(270deg,#4a4f75 0,#585d83 48.19%,#4a4f75 100%)
}
.rewards-slider-container .rewards-slider .reward-item.win-size-1 {
background: 0
}
.rewards-slider-container .rewards-slider .reward-item.win-size-1::before {
content: "";
background: linear-gradient(360deg,#4a4f75 -61.96%,#f0c220 -18.07%,#4a4f75 93.09%);
opacity: .2;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0
}
.rewards-slider-container .rewards-slider .reward-item.win-size-1::after {
background: linear-gradient(270deg,#4a4f75 0,#f0c220 48.19%,#4a4f75 100%)
}
.rewards-slider-container .rewards-slider .reward-item.win-size-1 .coin-icon {
background-image: url("/public/img/rewards/coins1.png")
}
.rewards-slider-container .rewards-slider .reward-item.win-size-1 .coin-text {
color: #f0c220
}
.rewards-slider-container .rewards-slider .reward-item.win-size-2 {
background: 0
}
.rewards-slider-container .rewards-slider .reward-item.win-size-2::before {
content: "";
background: linear-gradient(360deg,#4a4f75 -61.96%,#01d676 -18.07%,#4a4f75 93.09%);
opacity: .2;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0
}
.rewards-slider-container .rewards-slider .reward-item.win-size-2::after {
background: linear-gradient(270deg,#4a4f75 0,#01d676 48.19%,#4a4f75 100%)
}
.rewards-slider-container .rewards-slider .reward-item.win-size-2 .coin-icon {
background-image: url("/public/img/rewards/coins2.png")
}
.rewards-slider-container .rewards-slider .reward-item.win-size-2 .coin-text {
color: #01d676
}
.rewards-slider-container .rewards-slider .reward-item.win-size-3 .coin-icon {
background-image: url("/public/img/rewards/coins3.png")
}
.rewards-slider-container .rewards-slider .reward-item.active {
transform: scale(1.1);
background: linear-gradient(360deg,#4a4f75 -61.96%,#383855 -18.07%,#4a4f75 93.09%);
box-shadow: 0 0 14px rgba(0,0,0,0.25);
z-index: 1
}
.rewards-slider-container .rewards-slider .reward-item .coin-icon {
height: 43px;
background-repeat: no-repeat;
background-position: center;
background-image: url("/public/img/rewards/coins4.png")
}
.rewards-slider-container .rewards-slider .reward-item .coin-text {
font-family: Poppins;
font-size: 12px;
font-weight: 500;
color: #616184
}
.rewards-slider-container .rewards-slider .reward-item .coin-amount {
font-family: Poppins;
font-size: 20px;
font-weight: bold;
color: #fff
}
.top-winners-block {
white-space: nowrap;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none
}
.top-winners-block::-webkit-scrollbar {
display: none
}
.top-winners-block .top-winner-item {
width: 186px;
height: 50px;
background: rgba(56,56,85,0.5);
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
padding: 10px;
margin-right: 8px
}
.top-winners-block .top-winner-item .winner-avatar {
width: 30px;
height: 30px;
margin-right: 10px;
display: inline-block
}
.top-winners-block .top-winner-item .winner-info {
width: 60px;
margin-right: 10px;
display: inline-block
}
.top-winners-block .top-winner-item .winner-info .winner-name {
font-family: Poppins;
font-weight: 500;
font-size: 12px;
line-height: 12px;
overflow: hidden;
text-overflow: ellipsis
}
.top-winners-block .top-winner-item .winner-info .winner-date {
font-family: Poppins;
font-weight: 300;
font-size: 10px;
color: #938e9f;
line-height: 10px
}
.top-winners-block .top-winner-item .winner-amount {
width: 49px;
height: 21px;
background: rgba(142,148,193,0.2);
border-radius: 2px;
display: inline-block;
font-family: Poppins;
font-weight: 500;
font-size: 10px;
line-height: 21px;
text-align: center;
color: #9494b7
}
.top-winners-block .top-winner-item:nth-child(1) .winner-amount {
background: #ffcc4d;
color: #2c2c44
}
.top-winners-block .top-winner-item:nth-child(2) .winner-amount {
background: rgba(1,214,118,0.75);
color: #2c2c44
}
.top-winners-block .top-winner-item:nth-child(3) .winner-amount {
color: #01d676
}
.win-celebration {
display: none;
position: relative;
width: 50%;
height: 150px;
background: radial-gradient(50% 50% at 50% 50%,rgba(232,189,36,0.1) 0,rgba(232,189,36,0) 100%);
top: calc(15px + 100%);
left: 25%;
opacity: 0;
transition: .3s
}
.win-celebration.win-size-1 .coin-icon {
background-image: url("/public/img/rewards/coinsWin1.png")
}
.win-celebration.win-size-1 .coin-text .coin-amount {
color: #ffcc4d
}
.win-celebration.win-size-2 .coin-icon {
background-image: url("/public/img/rewards/coinsWin2.png")
}
.win-celebration.win-size-2 .coin-text .coin-amount {
color: #01d676
}
.win-celebration.win-size-3 .coin-icon {
background-image: url("/public/img/rewards/coinsWin3.png")
}
.win-celebration .coin-icon {
position: absolute;
bottom: 93px;
left: 21%;
width: 58%;
height: 60px;
background-repeat: no-repeat;
background-position: center;
background-image: url(/public/img/rewards/coinsWin4.png);
background-position-y: bottom;
background-size: contain
}
.win-celebration .coin-text {
font-family: Poppins;
font-weight: 600;
font-size: 28px;
line-height: 150px;
text-align: center;
color: #fff
}
.win-celebration .coin-text .coin-amount {
color: #fff
}
.win-celebration .win-animation {
height: 404px;
position: absolute;
z-index: 1;
pointer-events: none;
right: 0;
left: 0;
bottom: 0
}
#homeCanvas {
position: fixed;
top: -80px;
height: 100vh;
z-index: -1;
background: url("/public/img/landingpage/pngegg1.png");
background-size: contain;
background-repeat: no-repeat
}
@keyframes text-swipe {
0% {
left: 100%
}
2.5%,20% {
left: 0
}
22.5%,100% {
left: -100%
}
}
@keyframes low-blink {
0% {
opacity: 1
}
50% {
opacity: .5
}
100% {
opacity: 1
}
}
@media only screen and (min-width: 1200px) {
.chatActive .home-page .main-heading:not(.logged-in) {
width:95%;
max-width: 1822.1px
}
}
@media only screen and (min-width: 1300px) {
.chatActive .home-page .main-heading:not(.logged-in) {
width:90%;
max-width: 1726.2px
}
}
@media only screen and (min-width: 1500px) {
.chatActive .home-page .main-heading:not(.logged-in) {
width:80%;
max-width: 1534.4px
}
}
@media only screen and (min-width: 1700px) {
.chatActive .home-page .main-heading:not(.logged-in) {
width:70%;
max-width: 1342.6px
}
}
@media only screen and (min-width: 1900px) {
.chatActive .home-page .main-heading:not(.logged-in) {
width:60%;
max-width: 1150.8px
}
}
.home-page {
font-family: Poppins;
position: relative;
letter-spacing: -0.03em;
padding-top: 57px;
margin: 0 auto 67px auto
}
@media only screen and (min-width: 1200px) {
.home-page.logged-in {
padding-top:74px
}
}
@media only screen and (max-width: 700px) {
.home-page {
padding-top:24px;
margin-bottom: 46px
}
}
.home-page:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url("/public/img/template/body/background.png");
background-repeat: no-repeat;
z-index: -1
}
@media only screen and (max-width: 700px) {
.home-page:before {
background-position-x:right;
background-position-y: bottom
}
}
.home-page .ipad {
position: absolute;
top: -40px;
left: -10px;
width: 26%;
max-width: 500px
}
.home-page .macbook {
position: absolute;
top: -23px;
right: -10px;
width: 29%;
max-width: 560px
}
.home-page .main-heading {
display: flex;
justify-content: space-between;
position: relative;
gap: 10px
}
.home-page .main-heading:not(.logged-in) {
width: 60%;
max-width: 1150.8px;
margin: 0 auto
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.home-page .main-heading:not(.logged-in) {
width:80%
}
}
@media only screen and (max-width: 700px) {
.home-page .main-heading:not(.logged-in) {
width:100%
}
}
.home-page .main-heading.logged-in {
display: block
}
@media only screen and (max-width: 700px) {
.home-page .main-heading {
display:block;
padding: 0 15px
}
.home-page .main-heading .ipad,.home-page .main-heading .macbook {
display: none
}
}
.home-page .main-heading .statistics {
display: none;
gap: 10px;
background: unset;
margin: 0 0 30px 0
}
.home-page .main-heading .statistics::before {
display: none
}
@media only screen and (max-width: 700px) {
.home-page .main-heading .statistics {
display:flex
}
}
.home-page .main-heading .statistics .stat-item {
background: #1d1d2e;
border-radius: 10px;
width: calc(50% - 5px);
height: 76px;
padding: 15px
}
.home-page .main-heading .statistics .stat-item:last-child,.home-page .main-heading .statistics .stat-item::after {
display: none
}
.home-page .main-heading .statistics .stat-item .heading {
font-size: 14px
}
.home-page .main-heading .statistics .stat-item .heading svg {
height: 14px
}
.home-page .main-heading .statistics .stat-item .description {
font-size: calc(8px + 0.67vw);
width: auto
}
.home-page .about-section {
padding-bottom: 44px;
overflow: visible
}
@media only screen and (min-width: 701px) {
.home-page .about-section.logged-in .review-info,.home-page .about-section.logged-in .statistics,.home-page .about-section.logged-in .cashout-providers,.home-page .about-section.logged-in::before {
display:none
}
}
@media only screen and (max-width: 700px) {
.home-page .about-section {
padding-bottom:46px
}
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.home-page .about-section {
width:100%
}
}
@media only screen and (min-width: 1200px) and (max-width:1399px) {
.home-page .about-section:not(.logged-in) {
width:315px;
flex-shrink: 0
}
}
.home-page .about-section:not(.logged-in)::after {
content: "";
position: absolute;
background: #222339;
filter: blur(55px);
width: 100%;
height: 124px;
left: 0;
bottom: -77px
}
@media only screen and (max-width: 1199px) {
.home-page .about-section:not(.logged-in)::after {
display:none
}
}
.home-page .about-section .about-content {
position: relative;
margin-bottom: 36px;
text-align: center
}
.home-page .about-section .about-content::before {
content: "";
position: absolute;
background-image: url("/public/img/template/body/hugeFallingCoins.png");
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 2
}
@media only screen and (max-width: 400px) {
.home-page .about-section .about-content::before {
background-image:url("/public/img/template/body/hugeFallingCoinsMobile.png");
width: calc(100% + 30px);
height: 120%;
left: -15px
}
}
.home-page .about-section .about-content .get-paid-title {
font-weight: 600;
font-size: 27px;
text-align: center;
color: #01d676;
margin-bottom: 2px
}
@media only screen and (min-width: 701px) {
.home-page .about-section .about-content .get-paid-title {
font-size:44px
}
}
.home-page .about-section .about-content .get-paid-options {
position: relative;
margin: 0 auto 19px auto;
height: 41px;
overflow: hidden
}
@media only screen and (min-width: 701px) {
.home-page .about-section .about-content .get-paid-options {
height:66px;
z-index: 4
}
}
@media only screen and (max-width: 1399px) {
.home-page .about-section .about-content .get-paid-options {
max-width:400px
}
}
@media only screen and (min-width: 1400px) {
.home-page .about-section .about-content .get-paid-options {
width:500px
}
}
@media only screen and (min-width: 1600px) {
.home-page .about-section .about-content .get-paid-options {
width:530px
}
}
.home-page .about-section .about-content .get-paid-options div {
position: absolute;
top: 0;
left: 100%;
display: inline-block;
width: 100%;
height: 100%;
font-weight: 400;
font-size: 27px;
text-align: center;
color: #fff;
animation: text-swipe;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease
}
.home-page .about-section .about-content .get-paid-options div:nth-child(2) {
animation-delay: 2s
}
.home-page .about-section .about-content .get-paid-options div:nth-child(3) {
animation-delay: 4s
}
.home-page .about-section .about-content .get-paid-options div:nth-child(4) {
animation-delay: 6s
}
.home-page .about-section .about-content .get-paid-options div:nth-child(5) {
animation-delay: 8s
}
@media only screen and (min-width: 701px) {
.home-page .about-section .about-content .get-paid-options div {
font-size:30px
}
}
@media only screen and (min-width: 1200px) and (max-width:1399px) {
.home-page .about-section .about-content .get-paid-options div {
font-size:24px
}
}
@media only screen and (min-width: 1400px) {
.home-page .about-section .about-content .get-paid-options div {
font-size:40px
}
}
@media only screen and (min-width: 1399px) and (max-width:1600px) {
.home-page .about-section .about-content .get-paid-options div {
font-size:32px
}
}
@media only screen and (min-width: 300px) and (max-width:450px) {
.home-page .about-section .about-content .get-paid-options div {
font-weight:200;
font-size: 21px
}
}
@media only screen and (max-width: 300px) {
.home-page .about-section .about-content .get-paid-options div {
font-size:15px
}
}
@media only screen and (min-width: 701px) {
.home-page .about-section .about-content .get-paid-options.logged-in {
width:600px;
max-width: none
}
.home-page .about-section .about-content .get-paid-options.logged-in div {
font-size: 44px
}
}
.home-page .about-section .about-content .earn-up-to-info {
font-weight: 500;
font-size: 14px;
text-align: center;
letter-spacing: -0.03em;
color: #fff;
margin-bottom: 3px
}
@media only screen and (min-width: 701px) {
.home-page .about-section .about-content .earn-up-to-info {
font-size:22px
}
}
.home-page .about-section .about-content .earn-up-to-info span {
color: #01d676
}
.home-page .about-section .about-content .available-offers-info {
position: relative;
font-weight: 500;
font-size: 14px;
text-align: center;
letter-spacing: -0.03em;
color: #fff;
display: inline-block;
margin-bottom: 24px;
padding-left: 13px
}
@media only screen and (min-width: 701px) {
.home-page .about-section .about-content .available-offers-info {
font-size:22px
}
}
.home-page .about-section .about-content .available-offers-info::before {
content: "";
position: absolute;
top: calc(50% - 2.5px);
left: 0;
width: 5px;
height: 5px;
background: #01d676;
border-radius: 50%;
opacity: 1
}
.home-page .about-section .about-content .title {
font-weight: 600;
font-size: calc(24px + 1.62vw);
color: #01d676;
min-width: 200px;
line-height: 129%;
margin-bottom: 15px;
white-space: nowrap
}
@media only screen and (max-width: 1399px) {
.home-page .about-section .about-content .title {
font-size:calc(14px + 1.62vw);
max-width: calc(100% - 345px)
}
}
@media only screen and (max-width: 700px) {
.home-page .about-section .about-content .title {
font-size:calc(12px + 3.75vw)
}
}
.home-page .about-section .about-content .description {
max-width: 90%;
min-width: 150px;
font-size: calc(12px + 0.8vw);
line-height: 129.5%;
color: #fff;
padding-bottom: 38px;
position: relative;
overflow: visible
}
.home-page .about-section .about-content .description span {
font-weight: bold
}
@media only screen and (min-width: 1200px) and (max-width:1399px) {
.home-page .about-section .about-content .description {
max-width:100%;
font-size: calc(10px + 0.8vw)
}
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.home-page .about-section .about-content .description {
max-width:80%;
font-size: calc(8px + 0.8vw)
}
}
@media only screen and (max-width: 700px) {
.home-page .about-section .about-content .description {
width:30%;
font-size: calc(10px + 1.28vw)
}
}
.home-page .about-section .about-content .leaderboard-btn {
display: none;
position: absolute;
bottom: -33px;
right: -15px
}
@media only screen and (max-width: 700px) {
.home-page .about-section .about-content .leaderboard-btn {
display:inline-block
}
}
.home-page .about-section .about-content .cashout-label {
position: relative;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.03em;
text-align: center;
color: #9494a6;
margin-bottom: 13px;
z-index: 2
}
.home-page .about-section .about-content .cashout-info {
position: relative;
width: 22.74vw;
height: 8vw;
min-width: 193px;
min-height: 80px;
max-width: 321px;
max-height: 133px;
margin-bottom: 60px;
justify-content: center;
align-items: center;
background: #2f3049;
box-shadow: 0 2px 15px rgba(14,12,27,0.25);
border-radius: 10px;
display: inline-flex;
justify-content: center;
align-items: center
}
@media only screen and (max-width: 700px) {
.home-page .about-section .about-content .cashout-info {
width:208px;
height: 80px;
margin-bottom: 30px
}
}
.home-page .about-section .about-content .cashout-info::before {
content: "";
background: url("/public/img/template/body/withdrawnBg.png");
background-size: cover;
background-position-y: center;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%
}
.home-page .about-section .about-content .cashout-info .amount {
display: inline-block;
font-weight: 600;
font-size: calc(24px + 2vw);
background: linear-gradient(270deg,#f9ebb9 0,#ffbc11 100%);
background: -webkit-linear-gradient(270deg,#f9ebb9 0,#ffbc11 100%);
text-shadow: 0 5px 9px rgba(255,221,103,0.06);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}
@media only screen and (min-width: 1918px) {
.home-page .about-section .about-content .cashout-info .amount {
font-size:67px
}
}
@media only screen and (max-width: 700px) {
.home-page .about-section .about-content .cashout-info .amount {
font-size:27px
}
}
.home-page .about-section .about-content .cashout-info+div .start-earn-btn {
position: relative;
display: inline-block;
width: 22%;
height: 63px;
background: #01d676;
border-radius: 4px;
font-size: 18px;
font-weight: 600;
color: #1d1d2e;
line-height: 63px;
min-width: 160px;
max-width: 254px;
z-index: 2
}
@media only screen and (max-width: 700px) {
.home-page .about-section .about-content .cashout-info+div .start-earn-btn {
width:calc(100% - 90px)
}
}
.home-page .about-section .about-content .offers-in-mobile-block {
position: relative;
display: none;
width: 252px;
height: 287px;
background-image: url("/public/img/template/body/phoneInHand.png");
z-index: 2
}
.home-page .about-section .about-content.logged-in {
text-align: center
}
.home-page .about-section .about-content.logged-in .title {
width: 100%;
max-width: 100%
}
.home-page .about-section .about-content.logged-in .description {
width: 100%;
max-width: 100%
}
@media only screen and (min-width: 701px) {
.home-page .about-section .about-content.logged-in .cashout-info {
display:inline-flex
}
.home-page .about-section .about-content.logged-in .cashout-info+div {
display: block;
position: relative;
z-index: 2
}
}
@media only screen and (min-width: 1200px) {
.home-page .about-section .about-content:not(.logged-in) {
text-align:left
}
.home-page .about-section .about-content:not(.logged-in)::before {
content: unset
}
.home-page .about-section .about-content:not(.logged-in) .get-paid-title,.home-page .about-section .about-content:not(.logged-in) .get-paid-options,.home-page .about-section .about-content:not(.logged-in) .get-paid-options div,.home-page .about-section .about-content:not(.logged-in) .earn-up-to-info {
margin-left: 0;
margin-right: 0;
text-align: left
}
.home-page .about-section .about-content:not(.logged-in) .cashout-info+div .start-earn-btn,.home-page .about-section .about-content:not(.logged-in) .cashout-label,.home-page .about-section .about-content:not(.logged-in) .cashout-info {
display: none
}
}
@media only screen and (max-width: 1199px) {
.home-page .about-section .about-content.desktop-non-logged-in {
display:none
}
}
@media only screen and (max-width: 700px) {
.home-page .about-section .about-content {
margin-bottom:20px
}
.home-page .about-section .about-content.logged-in .description {
padding-bottom: 30px
}
.home-page .about-section .about-content .cashout-label,.home-page .about-section .about-content .cashout-info,.home-page .about-section .about-content .cashout-info+div {
display: none
}
.home-page .about-section .about-content .offers-in-mobile-block {
display: block;
margin: 0 auto
}
}
.home-page .about-section hr {
height: 0;
width: 100%;
margin: 0;
border: 1px solid #3f405c;
display: none
}
@media only screen and (max-width: 1399px) {
.home-page .about-section hr {
display:block
}
}
.home-page .about-section .review-info {
margin-bottom: 27px;
font-size: 1px;
position: relative
}
.home-page .about-section .review-info .unvisible-text {
visibility: hidden;
display: inline-block;
font-size: 1.2vw;
height: 25px
}
@media only screen and (max-width: 700px) {
.home-page .about-section .review-info .unvisible-text {
font-size:14px
}
}
.home-page .about-section .review-info .trustpilot-wrapper {
margin-top: 5px
}
.home-page .about-section .review-info .landing-trustpilot-widget {
position: absolute !important;
top: 0 !important;
left: -27px
}
.home-page .about-section .review-info .landing-trustpilot-widget .trustpilot-link {
position: relative;
left: 27px
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.home-page .about-section .review-info .landing-trustpilot-widget .trustpilot-link {
left:unset;
margin-right: 15px
}
}
@media only screen and (max-width: 700px) {
.home-page .about-section .review-info .landing-trustpilot-widget .trustpilot-link {
left:unset
}
}
@media only screen and (max-width: 1199px) {
.home-page .about-section .review-info .unvisible-text {
display:none
}
.home-page .about-section .review-info .trustpilot-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center
}
.home-page .about-section .review-info .landing-trustpilot-widget {
position: relative !important;
left: unset
}
.home-page .about-section .review-info span {
font-size: 10px
}
}
@media only screen and (max-width: 700px) {
.home-page .about-section .review-info .trustpilot-wrapper {
flex-direction:column
}
}
.home-page .about-section .cashout-info+div .start-earn-btn,.home-page .about-section .earn-or-signup-btn-block .start-earn-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22%;
height: 63px;
background: #01d676;
border-radius: 4px;
font-size: 18px;
font-weight: 600;
color: #1d1d2e;
min-width: 160px;
max-width: 254px;
z-index: 2
}
@media only screen and (max-width: 700px) {
.home-page .about-section .cashout-info+div .start-earn-btn,.home-page .about-section .earn-or-signup-btn-block .start-earn-btn {
width:calc(100% - 90px)
}
}
.home-page .about-section .earn-or-signup-btn-block {
display: none;
text-align: center;
margin-bottom: 30px
}
.home-page .about-section .earn-or-signup-btn-block .start-earn-btn {
width: 208px;
height: 52px;
font-size: 14px
}
@media only screen and (max-width: 700px) {
.home-page .about-section .earn-or-signup-btn-block {
display:block
}
}
.home-page .about-section .cashout-providers {
max-width: 340px;
display: flex;
flex-direction: row;
gap: 4px;
flex-wrap: wrap
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.home-page .about-section .cashout-providers {
max-width:100%
}
}
@media only screen and (max-width: 700px) {
.home-page .about-section .cashout-providers {
max-width:100%
}
}
.home-page .about-section .cashout-providers .provider {
position: relative;
width: calc(25% - 3px);
height: 39px;
border-radius: 2px;
min-width: 69px;
display: flex;
align-items: center;
justify-content: center
}
.home-page .about-section .cashout-providers .provider img,.home-page .about-section .cashout-providers .provider svg {
height: 24px
}
.home-page .about-section .cashout-providers .provider.bitcoin {
background: linear-gradient(180deg,#f9aa4b -0.02%,#f7931a 99.99%);
box-shadow: 0 10px 15px rgba(0,0,0,0.15)
}
.home-page .about-section .cashout-providers .provider.bitcoin img {
height: 25px
}
.home-page .about-section .cashout-providers .provider.etherum {
background: linear-gradient(185.23deg,#b1b1ff -3.47%,#778dff 70.67%);
box-shadow: 0 10px 15px rgba(0,0,0,0.15)
}
.home-page .about-section .cashout-providers .provider.etherum img {
height: 25px
}
.home-page .about-section .cashout-providers .provider.litecoin {
background: linear-gradient(180deg,#a1a4c9 0,#7e809a 70%);
box-shadow: 0 10px 15px rgba(0,0,0,0.15)
}
.home-page .about-section .cashout-providers .provider.litecoin img {
height: 22px
}
.home-page .about-section .cashout-providers .provider.paypal {
background: linear-gradient(342.04deg,#263b80 -75.71%,#25bcff 135.9%)
}
.home-page .about-section .cashout-providers .provider.paypal img {
width: 40px
}
.home-page .about-section .cashout-providers .provider.amazon {
background: #11171e;
box-shadow: 0 10px 15px rgba(0,0,0,0.15)
}
.home-page .about-section .cashout-providers .provider.amazon img {
width: 36px
}
.home-page .about-section .cashout-providers .provider.steam {
background: linear-gradient(336.89deg,#131739 -26.71%,#4b4d8f 107.56%);
box-shadow: 0 10px 15px rgba(0,0,0,0.15)
}
.home-page .about-section .cashout-providers .provider.steam img {
width: 55px;
height: 100%
}
.home-page .about-section .cashout-providers .provider.apple {
background: linear-gradient(112.11deg,#ff5b53 -9.59%,#9850fa 54.58%,#2cc9f8 117.99%);
box-shadow: 0 10px 15px rgba(0,0,0,0.15)
}
.home-page .about-section .cashout-providers .provider.apple img,.home-page .about-section .cashout-providers .provider.apple svg {
height: 18px
}
.home-page .about-section .cashout-providers .provider.google {
background: #fff;
box-shadow: 0 10px 15px rgba(0,0,0,0.15)
}
.home-page .about-section .cashout-providers .provider.google img {
width: 50px
}
.home-page .signup-container {
position: relative;
top: -18px;
right: 0;
max-width: 390px;
width: 100%;
min-width: 370px;
max-height: 520px;
background: #33334c;
box-shadow: 0 4px 5px rgba(0,0,0,0.1);
border-radius: 5px;
padding: 26px 25px 20px 25px;
text-align: center;
font-size: 0
}
@media only screen and (max-width: 700px) {
.home-page .signup-container {
display:block;
position: relative;
top: 0;
left: 0;
background: unset;
padding: 0;
width: 100%;
max-width: none;
min-width: 290px;
margin-bottom: 46px
}
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.home-page .signup-container {
display:none
}
}
.home-page .signup-container .title {
font-weight: 600;
font-size: 24px;
letter-spacing: -0.03em;
margin-bottom: 5px;
line-height: 129.5%
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .title {
font-size:20px;
margin-bottom: 16px
}
}
.home-page .signup-container .description {
font-weight: 500;
font-size: 10px;
letter-spacing: -0.03em;
margin-bottom: 10px;
line-height: 129.5%
}
.home-page .signup-container .description span {
color: #01d676
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .description {
font-size:12px;
color: #65678d;
margin-bottom: 15px
}
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content {
padding:15px 15px 38px 25px;
background: #33334c;
box-shadow: 0 3.32308px 4.15385px rgba(0,0,0,0.1);
border-radius: 4px
}
}
.home-page .signup-container .signup-content .free-case-banner {
margin-bottom: 15px;
width: 100%
}
.home-page .signup-container .signup-content .cashout-info {
border: 2px solid #25253b;
border-radius: 10px;
margin-bottom: 15px;
overflow: hidden;
text-align: center;
line-height: 65px;
height: 65px;
background: url("/public/img/template/body/signupHeading.png");
background-position-x: -41px;
background-size: cover
}
.home-page .signup-container .signup-content .cashout-info span {
background: linear-gradient(270deg,#f9ebb9 0,#ffbc11 100%);
background: -webkit-linear-gradient(270deg,#f9ebb9 0,#ffbc11 100%);
font-weight: 600;
font-size: 35px;
line-height: 129.5%;
text-shadow: 0 5px 9px rgba(255,221,103,0.06);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
vertical-align: middle
}
.home-page .signup-container .signup-content .signup-with {
display: flex;
justify-content: center;
margin-bottom: 17px;
gap: 12px
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .signup-with {
margin-bottom:15px
}
}
.home-page .signup-container .signup-content .signup-with .signup-button {
width: calc(50% - 6px);
height: 37px;
background: #25253b;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
color: #fff
}
.home-page .signup-container .signup-content .signup-with .signup-button svg {
vertical-align: middle
}
.home-page .signup-container .signup-content .signup-with .signup-button span {
font-weight: 500;
font-size: 10px
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .signup-with .signup-button span {
font-size:8px
}
}
.home-page .signup-container .signup-content .divide-line {
position: relative;
font-size: 10px;
font-weight: 500;
letter-spacing: -0.03em;
margin-bottom: 11px;
line-height: 129.5%
}
.home-page .signup-container .signup-content .divide-line::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
left: 0;
top: 6.5px;
background: linear-gradient(90deg,rgba(88,93,131,0) 0,rgba(88,93,131,0.5) 46.05%,rgba(88,93,131,0) 46.06%,rgba(88,93,131,0) 53.62%,rgba(88,93,131,0.5) 53.63%,rgba(88,93,131,0) 100%)
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .divide-line {
font-size:7.44px;
margin-bottom: 15px
}
.home-page .signup-container .signup-content .divide-line::before {
top: 5.5px
}
}
.home-page .signup-container .signup-content .signup-input {
text-align: left
}
.home-page .signup-container .signup-content .signup-input label {
font-weight: 500;
font-size: 12px;
margin-bottom: 9px;
line-height: 16px;
letter-spacing: -0.03em;
color: #fff;
display: inline-block
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .signup-input label {
display:none
}
}
.home-page .signup-container .signup-content .signup-input input {
width: 100%;
height: 37px;
background: #4d4d6b;
border-radius: 5px;
font-weight: 500;
font-size: 12px;
color: rgba(255,255,255,0.4) !important;
text-align: left;
margin-bottom: 19px;
padding: 10px 12px;
box-sizing: border-box;
letter-spacing: -0.03em
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .signup-input input {
margin-bottom:9px
}
}
.home-page .signup-container .signup-content .signup-input input#email {
margin-bottom: 11px
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .signup-input input#email {
margin-bottom:15px
}
}
.home-page .signup-container .signup-content .signup-input input::placeholder,.home-page .signup-container .signup-content .signup-input input:-ms-input-placeholder,.home-page .signup-container .signup-content .signup-input input::-ms-input-placeholder {
font-weight: 500;
font-size: 10px;
letter-spacing: -0.03em;
color: #fff;
opacity: .4
}
.home-page .signup-container .signup-content .signup-privacy {
display: block;
margin-bottom: 9px;
text-align: left
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .signup-privacy {
margin-bottom:22px
}
}
.home-page .signup-container .signup-content .signup-privacy input+span {
font-weight: 500;
font-size: 11px;
line-height: 16px;
padding-left: 24px
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .signup-privacy input+span {
font-size:8px;
line-height: 12px;
color: #7b7b97;
padding-left: 13.67px
}
.home-page .signup-container .signup-content .signup-privacy input+span::before {
width: 8px;
height: 8px;
top: -1px
}
}
.home-page .signup-container .signup-content .signup-privacy input:not(:checked)+span::before {
border: 1.5px solid #7b7b97;
border-radius: 2px
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .signup-privacy input:checked+span:not(.lever)::before {
width:8px;
height: 14px;
top: -5px
}
}
.home-page .signup-container .signup-content .signup-privacy a {
color: #a9a9ca
}
.home-page .signup-container .signup-content .signup-privacy a span {
color: #61d37f
}
.home-page .signup-container .signup-content .register-btn {
width: 130px;
height: 37px;
background: #01d676;
box-shadow: 0 1.25478px 2.50957px rgba(0,0,0,0.2),inset 0 1.25478px 0 #00ffc2;
border-radius: 5px;
font-weight: 600;
font-size: 15px;
color: #1d1d2e
}
@media only screen and (max-width: 700px) {
.home-page .signup-container .signup-content .register-btn {
width:157px;
height: 50px;
border-radius: 4px;
line-height: 22px
}
}
.home-page .statistics {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 65px;
background: #1d1d2e;
border-radius: 10px;
position: relative
}
@media only screen and (max-width: 700px) {
.home-page .statistics {
display:none
}
}
.home-page .statistics::before {
content: "";
position: absolute;
top: -4%;
left: 3%;
height: 108%;
width: 94%;
background: #1d1d2e;
opacity: .58;
border-radius: 10px;
z-index: -1
}
.home-page .statistics .stat-item {
display: inline-block;
width: 33%;
height: 6.21vw;
padding-top: 1.2vw;
position: relative
}
.home-page .statistics .stat-item:nth-child(1)::after,.home-page .statistics .stat-item:nth-child(2)::after {
content: "";
position: absolute;
top: 25%;
right: 0;
height: 50%;
width: 1px;
opacity: .25;
background: #595b80
}
.home-page .statistics .stat-item .heading {
font-weight: 600;
font-size: 1.2vw;
color: #01d676
}
.home-page .statistics .stat-item .heading svg {
height: 1.2vw
}
.home-page .statistics .stat-item .heading span {
vertical-align: text-bottom
}
.home-page .statistics .stat-item .description {
font-size: .8vw;
color: #595b80;
width: 63%;
display: inline-block;
letter-spacing: -0.03em;
line-height: 129.5%;
vertical-align: text-top
}
@media only screen and (max-width: 700px) {
.home-page .statistics .stat-item .description {
font-size:15px
}
}
.home-page .faq-section .faq-item.active .answer video {
width: 100%;
padding: 0 40px
}
@media only screen and (max-width: 700px) {
.home-page .faq-section .faq-item.active .answer video {
padding:0
}
}
.home-page .faq-section .faq-item.active .answer .answer-highlights {
padding-left: 60px;
margin-top: 50px
}
@media only screen and (max-width: 700px) {
.home-page .faq-section .faq-item.active .answer .answer-highlights {
padding-left:10px
}
}
.home-page .faq-section .faq-item.active .answer .answer-highlights li::before {
content: counter(requirements-counter);
color: #01d676;
position: absolute;
left: -45px;
top: -15px;
font-size: 48px;
font-weight: bold;
text-align: right;
width: 30px
}
.home-page .faq-section .faq-item.active .answer .answer-highlights li {
position: relative;
counter-increment: requirements-counter;
list-style: none;
margin-left: 30px;
margin-bottom: 20px
}
.home-page .faq-section .faq-item.active .answer .answer-highlights li h6 {
color: #01d676;
font-weight: bold;
font-size: 14px
}
.home-page .faq-section .faq-item>div {
padding: 15.5px 20px 0 20px
}
@media only screen and (max-width: 700px) {
.home-page .faq-section .faq-item>div {
padding:15.5px 20px 0 18px
}
}
.home-page .faq-section .faq-item .question {
min-height: 61px;
background: rgba(42,43,70,0.4470588235);
border-radius: 10px;
position: relative;
padding-top: 0;
display: flex;
align-items: center;
gap: 20px
}
.home-page .faq-section .faq-item .answer {
background: #1f2034;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-height: 0;
padding-bottom: 0;
padding-top: 0;
overflow: hidden;
transition: padding .4s ease-out;
color: rgba(255,255,255,0.8)
}
.home-page .faq-section .faq-item a {
text-decoration: underline;
color: #fff;
font-weight: 700
}
@media only screen and (max-width: 700px) {
.home-page .faq-section .faq-item {
margin-left:0;
width: 100%
}
}
.home-page .feedback-section {
width: 100%;
padding-bottom: 60px;
text-align: center
}
.home-page .feedback-section .homeTestimonials {
margin: 0
}
.home-page .feedback-section .homeTestimonials>div {
background: transparent !important;
padding-bottom: 0 !important
}
.home-page .feedback-section .homeTestimonials .homeTestimonialsHeading {
font-weight: 600;
font-size: 30px;
margin-bottom: 36px
}
@media only screen and (max-width: 700px) {
.home-page .feedback-section .homeTestimonials .homeTestimonialsHeading {
font-size:20px;
margin-bottom: 15px
}
}
.home-page .banners-section {
font-size: 0;
width: 60%;
max-width: 1150.8px;
margin: 0 auto;
padding-bottom: 60px;
display: flex;
align-items: center
}
@media only screen and (max-width: 700px) {
.home-page .banners-section {
margin-left:0;
padding: 0 15px 0 15px;
width: 100%;
flex-direction: column
}
}
.home-page .banners-section .banner {
font-size: 12px;
text-align: center;
padding-top: 5vw;
display: inline-block;
width: 60%;
height: 21vw;
max-height: 356px;
background: #1d1e31;
border-radius: 10px;
vertical-align: middle;
position: relative;
overflow: visible
}
.home-page .banners-section .banner:first-child {
width: 40%;
border: 2px solid #01b664;
box-shadow: 0 4px 25px rgba(0,0,0,0.1);
background: url("/public/img/template/body/fallingCoins.png");
background-size: cover;
background-repeat: no-repeat
}
.home-page .banners-section .banner:first-child::after {
content: "";
position: absolute;
background: url("/public/img/template/body/bigCoins.png");
background-size: contain;
background-repeat: no-repeat;
background-position-y: bottom;
width: 40%;
height: 100%;
left: -8%;
bottom: -2vw
}
@media only screen and (max-width: 700px) {
.home-page .banners-section .banner:first-child::after {
width:130px;
left: calc(50% - 65px);
height: 100%;
z-index: 1;
bottom: -35px;
background-position-y: bottom
}
}
.home-page .banners-section .banner .heading {
font-weight: 600;
font-size: 1.05vw;
line-height: 129.5%;
letter-spacing: -0.03em
}
.home-page .banners-section .banner .title {
font-weight: 600;
font-size: 2vw;
margin-bottom: 2vw;
line-height: 2.04vw;
letter-spacing: -0.03em
}
.home-page .banners-section .banner .amount {
font-weight: 600;
font-size: 5vw;
background: linear-gradient(270deg,#f9ebb9 0,#ffbc11 100%);
background: -webkit-linear-gradient(270deg,#f9ebb9 0,#ffbc11 100%);
text-shadow: 0 5px 9px rgba(255,221,103,0.06);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}
.home-page .banners-section .banner .start-earn-btn {
width: 49%;
background: #01d676;
border-radius: 4px;
font-size: 15px;
height: 50px;
font-weight: 600;
color: #1d1d2e;
display: inline-flex;
justify-content: center;
align-items: center
}
@media only screen and (max-width: 700px) {
.home-page .banners-section .banner {
display:block;
width: 100%;
min-height: 207px;
height: auto;
padding: 28px 30px 40px 30px
}
.home-page .banners-section .banner:first-child {
width: 100%
}
.home-page .banners-section .banner:last-child {
padding-top: 61px
}
.home-page .banners-section .banner .heading {
font-size: 20px
}
.home-page .banners-section .banner .title {
font-size: 18px;
line-height: 129.5%;
margin-bottom: 38px
}
.home-page .banners-section .banner .amount {
font-size: 48px
}
.home-page .banners-section .banner .start-earn-btn {
width: 208px;
height: 50px;
font-size: 14px
}
}
@media only screen and (min-width: 1918px) {
.home-page .banners-section .banner {
padding-top:95px
}
.home-page .banners-section .banner .heading {
font-size: 20px
}
.home-page .banners-section .banner .title {
font-size: 30px
}
.home-page .banners-section .banner .amount {
font-size: 96px
}
.home-page .banners-section .banner button {
font-size: 15px
}
}
@media only screen and (max-width: 2000px) {
.chatActive .home-page .banners-section .banner .amount {
font-size:4.3vw
}
}
.fixed {
position: fixed;
width: 100%;
overflow-y: scroll
}
.free-case-open-btn,header .navigation .free-case-open-btn.nav-item {
width: 180px;
min-width: max-content;
height: 46px;
position: relative;
background-image: url("/public/img/rewards/signupBonusBg.png");
background-size: cover;
border-radius: 5px;
margin-left: 21px;
margin-right: 21px;
white-space: nowrap;
display: flex;
align-items: center;
cursor: pointer
}
@media only screen and (max-width: 1199px) {
.free-case-open-btn,header .navigation .free-case-open-btn.nav-item {
box-sizing:border-box;
margin-left: 0;
margin-right: 0
}
}
@media only screen and (min-width: 701px) {
.free-case-open-btn.claimed,header .navigation .free-case-open-btn.nav-item.claimed {
width:231px
}
}
.free-case-open-btn.claimed .btn-text div:last-child,header .navigation .free-case-open-btn.nav-item.claimed .btn-text div:last-child {
color: #fff
}
.free-case-open-btn .btn-text,.free-case-open-btn .reg-challange-time,header .navigation .free-case-open-btn.nav-item .btn-text,header .navigation .free-case-open-btn.nav-item .reg-challange-time {
display: inline-block
}
.free-case-open-btn .btn-text,header .navigation .free-case-open-btn.nav-item .btn-text {
margin-left: 33px
}
@media only screen and (max-width: 1199px) {
.free-case-open-btn .btn-text,header .navigation .free-case-open-btn.nav-item .btn-text {
margin-left:29px
}
}
.free-case-open-btn .btn-text div:first-child,header .navigation .free-case-open-btn.nav-item .btn-text div:first-child {
font-weight: bold;
font-size: 16px;
line-height: 24px;
letter-spacing: .02em;
color: #01d676;
text-shadow: 0 2px 8px rgba(0,0,0,0.25)
}
@media only screen and (max-width: 1199px) {
.free-case-open-btn .btn-text div:first-child,header .navigation .free-case-open-btn.nav-item .btn-text div:first-child {
font-size:13px;
line-height: 20px
}
}
.free-case-open-btn .btn-text div:last-child,header .navigation .free-case-open-btn.nav-item .btn-text div:last-child {
font-weight: 500;
font-size: 12px;
line-height: 18px;
letter-spacing: .02em;
color: #8caa98;
text-shadow: 0 2px 8px rgba(0,0,0,0.25)
}
.free-case-open-btn .btn-text div:last-child span,header .navigation .free-case-open-btn.nav-item .btn-text div:last-child span {
color: #fff
}
@media only screen and (max-width: 1199px) {
.free-case-open-btn .btn-text div:last-child,header .navigation .free-case-open-btn.nav-item .btn-text div:last-child {
font-size:9.7px;
line-height: 15px
}
}
.free-case-open-btn .reg-challange-time-block,header .navigation .free-case-open-btn.nav-item .reg-challange-time-block {
width: 51px;
height: 100%;
vertical-align: top;
background: rgba(72,76,109,0.5);
box-shadow: inset 4px 0 14px rgba(0,0,0,0.15);
text-align: left;
font-weight: 600;
font-size: 12px;
line-height: 18px;
letter-spacing: .02em;
color: #fff;
display: inline-flex;
align-items: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px
}
@media only screen and (max-width: 1199px) {
.free-case-open-btn .reg-challange-time-block,header .navigation .free-case-open-btn.nav-item .reg-challange-time-block {
display:inline-flex;
width: 41px;
font-size: 9.7px;
line-height: 14px;
justify-content: center
}
}
.free-case-open-btn .reg-challange-time-block .reg-challange-time,header .navigation .free-case-open-btn.nav-item .reg-challange-time-block .reg-challange-time {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-top: 1px
}
.free-case-open-btn .reg-challange-time-block .reg-challange-time>span span,header .navigation .free-case-open-btn.nav-item .reg-challange-time-block .reg-challange-time>span span {
color: #01d676
}
@media only screen and (min-width: 1200px) and (max-width:1300px) {
.free-case-open-btn.claimed,header .navigation .free-case-open-btn.nav-item.claimed {
width:205px
}
.free-case-open-btn .btn-text,header .navigation .free-case-open-btn.nav-item .btn-text {
margin-left: 27px
}
}
@media only screen and (max-width: 1199px) {
.free-case-open-btn,header .navigation .free-case-open-btn.nav-item {
width:100%;
min-width: 100%;
height: 48px
}
}
@keyframes mobile-loader {
0% {
width: 0
}
25% {
width: 40%
}
50% {
width: 60%
}
80% {
width: 90%
}
100% {
width: 98%
}
}
.mobile-landing-loader {
width: 100%;
height: 100%;
background-color: #242438;
position: fixed;
top: 0;
left: 0;
z-index: 100
}
.mobile-landing-loader.dark {
background-color: #141523
}
.mobile-landing-loader .mobile-loader-bg-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
@media(min-height: 600px) {
.mobile-landing-loader .mobile-loader-bg-effect {
transform:scale(2)
}
}
.mobile-landing-loader .mobile-loader-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 65%;
height: 50px;
max-width: 320px;
font-size: 0
}
.mobile-landing-loader .mobile-loader-logo svg {
height: 100%
}
.mobile-landing-loader .mobile-loader-logo svg:first-child {
width: 18%;
margin-right: 5px
}
.mobile-landing-loader .mobile-loader-logo svg:last-child {
width: 78%
}
.mobile-landing-loader .mobile-loader-progress {
position: absolute;
left: calc(50% - 78px);
top: calc(50% + 45px);
width: 156px;
height: 3px;
background: #616176;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
border-radius: 21px
}
.mobile-landing-loader .mobile-loader-progress .mobile-loader-progress-line {
position: absolute;
height: 100%;
width: 0;
left: 0;
top: 0;
animation-name: mobile-loader;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
background: #01d676;
box-shadow: 0 1px 4px rgba(1,214,118,0.2);
border-radius: 21px;
transition: .3s
}
.mobile-landing-loader .mobile-loader-progress .mobile-loader-progress-line.full {
width: 100%
}
body.mobile-onboarding-page .topEarnFeed,body.mobile-onboarding-page .main,body.mobile-onboarding-page header,body.mobile-onboarding-page footer,body.mobile-onboarding-page .mobile-navigation {
display: none
}
.mobile-onboarding {
position: absolute;
top: 0;
left: 0;
height: 100%;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
width: 100%;
background: linear-gradient(360deg,rgba(74,79,117,0.1) -61.96%,rgba(1,214,118,0.1) -18.07%,rgba(74,79,117,0.1) 93.09%),#242438;
z-index: 99;
text-align: center;
font-family: Poppins;
overflow-y: auto;
overflow-x: hidden
}
.mobile-onboarding::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(360deg,rgba(74,79,117,0.1) -61.96%,rgba(1,214,118,0.1) -18.07%,rgba(74,79,117,0.1) 93.09%),linear-gradient(180deg,rgba(36,36,56,0) 0,rgba(36,36,56,0.88) 100%)
}
.mobile-onboarding .invisible {
position: absolute;
top: -900px
}
.mobile-onboarding .logo {
margin: 66px auto 25px auto;
width: 65%;
height: 50px;
max-width: 320px;
font-size: 0
}
@media only screen and (min-width: 701px) {
.mobile-onboarding .logo {
height:63px;
max-width: unset
}
}
.mobile-onboarding .logo svg {
height: 100%
}
.mobile-onboarding .logo svg:first-child {
width: 18%;
margin-right: 5px
}
.mobile-onboarding .logo svg:last-child {
width: 78%
}
.mobile-onboarding .heading .title {
font-weight: bold;
font-size: 18px;
color: #fff;
margin-bottom: 16px
}
.mobile-onboarding .heading .title span {
color: #01d676
}
@media only screen and (min-width: 701px) {
.mobile-onboarding .heading .title {
font-size:30px
}
}
.mobile-onboarding .heading .description {
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #afb1d1;
max-width: 87%;
margin: 0 auto
}
@media only screen and (min-width: 701px) {
.mobile-onboarding .heading .description {
font-size:15px
}
}
.mobile-onboarding .trustpilot-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
.mobile-onboarding .trustpilot-container a {
display: block
}
.mobile-onboarding .trustpilot-container a:last-child {
display: block;
font-size: 12px;
line-height: 25px;
color: #fff
}
@media only screen and (min-width: 701px) {
.mobile-onboarding .trustpilot-container a:last-child {
font-size:15px
}
}
.mobile-onboarding .trustpilot-container a:last-child img {
width: 71px;
vertical-align: text-bottom
}
@media only screen and (min-width: 701px) {
.mobile-onboarding .trustpilot-container a:last-child img {
width:90px;
vertical-align: sub
}
}
.mobile-onboarding .sub-slider {
margin-bottom: 15px
}
.mobile-onboarding .sub-slider .heading-pagination .heading-page-nav {
width: 50px;
height: 3px;
background: rgba(255,255,255,0.5);
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
backdrop-filter: blur(12px);
border-radius: 21px;
display: inline-block
}
.mobile-onboarding .sub-slider .heading-pagination .heading-page-nav.active {
background: #01d676;
box-shadow: 0 1px 4px rgba(1,214,118,0.2)
}
.mobile-onboarding .sub-slider .heading-pagination .heading-page-nav:not(:last-child) {
margin-right: 10px
}
.mobile-onboarding .info-content {
position: relative;
height: calc(100vh - 366px);
height: calc(var(--vh, 1vh) * 100 - 366px);
margin: 0 auto 15px auto;
width: 260px
}
@media only screen and (min-width: 701px) {
.mobile-onboarding .info-content {
width:65%
}
}
.mobile-onboarding .info-content .terms-info {
position: absolute;
bottom: 0;
margin: 0;
font-size: 12px
}
.mobile-onboarding .info-content .terms-info a {
color: #01d676
}
.mobile-onboarding .sub-slider .info-content {
height: calc(100vh - 342px);
height: calc(var(--vh, 1vh) * 100 - 342px)
}
.mobile-onboarding .forgot-pass-page .info-content {
height: calc(100vh - 307px);
height: calc(var(--vh, 1vh) * 100 - 307px)
}
.mobile-onboarding .reset-pass-page .info-content {
height: calc(100vh - 425px);
height: calc(var(--vh, 1vh) * 100 - 425px)
}
.mobile-onboarding .onb-btn {
width: 280px;
height: 50px;
background: #3a4f54;
box-shadow: inset 0 1.28205px 0 #577375;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto
}
.mobile-onboarding .onb-btn.green-btn {
background: #01d676;
box-shadow: inset 0 1.28205px 0 #00ffc2
}
.mobile-onboarding .onb-btn:not(:last-child) {
margin-bottom: 10px
}
.mobile-onboarding .onb-btn svg {
margin-right: 5px
}
.mobile-onboarding .onb-btn span {
font-weight: 600;
font-size: 12.8205px;
color: #fff
}
@media only screen and (min-width: 701px) {
.mobile-onboarding .onb-btn {
width:90%
}
.mobile-onboarding .onb-btn span {
font-size: 15px
}
}
.mobile-onboarding .forgot-pass {
font-weight: 400;
font-size: 10px;
color: #7f8c90
}
.mobile-onboarding .main-slider .swiper-slide .signup-input,.mobile-onboarding .main-slider .swiper-slide .signin-input {
width: 280px;
height: 50px;
top: 493px;
text-align: center;
background: #2f3043;
box-shadow: inset 0 -2px 0 #577375;
border-radius: 10px;
font-weight: 600;
font-size: 12.8205px;
line-height: 19px;
color: #ccd
}
@media only screen and (min-width: 701px) {
.mobile-onboarding .main-slider .swiper-slide .signup-input,.mobile-onboarding .main-slider .swiper-slide .signin-input {
width:90%;
font-size: 15px
}
}
.mobile-onboarding .main-slider .swiper-slide .signup-input::placeholder,.mobile-onboarding .main-slider .swiper-slide .signin-input::placeholder {
color: rgba(255,255,255,0.35);
opacity: 1
}
.mobile-onboarding .main-slider .swiper-slide .signup-input:-ms-input-placeholder,.mobile-onboarding .main-slider .swiper-slide .signin-input:-ms-input-placeholder {
color: rgba(255,255,255,0.35)
}
.mobile-onboarding .main-slider .swiper-slide .signup-input::-ms-input-placeholder,.mobile-onboarding .main-slider .swiper-slide .signin-input::-ms-input-placeholder {
color: rgba(255,255,255,0.35)
}
.mobile-onboarding .main-slider .swiper-slide .signup-input+span,.mobile-onboarding .main-slider .swiper-slide .signin-input+span {
display: none
}
.mobile-onboarding .main-slider .swiper-slide .signup-input.invalid,.mobile-onboarding .main-slider .swiper-slide .signup-input.invalid:focus,.mobile-onboarding .main-slider .swiper-slide .signin-input.invalid,.mobile-onboarding .main-slider .swiper-slide .signin-input.invalid:focus {
border-bottom: 1px solid #f44336 !important;
-webkit-box-shadow: 0 1px 0 0 #f44336 !important;
box-shadow: 0 1px 0 0 #f44336 !important
}
.mobile-onboarding .main-slider .swiper-slide .signup-input.invalid+span,.mobile-onboarding .main-slider .swiper-slide .signup-input.invalid:focus+span,.mobile-onboarding .main-slider .swiper-slide .signin-input.invalid+span,.mobile-onboarding .main-slider .swiper-slide .signin-input.invalid:focus+span {
display: block;
color: #f44336;
font-size: 12px
}
.mobile-onboarding .bg-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2
}
.mobile-onboarding .bg-slider .swiper-slide img {
position: absolute;
left: 7%;
bottom: 70px;
height: 60%
}
@media only screen and (min-width: 701px) {
.mobile-onboarding .bg-slider .swiper-slide img {
right:-30%;
top: 40%;
width: 100%;
height: auto;
left: unset;
bottom: unset
}
}
@keyframes shake {
10%,90% {
transform: translate3d(-1px,0,0)
}
20%,80% {
transform: translate3d(2px,0,0)
}
30%,50%,70% {
transform: translate3d(-3px,0,0)
}
40%,60% {
transform: translate3d(3px,0,0)
}
}
@media only screen and (max-width: 700px) {
.notFixed:not(.is-logged-in) {
position:relative !important
}
}
.site-header {
height: var(--header-height);
width: 100%;
font-family: "Poppins";
display: flex;
align-items: center;
flex-direction: row;
position: fixed;
top: 0;
left: 0;
transition: .3s;
z-index: 10;
background: rgba(29,30,48,0.98);
justify-content: space-between
}
@media only screen and (min-width: 701px) {
.site-header {
justify-content:unset
}
}
.site-header .header-logo-container {
width: var(--side-nav-width);
display: flex;
align-items: center
}
.site-header .route-back {
width: var(--route-back-width)
}
.site-header .logo,.site-header .navigation,.site-header .account {
display: inline-flex;
flex-direction: row;
align-items: center;
position: relative
}
.site-header .left-menu-icon {
position: relative;
z-index: 6;
margin-left: 10px;
margin-right: 10px;
padding: 5px 10px;
display: none;
width: 40px;
height: 27px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer
}
.site-header .left-menu-icon span {
display: block;
position: absolute;
height: 2px;
width: 20px;
background: rgba(163,163,194,0.8);
border-top: 1px solid #606075;
opacity: 1;
left: 10px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out
}
.site-header .left-menu-icon span:nth-child(1) {
top: 5px
}
.site-header .left-menu-icon span:nth-child(2) {
top: 12px;
width: 12px
}
.site-header .left-menu-icon span:nth-child(3) {
top: 19px
}
.site-header .left-menu-icon.open span:nth-child(1) {
top: 7px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg)
}
.site-header .left-menu-icon.open span:nth-child(2) {
opacity: 0;
left: -20px
}
.site-header .left-menu-icon.open span:nth-child(3) {
top: 7px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg)
}
@media only screen and (max-width: 1199px) {
.site-header .left-menu-icon {
display:inline-block
}
}
.site-header .logo {
position: relative;
z-index: 6;
margin-left: 18px;
font-size: 2px
}
@media only screen and (max-width: 1199px) {
.site-header .logo {
margin-left:9px
}
}
@media only screen and (max-width: 700px) {
.site-header .logo-text {
display:none
}
}
@media only screen and (max-width: 700px) {
.site-header .logo {
margin-left:24px;
z-index: 0
}
}
.site-header .logo svg {
margin-right: 2px
}
.site-header .logo img {
height: 40px;
position: relative
}
.site-header .logo img:first-child {
z-index: 2
}
.site-header .logo img:last-child {
left: -18px
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.site-header .logo img {
height:33px
}
.site-header .logo img:last-child {
left: -13px
}
}
.site-header .navigation {
position: relative;
left: 30px
}
@media only screen and (max-width: 700px) {
.site-header .navigation {
display:none
}
}
@media only screen and (max-width: 1199px) {
.site-header .navigation {
display:none
}
}
.site-header .navigation .nav-item {
margin-right: 30px;
display: inline-block;
line-height: 14px;
cursor: pointer
}
@media only screen and (min-width: 701px) and (max-width:1300px) {
.site-header .navigation .nav-item {
margin-right:15px
}
}
.site-header .navigation .nav-item svg {
margin-right: 7px;
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
max-width: 22px;
max-height: 24px
}
.site-header .navigation .nav-item>span {
font-weight: 500;
font-size: 14px;
line-height: 14px;
letter-spacing: .01em;
color: #787ead;
vertical-align: super
}
.site-header .navigation .nav-item.active span,.site-header .navigation .nav-item.active svg {
color: #01d676;
fill: #01d676
}
.site-header .navigation .nav-item:hover svg.animate {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
.site-header .navigation .nav-item.nav-leaderboard {
position: relative
}
.site-header .navigation .nav-item.nav-leaderboard span:last-child {
position: absolute;
top: -13px;
right: -10px;
padding: 0 6px;
width: fit-content;
height: 14px;
background: #1c5c4f;
border-radius: 5px;
display: inline-block;
text-align: center;
font-weight: 500;
font-size: 8.5px;
line-height: 14px;
color: #01ff97
}
.site-header .navigation .nav-item.nav-rewards {
position: relative;
background: rgba(255,212,103,0.1);
border-radius: 5px;
padding: 0 21px;
height: 50px;
width: 128px;
line-height: 50px;
text-align: left
}
.site-header .navigation .nav-item.nav-rewards span:first-child {
font-weight: 500;
font-size: 14px;
line-height: 14px;
letter-spacing: .01em;
color: #fac401;
vertical-align: baseline
}
.site-header .navigation .nav-item.nav-rewards span:last-child {
position: absolute;
top: 7px;
right: 11px;
font-weight: bold;
font-size: 10px;
line-height: 14px;
letter-spacing: .01em;
color: #fac401
}
.site-header .navigation .nav-item.nav-referral {
margin-right: 0;
cursor: pointer;
display: flex
}
@media only screen and (max-width: 1399px) {
.site-header .navigation .nav-item.nav-referral {
display:none
}
}
.site-header .navigation .nav-item.nav-easter {
margin-right: 30px
}
.site-header .account {
margin-right: 60px
}
@media only screen and (min-width: 701px) {
.site-header .account {
margin-left:auto
}
}
@media only screen and (max-width: 1199px) {
.site-header .account {
margin-right:15px
}
}
.site-header .account .account-item {
margin-left: 20px
}
@media only screen and (max-width: 700px) {
.site-header .account .account-item {
margin-left:10px
}
}
.site-header .account .login-btn,.site-header .account .register-btn {
padding: 0 20px;
text-align: left;
background: #33334c;
border-radius: 4px;
height: 50px;
line-height: 50px;
white-space: nowrap;
color: white !important
}
.site-header .account .login-btn span,.site-header .account .register-btn span {
font-weight: 600;
font-size: 12px
}
.site-header .account .login-btn svg,.site-header .account .register-btn svg {
vertical-align: middle;
margin-right: 8px
}
@media only screen and (max-width: 700px) {
.site-header .account .login-btn,.site-header .account .register-btn {
padding:0 10px 0 10px;
height: 39px;
line-height: 39px
}
.site-header .account .login-btn span,.site-header .account .register-btn span {
font-size: 10px
}
.site-header .account .login-btn svg,.site-header .account .register-btn svg {
margin-right: 6px
}
}
.site-header .account .register-btn {
background: #01d676
}
.site-header .account .register-btn svg {
fill: #fff
}
.site-header .account .notifications-bell {
position: relative;
width: 16px;
height: 16px;
cursor: pointer;
color: #a9a9ca;
display: none;
margin-left: 20px
}
.site-header .account .notifications-bell.show {
display: block
}
@media only screen and (max-width: 700px) {
.site-header .account .notifications-bell.show {
display:none
}
}
@media only screen and (max-width: 700px) {
.site-header .account .notifications-bell {
display:none
}
}
.site-header .account .notifications-bell svg {
width: 100%;
height: 100%
}
.site-header .account .notifications-bell .notifications-counter {
position: absolute;
left: 11.35px;
width: 16px;
height: 16px;
background: #ff4040;
box-sizing: border-box;
border-radius: 50%;
color: white;
text-align: center;
top: -9px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 12px;
line-height: 165%
}
.site-header .account .user-box {
height: 53px;
padding: 7px 10px;
background-color: #33334c;
border-radius: 4px;
display: flex;
align-items: center
}
.site-header .account .user-box .profile-btn {
cursor: pointer;
margin-right: 10px
}
.site-header .account .user-box .profile-btn svg {
width: 12px;
height: 9px
}
.site-header .account .user-box .profile-link {
width: 34px;
height: 34px;
position: relative;
top: 1px;
margin-right: 10px
}
.site-header .account .user-box .avatar {
width: 100%;
height: 100%;
display: inline-block;
border-radius: 4px
}
.site-header .account .user-box .user-info {
display: block;
text-align: left;
float: right;
width: 86px
}
.site-header .account .user-box .user-info .username {
font-weight: 600;
font-size: 12px;
line-height: normal;
color: #fff;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}
.site-header .account .user-box .user-info .balance-container {
position: relative
}
.site-header .account .user-box .user-info .balance-container .balance-row {
width: 100%;
height: 21px;
background-color: #212135;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 3px;
padding: 0 4px;
cursor: pointer
}
.site-header .account .user-box .user-info .balance-container .amount {
font-weight: 600;
font-size: 11.5px;
line-height: 1.5em;
color: #01d676;
text-align: center;
max-height: 15px
}
.site-header .account .user-box .user-info .balance-container .amount+svg {
margin-left: auto;
cursor: pointer;
padding: 3px 0;
height: 15px;
width: 12px;
position: relative;
top: 1px
}
.site-header .account .user-box .user-info .balance-container svg.show-currency,.site-header .account .user-box .user-info .balance-container svg.show-coins {
width: 15px;
height: 15px
}
.site-header .account .user-box .user-info .balance-container.active .currency-picker {
display: flex
}
.site-header .account .user-box .user-info .balance-container.on-currency .show-currency {
display: block
}
.site-header .account .user-box .user-info .balance-container.on-currency .show-coins {
display: none
}
.site-header .account .user-box .user-info .balance-container .show-currency {
display: none
}
.site-header .account .user-box .user-info .balance-container .currency-picker {
position: absolute;
top: calc(100% + 6px);
right: -10px;
width: 144px;
height: 36px;
background: #48486c;
border-radius: 5px;
align-items: center;
gap: 8px;
padding: 10px;
display: none
}
.site-header .account .user-box .user-info .balance-container .currency-picker::before {
content: "";
position: absolute;
right: 12px;
top: -11px;
border: 7.21px solid;
border-color: transparent transparent #48486c transparent
}
.site-header .account .user-box .user-info .balance-container .currency-picker .lever {
width: 30px;
height: 16px;
background: #212135;
border-radius: 4px;
margin: 0
}
.site-header .account .user-box .user-info .balance-container .currency-picker .lever::before,.site-header .account .user-box .user-info .balance-container .currency-picker .lever::after {
width: 12px;
height: 12px;
border-radius: 3px;
top: 2px;
left: 2px
}
.site-header .account .user-box .user-info .balance-container .currency-picker .lever::after {
background: #66668b
}
.site-header .account .user-box .user-info .balance-container .currency-picker input[type=checkbox]:checked+.lever::before,.site-header .account .user-box .user-info .balance-container .currency-picker input[type=checkbox]:checked+.lever::after {
left: 16px
}
.site-header .account .user-box .user-info .balance-container .currency-picker input[type=checkbox]:checked+.lever::after {
background: #01d676
}
.site-header .account .user-box .user-info .balance-container .currency-picker .show-coins,.site-header .account .user-box .user-info .balance-container .currency-picker .show-currency {
font-weight: 600;
font-size: 9px;
line-height: 13px;
color: #fff;
white-space: nowrap
}
.site-header .logo-subtitle {
font-size: 26px;
color: white;
padding-left: 12px;
font-style: italic
}
@media only screen and (max-width: 700px) {
.site-header .logo-subtitle {
display:none
}
}
.site-header .logo-go-back {
padding-right: 32px
}
@media only screen and (max-width: 700px) {
.site-header .logo-go-back {
display:none
}
}
.nav-referral {
position: relative;
background: linear-gradient(90deg,#396afc 0,#2948ff 100%);
border-radius: 7px;
width: 180px;
min-width: 180px;
height: 50px;
margin-right: 0;
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 21px
}
.nav-referral:hover {
transform: scale(1.02)
}
.nav-referral:hover::before {
opacity: .3;
z-index: -1
}
.nav-referral::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("/public/img/buttons/shiningBg.png");
background-size: cover;
opacity: .2;
border-radius: 7px;
z-index: 0;
overflow: hidden
}
.nav-referral svg {
position: relative;
margin-right: 7px;
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
max-width: 22px;
max-height: 24px
}
.nav-referral .btn-text {
position: relative;
margin-left: 10px
}
.nav-referral .btn-text span {
display: block
}
.nav-referral .btn-text span:first-child {
font-weight: 700;
font-size: 14px;
color: #fff
}
.nav-referral .btn-text span:last-child {
font-weight: 700;
font-size: 10px;
color: #fff
}
.user-balance {
display: flex;
align-items: center;
background: #141523;
border-radius: 10px;
font-size: 14px;
line-height: 160%;
color: #fff;
font-weight: 500;
height: 40px
}
.user-balance .balanceValue {
font-family: "Poppins",sans-serif;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 140%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding-right: 15px;
white-space: nowrap
}
.user-balance .user-balance-icon {
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
border-right: 2px solid #1e1e30;
height: 100%;
padding: 0 8px 0 12px;
width: 40px
}
.user-balance .user-balance-icon svg {
width: 20px
}
.user-balance .user-balance-icon .show-coins {
height: 20px;
width: 20px
}
.user-balance .user-balance-icon .show-currency {
padding-top: 2px;
height: 14px;
width: 20px
}
.user-balance .user-balance-skeleton {
width: 40px;
height: 21px;
background: #212134;
border-radius: 22px;
margin-right: 12px
}
.user-balance .show-currency {
display: none
}
.user-balance .show-coins {
display: block
}
.user-balance.on-currency .show-currency {
display: block
}
.user-balance.on-currency .show-coins {
display: none
}
.user-menu {
margin-left: 24px
}
@media only screen and (min-width: 1200px) and (max-width:1399px) {
.user-menu {
margin-left:20px
}
}
.user-menu .dropdown-toggle {
height: 40px;
background: #2f3043;
border-radius: 6px;
padding: 6px 16px 6px 6px;
display: flex;
align-items: center;
box-shadow: none
}
.user-menu .dropdown-toggle:after {
display: none
}
.user-menu .user-menu-username {
margin-right: 12px;
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #a9a9ca;
max-width: 100px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
@media only screen and (max-width: 700px) {
.user-menu .user-menu-username {
display:none
}
}
.user-menu .user-menu-avatar,.user-menu .user-menu-avatar img {
width: 28px;
height: 28px;
border-radius: 50%;
margin-right: 8px
}
.user-menu .user-menu-toggle-arrow {
display: flex;
align-items: center;
color: #a9a9ca
}
.user-menu .user-menu-item,.user-menu .user-menu-item a {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #a9a9ca
}
.user-menu .user-menu-item:not(:last-child):not(.user-menu-item-no-margin) {
margin-bottom: 10px
}
.user-menu .user-menu-item:not(.user-menu-item-separator):hover {
opacity: .8
}
.user-menu .user-menu-item a {
display: flex;
align-items: center;
padding: 10px 4px
}
.user-menu .user-menu-item-icon {
margin-right: 13px;
width: 15px;
height: 15px;
display: flex;
align-items: center;
justify-content: center
}
.user-menu .user-menu-item-separator {
height: 1px;
background: #a9a9ca;
opacity: .1;
margin-top: 20px;
margin-bottom: 20px !important
}
.user-menu .user-menu-item-switcher {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 10px 0
}
.user-menu .dropdown-menu {
background: rgba(51,51,77,0.98);
box-shadow: 0 0 16px rgba(20,21,35,0.2);
border-radius: 6px;
padding: 20px 16px;
min-width: 224px;
margin-top: 8px !important
}
.user-menu .user-menu-dropdown-btn-skeleton {
width: 160px;
height: 40px;
border-radius: .375rem
}
@media only screen and (max-width: 700px) {
.user-menu .user-menu-dropdown-btn-skeleton {
width:66px
}
}
@media only screen and (max-width: 700px) {
.site-header--lite:not(.is-logged-in) .header-logo-container {
justify-content:left;
width: 100%
}
.site-header--lite:not(.is-logged-in) .logo-text {
display: nond
}
}
.site-header--lite .header-logo-container {
justify-content: flex-end
}
@media only screen and (max-width: 1199px) {
.site-header--lite .header-logo-container {
justify-content:flex-start
}
}
.site-header--lite .left-items {
display: flex;
align-items: center;
gap: 20px;
margin-left: 32px;
border-left: 1px solid #2e2f44;
padding-left: 32px
}
@media only screen and (max-width: 1199px) {
.site-header--lite .left-items {
display:none
}
}
.site-header--lite .left-items a {
color: var(--gray-200);
font-weight: bold;
font-size: 14px;
height: var(--header-height);
display: flex;
gap: 10px;
align-items: center
}
.site-header--lite .left-items svg {
display: block
}
.site-header--lite .left-items li.active {
position: relative
}
.site-header--lite .left-items li.active::after {
content: "";
position: absolute;
bottom: 0;
left: -5px;
right: -5px;
height: 2px;
background-color: #01d676
}
.site-header--lite .left-items li.active a {
color: #fff
}
.site-header--lite .left-items li.active svg {
color: #01d676
}
.mobile-navigation {
position: fixed;
z-index: 20;
left: 0;
bottom: 0;
display: none;
align-items: center;
flex-direction: row;
background: #141523;
width: 100%;
justify-content: space-between;
padding: 0 60px;
overflow-y: visible;
border-top: 1px solid #1e1e2e
}
@media only screen and (min-width: 1200px) {
.mobile-navigation {
display:none !important
}
}
@media only screen and (max-width: 1199px) {
.mobile-navigation {
display:flex;
padding: 0 20px
}
}
@media only screen and (max-width: 700px) {
.mobile-navigation {
padding:0;
gap: 5px;
bottom: -1px
}
}
.mobile-navigation.--lite {
bottom: -2px
}
.mobile-navigation.--lite .nav-item.active {
position: relative;
background: radial-gradient(#003330,transparent)
}
.mobile-navigation.--lite .nav-item.active: :before {
content:"";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-color: #01d676
}
.mobile-navigation .nav-item {
display: inline-flex;
flex-direction: column;
align-items: center;
height: var(--bottom-nav-height);
padding-top: 15px;
position: relative;
top: 0;
transition: .3s;
flex: 1
}
.mobile-navigation .nav-item svg,.mobile-navigation .nav-item i {
height: 24px;
width: 24px;
fill: #7d7d9e;
color: #7d7d9e;
font-size: 22px;
margin-bottom: 4px;
text-align: center;
line-height: 32px
}
.mobile-navigation .nav-item span {
font-weight: 400;
font-size: 10px;
line-height: 165%;
text-align: center;
color: #7d7d9e
}
.mobile-navigation .nav-item.bottom-navigation-open-menu {
display: flex;
height: 100%;
padding: 0;
align-items: center;
justify-content: center
}
.mobile-navigation .nav-item.bottom-navigation-open-menu svg {
margin-bottom: 0
}
.mobile-navigation .nav-item.highlighted {
top: -10px;
max-height: 67px;
max-width: 73px;
padding-top: 12px;
background: #1e1e2e;
border-radius: 4px;
border: .6px solid #141523
}
.mobile-navigation .nav-item.highlighted span {
color: #7d7d9e;
text-shadow: 0 0 4px rgba(0,0,0,0.25);
font-weight: 500
}
.mobile-navigation .nav-item.active span {
color: #01d676
}
.mobile-navigation .nav-item.active svg,.mobile-navigation .nav-item.active i {
color: #01d676;
fill: #01d676
}
.mobile-navigation .nav-item.highlighted.active {
background: #09b65e;
}
.mobile-navigation .nav-item.highlighted.active span,.mobile-navigation .nav-item.highlighted.active svg,.mobile-navigation .nav-item.highlighted.active i {
fill: #fff;
color: #fff
}
@keyframes apear {
from {
opacity: 0
}
to {
opacity: 1
}
}
.left-navigation {
font-family: Poppins;
position: fixed;
top: 0;
left: -300px;
background: #25253a;
box-shadow: 0 4px 51px rgba(0,0,0,0.25);
width: 227px;
height: 100vh;
z-index: 6;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 24px
}
@media only screen and (max-width: 700px) {
.left-navigation {
justify-content:flex-start;
padding-bottom: 80px
}
}
.left-navigation .bg-layer {
content: "";
position: fixed;
left: -100%;
top: 0;
width: calc(100% - 227px);
height: 100%;
background: rgba(22,22,33,0.9);
opacity: 0
}
.left-navigation.open {
left: 0
}
.left-navigation.open .bg-layer {
left: 227px;
animation-name: apear;
animation-delay: .25s;
animation-fill-mode: forwards
}
.left-navigation .left-nav-header {
height: 65px;
align-items: center;
display: none;
justify-content: center
}
@media only screen and (max-width: 700px) {
.left-navigation .left-nav-header {
display:flex
}
}
.left-navigation .left-nav-header .logo {
display: inline-flex;
margin: 0
}
.left-navigation .left-nav-header .logo svg {
display: inline-block
}
.left-navigation .left-nav-header .logo img {
position: relative;
height: 33px
}
.left-navigation .left-nav-header .logo img:first-child {
z-index: 2
}
.left-navigation .left-nav-header .logo img:last-child {
left: -14px
}
.left-navigation .top-section,.left-navigation .bottom-section {
display: flex;
flex-direction: column;
gap: 5px
}
.left-navigation .top-section {
margin-top: 80px
}
@media only screen and (max-width: 700px) {
.left-navigation .top-section {
margin-top:15px
}
}
.left-navigation .bottom-section {
margin-bottom: 17px
}
@media only screen and (max-width: 700px) {
.left-navigation .bottom-section {
margin-top:auto
}
}
.left-navigation .left-menu-item {
position: relative;
padding: 12px 0;
display: flex;
align-items: center;
gap: 11px;
color: #a9a9ca;
font-weight: 500;
font-size: 14px;
line-height: 160%
}
.left-navigation .left-menu-item svg {
width: 20px;
height: 20px
}
.left-navigation .left-menu-item.nav-rewards span {
color: #ffc800
}
.left-navigation .left-menu-item.nav-rewards svg:last-child {
position: absolute;
left: 103px;
top: 12px;
width: 12px;
height: 5px
}
.left-navigation .left-menu-item.nav-referral {
position: relative;
background: linear-gradient(90deg,#396afc 0,#2948ff 100%);
border-radius: 7px;
width: 187px;
height: 50px;
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 21px
}
.left-navigation .left-menu-item.nav-referral:hover {
transform: scale(1.02)
}
.left-navigation .left-menu-item.nav-referral:hover::before {
opacity: .3;
z-index: -1
}
.left-navigation .left-menu-item.nav-referral::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("/public/img/buttons/shiningBg.png");
background-size: cover;
opacity: .2;
border-radius: 7px;
z-index: 0;
overflow: hidden
}
.left-navigation .left-menu-item.nav-referral svg {
position: relative
}
.left-navigation .left-menu-item.nav-referral .btn-text {
position: relative;
margin-left: 10px
}
.left-navigation .left-menu-item.nav-referral .btn-text span {
display: block
}
.left-navigation .left-menu-item.nav-referral .btn-text span:first-child {
font-weight: 700;
font-size: 14px;
color: #fff
}
.left-navigation .left-menu-item.nav-referral .btn-text span:last-child {
font-weight: 700;
font-size: 10px;
color: #fff
}
.left-navigation .left-menu-item.nav-easter {
flex-shrink: 0;
width: 180px;
min-width: 180px;
background-size: contain
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.left-navigation .left-menu-item.nav-logout {
bottom:20px
}
}
.left-navigation .free-case-open-btn {
margin-left: 0
}
.site-footer .footer-container {
background-color: #1d1e30;
padding: 64px;
display: flex;
flex-direction: column;
align-items: center
}
@media only screen and (max-width: 700px) {
.site-footer .footer-container {
/*padding:24px 24px 0 24px*/
}
}
.site-footer .footer-container-content {
width: 100%;
max-width: 1200px
}
.site-footer .footer-container-content-left {
z-index: 1
}
.site-footer .footer-container-content-left,.site-footer .footer-container-content-right {
display: flex;
flex: 1;
gap: 80px;
position: relative
}
@media only screen and (max-width: 700px) {
.site-footer .footer-container-content-left,.site-footer .footer-container-content-right {
gap:0
}
}
@media only screen and (max-width: 700px) {
.site-footer .footer-container-content-left {
flex-direction:column;
align-items: center
}
.site-footer .footer-container-content-left .languageSelector {
display: flex;
align-items: center
}
.site-footer .footer-container-content-left .languageSelector a {
top: 0
}
.site-footer .footer-container-content-left .languageSelector .language-dropdown-label {
margin-right: 20px
}
}
.site-footer .footer-container-top .footer-container-content {
display: flex
}
@media only screen and (max-width: 700px) {
.site-footer .footer-container-top .footer-container-content {
flex-direction:column
}
}
.site-footer .footer-container-socials {
padding: 24px 64px
}
@media only screen and (max-width: 700px) {
.site-footer .footer-container-socials {
padding:24px
}
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.site-footer .footer-container-socials {
padding:24px 24px 98px 24px
}
}
.site-footer .footer-container-socials .footer-container-content {
display: flex;
justify-content: space-between
}
@media only screen and (max-width: 700px) {
.site-footer .footer-container-socials .footer-container-content {
flex-direction:column
}
}
.site-footer .footer-container-socials-left-content {
display: flex;
gap: 16px
}
@media only screen and (max-width: 700px) {
.site-footer .footer-container-socials-left-content {
justify-content:center
}
}
.site-footer .footer-container-socials-right-content {
display: none;
gap: 32px
}
.site-footer .footer-container-trustpilot-mobile {
display: none
}
@media only screen and (max-width: 700px) {
.site-footer .footer-container-trustpilot-mobile {
display:block;
padding: 24px 24px 98px 24px
}
}
.site-footer .footer-logo {
display: flex;
align-items: center;
height: var(--footer-logo-height)
}
.site-footer .footer-logo svg:first-child {
margin-right: 5px
}
.site-footer .footer-trustpilot {
margin-top: 28px
}
.site-footer .footer-trustpilot-top {
margin-top: -140px;
margin-left: -16px;
z-index: 1
}
@media only screen and (max-width: 700px) {
.site-footer .footer-trustpilot {
margin-top:0
}
.site-footer .footer-trustpilot-top {
display: none !important
}
}
.site-footer * {
font-family: Poppins,sans-serif
}
.site-footer .footer-right-content,.site-footer .footer-left-content {
flex: 2
}
.site-footer .footer-left-content .languageSelector {
margin-top: 33px
}
@media only screen and (max-width: 700px) {
.site-footer .footer-right-content {
margin-top:24px;
display: none
}
}
@media only screen and (max-width: 700px) {
.site-footer .footer-left-content {
display:flex;
flex-direction: column;
align-items: center
}
.site-footer .footer-left-content .languageSelector {
display: none
}
}
.site-footer .footer-middle-content {
display: flex;
flex: 4
}
.site-footer .footer-section-title,.site-footer .language-dropdown-label {
font-weight: 500;
font-size: 18px;
line-height: 140%;
letter-spacing: .01em;
color: #ccd;
padding: 0
}
@media only screen and (max-width: 700px) {
.site-footer .footer-section {
margin-top:24px
}
}
.site-footer .footer-section-title {
margin: 0 0 16px 0;
height: var(--footer-logo-height);
display: flex;
align-items: center
}
@media only screen and (max-width: 700px) {
.site-footer .footer-section-title {
margin:0 0 12px 0
}
}
.site-footer .footer-section-link {
display: block;
font-weight: 500;
font-size: 14px;
line-height: 160%;
color: #a9a9ca;
cursor: pointer
}
.site-footer .footer-section-link:not(:last-child) {
margin-bottom: 12px
}
@media only screen and (max-width: 700px) {
.site-footer .footer-section-link:not(:last-child) {
margin-bottom:8px
}
}
.site-footer .footer-section-language {
order: 1
}
@media only screen and (max-width: 700px) {
.site-footer .footer-section-language {
order:3;
display: flex;
flex-direction: column;
align-items: center
}
}
.site-footer .footer-section-about {
order: 2
}
@media only screen and (max-width: 700px) {
.site-footer .footer-section-about {
display:none
}
}
.site-footer .footer-section-support {
order: 3
}
@media only screen and (max-width: 700px) {
.site-footer .footer-section-support {
display:none
}
}
@media only screen and (max-width: 700px) {
.site-footer .footer-section-support {
order:1
}
}
.site-footer .selectedLanguage {
background: #242537;
border-radius: 20px;
padding: 10px 12px
}
.site-footer .selectedLanguage .languageText {
font-weight: 300;
font-size: 14px;
line-height: 16px;
color: #a9a9ca;
height: unset
}
.site-footer .selectedLanguage .material-icons.chevron {
display: none
}
.site-footer .footer-all-rights,.site-footer .footer-copyright {
font-weight: 500;
font-size: 12px;
line-height: 165%;
color: #a9a9ca;
margin-bottom: 0
}
.site-footer .footer-copyright {
color: rgba(169,169,202,0.6);
margin: 0
}
.site-footer .footer-separator {
height: 1px;
background-color: #2a2b43
}
.site-footer .footer-separator.footer-separator-mobile-only {
display: none
}
@media only screen and (max-width: 700px) {
.site-footer .footer-separator.footer-separator-mobile-only {
display:block
}
}
.site-footer .footer-social-link {
width: 40px;
height: 40px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
background: #242537;
color: #7d7d9e
}
.site-footer .footer-social-link:hover {
color: white
}
.site-footer .footer-social-link-twitter:hover {
background: #1d9bf0
}
.site-footer .footer-social-link-facebook:hover {
background: #4267b2
}
.site-footer .footer-social-link-instagram:hover {
background: radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)
}
.site-footer .footer-social-link-reddit:hover {
background: #ff5700
}
.site-footer .footer-social-link-discord:hover {
background: #7289da
}
.site-footer .footer-social-link-trustpilot:hover {
background: #007f4e
}
.site-footer .footer-stats-item {
display: flex;
align-items: center
}
@media only screen and (max-width: 700px) {
.site-footer .footer-stats-item {
flex-direction:column;
flex: 1;
margin-top: 24px
}
}
.site-footer .footer-stats-item-info {
margin-left: 12px
}
.site-footer .footer-stats-item-text {
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #7d7d9e;
margin: 0
}
.site-footer .footer-stats-item-value {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #fff;
margin: 0
}
.site-footer .footer-section-language-mobile {
display: none
}
@media only screen and (max-width: 700px) {
.site-footer .footer-section-language-mobile {
display:block;
margin-top: 24px
}
.site-footer .footer-section-language-mobile .languageSelectorDropdownContainer {
margin-top: 15px
}
.site-footer .footer-section-language-mobile .languageSelectorDropdownContainer .dropdown-trigger {
top: 0
}
}
.languageSelectorDropdownContainer {
font-family: Poppins;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 23px;
color: #9397dc;
display: inline-block;
vertical-align: middle
}
.languageSelectorDropdownContainer .dropdown-trigger {
position: relative;
top: 15px;
cursor: pointer
}
.languageSelectorDropdownContainer .chevron {
color: #9397dc;
opacity: .4;
transform: rotate(90deg)
}
.languageSelectorDropdownContainer .dropdown-menu {
margin-bottom: 15px
}
.languageSelectorDropdownContainer .languageSelectorDropdown {
background: #333853;
border-radius: 3px
}
.languageSelectorDropdownContainer .languageSelectorDropdown .menuItems {
width: 207px;
background: #333853;
max-height: 215px;
height: auto;
padding: 5px 12px;
overflow-y: auto;
overflow-x: hidden
}
@media only screen and (max-width: 700px) {
.languageSelectorDropdownContainer .languageSelectorDropdown .menuItems {
width:170px;
max-height: 150px;
height: auto
}
}
.languageSelectorDropdownContainer .languageSelectorDropdown .menuItems>li {
display: flex;
align-items: center;
text-align: left;
vertical-align: middle;
padding: 8px
}
.languageSelectorDropdownContainer .languageSelectorDropdown .menuItems>li .languageText {
color: #9397dc;
padding-left: 5px
}
.languageSelectorDropdownContainer .languageSelectorDropdown .menuItems>li:hover,.languageSelectorDropdownContainer .languageSelectorDropdown .menuItems>li.active {
background: #404769;
border-radius: 5px;
cursor: pointer
}
.languageSelectorDropdownContainer .languageSelectorDropdown .menuItems>li.active {
pointer-events: none;
opacity: .9
}
.languageSelectorDropdownContainer .languageSelectorDropdown:before {
position: absolute;
border-radius: 2px;
right: 57%;
bottom: -5px;
width: 10px;
height: 10px;
content: "";
display: block;
background-color: #333853;
transform: rotate(134deg)
}
@media only screen and (max-width: 700px) {
.languageSelectorDropdownContainer .languageSelectorDropdown:before {
right:82px
}
}
.languageSelectorDropdownContainer ::-webkit-scrollbar {
width: 5px;
background: #01d676;
box-shadow: 0 0 16px rgba(68,95,83,0.2),inset 0 1px 0 #00ffc2;
border-radius: 0 2px 2px 0
}
.languageSelectorDropdownContainer ::-webkit-scrollbar-track {
background: #414261;
margin-right: 10px;
width: 2px
}
.languageSelectorDropdownContainer ::-webkit-scrollbar-thumb {
background: #01d676;
background-repeat: no-repeat;
background-size: 5px;
background-position: center
}
.languageSelectorDropdownContainer ::-webkit-scrollbar-thumb:hover {
background: #01d676
}
.languageSelectorDropdownContainer .selectedLanguage {
display: flex;
align-items: center
}
.languageSelectorDropdownContainer .languageImage {
width: 20px;
height: 20px;
margin-right: 5px;
border-radius: 40px
}
.languageSelectorDropdownContainer .languageText {
color: #9397dc;
font-size: 15px;
font-weight: 500;
line-height: 25px;
height: 24px
}
.languageSelectorDropdownContainer .languageDropdownLabel {
font-weight: 600;
font-size: 18px;
color: #545683;
margin-bottom: 3px
}
.giveaway-btn {
position: relative;
width: 190px;
height: 50px;
background: url("/public/img/giveaway/btn-bg.png");
border-radius: 4px;
min-width: 190px
}
.giveaway-btn.left-menu-item {
flex-shrink: 0;
width: 180px;
height: 47px;
min-width: 180px;
background-size: contain;
background-repeat: no-repeat
}
.giveaway-page {
position: relative;
padding: 45px 15px 235px 15px;
background: url("/public/img/giveaway/bg.png");
background-size: cover;
background-repeat: no-repeat;
z-index: 0
}
@media only screen and (max-width: 700px) {
.giveaway-page {
padding:25px 15px 215px 15px
}
}
.giveaway-page::before {
content: "";
position: absolute;
top: -11px;
left: 0;
width: 100%;
height: 100%;
background: url("/public/img/giveaway/top-coins.png");
background-size: contain;
background-position-y: top;
background-repeat: no-repeat;
z-index: 1
}
.giveaway-page::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("/public/img/giveaway/bottom-coins2.png");
background-size: contain;
background-position-y: bottom;
background-repeat: no-repeat;
z-index: 0
}
.giveaway-page .giveaway-heading {
margin: 0 auto;
width: 40%
}
@media only screen and (max-width: 700px) {
.giveaway-page .giveaway-heading {
width:90%
}
}
.giveaway-page .giveaway-heading img {
width: 100%
}
.generic-infobox {
padding: 4px 10px;
display: inline-flex;
align-items: center;
gap: 20px;
border-radius: 5px
}
.generic-infobox--reversed {
flex-direction: row-reverse
}
.generic-infobox[data-theme=warning] {
background-color: #393740;
fill: rgba(250,196,1,0.0901960784)
}
.generic-infobox[data-theme=error] {
background-color: #f44336;
fill: rgba(250,196,1,0.0901960784)
}
.generic-infobox[data-theme=info] {
background-color: #58ace6;
fill: rgba(250,196,1,0.0901960784)
}
.generic-infobox[data-theme=profilemuted] {
background-color: #d63964;
fill: white
}
.generic-infobox[data-theme=muted] {
color: #a8aac9
}
a {
color: inherit;
text-decoration: inherit;
}
.theme_turquoise .cc_div a {
color: var(--cc-btn-primary-bg)
}
.theme_turquoise #cc_div #s-hdr {
border-bottom: 0
}
.theme_turquoise .cc_div #c-txt {
color: #b0b8c6 !important
}
.theme_turquoise .cc_div [type=checkbox]:checked:disabled+span:before {
border-right: unset;
border-bottom: unset
}
.theme_turquoise .cc_div .cc_div .b-tg .c-tgl ~ .c-tg:after {
transform: unset !important
}
.theme_turquoise .cc_div [type=checkbox]:not(.filled-in)+span:not(.lever):after {
border: 0;
border-radius: 100%;
position: relative;
margin-top: 0;
top: .125em;
left: .125em;
width: 1.25em;
height: 1.25em;
transition: transform .25s ease
}
.theme_turquoise .cc_div .cc_div .b-tg .c-tgl:checked ~ .c-tg:after {
transform: translateX(1.9em)
}
.theme_turquoise .cc_div [type=checkbox]+span:not(.lever):before {
content: none
}
.theme_turquoise .cc_div [type=checkbox]+span:not(.lever) {
padding-left: 0;
display: block;
line-height: 1.2;
font-size: 1em
}
.stakeWithdrawPage {
display: flex;
align-items: flex-start;
flex-wrap: wrap
}
@media only screen and (max-width: 700px) {
.stakeWithdrawPage {
flex-direction:column
}
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.stakeWithdrawPage {
flex-direction:column
}
}
.stakeWithdrawPage .stakeContainer {
background: radial-gradient(216.35% 285.15% at 22.97% -70.31%,rgba(142,148,193,0.25) 0,rgba(142,148,193,0) 39.27%),#1f1f33;
padding: 36px;
margin: 0 auto;
flex: 1;
border: 1.2px solid #8186b1;
border-image: linear-gradient(0,rgba(142,148,193,0),#8e94c1) 1;
border-radius: 3px
}
@media only screen and (min-width: 1400px) {
.stakeWithdrawPage .stakeContainer {
max-width:1135px
}
}
@media only screen and (max-width: 700px) {
.stakeWithdrawPage .stakeContainer {
padding:36px 5px
}
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.stakeWithdrawPage .stakeContainer {
width:680px
}
}
.stakeWithdrawPage .stakeContainer .stakeBonus {
display: flex;
width: 83px;
height: 24.46px;
background: rgba(1,255,149,0.15);
justify-content: center;
align-items: center;
font-family: "Poppins";
font-weight: 600;
font-size: 11px;
line-height: 14px;
color: #01ff97;
border-radius: 5.55828px
}
.stakeWithdrawPage .stakeContainer .stakeBonusCreateAct {
width: 93px
}
.stakeWithdrawPage .stakeContainer .questionMark {
width: 24.46px;
height: 24.46px;
border-radius: 5.55828px
}
.stakeWithdrawPage .stakeContainer .tooltipInfo {
position: relative;
top: 3px
}
.stakeWithdrawPage .stakeContainer .createStakeAct {
width: 130px;
height: 28.25px;
background: #43455e;
border-radius: 2.825px;
display: flex;
align-items: center
}
.stakeWithdrawPage .stakeContainer .createStakeAct>span {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-size: 10px;
align-items: center;
text-align: center;
color: #fff
}
.stakeWithdrawPage .stakeContainer .sectionSeparator {
height: 0;
margin-top: 30px;
border: 0;
border-top: 1.1116px solid #8186b1
}
@media only screen and (max-width: 700px) {
.stakeWithdrawPage .stakeContainer .sectionSeparator {
margin-right:12px;
margin-left: 12px
}
}
.stakeWithdrawPage .stakeContainer .stakeSectionHeading {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-size: 10px;
line-height: 14px;
text-transform: uppercase;
color: #6a6a9c;
margin-top: 20px
}
@media only screen and (max-width: 700px) {
.stakeWithdrawPage .stakeContainer .stakeSectionHeading {
padding-left:12px
}
}
.stakeWithdrawPage .stakeContainer .stakeCashoutItems {
display: flex;
flex-wrap: wrap;
margin-right: -10px
}
@media only screen and (max-width: 700px) {
.stakeWithdrawPage .stakeContainer .stakeCashoutItems {
justify-content:flex-start;
padding-left: 8px
}
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.stakeWithdrawPage .stakeContainer .stakeCashoutItems {
justify-content:center
}
}
.stakeWithdrawPage .stakeContainer .stakeCashoutItem {
position: relative;
width: 22.2222222222%;
height: 139.26px;
background: radial-gradient(114.22% 114.22% at 50% -2.94%,#3e515e 0,#202c34 100%);
border-radius: 9.65146px;
margin: 0 15px 15px 0
}
@media only screen and (max-width: 700px) {
.stakeWithdrawPage .stakeContainer .stakeCashoutItem {
width:45%
}
}
.stakeWithdrawPage .stakeContainer .stakeCashoutItem .cashoutLogo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
@media only screen and (max-width: 700px) {
.stakeWithdrawPage .stakeContainer .stakeCashoutItem .cashoutLogo {
height:50px
}
}
.stakeWithdrawPage .stakeContainer .stakeCashoutItem .bonusInfo {
position: absolute;
right: 0;
bottom: 0;
margin: 9px
}
.stakeWithdrawPage .stakeContainer .stakeCashoutItem .currencyName {
position: absolute;
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-size: 15.0889px;
color: #fff;
right: 0;
margin: 9px
}
.stakeWithdrawPage .stakeComingSoon {
position: absolute;
font-size: 35px;
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-size: 30.0889px;
top: 43px;
left: 14px;
color: #9effd0
}
.stakeWithdrawInfoBox {
max-width: 500px
}
.withdrawTopLogo--stake>img {
width: 95px;
height: 48px;
position: relative;
left: 30px;
top: 7px
}
.withdrawTopLogo--stake {
margin-top: 37px
}
@media only screen and (max-width: 700px) {
.withdrawTopLogo--stake {
margin-top:14%
}
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.withdrawTopLogo--stake {
margin-top:50px
}
}
.withdrawTopLogo--stake>img {
left: 0
}
.withdrawTopLogo--stake .stakeBonus {
display: flex;
width: 73px;
height: 22px;
background: rgba(1,255,149,0.15);
justify-content: center;
align-items: center;
font-family: "Poppins";
font-weight: 600;
font-size: 11px;
line-height: 14px;
color: #01ff97;
border-radius: 5.55828px
}
.withdrawTopLogo--stake .questionMark {
width: 22px;
height: 22px
}
.withdrawTopLogo--stake .tooltipInfo {
position: relative;
top: 3px
}
.stakeUsernameSection {
margin-top: 30px;
background: #24253d;
border: 1px solid rgba(142,148,193,0.25);
box-shadow: 0 4px 9px rgba(0,0,0,0.07);
border-radius: 3px;
padding-top: 10px;
padding-bottom: 20px
}
.stakeUsernameSection .withdrawAddressSectionRow {
margin: 0
}
.stakeUsernameSection .stakeSectionInfo {
position: relative;
padding: 10px 0 6px 0;
left: 15px
}
.stakeUsernameSection .stakeSectionInfo .stakeHighlightedText {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 14px;
color: #00ff79
}
.stakeUsernameSection .stakeSectionInfo .stakeSubText {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 14px;
color: #9193c3
}
.stakeUsernameSection .stakeSectionInfo .stakeSubText a {
color: #00ff79;
font-weight: 500
}
.createStakeAccount {
flex: 1;
margin-right: 0 !important
}
@media only screen and (max-width: 700px) {
.createStakeAccount {
width:100%
}
}
button.createStakeAccount {
margin: 0;
padding: 0 20px;
height: 41px;
background-color: #161726 !important;
box-shadow: 0 4px 5px rgba(0,0,0,0.05) !important;
border-radius: 5px !important;
box-sizing: border-box !important;
font-size: 11px;
color: #597689;
font-family: "Poppins";
text-align: center
}
#stake-withdraw-page {
background: #1f1f33;
border-radius: 3px
}
#stake-withdraw-page .withdrawContainer {
box-sizing: border-box;
border-radius: 3px;
background: radial-gradient(216.35% 285.15% at 22.97% -70.31%,rgba(142,148,193,0.25) 0,rgba(142,148,193,0) 39.27%),#1f1f33;
border: 1.2px solid #8186b1;
border-image: linear-gradient(0,rgba(142,148,193,0),#8e94c1) 1
}
#stake-withdraw-page .withdrawTopRow .withdrawInfoBox {
margin-bottom: 0
}
#stake-withdraw-page .withdrawTopRow .withdrawTopRowRight {
margin-left: 30px;
flex: unset
}
#stake-withdraw-page .withdrawTopRow .createStakeAccount {
min-width: 170px
}
@media screen and (max-width: 700px) {
#stake-withdraw-page .withdrawTopRow .withdrawTopRowRight {
flex:unset;
margin-left: 0
}
#stake-withdraw-page .withdrawTopRow .withdrawInfoBox {
margin: 20px 0
}
}
#stake-withdraw-page .withdrawSeperatorCircle {
background: #1f1f33
}
#stake-withdraw-page .withdrawCheckoutPrice {
display: flex;
align-items: center;
gap: 5px
}
#stake-withdraw-page .withdrawCheckoutPrice img {
top: 0
}
#stake-withdraw-page .stakeCheckOptions {
transform: translate(-36px,-80px)
}
@media only screen and (max-width: 700px) {
#stake-withdraw-page .stakeCheckOptions {
transform:translate(-2px,-75px)
}
}
#stake-withdraw-page .stakeCheckOptions a {
background: #2c2d47;
border-radius: 4px;
width: 138px;
padding: 8px 10px 8px 10px
}
#stake-withdraw-page .stakeCheckOptions a span {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-size: 11px;
color: BFBBBB;
color: #bfbbbb
}
.stakeTopRow {
display: flex;
justify-content: flex-start
}
@media only screen and (max-width: 700px) {
.stakeTopRow {
flex-direction:column;
padding: 0 10px 0 10px
}
}
.stakeTopRow .stakeLeftSection {
display: flex;
padding-right: 38px;
gap: 25px
}
@media only screen and (max-width: 700px) {
.stakeTopRow .stakeLeftSection {
display:flex
}
}
.stakeTopRow .topRowOptions {
display: flex;
justify-content: space-between
}
.stakeTopRow .stakeLogo {
width: 95px;
height: 48px;
margin-top: 12px
}
.stakeTopRow .withdrawInfoBox {
display: flex;
max-height: fit-content;
width: 612px;
height: 61px;
padding: 5px 18px;
margin-bottom: 10px;
border-radius: 5px;
background: rgba(22,23,38,0.7);
color: rgba(0,255,121,0.8);
font-size: 11px;
align-items: center;
box-shadow: 0 4px 5px rgba(0,0,0,0.05)
}
.stakeTopRow .withdrawInfoBox+.withdrawInfoBox {
margin-top: 8px
}
.stakeTopRow .withdrawInfoBox.warn {
color: #ffc800
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.stakeTopRow .withdrawInfoBox {
height:auto
}
}
@media only screen and (max-width: 700px) {
.stakeTopRow .withdrawInfoBox {
margin-top:20px;
width: 100%;
max-height: fit-content;
padding: 15px 10px;
font-size: 12px;
height: auto
}
}
.stakeTopRow .withdrawInfoBox .withdrawInfoBoxIcon {
width: 13px;
height: 13px;
margin-right: 10px
}
.faucetUsernameSection {
margin-top: 30px;
background: #24253d;
border: 1px solid rgba(142,148,193,0.25);
box-shadow: 0 4px 9px rgba(0,0,0,0.07);
border-radius: 3px;
padding-top: 25px;
padding-bottom: 20px
}
.faucetUsernameSection .withdrawAddressSectionRow {
margin: 0
}
.faucetUsernameSection .faucetSectionInfo {
position: relative;
padding: 6px 0 15px 0;
left: 15px
}
.faucetUsernameSection .faucetSectionInfo .faucetHighlightedText {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 14px;
color: #00ff79
}
.faucetUsernameSection .faucetSectionInfo .faucetSubText {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-size: 11px;
line-height: 14px;
color: #01d676
}
.faucetTopRow .withdrawInfoBox {
margin-bottom: 0
}
.faucetTopRow .withdrawInfoBox span {
color: #01d676
}
.faucetTopRow .withdrawInfoBox span a {
color: #01d676;
text-decoration: underline !important
}
#faucetWithdrawPage .withdrawCheckoutPrice {
display: flex;
align-items: center;
gap: 5px
}
#faucetWithdrawPage .withdrawCheckoutPrice img {
top: 0
}
#faucetWithdrawPage .withdrawCheckoutPriceIcon {
height: 16px;
position: relative;
top: 5px
}
#faucetWithdrawPage .cryptoCheckoutTotal {
color: #fdc045
}
.filter-dropdown {
background-color: #35354e;
box-shadow: 0 4px 115px rgba(0,0,0,0.02);
padding: 6px !important;
max-height: 300px;
height: auto;
overflow-y: auto
}
.filter-dropdown>li {
min-height: auto;
display: flex;
align-items: center;
text-align: left
}
.filter-dropdown>li a,.filter-dropdown>li span {
color: hsl(240,14%,50%) !important;
font-weight: 500;
font-size: 13px;
padding: 0;
display: inline-block;
width: 100%;
height: 38px;
line-height: 38px;
padding: 0 12px;
cursor: pointer
}
.filter-dropdown>li:hover,.filter-dropdown>i.active {
background: #2b2b42;
box-shadow: 0 4px 115px rgba(0,0,0,0.02);
border-radius: 4px
}
.filter-dropdown>li:hover a,.filter-dropdown>li:hover span,.filter-dropdown>i.active a,.filter-dropdown>i.active span {
color: #9292af !important;
cursor: pointer
}
.filter-dropdown-selected-item {
color: #6e6e91;
cursor: pointer
}
.countryPhoneCodesDropdownContainer {
font-family: Poppins;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 23px;
color: #9397dc;
display: inline-block;
vertical-align: middle;
position: fixed
}
.countryPhoneCodesDropdownContainer .dropdown-trigger {
position: relative;
top: 15px;
cursor: pointer
}
.countryPhoneCodesDropdownContainer .dropdown-menu {
margin-bottom: 15px
}
.countryPhoneCodesDropdownContainer .countryPhoneSelectorDropdown {
background: #1d1d2e;
border-radius: 3px;
position: fixed
}
.countryPhoneCodesDropdownContainer .countryPhoneSelectorDropdown .menuItems {
width: 380px;
background: #1d1d2e;
max-height: 215px;
height: auto;
padding: 5px 12px;
overflow-y: auto;
overflow-x: hidden
}
@media only screen and (max-width: 700px) {
.countryPhoneCodesDropdownContainer .countryPhoneSelectorDropdown .menuItems {
width:250px;
max-height: 150px;
height: auto
}
}
.countryPhoneCodesDropdownContainer .countryPhoneSelectorDropdown .menuItems>li {
display: flex;
align-items: center;
text-align: left;
vertical-align: middle;
padding: 8px
}
@media only screen and (max-width: 700px) {
.countryPhoneCodesDropdownContainer .countryPhoneSelectorDropdown .menuItems>li {
padding:4px
}
}
.countryPhoneCodesDropdownContainer .countryPhoneSelectorDropdown .menuItems>li .countryCode {
color: #9397dc;
padding-left: 5px
}
.countryPhoneCodesDropdownContainer .countryPhoneSelectorDropdown .menuItems>li:hover,.countryPhoneCodesDropdownContainer .countryPhoneSelectorDropdown .menuItems>li.active {
background: #404769;
border-radius: 5px;
cursor: pointer
}
.countryPhoneCodesDropdownContainer .countryPhoneSelectorDropdown .menuItems>li.active {
pointer-events: none;
opacity: .9
}
.countryPhoneCodesDropdownContainer ::-webkit-scrollbar {
width: 5px;
background: #01d676;
box-shadow: 0 0 16px rgba(68,95,83,0.2),inset 0 1px 0 #00ffc2;
border-radius: 0 2px 2px 0
}
.countryPhoneCodesDropdownContainer ::-webkit-scrollbar-track {
background: #414261;
margin-right: 10px;
width: 2px
}
.countryPhoneCodesDropdownContainer ::-webkit-scrollbar-thumb {
background: #1d1d2e;
background-repeat: no-repeat;
background-size: 5px;
background-position: center
}
.countryPhoneCodesDropdownContainer ::-webkit-scrollbar-thumb:hover {
background: #1d1d2e
}
.countryPhoneCodesDropdownContainer .selectedCountry {
display: flex;
justify-content: center;
align-items: center;
background: rgba(14,15,23,0.5882352941);
top: 0;
width: 79px;
text-align: center;
align-items: center;
height: 3.2rem
}
.countryPhoneCodesDropdownContainer .countryCode {
color: #9397dc;
font-size: 15px;
font-weight: 500;
line-height: 25px;
height: 24px
}
.countryPhoneCodesDropdownContainer .countryCode span {
color: white
}
@media only screen and (max-width: 700px) {
.countryPhoneCodesDropdownContainer .countryCode {
font-size:10px
}
}
.countryPhoneCodesDropdownContainer #selectedCountryCode {
margin-left: 4px !important;
color: white !important
}
.userOnboarding {
background: #141523;
font-family: "Poppins";
font-style: normal;
padding: 30px 0 0 38px
}
@media only screen and (max-width: 700px) {
.userOnboarding {
padding:30px 0 0 0;
display: flex;
justify-content: center
}
}
.userOnboarding .onboardingItem {
box-sizing: border-box;
position: relative;
width: 700px;
height: 220px;
background: rgba(34,35,57,0.9);
border: 3px solid #2f3043;
backdrop-filter: blur(84px);
border-radius: 10px
}
@media only screen and (max-width: 700px) {
.userOnboarding .onboardingItem {
width:90%;
max-height: 180px
}
}
.userOnboarding .onboardingItem .closeItem {
position: absolute;
right: 0;
background-image: url(/public/img/useronboarding/close.svg);
background-repeat: no-repeat;
width: 26px;
height: 26px;
top: 13px;
padding: 0 0 0 35px;
opacity: .7;
cursor: pointer
}
.userOnboarding .onboardingItem .onboardingContent {
width: 100%;
padding-top: 15px
}
.userOnboarding .onboardingItem .onboardingContent .onboardingRightCol {
width: 30%;
float: left
}
.userOnboarding .onboardingItem .onboardingContent .onboardingLeftCol {
width: 70%;
float: right;
padding: 4px 0 0 10px
}
.userOnboarding .onboardingItem .progressBar {
position: relative;
box-sizing: content-box;
width: 98%;
height: 4px;
background: #3e3e5a;
border-radius: 20px;
top: -9px;
margin: 1% 1% 0 1%
}
@media only screen and (max-width: 700px) {
.userOnboarding .onboardingItem .progressBar {
height:2px
}
}
.userOnboarding .onboardingItem .progressBar .progress {
background: #01d676;
height: 4px
}
@media only screen and (max-width: 700px) {
.userOnboarding .onboardingItem .progressBar .progress {
height:2px
}
}
.userOnboarding .itemImages .desktop {
display: block
}
.userOnboarding .itemImages .phone {
display: none
}
@media only screen and (max-width: 700px) {
.userOnboarding .itemImages .desktop {
display:none
}
.userOnboarding .itemImages .phone {
display: block
}
}
.userOnboarding .coinImg {
position: relative;
left: 5%;
height: 160px
}
@media only screen and (max-width: 700px) {
.userOnboarding .coinImg {
left:23px
}
}
@media only screen and (max-width: 700px) {
.userOnboarding .coinImg img {
position:relative;
height: 87px;
left: -31px
}
}
.userOnboarding .coinImg::before {
content: "";
position: absolute;
background-image: url(/public/img/useronboarding/coin-background.png);
left: -37px;
top: 52px;
width: 100%;
height: 100%;
mix-blend-mode: normal;
background-repeat: no-repeat
}
@media only screen and (max-width: 700px) {
.userOnboarding .coinImg::before {
background-image:url(/public/img/useronboarding/phone/coin-background.png);
left: -24px;
top: 15px
}
}
.userOnboarding .phoneImg {
position: relative;
left: 4%;
height: 180px;
top: 0
}
@media only screen and (max-width: 700px) {
.userOnboarding .phoneImg {
left:6%;
height: 140px
}
}
.userOnboarding .featuredoffersImg {
position: relative;
top: 30px
}
@media only screen and (max-width: 700px) {
.userOnboarding .featuredoffersImg {
top:8px;
height: 50px
}
}
.userOnboarding .coinBagImg {
position: relative;
height: 180px;
top: 8px
}
@media only screen and (max-width: 700px) {
.userOnboarding .coinBagImg {
height:100px
}
}
.userOnboarding .coinEarnedImg {
position: absolute;
top: 22%;
left: 17%;
height: 100px;
width: 60px
}
@media only screen and (max-width: 700px) {
.userOnboarding .coinEarnedImg {
top:43px;
height: 30px;
left: 14%
}
}
.userOnboarding .mainHeading {
padding-bottom: 5px;
font-weight: 700;
font-size: 25px;
line-height: 30px;
color: #01d676
}
@media only screen and (max-width: 700px) {
.userOnboarding .mainHeading {
font-size:14px;
line-height: 21px
}
}
.userOnboarding .subHeading {
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: #afb1d1;
padding-bottom: 10px
}
@media only screen and (max-width: 700px) {
.userOnboarding .subHeading {
font-size:10px;
line-height: 15px
}
}
.userOnboarding .stepGuide {
padding: 24px 0 0 0
}
@media only screen and (max-width: 700px) {
.userOnboarding .stepGuide {
width:180px;
line-height: 15px;
padding: 0
}
}
.userOnboarding .userActions {
display: flex;
align-items: center;
gap: 10px;
padding-top: 12px
}
.userOnboarding .btn1 {
height: 40px;
left: 0;
top: 0;
background: #01d676;
box-shadow: inset 0 1px 0 #00ffc2;
border-radius: 4px;
cursor: pointer;
padding: 0 5px 0 5px
}
@media only screen and (max-width: 700px) {
.userOnboarding .btn1 {
display:block;
width: 96%
}
}
.userOnboarding .btn1 .text {
font-weight: 600;
font-size: 12px;
line-height: 18px;
color: #171826
}
.userOnboarding .btn2 {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 11px 32px;
height: 40px;
left: 217px;
top: 0;
border: 1px solid #01d676;
border-radius: 4px;
cursor: pointer
}
.userOnboarding .btn2 .text {
font-weight: 600;
font-size: 12px;
line-height: 18px;
color: #01d676;
flex: none;
order: 0;
flex-grow: 0
}
.userOnboarding .green-highlght {
color: #01d676
}
.userOnboarding .nextAction {
position: absolute;
right: 0;
bottom: 0;
padding: 0 12px 15px 0
}
.userOnboarding .nextAction .skip {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 11px 32px;
border: 1px solid #01d676;
border-radius: 4px
}
.userOnboarding .nextAction .skip .text {
font-weight: 600;
font-size: 12px;
line-height: 18px;
color: #01d676;
flex: none;
order: 0;
flex-grow: 0
}
.userOnboarding .stepPhoneAction {
display: none
}
@media only screen and (max-width: 700px) {
.userOnboarding .stepPhoneAction {
padding:0 0 5px 0;
width: 100%;
display: flex;
justify-content: center
}
}
@media only screen and (max-width: 700px) {
.userOnboarding .stepDesktopAction {
display:none
}
}
@media only screen and (max-width: 700px) {
.userOnboarding .step1 .mainHeading {
width:175px;
padding-top: 6px
}
}
@media only screen and (max-width: 700px) {
.userOnboarding .step1 .subHeading {
width:140px
}
}
.userOnboarding .step2 .mainHeading {
width: 290px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step2 .mainHeading {
width:134px
}
}
.userOnboarding .step2 .subHeading {
width: 330px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step2 .subHeading {
width:200px
}
}
.userOnboarding .step3 .mainHeading {
width: 350px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step3 .mainHeading {
width:215px
}
}
.userOnboarding .step3 .subHeading {
width: 265px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step3 .subHeading {
width:190px
}
}
.userOnboarding .step4 .mainHeading {
width: 350px;
padding-bottom: 10px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step4 .mainHeading {
width:180px
}
}
.userOnboarding .step4 .subHeading {
width: 285px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step4 .subHeading {
width:175px
}
}
@media only screen and (max-width: 700px) {
.userOnboarding .step4 .stepGuide {
padding-left:5px
}
}
.userOnboarding .step5 .mainHeading {
width: 358px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step5 .mainHeading {
width:180px
}
}
.userOnboarding .step5 .subHeading {
width: 323px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step5 .subHeading {
width:190px
}
}
.userOnboarding .step5 .stepPhoneAction {
padding: 10px;
width: auto;
display: block
}
@media only screen and (max-width: 700px) {
.userOnboarding .step5 .stepPhoneAction {
padding:0 0 5px 0;
width: 69%
}
}
.userOnboarding .step5 .imgLeftBottom {
position: absolute;
bottom: 0
}
.userOnboarding .step6 {
background-image: url(/public/img/useronboarding/background-v.svg);
background-repeat: no-repeat;
background-blend-mode: screen;
opacity: 1
}
.userOnboarding .step6 .subHeading {
width: 323px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step6 .subHeading {
width:175px
}
}
.userOnboarding .step6 .stepPhoneAction {
display: block;
padding: 10px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step6 .stepPhoneAction {
padding:0 0 5px 0;
width: 100%;
display: flex;
justify-content: center
}
}
.userOnboarding .step6 .coinEarnedText {
font-weight: 600;
font-size: 60px;
line-height: 70px;
color: #01d676;
top: 36px;
position: relative;
left: 42px
}
@media only screen and (max-width: 700px) {
.userOnboarding .step6 .coinEarnedText {
font-size:30px;
top: -1px;
left: 25px
}
}
.userOnboarding .chooseOfferBox {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
padding: 30px 7px 7px;
gap: 6px;
width: 196px;
height: 118px;
top: 58px;
background: rgba(255,255,255,0.05);
border: 1px solid;
border-color: rgba(255,255,255,0.1);
border-radius: 7px
}
@media only screen and (max-width: 700px) {
.userOnboarding .chooseOfferBox {
width:100px;
height: 105px;
top: 32px;
border-radius: 5px;
padding: 30px 7px 3px
}
}
.userOnboarding .chooseOfferBox .offerTopImg {
position: absolute;
height: 46px;
left: 70px;
top: -24px
}
@media only screen and (max-width: 700px) {
.userOnboarding .chooseOfferBox .offerTopImg {
top:-24px;
left: 25px
}
}
.userOnboarding .chooseOfferBox .textBox {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px
}
@media only screen and (max-width: 700px) {
.userOnboarding .chooseOfferBox .textBox {
gap:10px
}
}
.userOnboarding .chooseOfferBox .textBox .greenBox {
display: flex;
justify-content: center;
align-items: center;
width: 37px;
height: 19px;
background: #01d676;
border-radius: 3px
}
@media only screen and (max-width: 700px) {
.userOnboarding .chooseOfferBox .textBox .greenBox {
width:25px;
height: 13px;
border-radius: 2px
}
}
.userOnboarding .chooseOfferBox .textBox .greenBox .text {
font-weight: 600;
font-size: 10px;
color: #171826;
padding-top: 2px
}
@media only screen and (max-width: 700px) {
.userOnboarding .chooseOfferBox .textBox .greenBox .text {
font-size:7px
}
}
.userOnboarding .chooseOfferBox .textBox .offerText {
font-weight: 700;
font-size: 9.00569px;
line-height: 122%;
letter-spacing: -0.03em;
color: #fff;
text-shadow: 0 .428843px 2.14421px rgba(0,0,0,0.15)
}
@media only screen and (max-width: 700px) {
.userOnboarding .chooseOfferBox .textBox .offerText {
font-size:6.195px;
text-shadow: 0 .295px 1.475px rgba(0,0,0,0.15)
}
}
.userOnboarding .chooseOfferBox .subText {
width: 180px;
height: 36px;
font-weight: 400;
font-size: 9px;
color: rgba(232,232,232,0.8);
padding-top: 1px
}
@media only screen and (max-width: 700px) {
.userOnboarding .chooseOfferBox .subText {
width:85px;
font-size: 6px
}
}
[data-onboarding-focused=true]#bottom-nav-cashout-link span,[data-onboarding-focused=true]#bottom-nav-cashout-link svg,[data-onboarding-focused=true]#bottom-nav-earn-link span,[data-onboarding-focused=true]#bottom-nav-earn-link svg {
fill: white;
color: white
}
[data-onboarding-focused=true]#withdraw-cash-methods,[data-onboarding-focused=true].user-balance {
pointer-events: none
}
#withdraw-cash-methods {
padding-bottom: 30px
}
.onboarding-root::before {
content: "";
position: fixed;
inset: 0;
background-color: rgba(0,0,0,0.7019607843);
z-index: 2100
}
@media only screen and (max-width: 700px) {
[data-page=cashout] .onboarding-instruction-container {
margin-right:20px
}
}
.id-verification-modal {
max-width: 584px;
padding: 26px 22px 23px 22px;
font-family: "Poppins"
}
.id-verification-modal .modal-header {
text-align: center;
font-weight: 700;
font-size: 30px;
color: #01d676;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px
}
.id-verification-modal .modal-header svg {
margin-right: 8px
}
.id-verification-modal .modal-body .verification-desc {
background: #2c2c44;
border-radius: 6px;
padding: 17px;
color: #adb2ea;
margin-bottom: 14px;
font-weight: 400;
font-size: 14px;
line-height: 21px
}
.id-verification-modal .modal-body .verification-desc div:not(:last-child):not(:first-child) {
margin-bottom: 20px
}
.id-verification-modal .modal-body .verification-btn {
background: #01d676;
border-radius: 4px;
font-weight: 700;
font-size: 16px;
text-align: center;
color: #fff;
padding: 11px 0;
width: 100%
}
.id-verification-modal .modal-body .verification-btn:hover {
background-color: #01d676;
text-transform: none
}
.verification-chat-message div {
margin-bottom: 13px
}
.open-verification-modal-btn {
display: inline-flex;
justify-content: center;
align-items: center;
white-space: nowrap
}
.open-verification-modal-btn .id-verification-icon {
display: inline-block;
width: 18px;
height: 18px;
background-image: url("/public/img/verification/identity.png");
margin-right: 5px
}
.verification-approved-chat-message div:first-child {
font-weight: 700;
font-size: 12px;
color: #01d676;
margin-bottom: 15px
}
.pill {
display: inline-block;
padding: 4px 10px;
border-radius: 99px
}
.pill.pill-dark {
background-color: #2f3045;
color: white;
font-weight: 500;
border-radius: 5px;
padding: 6px 18px
}
.pill.pill-gold {
background: rgba(250,196,1,0.1);
border-radius: 12px;
font-size: 12px;
line-height: 1.65;
color: #fac401;
padding: 2px 8px
}
.pill.pill-cyan {
background: #194f58;
border-radius: 12px;
font-size: 12px;
line-height: 1.65;
color: #0ec6d3;
padding: 2px 8px
}
.aspect-ratio-1-1 {
aspect-ratio: 1
}
.affiliate-page .affiliate-heading {
display: grid;
grid-template-areas: "a b";
margin: 40px 0 20px 0
}
.affiliate-page .loading-skeleton::before {
background-color: #2a2b3f
}
.affiliate-page .loading-skeleton::after {
background-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(255,255,255,0.13),rgba(255,255,255,0.13),rgba(255,255,255,0))
}
.affiliate-page .referral-user-list .loading-skeleton {
height: 55px;
margin-bottom: 10px;
margin-bottom: 10px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .profile-username {
font-size:16px
}
}
.affiliate-page .tier-info {
gap: 25px
}
@media(max-width: 430px) {
.affiliate-page .tier-info {
gap:10px
}
.affiliate-page .tier-info .text-semibold,.affiliate-page .tier-info svg {
display: none
}
}
@media only screen and (min-width: 1200px) {
.affiliate-page .profile-card--tight .tier-info {
gap:10px
}
.affiliate-page .profile-card--tight .tier-info .text-semibold,.affiliate-page .profile-card--tight .tier-info svg {
display: none
}
}
.affiliate-page .dropdown-toggle,.affiliate-page .dropdown-menu {
min-width: 220px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .dropdown-toggle,.affiliate-page .dropdown-menu {
width:100%
}
}
@media only screen and (max-width: 1199px) {
.affiliate-page .referral-users-sort-wrapper {
width:100%;
margin-top: 20px
}
.affiliate-page .referral-users-sort-wrapper #referred-users-sort-dropdown {
flex: 1
}
}
.affiliate-page .dropdown-toggle {
border-radius: 99px
}
.affiliate-page .btn-claim {
flex: 1;
padding: 0;
max-width: 120px
}
.affiliate-page .chart-section {
background-color: #1c1e2e;
border-radius: 15px;
padding: 20px
}
.affiliate-page .chart-section .chart-title {
margin-bottom: 40px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .chart-section .chart-last-30d {
--size:20px !important
}
}
.affiliate-page template+section {
margin-top: 30px;
margin-bottom: 100px
}
.affiliate-page .affiliate-how-it-works-btn {
background-color: #1d2030;
border-radius: 10px;
padding: 8px 16px;
height: 42px;
font-weight: 500;
border: 1px solid #292a40;
fill: #ccd
}
.affiliate-page .affiliate-how-it-works-btn:hover {
background-color: #42435a
}
.affiliate-page .profile-location {
margin-bottom: 10px
}
.affiliate-page .statistic-grid {
grid-template-areas: "a b" "c d";
grid-template-columns: 1fr 1fr;
white-space: nowrap
}
@media only screen and (max-width: 1199px) {
.affiliate-page .statistic-grid {
grid-template-areas:"a" "c" "b"
}
}
@media only screen and (max-width: 1199px) {
.affiliate-page .affiliate-profile-mobile {
display:grid !important;
grid-template-areas: "a b" "a c";
grid-template-columns: min-content;
gap: 10px;
height: 70px
}
.affiliate-page .affiliate-profile-mobile .profile-location {
margin: 0
}
}
.affiliate-page .affiliate-available-balance {
margin-top: 10px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .affiliate-available-balance {
margin-top:20px;
padding-top: 20px;
border-top: 1px solid #404043
}
}
.affiliate-page .tiers-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .tiers-grid {
grid-template-columns:1fr
}
}
.affiliate-page .tier-box {
border-radius: 20px;
padding: 25px 20px;
background: #1c1e2e;
border: 1px solid #1c1e2e;
min-height: 170px;
position: relative
}
.affiliate-page .tier-box.active {
border: 1px solid #01d676
}
.affiliate-page .tier-box.active .commission-icon svg {
fill: #01d676
}
.affiliate-page .tier-box.active .commission-text {
color: white
}
.affiliate-page .tier-box.active .active-tag {
display: block;
text-transform: uppercase;
background-color: #01d676;
position: absolute;
color: black;
font-weight: 600;
top: -15px;
left: 50%;
transform: translateX(-50%)
}
.affiliate-page .tier-box .commission-text {
color: #ccd
}
.affiliate-page .tier-box .active-tag {
display: none
}
.affiliate-page .tier-box svg {
fill: #a9a9ca
}
.affiliate-page .tier-box hr {
border: 0;
border-bottom: 1px solid #272938;
margin: 15px 0
}
.affiliate-page .tier-box .affiliate-checkmark-empty {
width: 18px;
height: 18px;
border-radius: 99px;
border: 1px solid #a9a9ca
}
.affiliate-page .affiliate-user-rows,.affiliate-page .leaderboard-rows {
display: grid;
padding: 15px 0;
border-top: 1px solid #404043;
align-items: center;
gap: 10px;
text-transform: capitalize;
min-height: 75px
}
.affiliate-page .affiliate-user-rows.header,.affiliate-page .leaderboard-rows.header {
height: 50px;
min-height: 50px;
border-top: 0
}
.affiliate-page template+.leaderboard-rows {
border-top: 0
}
.affiliate-page .affiliate-user-rows {
grid-template-columns: 1.5fr 1.25fr .75fr .75fr
}
@media only screen and (max-width: 1199px) {
.affiliate-page .affiliate-user-rows {
grid-template-columns:160px 1fr 1fr
}
}
.affiliate-page .leaderboard-rows {
grid-template-columns: auto 200px;
font-size: 16px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .leaderboard-rows {
grid-template-columns:auto 130px;
font-weight: bold
}
}
.affiliate-page .top-leaderboard-grid {
gap: 30px
}
@media only screen and (min-width: 1200px) {
.affiliate-page .top-leaderboard-grid {
height:310px
}
}
@media only screen and (max-width: 1199px) {
.affiliate-page .top-leaderboard-grid {
display:grid;
grid-template-columns: 33% 33% 33%;
padding: 0 30px;
gap: 15px
}
}
.affiliate-page .top-affiliate-card {
position: relative
}
.affiliate-page .top-affiliate-card .top-affiliate-earned {
position: absolute;
bottom: 60px;
left: 50%;
font-weight: 600;
transform: translateX(-50%);
align-items: baseline
}
@media only screen and (max-width: 1199px) {
.affiliate-page .top-affiliate-card .top-affiliate-earned {
bottom:50px
}
}
.affiliate-page .top-affiliate-card .top-affiliate-earned div {
font-size: 18px
}
.affiliate-page .top-affiliate-card .top-affiliate-img {
width: 180px;
height: auto
}
@media only screen and (max-width: 1199px) {
.affiliate-page .top-affiliate-card .top-affiliate-img {
width:100%
}
}
.affiliate-page .top-affiliate-card .top-affiliate-img.rank-2,.affiliate-page .top-affiliate-card .top-affiliate-img.rank-3 {
margin-top: 80px
}
.affiliate-page .referral-form-section {
background-color: #22233b;
border-radius: 15px;
padding: 30px 35px;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: space-between
}
@media only screen and (max-width: 1199px) {
.affiliate-page .referral-form-section {
display:grid;
grid-template-columns: 1fr;
padding: 20px
}
}
.affiliate-page .referral-form-section .input-refcode-wrapper {
display: flex;
align-items: center;
position: relative;
z-index: 1
}
@media only screen and (max-width: 1199px) {
.affiliate-page .referral-form-section .input-refcode-wrapper:not(.is-editing) {
height:0;
overflow: hidden
}
.affiliate-page .referral-form-section .input-refcode-wrapper .relative {
min-width: auto !important;
width: 100%
}
}
.affiliate-page .referral-form-section .input-refcode,.affiliate-page .referral-form-section .btn-copy-link {
font-weight: 500
}
@media only screen and (max-width: 1199px) {
.affiliate-page .referral-form-section .mobile-actions {
display:grid;
grid-template-columns: 50px auto
}
.affiliate-page .referral-form-section .mobile-actions:not(.is-editing) {
margin-top: -10px
}
.affiliate-page .referral-form-section .mobile-actions.is-editing {
margin-top: 0
}
}
.affiliate-page .referral-form-section .btn-copy-link,.affiliate-page .referral-form-section .btn-mobile-share,.affiliate-page .referral-form-section .btn-edit-refcode:not(.accentBtn) {
border-radius: 10px;
border: 1px solid #393e56;
background-color: #2f3045;
height: 42px;
padding: 7px 15px;
font-weight: 500;
color: white
}
.affiliate-page .referral-form-section .btn-copy-link:hover,.affiliate-page .referral-form-section .btn-mobile-share:hover,.affiliate-page .referral-form-section .btn-edit-refcode:not(.accentBtn):hover {
background-color: #42435a
}
@media only screen and (max-width: 1199px) {
.affiliate-page .referral-form-section .btn-copy-link,.affiliate-page .referral-form-section .btn-mobile-share,.affiliate-page .referral-form-section .btn-edit-refcode:not(.accentBtn) {
width:100%;
display: flex
}
}
.affiliate-page .referral-form-section .btn-copy-link svg {
width: 20px;
height: 20px;
fill: #b1b0d2
}
.affiliate-page .referral-form-section .btn-mobile-share svg {
width: 20px;
height: 20px;
fill: #ccd
}
.affiliate-page .referral-form-section .refcode-text {
margin-left: -10px;
margin-right: 10px;
transition: width .5s ease,opacity .5s ease;
width: 0;
opacity: 0
}
@media only screen and (max-width: 1199px) {
.affiliate-page .referral-form-section .refcode-text {
display:none
}
}
.affiliate-page .referral-form-section .refcode-text.visible {
width: 100%;
opacity: 1
}
.affiliate-page .referral-form-section .refcode-text.visible+.input-refcode {
opacity: 0
}
.affiliate-page .referral-form-section .input-refcode {
padding: 15px 30px 15px 15px;
color: #ccd;
position: absolute;
inset: 0;
top: -50%;
width: calc(100% - 10px)
}
@media only screen and (max-width: 1199px) {
.affiliate-page .referral-form-section .input-refcode {
transform:translateY(-50%)
}
}
.affiliate-page .referral-form-section .btn-edit-refcode {
padding: 0 10px;
height: 42px;
border-radius: 10px
}
.affiliate-page .referral-form-section .btn-edit-refcode.show {
position: relative;
z-index: 1
}
.affiliate-page .referral-form-section .btn-edit-refcode svg {
width: 20px;
height: 20px;
stroke: black;
margin: auto
}
.affiliate-page .referral-form-section .btn-edit-refcode svg.edit-icon {
stroke: #b1b0d2
}
.affiliate-page .referral-form-section .cancel-edit-refcode-button {
transition: margin-left ease .5s,opacity ease .5s;
padding: 14px;
border: 1px solid #393e56;
background-color: #2f3045;
border-radius: 99px;
margin-left: -42px;
opacity: 0;
z-index: -1
}
.affiliate-page .referral-form-section .cancel-edit-refcode-button.show {
position: relative;
z-index: 1
}
.affiliate-page .referral-form-section .cancel-edit-refcode-button.show {
margin-left: 10px;
opacity: 1
}
.affiliate-page .referral-form-section .cancel-edit-refcode-button svg {
fill: white
}
.affiliate-page .referral-form-section .btn-apply-refcode {
background-color: #01d676;
position: absolute;
right: 54px;
top: 1px;
bottom: 0;
padding: 0 10px;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
height: 38px
}
.affiliate-page .referral-form-section .btn-apply-refcode:disabled {
background-color: #525268
}
.affiliate-page .referral-form-section .error-message,.affiliate-page .referral-form-section .success-message {
white-space: nowrap;
position: absolute;
left: 0;
bottom: -35px;
font-size: 12px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .referral-form-section .error-message,.affiliate-page .referral-form-section .success-message {
position:static
}
}
.affiliate-page .referral-form-section .error-message {
color: #ff2d3d
}
.affiliate-page .referral-form-section .success-message {
color: #01d676
}
.affiliate-page .social-button {
border: 1px solid #393e56;
background-color: #2f3045;
border-radius: 99px;
width: 42px;
height: 42px
}
.affiliate-page .social-button--hollowed {
background: 0;
width: 40px;
height: 40px
}
.affiliate-page .social-button--hollowed:hover {
border-color: #b4b4d4;
background-color: #42435a
}
.affiliate-page .social-button--hollowed svg {
width: 10px !important;
height: 10px !important
}
.affiliate-page .social-button svg {
width: 16px;
height: 16px;
display: block;
fill: #b1b0d2 !important
}
.affiliate-page .promo-grid {
display: grid;
grid-template-areas: "a b c" "d d d";
gap: 40px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .promo-grid {
grid-template-areas:"a" "b" "c" "d"
}
}
.affiliate-page .promo-grid .affiliate-image {
display: block;
width: 100%
}
.affiliate-page .promo-grid .loading-skeleton {
border-radius: 20px
}
.affiliate-page .promo-grid .download-promo-btn {
border-radius: 10px;
padding: 8px 15px;
fill: white;
border: 1px solid #393e56
}
.affiliate-page .promo-grid .download-promo-btn:hover,.affiliate-page .promo-grid .download-promo-btn:focus {
border-color: #b4b4d4;
background-color: #42435a
}
.affiliate-page .banner1-simulator {
position: relative
}
.affiliate-page .banner1-simulator .refcode {
position: absolute;
font-size: 30px;
font-weight: bold;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
color: white
}
.affiliate-page .verification-section .verification-form {
gap: 20px
}
.affiliate-page .verification-section .verification-form.first-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr
}
@media only screen and (max-width: 1199px) {
.affiliate-page .verification-section .verification-form.first-row {
grid-template-columns:1fr
}
}
.affiliate-page .verification-section .verification-form.second-row {
margin-top: 20px;
display: grid;
grid-template-columns: 400px 250px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .verification-section .verification-form.second-row {
grid-template-columns:1fr
}
}
@media only screen and (max-width: 1199px) {
.affiliate-page .verification-section .generic-infobox {
margin-bottom:30px
}
}
@media only screen and (max-width: 1199px) {
.affiliate-page .verification-section .verification-actions {
flex-direction:column-reverse;
width: 100%;
display: flex;
align-items: center;
justify-content: center
}
.affiliate-page .verification-section .verification-actions button {
width: 100%
}
}
.affiliate-page .modal-close img {
border: 1px solid #2f3045;
background-color: #222338;
border-radius: 99px;
padding: 8px;
width: 30px;
height: 30px
}
.affiliate-page .verified-panel {
background-color: #1e1e2f;
max-width: 800px;
border-radius: 15px;
padding: 40px 20px;
text-align: center;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
color: #ccd;
gap: 15px;
margin-top: 50px
}
@media only screen and (max-width: 1199px) {
.affiliate-page .verified-panel {
margin-top:30px
}
.affiliate-page .verified-panel a {
width: 100%
}
.affiliate-page .verified-panel a .secondaryBtn {
width: 100%
}
}
.affiliate-page .verified-panel p {
max-width: 400px
}
.affiliate-page .verified-panel .secondaryBtn {
width: 400px
}
.text-natural-grey-300 {
color: #7d7ca1
}
.text-natural-grey-200 {
color: #a9a8cd
}
.affiliate-hero {
padding-bottom: 80px
}
@media only screen and (max-width: 1199px) {
.affiliate-hero {
position:relative;
padding-bottom: 0
}
}
.affiliate-hero h1 {
margin: 0;
font-size: 32px;
font-weight: bold;
text-align: center;
line-height: 1.3
}
.affiliate-hero h1 em {
font-style: normal;
color: #01d676;
white-space: nowrap
}
@supports(-webkit-background-clip: text) {
.affiliate-hero h1 em {
background:linear-gradient(to right,#01d676,#c7eb19);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}
}
.affiliate-hero .coins-gray-left,.affiliate-hero .coins-gray-right {
width: 200px
}
@media only screen and (max-width: 1199px) {
.affiliate-hero .coins-gray-left {
position:absolute;
width: 140px;
left: -50px;
top: 160px
}
}
@media only screen and (max-width: 1199px) {
.affiliate-hero .coins-gray-right {
display:none
}
}
.affiliate-hero h6 {
color: #a9a9ca;
line-height: 1.5
}
.affiliate-hero .accentBtn {
width: 200px;
margin-top: 30px
}
.affiliate-hero .how-it-works-img {
margin: auto;
width: 75%;
height: auto;
margin-top: 40px
}
@media only screen and (max-width: 1199px) {
.affiliate-hero .how-it-works-img {
width:100%;
margin: 50px 0
}
}
.affiliate-hero .text-content {
padding-top: 50px
}
@media only screen and (max-width: 1199px) {
.affiliate-hero .text-content {
position:relative
}
}
.affilite-guest-page h4 {
font-size: 32px;
font-weight: bold;
margin-bottom: 40px
}
.affilite-guest-page .affiliate-public-leaderboard {
padding: 50px 150px
}
@media only screen and (max-width: 1199px) {
.affilite-guest-page .affiliate-public-leaderboard {
padding:50px 20px 150px 20px
}
}
.affilite-guest-page .affiliate-top-earner-main-grid {
gap: 50px;
grid-template-columns: 1fr 1.25fr;
font-size: 16px
}
.affilite-guest-page .affiliate-top-earner-main-grid .affiliate-top-earners-row[data-rank="1"] .offer-image {
background-color: #f7bc14;
color: black
}
.affilite-guest-page .affiliate-top-earner-main-grid .affiliate-top-earners-row[data-rank="2"] .offer-image {
background-color: #b9bbc1;
color: black
}
.affilite-guest-page .affiliate-top-earner-main-grid .affiliate-top-earners-row[data-rank="3"] .offer-image {
background-color: #fd9727;
color: black
}
@media only screen and (max-width: 1199px) {
.affilite-guest-page .affiliate-top-earner-main-grid {
display:flex;
flex-direction: column
}
}
.affilite-guest-page .affiliate-top-earners-row {
display: grid;
grid-template-columns: 50px 1fr 100px;
margin-bottom: 15px;
gap: 15px
}
@media only screen and (max-width: 1199px) {
.affilite-guest-page .affiliate-top-earners-row {
border-bottom:1px solid #242536;
padding-bottom: 10px;
font-weight: bold
}
.affilite-guest-page .affiliate-top-earners-row:last-of-type {
border-bottom: 0
}
}
.affilite-guest-page .affiliate-top-earners-row .offer-image {
background-color: #1d2030;
font-weight: bold;
color: #cbcbdf;
font-size: 18px
}
.affilite-guest-page .affiliate-total {
border-radius: 20px;
text-transform: uppercase;
padding: 40px;
border: 1px solid #242536
}
@media only screen and (max-width: 1199px) {
.affilite-guest-page .affiliate-total {
width:100%
}
}
.affilite-guest-page .affiliate-total .money-bag {
width: auto;
height: 120px
}
@media only screen and (max-width: 1199px) {
.affilite-guest-page .affiliate-total .money-bag {
height:110px
}
}
.affilite-guest-page .affiliate-total .stars {
position: absolute;
inset: 0;
width: 100%;
top: -15px;
max-width: 360px;
left: 50%;
transform: translateX(-50%)
}
.affilite-guest-page .affiliate-total p {
font-size: 18px;
margin: 30px 0 0 0;
font-weight: 600;
white-space: nowrap
}
@media only screen and (max-width: 1199px) {
.affilite-guest-page .affiliate-total p {
white-space:normal
}
}
.affilite-guest-page .affiliate-total span {
font-size: 52px;
font-weight: bold;
position: relative;
z-index: 2
}
.affiliate-how-it-works {
padding-top: 50px;
background-color: #1a1b2b
}
@media only screen and (max-width: 1199px) {
.affiliate-how-it-works .affiliate-how-it-works-grid {
display:flex;
flex-direction: column
}
}
.affiliate-how-it-works .grid-cols-2 {
gap: 40px
}
.affiliate-how-it-works .grid-cols-2>div>img {
width: 100%;
border-top-left-radius: 20px;
border-top-right-radius: 20px
}
.affiliate-how-it-works .grid-cols-2>div .card-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px
}
.affiliate-how-it-works .grid-cols-2>div .card-content {
padding: 25px;
border-top: 1px solid #2b2a44
}
.affiliate-how-it-works .affiliate-card {
border: 1px solid #2b2a44;
border-radius: 20px
}
.affiliate-how-it-works:not(.modal) {
padding-bottom: 50px
}
.affiliate-how-it-works.modal {
padding-top: 0;
width: 60%;
max-width: 1000px
}
@media only screen and (max-width: 1199px) {
.affiliate-how-it-works.modal {
width:90%
}
}
.affiliate-how-it-works.modal .grid-cols-2 {
margin-top: 20px;
gap: 20px
}
@media only screen and (max-width: 1199px) {
.affiliate-how-it-works.modal .grid-cols-2 {
grid-template-columns:1fr
}
}
.affiliate-how-it-works.modal .affiliate-card {
background-color: #212136
}
.affiliate-banner-desktop {
height: 250px;
width: 100%;
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
position: relative
}
.affiliate-banner-desktop>div {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between
}
.affiliate-banner-desktop .bg {
position: absolute;
inset: 0
}
#modal-affiliate-congrats,#modal-affiliate-help {
width: 450px;
top: 20% !important
}
@media only screen and (max-width: 1199px) {
#modal-affiliate-congrats,#modal-affiliate-help {
width:100%
}
}
#modal-affiliate-congrats em,#modal-affiliate-help em {
font-style: normal;
font-weight: 500;
color: #01d676;
white-space: nowrap
}
#modal-affiliate-congrats .accentBtnV2,#modal-affiliate-help .accentBtnV2 {
width: 180px
}
@media only screen and (max-width: 1199px) {
#modal-affiliate-congrats .accentBtnV2,#modal-affiliate-help .accentBtnV2 {
width:100%
}
}
@keyframes loading {
to {
left: 200%
}
}
@keyframes bell-blinking {
0% {
opacity: 1;
stroke: #a9a9ca
}
50% {
opacity: .5;
stroke: #01d676
}
100% {
opacity: 1;
stroke: #a9a9ca
}
}
.site-notifications {
position: absolute;
top: var(--header-height);
right: 0;
width: 350px;
font-family: "Poppins";
font-style: normal;
display: none;
z-index: 6
}
.site-notifications--loading,.site-notifications--open {
display: block
}
.site-notifications--loading .site-notifications__header__mark div:first-child {
border-radius: 8px;
background: #2b2b41;
position: relative;
overflow: hidden;
width: 113px;
height: 22px;
border-radius: 6px
}
.site-notifications--loading .site-notifications__header__mark div:first-child::after {
content: "";
position: absolute;
top: -50%;
left: -100%;
width: 50%;
height: 200%;
background: #2b2b41;
background: linear-gradient(90deg,#2b2b41 16%,#303048 36%,#2b2b41 66%);
border-radius: 5px;
background-size: 200% 100%;
animation: 1.7s loading linear infinite;
transform: rotate(10deg);
opacity: .5
}
.site-notifications--loading .site-notifications__header__mark div:last-child {
display: none
}
.site-notifications--loading .site-notifications__body {
height: 60vh
}
.site-notifications--loading .site-notifications__body__loading-item {
display: block
}
.site-notifications--empty .site-notifications__header__mark {
display: none
}
.site-notifications--empty .site-notifications__body__empty {
display: block
}
.site-notifications__bg-layout {
position: fixed;
left: 0;
top: var(--header-height);
z-index: -1;
width: 100%;
background: rgba(20,21,35,0.8);
backdrop-filter: blur(4px);
bottom: 0
}
.site-notifications__tray {
background: #1e1e2e;
border-radius: 8px;
padding: 24px 10px
}
.site-notifications__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding: 0 14px
}
.site-notifications__header__title {
font-weight: 700;
font-size: 20px;
letter-spacing: .01em;
color: #fff
}
.site-notifications__header__mark {
font-weight: 500;
font-size: 14px;
opacity: .6
}
.site-notifications__header__mark__btn {
text-decoration-line: underline;
cursor: pointer;
color: #01d676
}
.site-notifications__header__mark__btn.disabled {
cursor: unset;
text-decoration-line: unset;
color: #a9a9ca
}
@media only screen and (min-width: 701px) {
.site-notifications__header__mark {
margin-left:auto
}
}
.site-notifications__body {
max-height: 60vh;
overflow-y: scroll;
padding: 4px 14px;
scrollbar-width: thin;
scrollbar-color: #2f3043 #1e1e2e;
position: relative
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.site-notifications__body {
padding:4px 10px
}
}
.site-notifications__body:hover {
scrollbar-width: thin;
scrollbar-color: #2f3043 #1e1e2e
}
.site-notifications__body::-webkit-scrollbar {
background: #2f3043;
border-radius: 2px;
width: 4px
}
.site-notifications__body::-webkit-scrollbar-track {
background-color: #1e1e2e
}
.site-notifications__body::-webkit-scrollbar-thumb {
background-color: #2f3043
}
.site-notifications__body__loading-item {
background: #242537;
border-radius: 8px;
padding: 18px 16px;
margin-bottom: 15px;
display: none
}
.site-notifications__body__loading-item__loader {
border-radius: 8px;
background: #2b2b41;
position: relative;
overflow: hidden
}
.site-notifications__body__loading-item__loader::after {
content: "";
position: absolute;
top: -50%;
left: -100%;
width: 50%;
height: 200%;
background: #2b2b41;
background: linear-gradient(90deg,#2b2b41 16%,#303048 36%,#2b2b41 66%);
border-radius: 5px;
background-size: 200% 100%;
animation: 1.7s loading linear infinite;
transform: rotate(10deg);
opacity: .5
}
.site-notifications__body__loading-item:nth-child(1)>div:first-child,.site-notifications__body__loading-item:nth-child(2)>div:first-child,site-notifications__body__item .site-notifications__body__loading-item:nth-child(3)>div:first-child {
display: flex
}
.site-notifications__body__loading-item:nth-child(1)>div:first-child>div:first-child,.site-notifications__body__loading-item:nth-child(2)>div:first-child>div:first-child,site-notifications__body__item .site-notifications__body__loading-item:nth-child(3)>div:first-child>div:first-child {
width: 90px;
height: 90px;
margin-right: 15px
}
.site-notifications__body__loading-item:nth-child(1)>div:first-child>div:last-child,.site-notifications__body__loading-item:nth-child(2)>div:first-child>div:last-child,site-notifications__body__item .site-notifications__body__loading-item:nth-child(3)>div:first-child>div:last-child {
width: calc(100% - 105px)
}
.site-notifications__body__loading-item:nth-child(1)>div:first-child>div:last-child div:nth-child(1),.site-notifications__body__loading-item:nth-child(2)>div:first-child>div:last-child div:nth-child(1),site-notifications__body__item .site-notifications__body__loading-item:nth-child(3)>div:first-child>div:last-child div:nth-child(1) {
height: 18px;
margin-bottom: 8px
}
.site-notifications__body__loading-item:nth-child(1)>div:first-child>div:last-child div:nth-child(2),.site-notifications__body__loading-item:nth-child(2)>div:first-child>div:last-child div:nth-child(2),site-notifications__body__item .site-notifications__body__loading-item:nth-child(3)>div:first-child>div:last-child div:nth-child(2) {
height: 10px;
width: 47px;
margin-bottom: 21px
}
.site-notifications__body__loading-item:nth-child(1)>div:first-child>div:last-child div:nth-child(3),.site-notifications__body__loading-item:nth-child(1)>div:first-child>div:last-child div:nth-child(4),.site-notifications__body__loading-item:nth-child(2)>div:first-child>div:last-child div:nth-child(3),.site-notifications__body__loading-item:nth-child(2)>div:first-child>div:last-child div:nth-child(4),site-notifications__body__item .site-notifications__body__loading-item:nth-child(3)>div:first-child>div:last-child div:nth-child(3),site-notifications__body__item .site-notifications__body__loading-item:nth-child(3)>div:first-child>div:last-child div:nth-child(4) {
height: 12px;
margin-bottom: 9px
}
.site-notifications__body__loading-item:nth-child(1)>div:first-child>div:last-child div:nth-child(4),.site-notifications__body__loading-item:nth-child(2)>div:first-child>div:last-child div:nth-child(4),site-notifications__body__item .site-notifications__body__loading-item:nth-child(3)>div:first-child>div:last-child div:nth-child(4) {
margin-bottom: 0
}
.site-notifications__body__loading-item:nth-child(1)>div:first-child,.site-notifications__body__loading-item:nth-child(4)>div:first-child,.site-notifications__body__loading-item:nth-child(5)>div:first-child {
margin-bottom: 17px
}
.site-notifications__body__loading-item:nth-child(1)>div:last-child,.site-notifications__body__loading-item:nth-child(4)>div:last-child,.site-notifications__body__loading-item:nth-child(5)>div:last-child {
height: 48px
}
.site-notifications__body__loading-item:nth-child(4)>div:first-child,.site-notifications__body__loading-item:nth-child(5)>div:first-child {
display: block
}
.site-notifications__body__loading-item:nth-child(4)>div:first-child>div:first-child,.site-notifications__body__loading-item:nth-child(5)>div:first-child>div:first-child {
width: 118px;
height: 18px;
margin-right: 0;
margin-bottom: 9px
}
.site-notifications__body__loading-item:nth-child(4)>div:first-child>div:last-child,.site-notifications__body__loading-item:nth-child(5)>div:first-child>div:last-child {
width: auto
}
.site-notifications__body__loading-item:nth-child(4)>div:first-child>div:last-child div:nth-child(1),.site-notifications__body__loading-item:nth-child(5)>div:first-child>div:last-child div:nth-child(1) {
width: 69px;
height: 10px;
margin-bottom: 21px
}
.site-notifications__body__loading-item:nth-child(4)>div:first-child>div:last-child div:nth-child(2),.site-notifications__body__loading-item:nth-child(5)>div:first-child>div:last-child div:nth-child(2) {
height: 12px;
width: 221px;
margin-bottom: 8px
}
.site-notifications__body__loading-item:nth-child(4)>div:first-child>div:last-child div:nth-child(3),.site-notifications__body__loading-item:nth-child(4)>div:first-child>div:last-child div:nth-child(4),.site-notifications__body__loading-item:nth-child(5)>div:first-child>div:last-child div:nth-child(3),.site-notifications__body__loading-item:nth-child(5)>div:first-child>div:last-child div:nth-child(4) {
height: 12px;
margin-bottom: 9px
}
.site-notifications__body__loading-item:nth-child(4)>div:first-child>div:last-child div:nth-child(4),.site-notifications__body__loading-item:nth-child(5)>div:first-child>div:last-child div:nth-child(4) {
margin-bottom: 0
}
.site-notifications__body__item {
background: #242537;
border-radius: 8px;
padding: 16px;
margin-bottom: 15px
}
.site-notifications__body__item--unseen {
background: #32334e
}
.site-notifications__body__item--active {
border: 1px solid #7d7d9e
}
.site-notifications__body__item>div:first-child {
display: flex
}
.site-notifications__body__item__image img {
margin-right: 15px;
max-width: 90px;
max-height: 90px
}
.site-notifications__body__item__title {
font-weight: 700;
font-size: 14px;
color: #fff;
margin-bottom: 2px
}
.site-notifications__body__item__date {
font-weight: 500;
font-size: 12px;
color: #ccd;
opacity: .6;
margin-bottom: 10px
}
.site-notifications__body__item__message {
font-weight: 500;
font-size: 0;
color: #a9a9ca
}
.site-notifications__body__item__message span {
font-size: 12px
}
.site-notifications__body__item__message__read-more-btn {
color: #1cafe9;
text-decoration: underline;
cursor: pointer;
white-space: nowrap
}
.site-notifications__body__item__message__read-more-text,.site-notifications__body__item__message__read-more-dots {
margin-right: 3px
}
.site-notifications__body__item__action-btn {
position: relative;
margin-top: 15px;
padding: 8px 10px 8px 15px;
border: 1px solid #01d676;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
letter-spacing: .01em;
color: #01d676;
cursor: pointer
}
.site-notifications__body__item__action-btn::after {
content: "";
position: absolute;
right: 15px;
top: calc(50% - 4px);
background-image: url(/public/img/site-notifications/chevron-right.png);
width: 5px;
height: 8px
}
.site-notifications__body__empty {
text-align: center;
display: none;
margin-top: 30px
}
.site-notifications__body__empty img {
margin-bottom: 16px
}
.site-notifications__body__empty__title {
font-weight: 700;
font-size: 16px;
text-align: center;
letter-spacing: .01em;
color: #fff;
margin-bottom: 8px
}
.site-notifications__body__empty__desc {
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #a9a9ca;
opacity: .6;
margin-bottom: 120px
}
.site-notifications__body .datLoader .spinner-layer {
border-color: #01d676
}
.site-notifications__bell {
position: relative;
cursor: pointer;
min-width: 30px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center
}
.site-notifications__bell>svg path {
fill: #7d7d9e
}
.site-notifications__bell--active>svg path {
fill: #01d676
}
.site-notifications__bell--unread .site-notifications__bell__counter {
display: flex
}
.site-notifications__bell--unread>svg path {
fill: #01d676
}
.site-notifications__bell--animated>svg {
display: none
}
.site-notifications__bell--animated .site-notifications__bell__animation {
display: block
}
.site-notifications__bell--animated .site-notifications__bell__counter {
display: none
}
.site-notifications__bell__animation {
position: relative;
width: 30px;
height: 30px;
display: none
}
.site-notifications__bell__animation svg {
position: absolute;
top: 0
}
.site-notifications__bell__counter {
position: absolute;
font-weight: 500;
font-size: 11px;
color: #fff;
width: 11.3px;
height: 11.3px;
border-radius: 50%;
background-color: #f33;
justify-content: center;
align-items: center;
left: 16px;
top: 4px;
border: 1px solid #1d1e30;
display: none
}
.site-notifications__bell__counter--active {
display: flex
}
@media only screen and (max-width: 700px) {
.site-notifications {
position:fixed;
top: 70px;
left: 0;
width: 100%
}
.site-notifications__bg-layout {
top: 0;
height: 100vh
}
.site-notifications__tray {
border-radius: 0
}
.site-notifications__header {
align-items: flex-start;
flex-direction: column
}
.site-notifications__header__title {
margin-bottom: 10px
}
.site-notifications__header__close {
position: absolute;
top: 24px;
right: 24px;
box-sizing: border-box;
position: absolute;
width: 32px;
height: 32px;
border: 1px solid #2f3043;
border-radius: 50%;
background-image: url(/public/img/site-notifications/close.png);
cursor: pointer;
background-repeat: no-repeat;
background-position: center
}
}
.site-notifications-popup {
font-family: "Poppins";
font-style: normal;
width: 362px;
height: 88px;
background: #242537;
box-shadow: 0 8px 64px rgba(20,21,35,0.8);
border-radius: 6px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 12px
}
.site-notifications-popup img {
max-width: 64px;
max-height: 64px;
margin-right: 12px;
display: inline-block;
align-self: center
}
.site-notifications-popup__title {
font-weight: 700;
font-size: 12px;
color: #fff;
margin-bottom: 4px
}
.site-notifications-popup__message {
font-weight: 500;
font-size: 12px;
color: #a9a9ca;
opacity: .6;
line-height: 165%
}
.site-notifications-popup__close-btn {
margin-left: auto;
width: 20px;
min-width: 20px;
height: 20px;
background-image: url(/public/img/site-notifications/close.png);
cursor: pointer
}
#site-notifications-pupup-container {
display: block;
position: fixed;
z-index: 10000
}
@media only screen and (max-width: 700px) {
#site-notifications-pupup-container {
top:86px;
left: 16px;
width: calc(100% - 32px)
}
}
@media only screen and (min-width: 701px) {
#site-notifications-pupup-container {
top:115px;
right: 7%;
max-width: 86%
}
}
.widget {
background: #2b2b42;
border: 1px solid #35354b;
border-radius: 8px;
height: 40px;
display: none;
align-items: center;
padding: 0 10px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.widget.widget-react {
display: flex
}
.widget .widget-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 10px
}
.widget .widget-content-middle {
flex: 1
}
.widget .widget-content-right {
margin-right: 0
}
.widget .widget-close-button {
height: 16px;
width: 16px;
background: #35354b;
border: 1px solid #4d4d66;
border-radius: 50%;
align-items: center;
justify-content: center;
display: none;
cursor: pointer
}
@media only screen and (max-width: 700px) {
.widget .widget-close-button {
display:flex
}
}
.widget .widget-close-button-container {
position: absolute;
right: -8px;
top: 0;
bottom: 0;
display: flex;
align-items: center
}
.widget .widget-progress-bar-empty {
background-color: #6b6c82;
position: absolute;
bottom: -3px;
left: 3px;
right: 3px;
top: 0;
z-index: -1;
border-radius: 8px;
overflow: hidden
}
.widget .widget-progress-bar-filled {
background-color: #00d677;
position: absolute;
bottom: -1px;
left: 3px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
height: 3px
}
.widget:hover .widget-close-button {
display: flex
}
.widget p {
margin: 0
}
.widget-tooltip .tooltip-inner {
color: #a9a9ca;
padding: 10px 12px
}
@media only screen and (min-width: 701px) {
.widget.widget-leaderboard {
min-width:220px
}
}
.widget.widget-leaderboard .widget-content-middle,.widget.widget-leaderboard .widget-content-right {
display: flex;
align-items: center
}
@media only screen and (max-width: 700px) {
.widget.widget-leaderboard .widget-content-middle,.widget.widget-leaderboard .widget-content-right {
flex-direction:row-reverse
}
}
.widget.widget-leaderboard .widget-leaderboard-label {
font-weight: 500;
font-size: 11px;
color: #a9a9ca
}
@media only screen and (max-width: 700px) {
.widget.widget-leaderboard .widget-leaderboard-label {
font-size:14px
}
}
@media only screen and (max-width: 700px) {
.widget.widget-leaderboard .widget-leaderboard-icon svg {
width:30px;
height: 30px
}
}
.widget.widget-leaderboard .widget-leaderboard-daily-rank.widget-leaderboard-daily-rank-1 {
color: #fed130 !important
}
@media only screen and (max-width: 700px) {
.widget.widget-leaderboard .widget-leaderboard-daily-rank.widget-leaderboard-daily-rank-1 {
margin-top:0;
margin-left: 15px
}
}
.widget.widget-leaderboard .widget-leaderboard-daily-rank.widget-leaderboard-daily-rank-1 .widget-leaderboard-rank-icon {
left: -8px
}
.widget.widget-leaderboard .widget-leaderboard-daily-rank.widget-leaderboard-daily-rank-2 {
color: #dde0e9 !important
}
@media only screen and (max-width: 700px) {
.widget.widget-leaderboard .widget-leaderboard-daily-rank.widget-leaderboard-daily-rank-2 {
margin-top:0;
margin-left: 15px
}
}
.widget.widget-leaderboard .widget-leaderboard-daily-rank.widget-leaderboard-daily-rank-3 {
color: #fd9727 !important
}
@media only screen and (max-width: 700px) {
.widget.widget-leaderboard .widget-leaderboard-daily-rank.widget-leaderboard-daily-rank-3 {
margin-top:0;
margin-left: 15px
}
}
.widget.widget-leaderboard .widget-leaderboard-rank {
font-size: 12px;
font-weight: 700;
line-height: 14px;
color: #fff;
display: flex;
align-items: center;
position: relative
}
@media only screen and (max-width: 700px) {
.widget.widget-leaderboard .widget-leaderboard-rank {
margin-left:6px;
font-size: 14px;
line-height: 16px
}
}
.widget.widget-leaderboard .widget-leaderboard-rank-icon {
position: absolute;
left: -7px;
top: 0
}
.widget.widget-leaderboard .widget-leaderboard-rank-value {
margin-right: 4px
}
.widget.widget-free-case {
background: #2b2b42
}
.widget.widget-free-case:before {
display: none !important
}
.widget.widget-free-case.free-case-open-btn {
width: 160px;
overflow: hidden
}
.widget.widget-free-case.free-case-open-btn.free-case-widget-claimed,.widget.widget-free-case.free-case-open-btn.free-case-widget-claimed-mobile {
z-index: 0
}
.widget.widget-free-case.free-case-open-btn .free-case-open-btn-icon {
width: 34px;
height: 30px;
max-width: 34px;
max-height: 30px;
min-width: 34px;
min-height: 30px
}
.widget.widget-free-case.free-case-open-btn .free-case-open-btn-icon svg {
width: 34px;
height: 30px;
max-width: 34px;
max-height: 30px
}
.widget.widget-free-case.free-case-open-btn .widget-free-case-title {
font-family: "Poppins",sans-serif;
font-style: normal;
font-weight: 700;
font-size: 12px;
color: #fff;
line-height: 14px
}
.widget.widget-free-case.free-case-open-btn .widget-free-case-subtitle {
font-weight: 500;
font-size: 11px;
color: #a9a9ca !important;
margin: 0;
line-height: 13px
}
.widget.widget-free-case.free-case-open-btn .widget-free-case-sign-up-text {
flex: 1;
display: flex;
align-items: flex-end;
padding-left: 5px
}
.widget.widget-free-case.free-case-open-btn .widget-free-case-coins-info {
font-weight: 700;
font-size: 12px;
color: #fff;
line-height: 12px
}
.widget.widget-free-case.free-case-open-btn .widget-free-case-challenge-time {
font-weight: 600;
font-size: 11px;
color: #fff
}
.widget.widget-free-case.free-case-open-btn .widget-free-case-challenge-time-separator {
margin: 0 2px
}
.widget.widget-free-case.free-case-open-btn .widget-free-case-progress {
background: linear-gradient(245.31deg,#555bff 0,#555bff 97.72%);
height: 40px;
position: absolute;
z-index: -1;
left: 0
}
.widget.widget-free-case.free-case-open-btn .widget-free-case-progress img {
height: 100%
}
.widget.widget-free-case.free-case-open-btn .widget-free-case-claim-button {
width: 100%;
height: 30px;
min-height: 30px;
background: #01ff97;
box-shadow: 0 1.25478px 20px rgba(1,214,118,0.25);
border-radius: 8px;
font-weight: 600;
font-size: 10px;
line-height: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #171826
}
.widget.widget-free-case.free-case-open-btn .btn-text {
margin-left: 0
}
.widget.widget-free-case.free-case-open-btn .reg-challange-time-block {
width: unset;
background: unset;
height: unset;
box-shadow: unset;
line-height: 12px
}
.widget.widget-free-case.free-case-open-btn .reg-challange-time-block .reg-challange-time {
flex-direction: row
}
.widget.widget-free-case.free-case-open-btn .widget-content-right {
flex: 1
}
@media only screen and (min-width: 701px) {
.widget.widget-daily-streak {
min-width:210px
}
}
.widget.widget-daily-streak .widget-daily-streak-title {
font-weight: 700;
font-size: 12px;
color: #fff
}
.widget.widget-daily-streak .widget-daily-streak-subtitle {
font-weight: 500;
font-size: 11px;
color: #a9a9ca
}
.widget.widget-daily-streak .widget-daily-streak-claim-button {
height: 26px;
background: #01d676;
box-shadow: 0 1.25478px 20px rgba(1,214,118,0.25);
border-radius: 8px;
font-weight: 600;
font-size: 10px;
display: flex;
align-items: center;
color: #171826;
padding: 0 18px
}
.widget.widget-daily-streak .widget-daily-streak-claim-button:disabled {
background: #7d7d9e;
box-shadow: 0 1.25478px 2.50957px rgba(0,0,0,0.2);
cursor: not-allowed
}
.widget.widget-daily-streak .widget-daily-streak-claimed-text {
font-weight: 600;
font-size: 10px;
display: flex;
align-items: center;
color: #01d676
}
.widget.widget-daily-streak .widget-daily-streak-claimed-confetti {
position: absolute;
right: 2px;
bottom: -2px
}
.widget.widget-daily-streak .widget-daily-streak-gift-icon-container {
height: 26px;
width: 26px;
display: flex;
align-items: center;
justify-content: center;
color: #2b2b42;
background: #01d676;
box-shadow: 0 0 14px rgba(1,214,118,0.2);
border-radius: 6px;
overflow: hidden;
position: relative
}
.widget.widget-daily-streak .widget-daily-streak-gift-icon-container.widget-daily-streak-gift-icon-container-claimed {
background: transparent;
color: #01d676;
box-shadow: none
}
.widget.widget-daily-streak .widget-daily-streak-gift-icon-container-bg {
position: absolute
}
.widget.widget-daily-streak .widget-daily-streak-achieved-background {
position: absolute;
right: 10px;
left: 8px;
top: 0;
bottom: 0
}
.header-widgets {
margin-left: 20px;
display: flex;
align-items: center;
flex: 1;
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none
}
.header-widgets::-webkit-scrollbar {
display: none
}
.header-widgets .widget:not(:last-child) {
margin-right: 12px
}
@media only screen and (max-width: 700px) {
.header-widgets {
display:none
}
}
.widget-free-case.widget.widget-free-case.free-case-open-btn {
padding: 9px 16px;
min-width: 210px
}
@media only screen and (max-width: 700px) {
.widget-free-case.widget.widget-free-case.free-case-open-btn {
width:100%
}
}
@media only screen and (max-width: 400px) {
.widget-free-case.widget.widget-free-case.free-case-open-btn {
padding:9px 8px
}
}
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-progress {
height: 100%
}
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-progress img {
object-fit: cover;
width: 100%
}
.widget-free-case.widget.widget-free-case.free-case-open-btn.free-case-widget-claimed .widget-content-right {
flex: 1;
display: flex;
align-items: flex-start
}
@media only screen and (max-width: 700px) {
.widget-free-case.widget.widget-free-case.free-case-open-btn.free-case-widget-claimed .widget-content-right {
flex-direction:row;
align-items: center;
justify-content: space-between
}
}
.widget-free-case.widget.widget-free-case.free-case-open-btn:not(.free-case-widget-claimed) .widget-content-right {
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column-reverse
}
@media only screen and (max-width: 700px) {
.widget-free-case.widget.widget-free-case.free-case-open-btn:not(.free-case-widget-claimed) .widget-content-right {
flex-direction:row;
align-items: center;
justify-content: space-between
}
}
.widget-free-case.widget.widget-free-case.free-case-open-btn:not(.free-case-widget-claimed) .widget-free-case-coins-info {
display: none
}
@media only screen and (max-width: 700px) {
.widget-free-case.widget.widget-free-case.free-case-open-btn:not(.free-case-widget-claimed) .widget-free-case-coins-info {
display:block
}
}
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-title {
font-weight: 700;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
@media only screen and (max-width: 700px) {
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-title {
font-size:16px
}
}
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-subtitle {
font-weight: 500;
line-height: 120%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
@media only screen and (max-width: 700px) {
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-subtitle {
font-size:16px
}
}
.widget-free-case.widget.widget-free-case.free-case-open-btn .free-case-open-btn-icon {
height: 34px;
max-height: 34px
}
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-coins-info {
font-weight: 700;
font-size: 12px;
line-height: 17px
}
@media only screen and (max-width: 700px) {
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-coins-info {
font-size:16px;
line-height: 160%
}
}
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-challenge-time {
font-size: 11px;
line-height: 14px
}
@media only screen and (max-width: 700px) {
.widget-free-case.widget.widget-free-case.free-case-open-btn .widget-free-case-challenge-time {
font-size:14px;
line-height: 165%
}
}
.free-case-widget-claimed-mobile.widget.widget-free-case.free-case-open-btn .widget-free-case-progress {
width: 100%
}
.free-case-widget-claimed-mobile.widget.widget-free-case.free-case-open-btn .widget-free-case-claim-button {
width: 95px;
font-size: 12px;
min-height: 30px
}
@media only screen and (min-width: 701px) {
.mobile-widget-container,.splide-react-container {
display:none
}
}
.mobile-widget-container .swiper-pagination,.splide-react-container .swiper-pagination {
bottom: -22px;
--swiper-pagination-color: #01d676;
--swiper-pagination-bullet-inactive-color: #2e3044;
--swiper-pagination-bullet-inactive-opacity: 1
}
.jackpot-widget {
padding: 0 12px
}
@media only screen and (min-width: 701px) {
.jackpot-widget {
min-width:200px
}
}
.fly-in {
opacity: 0;
animation: fly-in 1s ease-in-out forwards
}
@keyframes fly-in {
from {
opacity: 0;
transform: translateY(100%)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes signup-field-appears {
0 {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: var(--expanded-height)
}
}
.divider-with-text {
display: flex;
align-items: center;
justify-content: center;
gap: 10px
}
.divider-with-text .divider-left {
flex: 1;
height: 2px;
background: linear-gradient(to right,transparent,#3a3b55)
}
.divider-with-text .divider-right {
flex: 1;
height: 2px;
background: linear-gradient(to left,transparent,#3a3b55)
}
.homeV2 {
--color-muted: #a9a8cd;
--main-bg: #141524;
--panel-bg: #1d1e31;
--swiper-pagination-bullet-size: 10px;
--swiper-pagination-bullet-inactive-color: #1d1e31;
--swiper-pagination-bullet-inactive-opacity: 1;
--swiper-pagination-color: white;
--border-color: #2f3043;
--btn-radius: 8px;
font-family: "Poppins";
font-size: 14px;
background-color: var(--main-bg);
line-height: 1.5
}
.homeV2 .featured-survey-amount-wrapper,.homeV2 .pre-wrap {
white-space: pre-wrap
}
.homeV2 strong {
font-weight: bold
}
.homeV2 .error-message {
color: #ff2d3d;
text-align: left;
font-size: 10px;
margin-top: 5px
}
.homeV2 .grid-cols-3 {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
align-items: end
}
@media only screen and (min-width: 701px) {
.homeV2 .grid-cols-3 {
grid-template-columns:repeat(3,1fr)
}
}
.homeV2 .inputV2-wrapper {
border: none !important
}
.homeV2 .inputV2-wrapper .inputV2 {
background-color: #2f3043 !important;
border: none !important
}
.homeV2 .inputV2-wrapper .inputV2:focus,.homeV2 .inputV2-wrapper .inputV2:active {
outline: 1px solid white
}
.homeV2 .mobile-auth-toggle {
margin-top: 16px;
width: 342px;
margin: 0 auto
}
.homeV2 .mobile-auth-toggle button {
padding: 10px;
height: 50px;
width: 100%;
color: var(--gray-200);
font-weight: bold;
background-color: #2f3045
}
.homeV2 .mobile-auth-toggle button.active {
background-color: #01d676;
color: white;
z-index: 1
}
.homeV2 .hero-shadow-bg {
background-image: url("/public/img/homepage/hero-shadow-bg.png");
height: 320px;
background-size: contain;
opacity: .1;
position: absolute;
left: 0;
right: 0;
pointer-events: none;
transform: rotate(-5deg);
transform-origin: 18px center
}
@media only screen and (max-width: 700px) {
.homeV2 .hero-shadow-bg {
background-size:150%
}
}
.homeV2 .hero-shadow-bg::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 230px;
background: linear-gradient(to bottom,transparent,#141524)
}
.homeV2 .card-text {
margin-block-start:0}
.homeV2 .btn {
border-radius: var(--btn-radius)
}
.homeV2 .earn-page-card {
gap: 0;
grid-template-columns: repeat(3,33.3333333333%);
width: 100%
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeV2 .earn-page-card {
max-width:600px;
margin: auto
}
}
@media only screen and (max-width: 700px) {
.homeV2 .earn-page-card {
max-width:100vw
}
}
.homeV2 .earn-page-card .earn-box-v2 .featured-box-container {
border-radius: 15px;
padding: 16px
}
@media only screen and (max-width: 700px) {
.homeV2 .earn-page-card .earn-box-v2 .featured-box-container {
padding:2.5vw
}
}
.homeV2 .earn-page-card .earn-box-v2 .featured-box-container:hover {
cursor: pointer
}
.homeV2 .earn-page-card .earn-box-v2 .featured-box-container:hover .featured-survey-text--frame-heading {
color: white
}
.homeV2 .earn-page-card .earn-box-v2 .featured-survey-amount {
font-size: 18px
}
@media only screen and (max-width: 700px) {
.homeV2 .earn-page-card .earn-box-v2 .featured-survey-amount {
font-size:16px
}
}
.homeV2 .earn-page-card .earn-box-v2 .featured-survey-amount-decimals {
font-size: 15px
}
@media only screen and (max-width: 700px) {
.homeV2 .earn-page-card .earn-box-v2 .featured-survey-amount-decimals {
font-size:13px
}
}
.homeV2 .earn-page-card .earn-box-v2 .featured-survey-text--frame-subheading {
font-weight: 500;
font-size: 12px;
margin-bottom: -2px
}
.homeV2 .earn-page-card .earn-box-v2 .featured-survey-text--frame-heading {
color: #a9a9ca;
font-size: 16px
}
@media only screen and (max-width: 700px) {
.homeV2 .earn-page-card .earn-box-v2 .featured-survey-stars {
display:none
}
}
.homeV2 .earn-page-card .earn-box-v2.offer-fox-nth-1,.homeV2 .earn-page-card .earn-box-v2.offer-fox-nth-3 {
transform: scale(0.85)
}
@media only screen and (max-width: 700px) {
.homeV2 .earn-page-card .earn-box-v2.offer-fox-nth-1,.homeV2 .earn-page-card .earn-box-v2.offer-fox-nth-3 {
transform:scale(0.95)
}
}
@media only screen and (max-width: 700px) {
.homeV2 .earn-page-card .earn-box-v2.offer-fox-nth-2 {
transform:scale(0.95)
}
}
.homeV2 .earn-page-card .earn-box-v2.offer-fox-nth-1 {
transform-origin: left center
}
.homeV2 .earn-page-card .earn-box-v2.offer-fox-nth-3 {
transform-origin: right center
}
.homeV2 .signup-btn {
width: 100%;
display: block;
max-width: 416px;
margin-left: auto;
margin-right: auto
}
@media only screen and (max-width: 700px) {
.homeV2 .signup-btn {
max-width:100%
}
}
.homeV2 section {
margin-bottom: 60px
}
@media only screen and (min-width: 701px) {
.homeV2 section {
margin-bottom:150px
}
}
.homeV2 .section-title {
font-weight: bold;
margin-top: 0;
margin-bottom: 32px;
font-size: 24px;
line-height: 1.3
}
@media only screen and (min-width: 1200px) {
.homeV2 .section-title {
font-size:32px;
margin-bottom: 50px
}
}
.homeV2 .color-muted {
color: var(--color-muted)
}
.homeV2 h2 {
font-weight: bold;
display: inline-block
}
.homeV2 em.accent {
color: #01d676;
font-style: normal
}
.homeV2 .section-subtitle {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 18px;
font-size: 18px;
font-weight: bold
}
.homeV2 .section-subtitle svg {
width: 27px;
height: 27px
}
@media only screen and (min-width: 1200px) {
.homeV2 .section-subtitle {
font-size:32px
}
.homeV2 .section-subtitle svg {
width: 45px;
height: 45px
}
}
.homeV2 .emphasized-title {
font-size: 14px;
font-weight: bold;
line-height: 1
}
@media only screen and (min-width: 701px) {
.homeV2 .emphasized-title {
font-size:18px
}
}
.homeV2 .home-grid {
grid-template-columns: 1fr;
gap: 40px;
justify-content: space-between
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeV2 .home-grid {
grid-template-columns:1fr 450px
}
}
@media only screen and (min-width: 1200px) {
.homeV2 .home-grid {
grid-template-columns:358px 600px
}
}
.homeV2 .rounded-16 {
border-radius: 16px
}
.homeV2 .hero-section h1 {
font-size: 48px;
font-weight: bold;
padding-top: 50px;
display: inline-block;
line-height: 1.5;
margin-bottom: 4px
}
@media only screen and (max-width: 700px) {
.homeV2 .hero-section h1.headline--simple {
font-size:clamp(24px,7vw,32px);
margin-bottom: 32px
}
.homeV2 .hero-section h1.headline--simple span {
display: block;
white-space: nowrap
}
}
@media(max-width: 1400px) {
.homeV2 .hero-section h1.headline--simple span {
display:block;
white-space: nowrap
}
}
@media only screen and (min-width: 1200px) {
.homeV2 .hero-section h1.headline--fixed-height {
min-height:200px
}
}
@media(min-width: 1000px) {
.homeV2 .hero-section h1.headline--fixed-height[data-language=en] {
min-height:0
}
.homeV2 .hero-section h1.headline--fixed-height[data-language=en] div {
display: inline
}
}
@media(min-width: 501px) and (max-width:1200px) {
.homeV2 .hero-section h1.headline--fixed-height {
min-height:100px
}
}
@media(max-width: 500px) {
.homeV2 .hero-section h1.headline--fixed-height {
min-height:150px
}
.homeV2 .hero-section h1.headline--fixed-height em {
display: block
}
}
@media only screen and (max-width: 1199px) {
.homeV2 .hero-section h1 {
font-size:32px;
padding-top: 0;
margin-top: 58px;
margin-bottom: 20px
}
.homeV2 .hero-section h1 span {
display: block
}
}
.homeV2 .hero-section h1 em {
font-style: normal;
color: #01d676
}
.homeV2 .hero-section .hero-details {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 16px
}
.homeV2 .hero-section .hero-details .color-muted em {
color: white;
font-weight: bold;
font-style: normal
}
@media only screen and (min-width: 701px) {
.homeV2 .hero-section .hero-details {
flex-direction:row;
gap: 20px
}
}
.homeV2 .hero-section .green-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #01d676;
display: inline-block;
margin-right: 10px
}
.homeV2 .hero-section .hero-grid {
display: grid;
grid-template-columns: 1fr;
justify-content: space-between;
gap: 100px;
margin-top: 32px
}
@media only screen and (min-width: 1200px) {
.homeV2 .hero-section .hero-grid {
grid-template-columns:minmax(250px,530px) 427px;
gap: 40px;
margin-top: 48px
}
}
@media only screen and (max-width: 700px) {
.homeV2 .hero-section .hero-grid {
display:flex;
flex-direction: column;
gap: 0
}
}
.homeV2 .hero-section .hero-grid .trust-pilot {
display: flex;
justify-content: center;
margin-bottom: 60px
}
@media only screen and (min-width: 1200px) {
.homeV2 .hero-section .hero-grid .trust-pilot {
justify-content:flex-start;
margin-bottom: 0;
text-align: left
}
}
.homeV2 .hero-section .hero-grid .register-box {
line-height: 1.3;
background-color: var(--panel-bg);
padding: 24px 32px 32px 32px;
display: flex;
flex-direction: column;
gap: 12px
}
@media only screen and (max-width: 700px) {
.homeV2 .hero-section .hero-grid .register-box .checkboxV2 label {
gap:20px
}
}
.homeV2 .hero-section .hero-grid .register-box__headline {
font-size: 20px;
margin-bottom: 4px
}
@media only screen and (min-width: 1200px) {
.homeV2 .hero-section .hero-grid .register-box .relative.always-desktop {
display:block !important
}
}
@media only screen and (min-width: 701px) {
.homeV2 .hero-section .hero-grid .register-box {
border-radius:15px
}
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeV2 .hero-section .hero-grid .register-box {
width:500px;
margin: auto
}
}
@media only screen and (max-width: 700px) {
.homeV2 .hero-section .hero-grid .register-box {
margin:0 -24px
}
}
.homeV2 .hero-section .hero-grid .register-box .checkboxes {
padding: 0 10px;
margin: 12px 0;
text-align: left;
display: flex;
flex-direction: column;
gap: 8px
}
.homeV2 .hero-section .hero-grid .register-box .tnc-checkbox-wrapper {
position: relative
}
.homeV2 .hero-section .hero-grid .register-box .tnc-checkbox-wrapper.error::after {
content: "";
position: absolute;
inset: -7px -10px;
border: 1px solid #ff2c3d;
border-radius: 10px;
pointer-events: none
}
.homeV2 .hero-section .hero-grid .register-box a {
color: #01d676
}
.homeV2 .hero-section .hero-grid .register-box .password-reveal {
position: absolute;
right: 10px;
top: 12px
}
.homeV2 .homestats-section .homestats-grid {
padding: 32px 0;
display: grid;
grid-template-columns: 1fr;
background-color: var(--panel-bg);
border-radius: 15px
}
.homeV2 .homestats-section .homestats-grid .top-text {
font-weight: bold;
font-size: 30px;
margin-bottom: 16px
}
@media only screen and (max-width: 1199px) {
.homeV2 .homestats-section .homestats-grid .top-text {
font-size:24px
}
}
.homeV2 .homestats-section .homestats-grid>div {
padding: 0 32px
}
.homeV2 .homestats-section .homestats-grid>div:not(:first-child)::before {
content: "";
height: 2px;
width: calc(100% + 64px);
display: block;
background-color: #141523;
margin: 32px 0;
transform: translateX(-32px)
}
@media only screen and (min-width: 1200px) {
.homeV2 .homestats-section .homestats-grid {
gap:30px;
padding: 48px 0;
grid-template-columns: 1fr 1fr minmax(290px,1fr)
}
.homeV2 .homestats-section .homestats-grid>div:not(:first-child) {
border-left: 1px solid var(--border-color);
padding: 0 48px
}
.homeV2 .homestats-section .homestats-grid>div:not(:first-child)::before {
content: none
}
}
.homeV2 .recent-offers {
background-color: #1d1e31;
border-radius: 10px;
display: flex;
gap: 10px
}
.homeV2 .recommended-by-section {
padding: 40px 0;
background-color: #1e1e2e
}
@media only screen and (min-width: 1200px) {
.homeV2 .recommended-by-section {
padding:72px 0
}
}
.homeV2 .recommended-by-section .recommended-by-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
flex-shrink: 0
}
@media only screen and (max-width: 700px) {
.homeV2 .recommended-by-section .recommended-by-wrapper {
padding:0
}
}
@media only screen and (max-width: 700px) {
.homeV2 .recommended-by-section label {
font-size:14px
}
}
.homeV2 .recommended-by-section .recommended-by-grid {
display: grid;
flex: 1;
grid-template-columns: repeat(4,160px);
align-items: center;
justify-content: space-between;
font-size: 20px;
gap: 40px;
position: relative;
left: 40px
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeV2 .recommended-by-section .recommended-by-grid {
left:0
}
}
@media only screen and (max-width: 700px) {
.homeV2 .recommended-by-section .recommended-by-grid {
left:0;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
overflow-y: hidden;
width: 100%;
padding: 0 24px;
display: flex;
z-index: 1
}
}
.homeV2 .recommended-by-section .recommended-by-grid .item {
opacity: 0;
fill: #a4a4ac;
filter: grayscale(1)
}
@media only screen and (max-width: 1199px) {
.homeV2 .recommended-by-section .recommended-by-grid .item {
max-height:60px;
min-width: 120px;
margin-right: 30px
}
}
.homeV2 .recommended-by-section .recommended-by-grid .item>* {
margin: auto
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeV2 .recommended-by-section .recommended-by-grid .item>* {
width:140px;
height: auto
}
}
.homeV2 .recommended-by-section .recommended-by-grid .item:nth-child(1) {
animation-delay: 0
}
.homeV2 .recommended-by-section .recommended-by-grid .item:nth-child(2) {
animation-delay: .2s
}
.homeV2 .recommended-by-section .recommended-by-grid .item:nth-child(3) {
animation-delay: .4s
}
.homeV2 .recommended-by-section .recommended-by-grid .item:nth-child(4) {
animation-delay: .6s
}
.homeV2 .recommended-by-section .recommended-by-grid img {
height: 60px;
width: auto
}
@media only screen and (min-width: 1200px) {
.homeV2 .recommended-by-section .recommended-by-wrapper {
flex-direction:row;
gap: 60px
}
.homeV2 .recommended-by-section .recommended-by-grid {
position: static
}
}
.homeV2 .how-to-earn-section .section-title {
text-align: left
}
.homeV2 .how-to-earn-section .home-grid {
gap: 60px
}
@media only screen and (min-width: 1200px) {
.homeV2 .how-to-earn-section .home-grid {
gap:unset
}
}
.homeV2 .how-to-earn-section .signup-box-action {
margin-top: 50px
}
.homeV2 .how-to-earn-section .step-img {
max-height: 300px;
margin-bottom: 50px
}
@media only screen and (min-width: 1200px) {
.homeV2 .how-to-earn-section .step-img {
max-height:350px;
margin-bottom: 80px
}
}
.homeV2 .how-to-earn-section .signup-box {
text-align: left;
width: 100%
}
.homeV2 .how-to-earn-section .signup-box-action {
display: none
}
.homeV2 .how-to-earn-section .signup-box-action .signup-btn {
margin-left: 0
}
.homeV2 .how-to-earn-section .signup-box-mobile {
text-align: center
}
@media only screen and (min-width: 701px) {
.homeV2 .how-to-earn-section .signup-box-action {
display:block
}
.homeV2 .how-to-earn-section .signup-box-mobile {
display: none
}
}
@media only screen and (min-width: 1200px) {
.homeV2 .how-to-earn-section .signup-box {
display:flex;
flex-direction: column;
gap: 90px
}
}
@media only screen and (max-width: 700px) {
.homeV2 .how-to-earn-section .grid-cols-2:not(:first-child)>div:first-child {
order:1
}
}
.homeV2 .how-to-earn-section .grid-cols-2:not(:first-child) .card-image {
margin-top: 50px
}
.homeV2 .how-to-earn-section .complete-offer {
width: 100%;
height: 350px;
background-size: var(--fc-home-offer-card-image-scale,100%);
background-repeat: no-repeat;
background-image: url("/public/img/homepage/complete-the-offer.png");
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 30px;
border-radius: 20px
}
.homeV2 .how-to-earn-section .complete-offer img {
max-width: 100%
}
.homeV2 .how-to-earn-section .complete-offer .img-progress {
scale: var(--fc-home-offer-progress-image-scale,0.6)
}
.homeV2 .how-to-earn-section .get-paid {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 1.422;
border-radius: 20px;
background-size: cover;
background-repeat: no-repeat;
background-image: url("/public/img/homepage/get-paid.png");
background-position-y: 30%;
overflow: hidden
}
.homeV2 .how-to-earn-section .get-paid img {
max-width: 160px;
position: absolute
}
.homeV2 .how-to-earn-section .get-paid img:first-child {
transform-origin: top left;
left: -15px;
transform: scale(var(--fc-home-get-paid-card-image-scale))
}
@media only screen and (max-width: 1199px) {
.homeV2 .how-to-earn-section .get-paid img:first-child {
transform:scale(var(--fc-home-get-paid-card-image-scale)) translateX(-50px)
}
}
.homeV2 .how-to-earn-section .get-paid img:last-child {
right: 0;
transform-origin: top right;
transform: scale(var(--fc-home-get-paid-card-image-scale))
}
@media only screen and (max-width: 1199px) {
.homeV2 .how-to-earn-section .get-paid img:last-child {
transform:scale(var(--fc-home-get-paid-card-image-scale)) translateX(50px)
}
}
@media only screen and (min-width: 1200px) {
.homeV2 .how-to-earn-section .signup-box {
text-align:left
}
.homeV2 .how-to-earn-section .signup-btn {
margin-left: 0
}
.homeV2 .how-to-earn-section .section-title {
text-align: left
}
.homeV2 .how-to-earn-section .card-text {
font-size: 18px
}
}
.homeV2 .best-way-to-earn {
text-align: center
}
.homeV2 .best-way-to-earn .grid-cols-3 {
justify-content: center;
gap: 30px
}
@media only screen and (min-width: 1200px) {
.homeV2 .best-way-to-earn .grid-cols-3 {
gap:30px
}
}
.homeV2 .best-way-to-earn .grid-cols-3>div {
max-width: 352px
}
.homeV2 .best-way-to-earn article {
display: flex;
flex-direction: column;
padding: 30px 24px 0 24px;
background-color: var(--panel-bg);
border-radius: 16px;
font-size: 14px;
overflow: hidden;
max-height: 420px
}
.homeV2 .best-way-to-earn article h2 {
margin-top: 0
}
.homeV2 .best-way-to-earn article h2+p {
margin: 0
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeV2 .best-way-to-earn article {
margin:auto
}
}
.homeV2 .best-way-to-earn .best-way-to-earn-img {
width: 80%;
height: 120px;
object-fit: contain;
flex: 1;
display: block;
margin: auto
}
@media only screen and (max-width: 700px) {
.homeV2 .best-way-to-earn .best-way-to-earn-img {
max-height:120px
}
}
.homeV2 .best-way-to-earn .estimate-earn-per {
font-size: 32px;
font-weight: 700;
margin-bottom: 30px;
line-height: 45px;
color: #fff
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeV2 .top-1-site .grid-cols-3 {
align-items:start
}
}
.homeV2 .top-1-site .heres-why-grid-item {
height: 100%;
opacity: 0;
display: flex;
flex-direction: column;
padding: 40px 30px;
gap: 20px;
background-color: var(--panel-bg);
border-radius: 12px;
font-size: 14px;
align-items: center
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeV2 .top-1-site .heres-why-grid-item {
height:100%
}
}
.homeV2 .cashout-via-section {
background-color: #1e1e2f;
padding: 30px 0
}
.homeV2 .cashout-via-section .emphasized-title {
margin-bottom: 30px
}
@media only screen and (min-width: 1200px) {
.homeV2 .cashout-via-section .emphasized-title {
margin-bottom:46px
}
}
.homeV2 .cashout-via-section .cashout-options-list {
display: flex;
justify-content: space-evenly;
gap: 36px;
transform: translateX(calc(var(--fc-parallax-value-full) * 1.2px))
}
.homeV2 .cashout-via-section .cashout-options-list>img {
height: 39px;
width: auto;
flex-shrink: 0
}
.homeV2 .testimonials-section .signup-btn {
margin-top: 24px
}
.homeV2 .testimonials-section .testimonial-card {
padding: 20px;
border-radius: 15px;
background-color: var(--panel-bg);
display: inline-block;
height: 100%;
box-sizing: border-box
}
@media only screen and (min-width: 701px) {
.homeV2 .testimonials-section .testimonial-card {
width:256px
}
}
.homeV2 .testimonials-section .home-trust-pilot-swiper-pagination {
position: relative;
bottom: -30px
}
@media only screen and (min-width: 701px) {
.homeV2 .testimonials-section #home-testimonial-slider .swiper-wrapper .swiper-slide:first-child,.homeV2 .testimonials-section #home-testimonial-slider .swiper-wrapper .swiper-slide .summary-card {
display:none
}
}
@media only screen and (max-width: 700px) {
.homeV2 .testimonials-section #home-testimonial-slider .swiper-wrapper .swiper-slide:first-child,.homeV2 .testimonials-section #home-testimonial-slider .swiper-wrapper .swiper-slide .summary-card {
display:block
}
}
.homeV2 .testimonials-section .summary-card {
height: 334px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white
}
@media only screen and (max-width: 700px) {
.homeV2 .testimonials-section .summary-card {
display:none
}
}
.homeV2 .testimonials-section .summary-card .tp-stars {
width: 200px;
height: auto;
margin: 24px 0
}
.homeV2 .testimonials-section .summary-card .tp-logo {
margin-top: 10px;
max-width: 102px
}
.homeV2 .testimonials-section .testimonial-grid {
display: grid;
grid-template-columns: 256px auto;
gap: 16px;
overflow: hidden;
padding-left: 20px
}
@media only screen and (max-width: 700px) {
.homeV2 .testimonials-section .testimonial-grid {
grid-template-columns:1fr
}
}
.homeV2 .testimonials-section .testimonial-grid .review-card {
color: white;
text-align: left;
display: flex;
flex-direction: column
}
.homeV2 .testimonials-section .testimonial-grid .review-card .tp-stars {
width: 100px;
height: auto
}
.homeV2 .testimonials-section .testimonial-grid .review-card .review-title {
font-weight: 500;
font-size: 16px
}
.homeV2 .testimonials-section .testimonial-grid .review-card .review-text {
color: #ccccdf;
line-clamp: 4;
-webkit-line-clamp: 4;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 10px;
flex: 1
}
.homeV2 .testimonials-section .testimonial-grid .review-card .review-author {
text-transform: capitalize
}
.homeV2 .testimonials-section .testimonial-grid #home-testimonial-slider {
width: 100%
}
.homeV2 .testimonials-section .testimonial-grid #home-testimonial-slider .swiper-wrapper {
margin-top: 0
}
.homeV2 .testimonials-section .testimonial-grid #home-testimonial-slider .swiper-slide {
flex-basis: 256px;
height: 334px
}
@media only screen and (min-width: 1200px) {
.homeV2 .testimonials-section .testimonial-grid {
gap:32px
}
}
.homeV2 .testimonials-section .home-testimonial-navigation {
width: 400px;
margin: auto;
position: relative;
z-index: 0
}
.homeV2 .testimonials-section .home-testimonial-navigation .swiper-pagination {
top: 30px
}
.homeV2 .testimonials-section .home-testimonial-navigation .swiper-button-next,.homeV2 .testimonials-section .home-testimonial-navigation .swiper-button-prev {
top: 40px;
width: 40px
}
.homeV2 .testimonials-section .home-testimonial-navigation .swiper-button-next button,.homeV2 .testimonials-section .home-testimonial-navigation .swiper-button-prev button {
background-color: #242538;
border-radius: 5px;
padding: 10px;
color: #ccccdf;
width: 100%
}
.homeV2 .testimonials-section .home-testimonial-navigation .swiper-button-next::after,.homeV2 .testimonials-section .home-testimonial-navigation .swiper-button-prev::after {
content: none
}
.homeV2 .faq-container {
max-width: 736px
}
.homeV2 .faq-container .section-title {
display: block
}
.homeV2 .faq-container .faq-item {
opacity: 0;
border-color: #7d7d9e
}
.homeV2 .faq-container .faq-item .content {
color: #ccccdf;
text-align: left;
font-weight: 500
}
.homeV2 .faq-container .faq-item .content a {
text-decoration: underline;
color: #fff;
font-weight: 700
}
.homeV2 .faq-container .faq-item .content .answer-highlights {
padding-left: 60px;
margin-top: 50px
}
@media only screen and (max-width: 700px) {
.homeV2 .faq-container .faq-item .content .answer-highlights {
padding-left:10px
}
}
.homeV2 .faq-container .faq-item .content .answer-highlights li::before {
content: counter(requirements-counter);
color: #01d676;
position: absolute;
left: -45px;
top: -15px;
font-size: 48px;
font-weight: bold;
text-align: right;
width: 30px
}
.homeV2 .faq-container .faq-item .content .answer-highlights li {
position: relative;
counter-increment: requirements-counter;
list-style: none;
margin-left: 30px;
margin-bottom: 20px
}
.homeV2 .faq-container .faq-item .content .answer-highlights li h6 {
color: #01d676;
font-weight: bold;
font-size: 14px
}
.homeV2 .faq-container .faq-item summary {
font-size: 16px;
padding: 20px
}
.homeV2 .faq-container .faq-item summary::after {
background-image: url("/public/img/homepage/close.png");
width: 14px;
height: 14px;
background-size: 100%;
transform: translateY(-50%) rotate(90deg);
right: 24px
}
.homeV2 .faq-container .faq-item summary>span {
padding-right: 24px
}
@media only screen and (max-width: 700px) {
.homeV2 .faq-container .faq-item summary {
text-align:left
}
}
.homeV2 .faq-container .faq-item.accordion-opened summary::after {
transform: translateY(-50%) rotate(45deg)
}
.homeV2 .live-cashout-container {
background-color: var(--panel-bg);
padding: 32px;
margin-left: -24px;
margin-right: -24px
}
@media only screen and (max-width: 700px) {
.homeV2 .live-cashout-container {
padding:24px
}
}
.homeV2 .live-cashout-container h2.section-title {
display: flex;
align-items: center
}
.homeV2 .live-cashout-container h2.section-title::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #01d676;
display: inline-block;
margin-right: 10px
}
@media only screen and (min-width: 1200px) {
.homeV2 .live-cashout-container {
border-radius:16px;
margin-left: 0;
margin-right: 0;
padding: 40px
}
.homeV2 .live-cashout-container h2.section-title {
margin-bottom: 40px
}
}
.homeV2 .live-cashout-container .live-cashout {
display: grid;
grid-template-columns: 1fr;
gap: 32px
}
@media only screen and (min-width: 701px) {
.homeV2 .live-cashout-container .live-cashout {
grid-template-columns:repeat(2,1fr);
gap: 50px
}
}
.homeV2 .live-cashout-container .live-cashout .live-wd-feed {
height: 335px;
overflow: hidden
}
@media only screen and (max-width: 700px) {
.homeV2 .live-cashout-container .live-cashout .live-wd-feed {
height:260px
}
}
.homeV2 .live-cashout-container .live-cashout .total-cashout {
background: url("/public/img/homepage/live-cashout-bg.jpg") no-repeat;
border-radius: 15px;
aspect-ratio: 1.3744855967;
background-size: cover;
position: relative
}
@media only screen and (min-width: 701px) {
.homeV2 .live-cashout-container .live-cashout .total-cashout {
aspect-ratio:unset
}
}
.homeV2 .live-cashout-container .live-cashout .total-cashout .text-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
display: flex;
flex-direction: column;
gap: 20px
}
.homeV2 .live-cashout-container .live-cashout .total-cashout .text-content .total-cashout-caption {
min-width: 320px
}
.homeV2 .live-cashout-container .live-cashout .total-cashout .text-content .total-cashout-amount {
font-size: 40px;
font-weight: bold
}
@keyframes wd-item-entering {
0% {
opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
margin-bottom: -2px;
transform: scale(0.9)
}
100% {
opacity: 1;
height: 54px;
transform: scale(1)
}
}
.homeV2 .live-cashout-container .live-cashout .withdraw-item {
display: grid;
grid-template-columns: 1fr 100px 50px;
background-color: #2b2b42;
border-radius: 15px;
margin-bottom: 12px;
padding: 5px 5px 5px 15px;
align-items: center;
gap: 10px;
overflow: hidden;
height: 20px;
opacity: 0;
animation: wd-item-entering .5s ease-in-out forwards;
animation-iteration-count: 1;
will-change: opacity,height
}
@media only screen and (max-width: 700px) {
.homeV2 .live-cashout-container .live-cashout .withdraw-item {
margin-bottom:14px;
grid-template-columns: auto 50px 50px;
padding: 5px 5px 5px 10px;
white-space: nowrap
}
}
.homeV2 .live-cashout-container .live-cashout .withdraw-item:last-child {
margin-bottom: 0
}
.homeV2 .live-cashout-container .live-cashout .withdraw-item .wd-username {
color: #a9a8cd;
line-height: 1.2
}
.homeV2 .live-cashout-container .live-cashout .withdraw-item svg {
color: #a9a8cd
}
.homeV2 .live-cashout-container .live-cashout .withdraw-item time {
font-size: 13px;
color: #7d7ca1
}
.homeV2 .live-cashout-container .live-cashout .withdraw-item .relative .profile-country-flag {
position: absolute;
width: 15px;
height: 15px;
bottom: 0;
right: -4px
}
.homeV2 .live-cashout-container .live-cashout .withdraw-item .wd-method {
border-left: 1px solid #2f3045;
height: 30px;
display: flex
}
.homeV2 .live-cashout-container .live-cashout .withdraw-item .wd-method img {
width: auto;
height: 20px;
margin: auto
}
.homeV2 .video-section {
max-width: 730px;
padding-bottom: 100px
}
.homeV2 .video-section video {
width: 100%;
height: auto;
border-radius: 25px;
margin-top: 32px;
margin-bottom: 60px;
aspect-ratio: 16/9
}
@media only screen and (min-width: 1200px) {
.homeV2 .video-section video {
margin-bottom:90px
}
}
.homeV2 .video-section a {
margin-bottom: 10px
}
@media only screen and (max-width: 700px) {
.homeV2 .video-section .trustpilot {
max-width:300px;
margin: auto;
margin-bottom: 20px
}
}
.homeV2 .paralax-image-strips {
--fc-home-image-strip1-offset-x: -20px;
--fc-home-image-strip2-offset-x: -300px;
--fc-home-image-strip3-offset-x: -20px;
background-color: #1d1e31;
overflow: hidden;
border: 10px solid #1d1e31;
border-radius: 10px
}
@media only screen and (max-width: 700px) {
.homeV2 .paralax-image-strips {
height:300px;
width: calc(100vw - 48px)
}
}
.homeV2 .paralax-image-strips .rotator {
transform: rotate(-15deg) scale(1.25)
}
@media only screen and (max-width: 700px) {
.homeV2 .paralax-image-strips .rotator {
transform:rotate(-15deg) scale(1) translateY(-60px)
}
}
.homeV2 .paralax-image-strips .image-strip {
transform-origin: center center;
background-repeat: repeat-x;
background-size: contain;
display: block;
height: 150px;
width: 200vw
}
.homeV2 .paralax-image-strips__strip-1 {
transform: translateX(var(--fc-home-image-strip1-offset-x))
}
.homeV2 .paralax-image-strips__strip-2 {
transform: translateX(var(--fc-home-image-strip2-offset-x))
}
.homeV2 .paralax-image-strips__strip-3 {
transform: translateX(var(--fc-home-image-strip3-offset-x))
}
.homeV2 #recent-offers-slider {
width: 100%;
margin: 25px 0
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeV2 #recent-offers-slider {
margin:25px auto
}
}
@media only screen and (max-width: 700px) {
.homeV2 #recent-offers-slider {
width:100%
}
}
.homeV2 #recent-offers-slider .swiper-wrapper {
margin-bottom: 20px
}
.homeV2 #recent-offers-slider .swiper-pagination {
bottom: -5px;
text-align: right
}
.homeV2 #recent-offers-slider .recent-offers {
display: grid;
grid-template-columns: min-content auto max-content;
padding: 10px;
font-size: 13px;
border-radius: 10px;
background-color: #1d1e31;
color: #cbcbdf;
box-sizing: border-box
}
.homeV2 #recent-offers-slider .recent-offers .offer-thumbnail {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover
}
.homeV2 #recent-offers-slider .recent-offers .offer-username {
max-width: 120px
}
.homeV2 #recent-offers-slider .recent-offers .offer-time-display {
max-width: 100px
}
.homeV2 .subtle-animation-root img {
position: absolute;
z-index: 1;
animation: 3s linear subtle-floating infinite
}
.homeV2 .subtle-animation-root img.rok {
width: 40px;
height: auto;
left: 30px;
top: 15px
}
.homeV2 .subtle-animation-root img.coc {
width: 45px;
height: auto;
left: 55px;
top: 70px;
animation-delay: 1.5s
}
.homeV2 .subtle-animation-root img.coc-char {
width: 120px;
height: auto;
right: 25px;
top: 20px;
animation-delay: .75s
}
.homeV2 .subtle-animation-root img.coinbase {
width: 45px;
height: auto;
left: 30px;
top: 30px
}
.homeV2 .subtle-animation-root img.binance {
width: 50px;
height: auto;
right: 30px;
top: 60px;
animation-delay: 1.5s
}
.homeV2 .subtle-animation-root img.app-1 {
width: 45px;
height: auto;
left: 30px;
top: 50px
}
.homeV2 .subtle-animation-root img.app-2 {
width: 50px;
height: auto;
right: 30px;
top: 30px;
animation-delay: 1.5s
}
.homeV2 .hidden-field {
opacity: 0;
height: 0;
pointer-events: none
}
.homeV2 .hidden-field.appear {
animation-name: signup-field-appears;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
pointer-events: all
}
.homeV2 .checkboxes.hidden-field {
margin: 0 !important
}
.homeV2 .checkboxes.appear {
height: auto !important;
margin: 12px 0 !important
}
.homeV2 .signup-stats-wrapper {
color: #aaa8cb;
transform: translateY(10px)
}
.homeV2 .signup-stats-wrapper em {
font-style: normal;
color: white
}
@keyframes rolling-case-signup-movements {
0% {
background-position-x: 0
}
33% {
background-position-x: 100%
}
66% {
background-position-x: -100%
}
100% {
background-position-x: 0
}
}
.animated-rolling-cases {
position: relative
}
.animated-rolling-cases .description span {
color: #01d676
}
.animated-rolling-cases .free-case-banner-bg {
will-change: background-position;
width: 100%;
height: auto;
margin-top: 10px;
background: url("/public/img/template/body/rollingCaseFull.png") repeat-x;
background-size: cover;
min-height: 75px
}
.animated-rolling-cases .free-case-banner-bg.active {
animation: rolling-case-signup-movements 30s ease-in-out infinite
}
.animated-rolling-cases .free-case-banner-bg::before,.animated-rolling-cases .free-case-banner-bg::after {
content: "";
position: absolute;
top: 28px;
bottom: 0;
width: 80px;
background: linear-gradient(to right,rgba(29,30,49,0.8901960784) 13px,rgba(0,0,0,0))
}
.animated-rolling-cases .free-case-banner-bg::before {
left: 0
}
.animated-rolling-cases .free-case-banner-bg::after {
right: 0;
transform: scaleX(-1)
}
.animated-rolling-cases .free-case-needle {
position: absolute;
left: 50%;
top: 25px;
bottom: -2px;
background-color: white;
width: 2px
}
@media only screen and (max-width: 700px) {
html[lang=fr] .headline--simple {
max-width:100%
}
html[lang=fr] .headline--simple span {
white-space: normal !important
}
}
input[type=text].inputV2,input[type=password].inputV2,select.inputV2 {
border: 1px solid #393e56 !important;
background-color: #2f3045;
border-radius: 10px;
height: 42px;
padding: 0 10px;
color: #ccd;
font-family: "Poppins"
}
@media only screen and (max-width: 1199px) {
input[type=text].inputV2,input[type=password].inputV2,select.inputV2 {
font-size:14px
}
}
input[type=text].inputV2::placeholder,input[type=password].inputV2::placeholder,select.inputV2::placeholder {
color: #a9a9ca
}
input[type=text].inputV2:focus,input[type=password].inputV2:focus,select.inputV2:focus {
box-shadow: none !important;
border: 1px solid #393e56 !important
}
input[type=text].inputV2:not([readonly]):hover,input[type=password].inputV2:not([readonly]):hover,select.inputV2:not([readonly]):hover {
background-color: #42435a
}
input[type=text].inputV2:focus-within,input[type=password].inputV2:focus-within,select.inputV2:focus-within {
outline: 0
}
input[type=text].inputV2.error,input[type=password].inputV2.error,select.inputV2.error {
border: 1px solid #ff2d3d !important
}
input[type=checkbox].inputV2 {
color: #ff2d3d
}
select.inputV2 {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='30' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.25 0.75L4 4.25L0.75 0.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-position: 100%;
background-repeat: no-repeat
}
.formField label {
display: flex;
flex-direction: column;
gap: 10px
}
.formField .error-message {
color: #ff2d3d;
font-size: 13px;
margin-top: 5px
}
.countryDropdown {
border: 1px solid #393e56 !important;
background-color: #2f3045;
border-radius: 10px;
height: 42px;
padding: 0 10px;
color: #787ead;
font-family: "Poppins";
display: inline-block
}
.countryDropdown .dropdown-trigger {
display: flex
}
.inputV2-wrapper {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #393e56 !important;
background-color: #2f3045;
border-radius: 10px;
height: 42px;
position: relative
}
.inputV2-wrapper .icon-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px
}
.inputV2-wrapper .icon-left svg,.inputV2-wrapper .icon-left img {
display: block
}
.inputV2-wrapper input[type=text].inputV2,.inputV2-wrapper input[type=password].inputV2 {
padding-left: 40px
}
.checkboxV2 div.checkmark {
width: 18px;
height: 18px;
border: 1px solid #cbcbdf;
border-radius: 4px;
cursor: pointer
}
.checkboxV2 div.checkmark svg {
opacity: 0
}
.checkboxV2 input[type=checkbox]:focus+div.checkmark {
border-color: #01d676
}
.checkboxV2 input[type=checkbox]:focus+div.checkmark svg {
opacity: 1
}
.checkboxV2 input[type=checkbox]:checked+div.checkmark {
border-radius: 4px;
background-color: #01d676;
border-color: #01d676
}
.checkboxV2 input[type=checkbox]:checked+div.checkmark svg {
opacity: 1
}
.checkboxV2 label {
color: #a9a8cd
}
.validator-tooltip {
z-index: 6
}
.validator-tooltip .tooltip-inner {
background-color: #ff2d3d;
color: white;
font-size: 12px
}
.validator-tooltip .tooltip-arrow::before {
border-top-color: #ff2d3d
}
.jackpot-page {
font-family: "Poppins",sans-serif;
padding: 24px
}
.jackpot-page .jackpot-hero {
padding: 48px 0;
background-image: url("/public/img/jackpot/hero-img.png");
background-size: 600px;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: center
}
.jackpot-footer-disclaimer,.slot-footer-disclaimer {
background-color: #1d1e30
}
.jackpot-footer-disclaimer .disclaimer-text,.slot-footer-disclaimer .disclaimer-text {
padding: 14px 10px;
text-align: center
}
.jackpot-footer-disclaimer .disclaimer-text a,.slot-footer-disclaimer .disclaimer-text a {
color: #01d676
}
.jackpot-footer-disclaimer hr,.slot-footer-disclaimer hr {
margin: 0;
border: 0;
border-bottom: 1px solid #3d3d51
}
.survey-screenout-modal {
max-width: 412px;
max-height: 90%;
padding: 24px 24px 32px 24px;
font-family: "Poppins";
top: 50% !important;
transform: scaleX(1) scaleY(1) translateY(-50%) !important
}
.survey-screenout-modal--successed {
background-image: url(/public/img/surveys/ribbons.png);
background-size: contain;
background-repeat: no-repeat;
overflow-y: hidden
}
.survey-screenout-modal--successed::before {
content: "";
background-image: url(/public/img/surveys/higlite-vector.png);
background-repeat: no-repeat;
background-position-x: center;
width: 70%;
height: 300px;
display: block;
background-size: cover;
position: absolute;
bottom: -49px;
left: 72px
}
@media only screen and (max-width: 700px) {
.survey-screenout-modal {
width:100%
}
}
.survey-screenout-modal .modal-body {
position: relative;
padding-top: 16px;
text-align: center
}
.survey-screenout-modal .modal-body .screenout-close-btn {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
border: 1.25px solid #2f3043;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center
}
@media only screen and (max-width: 700px) {
.survey-screenout-modal .modal-body .screenout-close-btn {
width:32px;
height: 32px
}
}
.survey-screenout-modal .modal-body .screenout-icon {
margin-bottom: 15px
}
@media only screen and (max-width: 700px) {
.survey-screenout-modal .modal-body .screenout-icon svg {
width:36px;
height: 36px
}
}
.survey-screenout-modal .modal-body .screenout-title {
font-weight: 700;
font-size: 20px;
letter-spacing: .01em;
color: #fff;
margin-bottom: 12px
}
.survey-screenout-modal .modal-body .screenout-title.mb38 {
margin-bottom: 38px
}
@media only screen and (max-width: 700px) {
.survey-screenout-modal .modal-body .screenout-title {
font-size:16px
}
}
.survey-screenout-modal .modal-body .screenout-desc {
max-width: 332px;
font-weight: 500;
font-size: 14px;
color: #a9a9ca;
opacity: .6;
margin-bottom: 40px
}
.survey-screenout-modal .modal-body .screenout-reward-heading {
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: center
}
.survey-screenout-modal .modal-body .screenout-reward-heading svg {
margin-right: 5px
}
.survey-screenout-modal .modal-body .screenout-reward-heading span {
font-weight: 500;
font-size: 14px;
color: #a9a9ca
}
.survey-screenout-modal .modal-body .screenout-reward {
margin-bottom: 30px
}
.survey-screenout-modal .modal-body .screenout-reward--highlited {
background-image: url(/public/img/surveys/higlite-vector.png)
}
.survey-screenout-modal .modal-body .screenout-reward span {
font-weight: 500;
font-size: 32px;
color: #fff;
margin-left: 8px
}
.survey-screenout-modal .modal-body .screenout-btn {
width: 100%;
height: 48px;
background: #01d676;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
letter-spacing: .01em;
color: #000
}
.survey-screenout-modal .modal-body .screenout-btn:hover {
background-color: #01d676;
text-transform: none
}
@keyframes subtle-floating {
0% {
transform: translateY(0)
}
50% {
transform: translateY(var(--subtle-animation-offset,-10px))
}
100% {
transform: translateY(0)
}
}
@keyframes appear {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fly-in {
0% {
transform: translateY(100%);
opacity: 0
}
100% {
transform: translateY(0);
opacity: 1
}
}
@keyframes fly-out {
0% {
transform: translateY(0);
opacity: 1
}
100% {
transform: translateY(100%);
opacity: 0
}
}
.homeLite {
--color-secondary: #ccd;
--color-text: #a9a9ca;
--color-border: #1d1e31;
--main-bg: #141524;
--panel-bg: #1d1e31;
--swiper-pagination-bullet-size: 10px;
--swiper-pagination-bullet-inactive-color: #1d1e31;
--swiper-pagination-bullet-inactive-opacity: 1;
--swiper-pagination-color: white;
--border-color: #2f3043;
--btn-radius: 8px;
--space: 12px;
--space-lg: 24px;
font-family: "Poppins";
font-size: 14px;
background-color: var(--main-bg);
color: var(--color-text);
line-height: 150%;
text-align: center
}
.homeLite em {
color: #01d676;
font-style: normal
}
.homeLite section {
margin: 0 auto 50px auto
}
@media only screen and (min-width: 1200px) {
.homeLite section {
margin:0 auto 100px auto
}
}
.homeLite h2 {
font-size: 20px;
font-weight: 700;
color: #fff;
margin-block-start:0;margin-top: 0
}
.homeLite p {
margin-top: 0
}
.homeLite .tag {
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
color: #fff;
font-weight: bold
}
.homeLite .tag.tag--premium {
background-color: #01d676
}
.homeLite .tag.tag--gray {
background: rgba(20,21,35,0.6)
}
@media only screen and (min-width: 701px) and (max-width:1199px) {
.homeLite .faq-body,.homeLite .best-way-to-earn-grid,.homeLite .get-started-wrapper {
max-width:450px;
margin: auto
}
}
.homeLite .accordion-item {
font-weight: 600;
background-color: #242537;
border-radius: 6px;
width: 100%;
cursor: pointer;
text-align: left
}
.homeLite .accordion-item summary {
display: flex;
align-items: start;
transition: color .2s ease-out;
padding: 12px 16px
}
.homeLite .accordion-item summary:focus {
outline: 0
}
.homeLite .accordion-item summary span:not(:first-child) {
margin-left: 8px
}
.homeLite .accordion-item summary span:not(:first-child).chevron {
margin-left: auto
}
.homeLite .accordion-item .chevron {
display: inline-block;
position: relative;
top: 6px;
width: 6px;
height: 5.4px;
border-top: 1.5px solid #a9a9ca;
border-right: 1.5px solid #a9a9ca;
transform: rotate(135deg);
transition: transform .2s ease-out
}
.homeLite .accordion-item:not(:last-child) {
margin-bottom: 8px
}
.homeLite .accordion-item .content {
padding: 0 16px 12px 16px;
font-size: 12px;
color: white
}
.homeLite .accordion-item.accordion-opened {
background-color: #1a3037
}
.homeLite .accordion-item.accordion-opened summary {
color: #01d676
}
.homeLite .accordion-item.accordion-opened .chevron {
transform: rotate(-45deg)
}
.homeLite .section-title {
font-weight: bold;
margin-top: 0;
margin-bottom: 32px;
font-size: 20px;
line-height: 150%
}
@media only screen and (min-width: 1200px) {
.homeLite .section-title {
font-size:46px;
line-height: 120%;
margin-bottom: 50px
}
}
.homeLite .color-secondary {
color: var(--color-secondary)
}
.homeLite .color-white {
color: #fff
}
.homeLite .scroll-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none
}
.homeLite .scroll-container::-webkit-scrollbar {
display: none
}
.homeLite .snap-scroll {
scroll-snap-type: x mandatory;
overflow-x: scroll;
scroll-behavior: smooth
}
.homeLite .snap-scroll>* {
scroll-snap-align: center
}
.homeLite .dollar-sign {
color: #01d676;
padding-right: 4px
}
.homeLite .earn-card-wrapper {
flex: none;
width: 290px
}
.homeLite .earn-card {
background: #191a2b;
border-radius: 20px;
min-height: 180px;
display: flex;
flex-direction: column;
position: relative
}
.homeLite .earn-card .tag {
position: absolute;
top: 12px;
font-size: 12px;
padding: 5px 8px
}
.homeLite .earn-card .tag--gray {
left: 12px
}
.homeLite .earn-card .tag--premium {
right: 12px
}
.homeLite .earn-card .offer-value {
font-size: 14px;
font-weight: bold;
padding: 10px 8px;
background-color: #22233b;
border-radius: 10px;
display: flex;
align-items: center;
gap: 5px
}
.homeLite .earn-card .earn-card-img {
height: 160px;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px
}
.homeLite .earn-card .earn-card-footer {
padding: 0 10px;
flex-wrap: nowrap;
min-height: 62px
}
.homeLite .earn-card .earn-card-footer>.flex-1 {
width: 60%
}
.homeLite .pay-card {
height: 63px;
border-radius: 16px;
gap: 12px;
display: flex;
align-items: center;
padding: 12px;
background: #2b2b42;
border: 1px solid #1d1e30;
text-align: left;
font-weight: 500;
animation: appear 1s ease;
white-space: nowrap;
overflow: hidden;
flex: none;
transform-origin: left
}
.homeLite .pay-card__avatar {
width: 36px;
height: 36px;
border-radius: 50%
}
.homeLite .pay-card__time {
font-size: 13px;
color: #7d7d9e
}
.homeLite .pay-card__name {
font-weight: 500;
color: white
}
.homeLite .pay-card__body {
display: flex;
gap: 24px;
align-items: center
}
.homeLite .pay-card__amount {
color: white;
padding-right: 12px;
border-right: 1px solid #37384e;
margin-right: 12px;
font-weight: 600
}
.homeLite .pay-card__logo {
width: 24px;
height: 24px
}
.homeLite #home-offers-slider {
padding-bottom: 24px
}
.homeLite #home-offers-slider .swiper-wrapper {
margin-top: 0;
margin-bottom: 0;
transition-timing-function: linear
}
@media only screen and (min-width: 1200px) {
.homeLite #home-offers-slider {
padding-bottom:100px;
padding-left: 24px;
padding-right: 24px
}
}
.homeLite .grid-cols-3 {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
align-items: end
}
@media only screen and (min-width: 1200px) {
.homeLite .grid-cols-3 {
grid-template-columns:repeat(3,1fr)
}
}
.homeLite .divider-with-text {
display: flex;
align-items: center;
justify-content: center;
gap: 10px
}
.homeLite .divider-with-text .divider-left {
flex: 1;
height: 2px;
background: linear-gradient(to right,transparent,#3a3b55)
}
.homeLite .divider-with-text .divider-right {
flex: 1;
height: 2px;
background: linear-gradient(to left,transparent,#3a3b55)
}
.homeLite .register-box {
line-height: 130%;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px
}
.homeLite .register-box .secondaryBtn {
height: 48px
}
.homeLite .register-box .form-title {
font-size: 20px
}
.homeLite .register-box .checkboxes {
padding: 0 10px;
margin: 20px 0;
text-align: left;
display: flex;
flex-direction: column;
gap: 18px
}
.homeLite .register-box .tnc-checkbox-wrapper {
position: relative
}
.homeLite .register-box .tnc-checkbox-wrapper.error::after {
content: "";
position: absolute;
inset: -7px -10px;
border: 1px solid #ff2c3d;
border-radius: 10px;
pointer-events: none
}
.homeLite .register-box a {
color: #01d676
}
.homeLite .register-box .password-reveal {
position: absolute;
right: 10px;
top: 12px
}
.homeLite .hero-wrapper {
background-image: url("/public/img/homepage/hero-bg.png");
background-size: 100vw;
background-position: top center,center center;
background-repeat: no-repeat;
margin-bottom: 0;
padding-top: 72px;
padding-bottom: 103px
}
.homeLite .hero-wrapper .hero-head {
text-align: center;
margin-bottom: 70px
}
@media only screen and (max-width: 700px) {
.homeLite .hero-wrapper .hero-head {
margin-bottom:30px
}
}
.homeLite .hero-wrapper .hero-title {
font-size: 48px;
font-weight: bold;
line-height: 64px;
color: white;
margin-bottom: 8px;
margin-top: 0
}
@media only screen and (max-width: 1199px) {
.homeLite .hero-wrapper .hero-title {
font-size:24px;
line-height: 1.5
}
}
.homeLite .hero-wrapper .hero-earn {
font-weight: 500;
font-size: 20px;
color: white
}
@media only screen and (max-width: 700px) {
.homeLite .hero-wrapper .hero-earn {
font-size:14px;
margin-top: 20px
}
}
.homeLite .hero-wrapper .hero-section {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 24px;
align-items: center;
padding: 0
}
@media only screen and (min-width: 1200px) {
.homeLite .hero-wrapper .hero-section {
justify-content:space-between
}
}
.homeLite .hero-wrapper .hero-section .hero-body {
max-width: 600px;
font-size: 16px;
color: var(--color-white)
}
.homeLite .hero-wrapper .hero-section .hero-register {
max-width: 438px;
position: relative;
box-shadow: 0 0 14px 0 rgba(1,255,151,0.1490196078);
background-color: var(--panel-bg);
border-radius: 16px;
overflow: hidden
}
@media only screen and (min-width: 1200px) {
.homeLite .hero-wrapper .hero-section .hero-register {
display:block
}
}
.homeLite .hero-wrapper .hero-section .hero-register::before {
content: "";
position: absolute;
inset: 0;
border: 6px solid transparent;
border-image-source: radial-gradient(77.86% 77.86% at 50% 50%,#01ff97 0,rgba(1,255,151,0) 100%);
border-image-slice: 1;
border-image-repeat: round;
pointer-events: none
}
.homeLite .hero-wrapper .hero-section .hero-register::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 14px;
border: 5px solid #1d1e31;
pointer-events: none
}
.homeLite .hero-wrapper .hero-image {
margin: 0 auto;
position: relative
}
@media only screen and (max-width: 700px) {
.homeLite .hero-wrapper .hero-image {
width:100%;
padding-left: 30px
}
}
@media only screen and (max-width: 1199px) {
.homeLite .hero-wrapper {
padding-top:0;
padding-bottom: 10px;
background-image: none
}
}
@media only screen and (max-width: 700px) {
.homeLite .hero-wrapper {
padding-bottom:0;
background: linear-gradient(0,#122c2d,transparent)
}
}
.homeLite .hero-register-mobile {
margin: 50px 20px;
border-radius: 20px;
background-color: #1d1e30
}
.homeLite .game-card-list {
flex-basis: 250px;
gap: 12px;
padding: 0 20px;
justify-content: center
}
.homeLite .game-card-list .game-card {
background-color: #1c1d2f;
border-radius: 8px;
color: #fff;
min-width: 250px;
position: relative;
margin: 0;
transition: filter .3s ease-in-out
}
.homeLite .game-card-list .game-card .card-body {
padding: 12px;
font-size: 12px;
font-weight: 700;
text-align: left
}
.homeLite .game-card-list .game-card .game-thumbnail {
width: 100%
}
.homeLite .game-card-list .game-card .game-card__inner {
display: flex;
gap: 12px
}
.homeLite .faq-section {
display: flex;
flex-wrap: wrap;
gap: var(--space-lg)
}
.homeLite .faq-section>* {
flex: 1
}
.homeLite .faq-section .faq-desc {
display: none;
margin-bottom: 32px;
font-size: 16px
}
.homeLite .faq-section video {
border-radius: 20px
}
.homeLite .faq-section .faq-body .faq-thumbnail {
margin-bottom: var(--space-lg)
}
.homeLite .faq-section .faq-body+.faq-thumbnail {
display: none
}
@media only screen and (min-width: 1200px) {
.homeLite .faq-section {
gap:100px;
flex-direction: row;
flex-wrap: nowrap
}
.homeLite .faq-section .faq-desc {
display: block
}
.homeLite .faq-section .faq-body .faq-thumbnail {
display: none
}
.homeLite .faq-section .faq-body+.faq-thumbnail {
display: block
}
}
.homeLite .recent-payouts-section {
padding: 24px 0;
text-align: center;
border-top: 1px solid var(--color-border);
background-color: #1d1e30
}
.homeLite .recent-payouts-section h2 {
margin-bottom: 24px;
font-size: 20px;
letter-spacing: .01em;
background: linear-gradient(88.75deg,#01a35a -1.07%,#01ff97 100.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
text-shadow: 0 0 14px rgba(1,253,149,0.3)
}
.homeLite .recent-payouts-section .recent-payouts-wrapper {
gap: 12px;
display: flex;
overflow: hidden;
max-height: 142px;
flex-wrap: wrap;
width: calc(100vw + 200px)
}
@media only screen and (min-width: 1200px) {
.homeLite .recent-payouts-section {
border-top:0;
padding: 64px 24px
}
}
.homeLite .best-way-to-earn {
text-align: center
}
.homeLite .best-way-to-earn article {
display: flex;
flex-direction: column;
padding: 30px 24px 0 24px;
background-color: var(--panel-bg);
border-radius: 16px;
font-size: 14px;
overflow: hidden
}
@media only screen and (min-width: 1200px) {
.homeLite .best-way-to-earn article {
height:400px
}
}
.homeLite .best-way-to-earn .best-way-to-earn-img {
width: 80%;
height: 120px;
object-fit: contain;
flex: 1;
display: block;
margin: auto
}
@media only screen and (max-width: 700px) {
.homeLite .best-way-to-earn .best-way-to-earn-img {
max-height:120px
}
}
.homeLite .best-way-to-earn .estimate-earn-per {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
line-height: 45px;
color: #fff
}
.homeLite .best-way-to-earn .subtle-animation-root img {
position: absolute;
z-index: 1;
animation: 3s linear subtle-floating infinite
}
.homeLite .best-way-to-earn .subtle-animation-root img.rok {
width: 40px;
height: auto;
left: 30px;
top: 15px
}
.homeLite .best-way-to-earn .subtle-animation-root img.coc {
width: 45px;
height: auto;
left: 55px;
top: 70px;
animation-delay: 1.5s
}
.homeLite .best-way-to-earn .subtle-animation-root img.coc-char {
width: 120px;
height: auto;
right: 25px;
top: 20px;
animation-delay: .75s
}
.homeLite .best-way-to-earn .subtle-animation-root img.coinbase {
width: 45px;
height: auto;
left: 30px;
top: 30px
}
.homeLite .best-way-to-earn .subtle-animation-root img.binance {
width: 50px;
height: auto;
right: 30px;
top: 60px;
animation-delay: 1.5s
}
.homeLite .best-way-to-earn .subtle-animation-root img.app-1 {
width: 45px;
height: auto;
left: 30px;
top: 50px
}
.homeLite .best-way-to-earn .subtle-animation-root img.app-2 {
width: 50px;
height: auto;
right: 30px;
top: 30px;
animation-delay: 1.5s
}
.homeLite .get-started-section {
padding-bottom: 24px;
border-bottom: 1px solid var(--color-border)
}
.homeLite .get-started-section .get-started-wrapper {
display: flex;
flex-direction: column-reverse
}
@media only screen and (max-width: 700px) {
.homeLite .get-started-section .get-started-wrapper h2 {
font-size:16px
}
}
.homeLite .get-started-section .get-started-wrapper>* {
width: 100%
}
@media only screen and (min-width: 1200px) {
.homeLite .get-started-section .get-started-wrapper {
flex-direction:row;
gap: 60px
}
.homeLite .get-started-section .get-started-wrapper>* {
width: 50%
}
}
.homeLite .get-started-section .get-started-stats {
display: flex;
flex-wrap: nowrap;
justify-content: center
}
.homeLite .get-started-section .get-started-stats>* {
display: flex;
flex-direction: column;
align-items: center
}
.homeLite .get-started-section .value {
color: #01d676;
font-size: 20px;
font-weight: bold;
line-height: 30px;
margin-bottom: 16px
}
.homeLite .get-started-section .stats-register {
padding-right: 24px
}
.homeLite .get-started-section .stats-earned {
padding-left: 24px;
border-left: 1px solid #2f3043
}
@media only screen and (max-width: 1399px) {
.homeLite .get-started-section .get-started-stats {
padding-top:24px;
padding-bottom: 24px;
margin-bottom: 24px
}
}
@media only screen and (min-width: 1200px) {
.homeLite .get-started-section {
border-bottom:0
}
.homeLite .get-started-section .get-started-stats {
background-color: #1d1e30;
border-radius: 20px;
padding: 68px
}
}
.homeLite .view-on-section {
padding: 24px 0;
text-align: center;
border-bottom: 1px solid var(--color-border);
margin-bottom: 0
}
.homeLite .view-on-section .item {
opacity: 0;
transform: translateY(25px);
transition: opacity .3s ease-in-out,transform .3s ease-in-out
}
.homeLite .view-on-section .item.sliding-up {
opacity: 1;
transform: translateY(0)
}
@media only screen and (min-width: 1440px) {
.homeLite .view-on-section {
max-width:1400px
}
}
.homeLite .view-on-section h2 {
font-size: 14px
}
.homeLite .view-on-section .view-on-wrapper {
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 0 24px;
margin-top: 35
}
.homeLite .view-on-section .view-on-wrapper svg {
overflow: visible;
height: 24px;
fill: #9897b9
}
@media only screen and (max-width: 700px) {
.homeLite .view-on-section .view-on-wrapper svg {
max-width:130px;
height: 32px
}
}
@media only screen and (min-width: 1200px) {
.homeLite .view-on-section {
border-bottom:0;
padding: 64px 0
}
.homeLite .view-on-section h2 {
font-size: 20px
}
.homeLite .view-on-section .view-on-wrapper {
gap: 50px
}
.homeLite .view-on-section .view-on-wrapper a {
flex: none
}
.homeLite .view-on-section .view-on-wrapper svg {
width: auto;
height: 40px;
max-width: 130px
}
.homeLite .view-on-section .recommended-by-wrapper {
gap: 30px
}
}
.homeLite .testimonials-section {
background: linear-gradient(180deg,#1d1e30 0,rgba(29,30,48,0) 100%);
padding-top: 70px
}
.homeLite .testimonials-section .testimonial-head {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
gap: var(--space-lg);
margin-bottom: 64px
}
.homeLite .testimonials-section .testimonial-head .review-point {
font-weight: 700;
font-size: 96px;
line-height: 112px;
color: #01d676;
position: relative
}
.homeLite .testimonials-section .testimonial-head img {
max-width: 240px
}
.homeLite .testimonials-section .testimonial-head strong {
color: white
}
@media only screen and (max-width: 1199px) {
.homeLite .testimonials-section .testimonial-head .review-point:before {
content:"";
display: block;
width: 100%;
position: absolute;
height: 100%;
background-color: #01d676;
filter: blur(92px);
opacity: .4
}
}
.homeLite .testimonials-section .summary-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px
}
.homeLite .testimonials-section .summary-card .tp-logo {
max-width: 102px
}
.homeLite .testimonials-section .review-card {
color: white;
text-align: left;
display: flex;
flex-direction: column;
padding: 24px;
border-radius: 16px;
min-height: 260px;
background: rgba(29,30,48,0.6);
height: 100%;
box-sizing: border-box;
border: 1px dashed #212134;
backdrop-filter: blur(8px)
}
.homeLite .testimonials-section .review-card>img {
max-width: 108px
}
.homeLite .testimonials-section .review-card .tp-stars {
width: 100px;
height: auto
}
.homeLite .testimonials-section .review-card .review-title {
font-weight: 500;
font-size: 16px;
margin: 16px 0
}
.homeLite .testimonials-section .review-card .review-text {
color: #ccccdf;
line-clamp: 4;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 10px;
flex: 1
}
.homeLite .testimonials-section .review-card .review-author {
text-transform: capitalize
}
.homeLite .testimonials-section #home-testimonial-slider {
width: 100%;
padding-left: 20px
}
.homeLite .testimonials-section #home-testimonial-slider .swiper-wrapper {
margin-top: 0;
gap: 16px
}
.homeLite .testimonials-section #home-testimonial-slider .swiper-slide {
flex-basis: 260px;
min-height: 236px;
max-width: 260px
}
.homeLite .testimonials-section .home-testimonial-navigation {
width: 240px;
margin: auto
}
.homeLite .testimonials-section .home-testimonial-navigation .swiper-pagination {
top: 30px
}
.homeLite .testimonials-section .home-testimonial-navigation .swiper-button-next,.homeLite .testimonials-section .home-testimonial-navigation .swiper-button-prev {
top: 40px;
width: 40px
}
.homeLite .testimonials-section .home-testimonial-navigation .swiper-button-next button,.homeLite .testimonials-section .home-testimonial-navigation .swiper-button-prev button {
background-color: #242538;
border-radius: 5px;
padding: 10px;
color: #ccccdf;
width: 100%
}
.homeLite .testimonials-section .home-testimonial-navigation .swiper-button-next::after,.homeLite .testimonials-section .home-testimonial-navigation .swiper-button-prev::after {
content: none
}
@media only screen and (min-width: 1200px) {
.homeLite .testimonials-section .testimonial-head {
gap:40px;
flex-direction: row
}
.homeLite .testimonials-section .testimonial-head .review-point {
font-size: 200px;
line-height: 220px
}
}
@media only screen and (min-width: 1200px) {
.homeLite {
text-align:left
}
}
.homeLite .mobile-auth-toggle {
margin-top: 16px;
width: 342px
}
.homeLite .mobile-auth-toggle button {
padding: 10px;
height: 50px;
width: 100%;
color: var(--gray-200);
font-weight: bold;
background-color: #2f3045
}
.homeLite .mobile-auth-toggle button.active {
background-color: #01d676;
color: white;
z-index: 1
}
.homeLite .mobile-auth-toggle .open-register-modal {
position: relative;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px
}
.homeLite .mobile-auth-toggle .open-register-modal:after {
content: "";
position: absolute;
top: 0;
right: -25px;
width: 0;
height: 0;
border-top: 50px solid #01d676;
border-right: 25px solid transparent
}
.homeLite .mobile-auth-toggle .login-btn {
position: relative;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px
}
.homeLite .mobile-auth-toggle .login-btn:after {
content: "";
position: absolute;
top: 0;
left: -25px;
width: 0;
height: 0;
border-bottom: 50px solid #01d676;
border-left: 25px solid transparent
}
.homeLite .step-section {
margin-bottom: 0;
padding-top: 32px
}
.homeLite .step-section .animatable {
transform: translateY(100px);
opacity: 0;
transition: opacity .5s ease-in-out,transform .5s ease-in-out
}
.homeLite .step-section .animatable.sliding-up {
transform: translateY(0);
opacity: 1
}
@media only screen and (max-width: 700px) {
.homeLite .step-section .open-register-modal {
display:none
}
}
.homeLite .step-section p {
font-size: 16px;
font-weight: 500;
line-height: 1.5;
color: #ccd
}
@media only screen and (max-width: 700px) {
.homeLite .step-section p {
font-size:14px
}
}
.homeLite .step-section .section-title {
margin-bottom: 24px
}
@media only screen and (max-width: 700px) {
.homeLite .step-section .section-title {
font-size:24px
}
}
.homeLite .step-section .section-highlight {
color: #01d676
}
.homeLite .step-section .section-wrapper {
display: flex;
flex-wrap: nowrap;
gap: 100px;
align-items: center;
justify-content: space-between;
max-width: 90vw
}
@media only screen and (min-width: 1440px) {
.homeLite .step-section .section-wrapper {
max-width:1400px
}
}
@media only screen and (max-width: 700px) {
.homeLite .step-section .section-wrapper {
width:100%;
max-width: 100%;
flex-direction: column !important;
gap: 0
}
}
.homeLite .step-section.new-opp-section {
background-color: #1d1e30
}
.homeLite .step-section.new-opp-section .section-wrapper {
flex-direction: row-reverse
}
.homeLite .step-section .section-image img {
width: 400px;
display: block
}
@media only screen and (max-width: 700px) {
.homeLite .step-section .section-image img {
width:100%;
transform: translateX(18px) scale(0.8);
transform-origin: bottom center;
margin-top: 15px
}
}
.homeLite .bottom-sticky-cta-wrapper {
display: block;
position: fixed;
bottom: 90px;
z-index: 10;
left: 0;
right: 0
}
.homeLite .bottom-sticky-cta-wrapper .section-cta {
width: calc(100% - 48px)
}
.homeLite .bottom-sticky-cta-wrapper .fly-in {
display: initial;
animation: fly-in .5s ease-in-out forwards
}
.homeLite .bottom-sticky-cta-wrapper .fly-out {
animation: fly-out .5s ease-in-out forwards;
pointer-events: none;
display: none
}
@media only screen and (min-width: 1200px) {
.homeLite .bottom-sticky-cta-wrapper {
display:none
}
}
.homeLite .bottom-desktop-cta {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 50px;
margin-bottom: 0
}
.homeLite .bottom-desktop-cta .section-cta {
margin-top: 0
}
.homeLite .section-cta {
background: linear-gradient(92.42deg,#01d676 16.18%,#ffd600 95.83%);
border-radius: 8px;
text-transform: capitalize;
min-width: 267px;
margin-top: 50px;
position: relative;
z-index: 1;
font-weight: bold
}
.homeLite .section-cta::before {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(92.42deg,#01d676 16.18%,#ffd600 95.83%);
transform: translate3d(0,35px,0) scale(0.95);
height: 20px;
opacity: .4;
filter: blur(15px);
border-radius: inherit;
pointer-events: none
}
.homeLite .slider-left-right-fading {
position: absolute;
inset: 0;
background: linear-gradient(45deg,rgba(20,21,36,0.7607843137) 10%,transparent 50%,rgba(20,21,36,0.7607843137));
z-index: 10;
pointer-events: none
}
@media only screen and (max-width: 700px) {
.homeLite .slider-left-right-fading {
display:none
}
}
.homeLite .inputV2-wrapper {
border: none !important
}
.homeLite .inputV2-wrapper .inputV2 {
border: none !important
}
#auth-form-container.homeLite {
background-color: transparent;
padding-bottom: 24px
}
#auth-form-container.homeLite div.error input {
border-color: red !important
}
#auth-form-container.homeLite .form-title {
font-size: 24px
}
#auth-form-container.homeLite #loginSubmit {
margin-top: 24px
}
#auth-form-container.homeLite .register-box {
padding: 0
}
@media only screen and (min-width: 701px) {
#auth-form-container.homeLite {
width:400px
}
}
#devicesSelectionModal {
max-width: 550px
}
#devicesSelectionModal .modalTitle {
margin: 0;
margin-bottom: 32px
}
#devicesSelectionModal .modal-close {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
float: right;
left: 0;
bottom: 0;
border: 1px solid #5a5a5a;
color: #5a5a5a
}
#devicesSelectionModal .headline {
font-size: 24px;
font-weight: 700;
margin-bottom: 32px
}
#devicesSelectionModal .device-name {
font-size: 14px
}
#devicesSelectionModal .device-item {
display: flex;
padding: 12px 24px;
background-color: #33334c;
color: white;
justify-content: space-between;
border-radius: 8px;
cursor: pointer;
font-weight: 500
}
#devicesSelectionModal .device-item:not(:last-child) {
margin-bottom: 12px
}
#devicesSelectionModal .device-item .device-checkbox {
height: 18px;
line-height: 18px
}
#devicesSelectionModal .device-item .device-checkbox::before {
border-radius: 50%
}
#devicesSelectionModal .device-item [type=checkbox]:checked+span.device-checkbox::before {
top: unset;
left: 0;
width: 18px;
height: 18px;
transform: none;
border: 0;
background-color: #01d676
}
#devicesSelectionModal .device-item .device-name {
margin-left: auto
}
#devicesSelectionModal .device-item .device-icon {
display: inline-flex;
gap: 10px;
align-items: center
}
#litePremiumOffer {
max-width: 500px
}
.user-level-label>img {
width: 20px;
height: 20px
}
.user-level-label>span {
font-size: 14px;
font-weight: 500;
margin-left: -2px
}
.user-level-label>img.adjusted {
margin-right: -3px;
margin-left: -1px;
width: 29px;
height: 29px
}
#userProfileModal:not(.modProfile) .user-level-label>img {
width: 16px;
height: 16px
}
#userProfileModal:not(.modProfile) .user-level-label>img.adjusted {
width: 20px;
height: 20px
}
#userProfileModal:not(.modProfile) .user-level-label>span {
font-size: 12px
}
.userProfilePage .user-level-label>img {
width: 20px;
height: 20px
}
@media only screen and (max-width: 700px) {
.userProfilePage .user-level-label>img {
width:16px;
height: 16px
}
}
.userProfilePage .user-level-label>span {
font-size: 14px;
font-weight: 500;
margin-left: -2px
}
@media only screen and (max-width: 700px) {
.userProfilePage .user-level-label>span {
font-size:12px
}
}
.userProfilePage .user-level-label>img.adjusted {
margin-right: -3px;
margin-left: -1px;
width: 29px;
height: 29px
}
@media only screen and (max-width: 700px) {
.userProfilePage .user-level-label>img.adjusted {
width:24px;
height: 24px
}
}
.level-color-0 {
color: #01d676
}
.level-color-1 {
color: #01d676
}
.level-color-2 {
color: #ff7576
}
.level-color-3 {
color: #d7d7d7
}
.level-color-4 {
color: #ffd436
}
.level-color-5 {
color: #01d676
}
.level-color-6 {
color: #ff7576
}
.level-color-7 {
color: #d7d7d7
}
.level-color-8 {
color: #ffd436
}
.level-color-9 {
color: #01d676
}
.level-color-10 {
color: #ff7576
}
.level-color-11 {
color: #d7d7d7
}
.level-color-12 {
color: #ffd436
}
.level-color-13 {
color: #e6ad01
}
.airtmUsernameSection {
margin-top: 30px;
background: #24253d;
border: 1px solid rgba(142,148,193,0.25);
box-shadow: 0 4px 9px rgba(0,0,0,0.07);
border-radius: 3px;
padding-top: 25px;
padding-bottom: 20px
}
.airtmUsernameSection .withdrawAddressSectionRow {
margin: 0
}
.airtmUsernameSection .airtmSectionInfo {
position: relative;
padding: 6px 0 15px 0;
left: 15px
}
.airtmUsernameSection .airtmSectionInfo .airtmHighlightedText {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 14px;
color: #00ff79
}
.airtmUsernameSection .airtmSectionInfo .airtmSubText {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-size: 11px;
line-height: 14px;
color: #01d676
}
.airtmTopRow .withdrawInfoBox {
margin-bottom: 0
}
.airtmTopRow .withdrawInfoBox span {
color: #01d676
}
.airtmTopRow .withdrawInfoBox span a {
color: #01d676;
text-decoration: underline !important
}
#airtmWithdrawPage .withdrawCheckoutPrice {
display: flex;
align-items: center;
gap: 5px
}
#airtmWithdrawPage .withdrawCheckoutPrice img {
top: 0
}
#airtmWithdrawPage .withdrawCheckoutPriceIcon {
height: 16px;
position: relative;
top: 5px
}
#airtmWithdrawPage .cryptoCheckoutTotal {
color: #fdc045
}
.stakeFaucetContainer {
max-width: 520px;
font-family: Poppins;
margin-bottom: 30px;
line-height: 20px
}
.stakeFaucetContainer .stakeFaucetTitleRow {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 700;
margin-bottom: 16px
}
.rewards-section .sidebar-area .top-wins-area {
padding: 15px;
background: #242A3B;
border-radius: 19px;
margin-bottom: 26px!important;
}
.withdraw-area .single-items {
background: #242938;
border: 1px solid #525C79;
border-radius: 20px;
padding: 40px 30px;
margin-top: 30px;
margin-bottom: 26px;
}
/*end earn page*/
/*offers modal*/
.device-filter.selected::before {
content: "\2713"; /* Unicode checkmark character */
float: right;
color: green;
margin-left: 5px;
}
/* Style the dropdown menu container */
/* Style the dropdown menu container */
.dropdown-menu {
background-color: #212134; /* Dark background color */
border: none; /* Remove default border */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
border-radius: 5px; /* Rounded corners */
padding: 10px 0; /* Add padding to menu items */
}
/* Style the dropdown items */
.dropdown-item {
color: #fff; /* White text color */
padding: 8px 20px; /* Add padding to items */
transition: background-color 0.3s; /* Smooth transition for background color */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add a 3D effect to text */
}
/* Base styles */
.profile img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
}
.text-area.text-start h5 {
text-align: center !important;
}
.text-area.text-start h5 {
text-align: center !important;
}
.latest-activites .col-sm-6 .single-box {
padding: 15px 10px;
background: #2E3549;
margin: 0 10px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.latest-activites .col-md-4 .single-box {
display: grid;
align-content: stretch;
justify-content: center;
align-items: baseline;
justify-items: stretch;
}
.apexcharts-tooltip.apexcharts-theme-light {
color: #1e1f30;
background: rgba(30, 30, 30, 0.8);
}
.table {
color: #e9eaec;
}
.status-indicator {
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #000a15;
}
.online {
background-color: #4caf50; /* Green color for online */
}
.offlines {
background-color: #f44336; /* Red color for offline */
}
.font-medium.text-slate-700 {
color: #fff;
font-size: 0.8rem; /* Adjust the font size as needed */
}
/* Media query for smaller screens */
@media screen and (max-width: 600px) {
.font-medium.text-slate-700 {
font-size: 0.8rem; /* Adjust the font size for smaller screens */
}
}
/* Style the hover effect */
.dropdown-item:hover {
background-color: #141523; /* Change background color on hover (blue) */
color: #fff; /* Text color for hover */
}
/* Style the selected item */
.dropdown-item.selected {
background-color: #141523; /* Highlight the selected item (blue) */
color: #fff; /* Text color for selected item */
}
/* Style the "All Offers" item differently */
.dropdown-item[data-device="all"] {
font-weight: bold; /* Make "All Offers" bold */
color: #a9a9ca; /* Gray text color for "All Offers" */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add a 3D effect to text */
}
/* Style the "All Offers" item on hover */
.dropdown-item[data-device="all"]:hover {
background-color: #a9a9ca; /* Change background color on hover (dark) */
}
/* Styles for the notification badge */
.badge {
display: inline-block;
padding: 4px 8px;
font-size: 14px;
font-weight: bold;
border-radius: 15px;
}
/* Styles for the warning badge */
.badge-warning {
background-color: #097002; /* Yellow color */
color: #fff; /* Text color */
}
/* Styles for the bell icon */
.bell-icon {
width: 24px;
height: 24px;
}
.custom-modal-btn {
width: 482px;
height: 72px;
background: #f28801;
padding: 18px 200px;
color: #282F41;
position: relative;
z-index: 0;
border-radius: 14px;
font-size: 16px;
font-weight: 700;
transition: 0.3s;
}
*,
:after,
:before {
/* border: 0 solid #292b43;*/
box-sizing: border-box
}
html {
-webkit-text-size-adjust: 100%;
font-feature-settings: normal;
font-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
line-height: 1.5;
tab-size: 4
}
body {
line-height: inherit;
margin: 0
}
hr {
border-top-width: 1px;
color: inherit;
height: 0
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
.dark .app-preloader .app-preloader-inner:after,
.dark .app-preloader .app-preloader-inner:before {
background-color: rgba(105, 122, 155, .5)
}
.app-preloader .app-preloader-inner:after,
.app-preloader .app-preloader-inner:before {
animation: spinner-grow 3s cubic-bezier(.55, .15, .45, .85) infinite
}
.app-preloader .app-preloader-inner:after {
animation-delay: -1.5s
}
.menu-toggle span {
--tw-translate-x: 0px;
background-color: currentColor;
height: 2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transition-duration: .15s;
transition-duration: .25s;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
width: 1.25rem
}
.menu-toggle span:nth-child(2) {
width: .75rem
}
.menu-toggle.active span {
--tw-translate-x: -0.5rem;
margin-left: .5rem;
width: 11px
}
.menu-toggle.active span,
.menu-toggle.active span:first-child {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.menu-toggle.active span:first-child {
--tw-rotate: -45deg
}
.menu-toggle.active span:nth-child(2) {
display: none
}
.menu-toggle.active span:nth-child(3) {
--tw-rotate: 45deg
}
.main-sidebar,
.menu-toggle.active span:nth-child(3) {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.main-sidebar {
--tw-translate-x: -100%;
flex-shrink: 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transition-duration: .2s;
transition-property: transform;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, 1, 1);
width: var(--main-sidebar-width);
z-index: 40
}
@media (min-width:768px) {
.main-sidebar {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
z-index: 60
}
}
.is-sidebar-open .main-sidebar {
--tw-translate-x: 0px
}
.is-sidebar-open .main-sidebar,
.sidebar-panel {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.sidebar-panel {
--tw-translate-x: -100%;
--tw-shadow: 0 3px 10px 0 rgb(48 46 56/6%);
--tw-shadow-colored: 0 3px 10px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
height: 100%;
left: 0;
position: fixed;
top: 0;
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transition-delay: .15s;
transition-duration: .15s;
transition-duration: .25s;
transition-property: transform;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, 1, 1);
width: calc(var(--main-sidebar-width) + var(--sidebar-panel-width));
z-index: 30
}
.dark .sidebar-panel {
--tw-shadow-color: rgba(25, 33, 50, .6);
--tw-shadow: var(--tw-shadow-colored)
}
@media (min-width:768px) {
.sidebar-panel {
transition-delay: unset
}
}
.is-sidebar-open .sidebar-panel {
--tw-translate-x: 0px;
transition-timing-function: cubic-bezier(0, 0, .2, 1)
}
.is-sidebar-open .sidebar-panel,
.sidebar-panel-min {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.sidebar-panel-min {
--tw-translate-x: -100%;
--tw-shadow: 0 3px 10px 0 rgb(48 46 56/6%);
--tw-shadow-colored: 0 3px 10px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
flex-shrink: 0;
height: 100%;
position: fixed;
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transition-duration: .15s;
transition-duration: .25s;
transition-property: transform;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, 1, 1);
width: var(--sidebar-panel-min-width);
z-index: 40
}
.dark .sidebar-panel-min {
--tw-shadow-color: rgba(25, 33, 50, .6);
--tw-shadow: var(--tw-shadow-colored)
}
@media (min-width:768px) {
.sidebar-panel-min {
--tw-translate-x: var(--main-sidebar-width);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
}
.is-sidebar-open .sidebar-panel-min {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
nav.header {
border-bottom-width: 1px;
border-color: #292b43;
display: flex;
height: 61px;
position: fixed;
right: 0;
top: 0;
transition-duration: .15s;
transition-duration: .25s;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
width: 100%;
z-index: 20
}
.dark nav.header {
border-color: #26334d
}
@media (min-width:768px) {
nav.header {
width: calc(100% - var(--main-sidebar-width))
}
}
nav.header:before {
--tw-content: "";
background-color: #1d1e30;
border-bottom: solid 1px #292b43;
content: var(--tw-content);
height: 101%;
left: calc(-100vw - -100%);
position: absolute;
width: calc(100vw - 100%);
}
.dark nav.header:before {
background-color: #222e45
}
nav.header .header-container {
padding-left: var(--margin-x);
padding-right: var(--margin-x);
transition-duration: .15s;
transition-duration: .25s;
transition-property: padding, width;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
@media (min-width:768px) {
.has-min-sidebar nav.header {
width: calc(100% - var(--main-sidebar-width) - var(--sidebar-panel-min-width))
}
}
@media (min-width:1280px) {
.is-sidebar-open nav.header {
width: calc(100% - var(--main-sidebar-width) - var(--sidebar-panel-width))
}
}
.is-header-blur nav.header .header-container {
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
@supports ((-webkit-backdrop-filter:var(--tw)) or (backdrop-filter:var(--tw))) {
.is-header-blur nav.header .header-container {
background: #1d1e30;
}
.dark .is-header-blur nav.header .header-container {
background-color: rgba(34, 46, 69, .8) !important
}
}
.ts-control>input::-ms-clear {
display: none
}
.ts-control>input:focus {
outline: none !important
}
.has-items .ts-control>input {
margin: 0 4px !important
}
.ts-control.rtl {
text-align: right
}
.ts-control.rtl.single .ts-control:after {
left: 15px;
right: auto
}
.ts-control.rtl .ts-control>input {
margin: 0 4px 0 -2px !important
}
.disabled .ts-control {
background-color: #fafafa;
opacity: .5
}
.input-hidden .ts-control>input {
left: -10000px;
opacity: 0;
position: absolute
}
.ts-dropdown {
background: #fff;
border: 1px solid #d0d0d0;
border-radius: 0 0 3px 3px;
border-top: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
box-sizing: border-box;
left: 0;
margin: .25rem 0 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 10
}
.ts-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden
}
.ts-dropdown [data-selectable] .highlight {
background: rgba(125, 168, 208, .2);
border-radius: 1px
}
.ts-dropdown .create,
.ts-dropdown .no-results,
.ts-dropdown .optgroup-header,
.ts-dropdown .option {
padding: 5px 8px
}
.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
cursor: inherit;
opacity: .5
}
.ts-dropdown [data-selectable].option {
cursor: pointer;
opacity: 1
}
.ts-dropdown .optgroup:first-child .optgroup-header {
border-top: 0
}
.ts-dropdown .optgroup-header {
background: #fff;
color: #303030;
cursor: default
}
.ts-dropdown .active {
background-color: #f5fafd;
color: #495c68
}
.ts-dropdown .active.create {
color: #495c68
}
.ts-dropdown .create {
color: rgba(48, 48, 48, .5)
}
.ts-dropdown .spinner {
display: inline-block;
height: 30px;
margin: 5px 8px;
width: 30px
}
.ts-dropdown .spinner:after {
animation: lds-dual-ring 1.2s linear infinite;
border-color: #d0d0d0 transparent;
border-radius: 50%;
border-style: solid;
border-width: 5px;
content: " ";
display: block;
height: 24px;
margin: 3px;
width: 24px
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
.ts-dropdown-content {
overflow-scrolling: touch;
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth
}
.ts-hidden-accessible {
clip: rect(0 0 0 0) !important;
border: 0 !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important
}
.ts-control {
border-color: #2e314b;
border-radius: .5rem;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-weight: 500;
outline: 2px solid transparent;
outline-offset: 2px;
padding: .5rem .75rem;
transition-duration: .3s;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.ts-control:hover {
border-color: #94a3b8
}
.dark .ts-control {
background-color: #26334d;
border-color: #465675;
color: #c2c9d6
}
.dark .ts-control:hover {
border-color: #5c6b8a
}
.input-active .ts-control {
border-color: #4f46e5
}
.dark .input-active .ts-control {
border-color: #5f5af6
}
.ts-control,
.ts-control input,
.ts-dropdown {
color: #475569;
font-size: .875rem;
line-height: 1.25rem;
line-height: 1.5
}
.ts-control input::-moz-placeholder,
.ts-control::-moz-placeholder,
.ts-dropdown::-moz-placeholder {
color: rgba(148, 163, 184, .7)
}
.ts-control input::placeholder,
.ts-control::placeholder,
.ts-dropdown::placeholder {
color: rgba(148, 163, 184, .7)
}
.dark .ts-control,
.dark .ts-control input,
.dark .ts-dropdown {
color: #c2c9d6
}
.ts-wrapper.multi .ts-control>div {
background-color: #e9eef5;
border-radius: .25rem;
color: #1e293b
}
.dark .ts-wrapper.multi .ts-control>div {
background-color: #384766;
color: #e7e9ef
}
.ts-dropdown {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
border-color: #e9eef5;
border-radius: .375rem;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
overflow: hidden
}
.dark .ts-dropdown {
background-color: #26334d;
border-color: #313e59
}
.ts-dropdown .create {
color: #475569
}
.dark .ts-dropdown .create {
color: #c2c9d6
}
.ts-dropdown .active,
.ts-dropdown .create:hover,
.ts-dropdown .option:hover {
background-color: #4f46e5;
color: #fff
}
.dark .ts-dropdown .active,
.dark .ts-dropdown .create:hover,
.dark .ts-dropdown .option:hover {
background-color: #5f5af6
}
.ts-dropdown .active.create,
.ts-dropdown .create.create:hover,
.ts-dropdown .option.create:hover {
color: #fff
}
.ts-wrapper.plugin-remove_button .item .remove {
border-color: #cbd5e1
}
.dark .ts-wrapper.plugin-remove_button .item .remove {
border-color: #5c6b8a
}
.ts-control,
.ts-wrapper.single.input-active .ts-control {
background-color: transparent
}
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath stroke='%235C6B8A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
background-position: 50%;
background-position: right .5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.25rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact
}
.btn {
align-items: center;
border-radius: .5rem;
color: #e5e5e5;
cursor: pointer;
display: inline-flex;
justify-content: center;
letter-spacing: .025em;
padding: .5rem 1.25rem;
text-align: center;
transition-duration: .2s;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.btn,
.btn:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.btn:disabled {
pointer-events: none
}
.badge,
.tag {
align-items: center;
border-radius: .25rem;
display: inline-flex;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-size: .75rem;
font-weight: 500;
justify-content: center;
letter-spacing: .025em;
line-height: 1rem;
line-height: 1;
padding: .375rem .5rem;
transition-duration: .2s;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
vertical-align: baseline
}
.tag {
cursor: pointer
}
[data-simplebar] {
align-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
position: relative
}
.simplebar-wrapper {
height: inherit;
max-height: inherit;
max-width: inherit;
overflow: hidden;
width: inherit
}
.simplebar-mask {
direction: inherit;
height: auto !important;
overflow: hidden;
width: auto !important;
z-index: 0
}
.simplebar-mask,
.simplebar-offset {
bottom: 0;
left: 0;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0
}
.simplebar-offset {
-webkit-overflow-scrolling: touch;
box-sizing: inherit !important;
direction: inherit !important;
resize: none !important
}
.simplebar-content-wrapper {
-ms-overflow-style: none;
box-sizing: border-box !important;
direction: inherit;
display: block;
height: 100%;
max-height: 100%;
max-width: 100%;
position: relative;
scrollbar-width: none;
width: auto
}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
display: none;
height: 0;
width: 0
}
.simplebar-content:after,
.simplebar-content:before {
content: " ";
display: table
}
.simplebar-placeholder {
max-height: 100%;
max-width: 100%;
pointer-events: none;
width: 100%
}
.simplebar-height-auto-observer-wrapper {
box-sizing: inherit !important;
flex-basis: 0;
flex-grow: inherit;
flex-shrink: 0;
float: left;
height: 100%;
margin: 0;
max-height: 1px;
max-width: 1px;
overflow: hidden;
padding: 0;
pointer-events: none;
position: relative;
width: 100%;
z-index: -1
}
.simplebar-height-auto-observer {
box-sizing: inherit;
display: block;
height: 1000%;
left: 0;
min-height: 1px;
min-width: 1px;
opacity: 0;
top: 0;
width: 1000%;
z-index: -1
}
.simplebar-height-auto-observer,
.simplebar-track {
overflow: hidden;
pointer-events: none;
position: absolute
}
.simplebar-track {
bottom: 0;
right: 0;
z-index: 1
}
[data-simplebar].simplebar-dragging .simplebar-content {
pointer-events: none;
-moz-user-select: none;
user-select: none;
-webkit-user-select: none
}
[data-simplebar].simplebar-dragging .simplebar-track {
pointer-events: all
}
.simplebar-scrollbar {
left: 0;
min-height: 10px;
position: absolute;
right: 0
}
.simplebar-scrollbar:before {
background: #000;
border-radius: 7px;
content: "";
left: 2px;
opacity: 0;
position: absolute;
right: 2px;
transition: opacity .2s linear
}
.simplebar-scrollbar.simplebar-visible:before {
opacity: .5;
transition: opacity 0s linear
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
bottom: 2px;
top: 2px
}
.simplebar-track.simplebar-horizontal {
height: 11px;
left: 0
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
height: 100%;
left: 2px;
right: 2px
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
height: 7px;
left: 0;
min-height: 0;
min-width: 10px;
right: auto;
top: 2px;
width: auto
}
[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
left: 0;
right: auto
}
.hs-dummy-scrollbar-size {
direction: rtl;
height: 500px;
opacity: 0;
overflow-x: scroll;
overflow-y: hidden;
position: fixed;
visibility: hidden;
width: 500px
}
.simplebar-hide-scrollbar {
-ms-overflow-style: none;
left: 0;
overflow-y: scroll;
position: fixed;
scrollbar-width: none;
visibility: hidden
}
.simplebar-scrollbar:before {
background-color: rgba(203, 213, 225, .8)
}
.dark .simplebar-scrollbar:before {
background-color: #5c6b8a
}
.simplebar-content-wrapper {
outline: 2px solid transparent;
outline-offset: 2px
}
.progress {
border-radius: 9999px;
display: flex;
overflow: hidden;
position: relative;
width: 100%
}
.progress .is-indeterminate {
animation: progress-increase 2s cubic-bezier(.4, 0, .2, 1) infinite
}
.progress .is-active:before {
--tw-content: "";
animation: progress-active 2s cubic-bezier(.55, .2, .3, .67) infinite;
background-color: #fff;
border-radius: .25rem;
bottom: 0;
content: var(--tw-content);
left: 0;
position: absolute;
right: 0;
top: 0
}
@keyframes progress-increase {
0% {
left: -5%;
width: 5%
}
to {
left: 125%;
width: 100%
}
}
@keyframes progress-active {
0% {
opacity: .4;
transform: translateX(-100%)
}
to {
opacity: 0;
transform: translateX(0)
}
}
.mask {
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain
}
.mask.is-squircle {
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='none'%3E%3Cpath fill='%23000' d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='none'%3E%3Cpath fill='%23000' d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0z'/%3E%3C/svg%3E")
}
.mask.is-reuleaux-triangle {
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='207' height='207' fill='none'%3E%3Cpath fill='%23000' d='M138.648 181.408C47.268 232.569 1.327 206.607.824 103.52.324.432 46.014-25.148 137.896 26.777c91.882 51.925 92.133 103.469.753 154.631h-.001z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='207' height='207' fill='none'%3E%3Cpath fill='%23000' d='M138.648 181.408C47.268 232.569 1.327 206.607.824 103.52.324.432 46.014-25.148 137.896 26.777c91.882 51.925 92.133 103.469.753 154.631h-.001z'/%3E%3C/svg%3E")
}
.mask.is-diamond {
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='227' height='227' fill='none'%3E%3Cpath fill='%23000' d='M42.71 42.71c-56.568 56.57-56.568 84.853 0 141.422 56.57 56.569 84.853 56.569 141.422 0s56.569-84.853 0-141.421c-56.569-56.569-84.853-56.569-141.421 0z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='227' height='227' fill='none'%3E%3Cpath fill='%23000' d='M42.71 42.71c-56.568 56.57-56.568 84.853 0 141.422 56.57 56.569 84.853 56.569 141.422 0s56.569-84.853 0-141.421c-56.569-56.569-84.853-56.569-141.421 0z'/%3E%3C/svg%3E")
}
.mask.is-hexagon {
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='182' height='201' fill='none'%3E%3Cpath fill='%23000' d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0l-61.86-35.945C6.151 157.44.3 145.737.3 136.54V65.486z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='182' height='201' fill='none'%3E%3Cpath fill='%23000' d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0l-61.86-35.945C6.151 157.44.3 145.737.3 136.54V65.486z'/%3E%3C/svg%3E")
}
.mask.is-hexagon-2 {
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='182' fill='none'%3E%3Cpath fill='%23000' d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='182' fill='none'%3E%3Cpath fill='%23000' d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786z'/%3E%3C/svg%3E")
}
.mask.is-octagon {
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='198' height='198' fill='none'%3E%3Cpath fill='%23000' d='M91.346 2.17a20 20 0 0 1 15.308 0l55.403 22.95a20 20 0 0 1 10.824 10.823l22.949 55.403a20.004 20.004 0 0 1 0 15.308l-22.949 55.403a20.006 20.006 0 0 1-10.824 10.824l-55.403 22.949a20.004 20.004 0 0 1-15.308 0l-55.403-22.949a20 20 0 0 1-10.824-10.824L2.17 106.654a20 20 0 0 1 0-15.308l22.95-55.403a20 20 0 0 1 10.823-10.824L91.346 2.17z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='198' height='198' fill='none'%3E%3Cpath fill='%23000' d='M91.346 2.17a20 20 0 0 1 15.308 0l55.403 22.95a20 20 0 0 1 10.824 10.823l22.949 55.403a20.004 20.004 0 0 1 0 15.308l-22.949 55.403a20.006 20.006 0 0 1-10.824 10.824l-55.403 22.949a20.004 20.004 0 0 1-15.308 0l-55.403-22.949a20 20 0 0 1-10.824-10.824L2.17 106.654a20 20 0 0 1 0-15.308l22.95-55.403a20 20 0 0 1 10.823-10.824L91.346 2.17z'/%3E%3C/svg%3E")
}
.mask.is-star {
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none'%3E%3Cpath fill='%23000' d='M82.39 2.111a14 14 0 0 1 14.568 0l10.401 6.337a14 14 0 0 0 7.613 2.04l12.176-.287a14.003 14.003 0 0 1 12.616 7.283l5.839 10.688a14.005 14.005 0 0 0 5.573 5.574l10.688 5.84a14.001 14.001 0 0 1 7.284 12.615l-.287 12.175a14.004 14.004 0 0 0 2.04 7.614l6.336 10.4a14 14 0 0 1 0 14.568l-6.336 10.401a14 14 0 0 0-2.04 7.613l.287 12.176a14.002 14.002 0 0 1-7.284 12.616l-10.688 5.839a14.005 14.005 0 0 0-5.573 5.573l-5.839 10.688a14.003 14.003 0 0 1-12.616 7.284l-12.176-.287a14 14 0 0 0-7.613 2.04l-10.401 6.336a13.998 13.998 0 0 1-14.567 0l-10.401-6.336a14.004 14.004 0 0 0-7.614-2.04l-12.175.287a13.994 13.994 0 0 1-12.616-7.284l-5.84-10.688a14.004 14.004 0 0 0-5.573-5.573l-10.688-5.839a14.001 14.001 0 0 1-7.283-12.616l.287-12.176a14 14 0 0 0-2.04-7.613L2.11 96.958a14 14 0 0 1 0-14.567L8.448 71.99a14 14 0 0 0 2.04-7.614L10.2 52.201a13.998 13.998 0 0 1 7.283-12.616l10.688-5.84a14 14 0 0 0 5.574-5.573l5.84-10.688A14 14 0 0 1 52.2 10.201l12.175.287a14 14 0 0 0 7.614-2.04l10.4-6.337h.001z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none'%3E%3Cpath fill='%23000' d='M82.39 2.111a14 14 0 0 1 14.568 0l10.401 6.337a14 14 0 0 0 7.613 2.04l12.176-.287a14.003 14.003 0 0 1 12.616 7.283l5.839 10.688a14.005 14.005 0 0 0 5.573 5.574l10.688 5.84a14.001 14.001 0 0 1 7.284 12.615l-.287 12.175a14.004 14.004 0 0 0 2.04 7.614l6.336 10.4a14 14 0 0 1 0 14.568l-6.336 10.401a14 14 0 0 0-2.04 7.613l.287 12.176a14.002 14.002 0 0 1-7.284 12.616l-10.688 5.839a14.005 14.005 0 0 0-5.573 5.573l-5.839 10.688a14.003 14.003 0 0 1-12.616 7.284l-12.176-.287a14 14 0 0 0-7.613 2.04l-10.401 6.336a13.998 13.998 0 0 1-14.567 0l-10.401-6.336a14.004 14.004 0 0 0-7.614-2.04l-12.175.287a13.994 13.994 0 0 1-12.616-7.284l-5.84-10.688a14.004 14.004 0 0 0-5.573-5.573l-10.688-5.839a14.001 14.001 0 0 1-7.283-12.616l.287-12.176a14 14 0 0 0-2.04-7.613L2.11 96.958a14 14 0 0 1 0-14.567L8.448 71.99a14 14 0 0 0 2.04-7.614L10.2 52.201a13.998 13.998 0 0 1 7.283-12.616l10.688-5.84a14 14 0 0 0 5.574-5.573l5.84-10.688A14 14 0 0 1 52.2 10.201l12.175.287a14 14 0 0 0 7.614-2.04l10.4-6.337h.001z'/%3E%3C/svg%3E")
}
.mask.is-star-2 {
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='187' height='187' fill='none'%3E%3Cpath fill='%23000' d='M81.518 3.291a24.647 24.647 0 0 1 23.93 0l18.134 10.07a24.65 24.65 0 0 0 5.188 2.148l19.943 5.703a24.645 24.645 0 0 1 16.921 16.921l5.702 19.942a24.665 24.665 0 0 0 2.15 5.189l10.068 18.134a24.64 24.64 0 0 1 0 23.93l-10.068 18.134a24.66 24.66 0 0 0-2.15 5.188l-5.702 19.943a24.64 24.64 0 0 1-6.27 10.651 24.638 24.638 0 0 1-10.651 6.269l-19.943 5.703a24.66 24.66 0 0 0-5.188 2.15l-18.134 10.068a24.644 24.644 0 0 1-23.93 0l-18.134-10.068a24.663 24.663 0 0 0-5.188-2.15l-19.943-5.703a24.641 24.641 0 0 1-16.921-16.92L15.63 128.65a24.635 24.635 0 0 0-2.149-5.188l-10.07-18.134a24.651 24.651 0 0 1 0-23.93l10.07-18.134a24.644 24.644 0 0 0 2.148-5.188l5.704-19.943a24.647 24.647 0 0 1 16.92-16.921l19.943-5.703a24.655 24.655 0 0 0 5.188-2.148L81.518 3.29z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='187' height='187' fill='none'%3E%3Cpath fill='%23000' d='M81.518 3.291a24.647 24.647 0 0 1 23.93 0l18.134 10.07a24.65 24.65 0 0 0 5.188 2.148l19.943 5.703a24.645 24.645 0 0 1 16.921 16.921l5.702 19.942a24.665 24.665 0 0 0 2.15 5.189l10.068 18.134a24.64 24.64 0 0 1 0 23.93l-10.068 18.134a24.66 24.66 0 0 0-2.15 5.188l-5.702 19.943a24.64 24.64 0 0 1-6.27 10.651 24.638 24.638 0 0 1-10.651 6.269l-19.943 5.703a24.66 24.66 0 0 0-5.188 2.15l-18.134 10.068a24.644 24.644 0 0 1-23.93 0l-18.134-10.068a24.663 24.663 0 0 0-5.188-2.15l-19.943-5.703a24.641 24.641 0 0 1-16.921-16.92L15.63 128.65a24.635 24.635 0 0 0-2.149-5.188l-10.07-18.134a24.651 24.651 0 0 1 0-23.93l10.07-18.134a24.644 24.644 0 0 0 2.148-5.188l5.704-19.943a24.647 24.647 0 0 1 16.92-16.921l19.943-5.703a24.655 24.655 0 0 0 5.188-2.148L81.518 3.29z'/%3E%3C/svg%3E")
}
.mask.is-heart {
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='185' fill='none'%3E%3Cpath fill='%23000' d='M100 184.606a15.382 15.382 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.388 15.388 0 0 1-8.653 2.673z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='185' fill='none'%3E%3Cpath fill='%23000' d='M100 184.606a15.382 15.382 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.388 15.388 0 0 1-8.653 2.673z'/%3E%3C/svg%3E")
}
.tippy-box[data-animation=fade][data-state=hidden] {
opacity: 0
}
[data-tippy-root] {
max-width: calc(100vw - 10px)
}
.tippy-box {
background-color: #333;
border-radius: 4px;
color: #fff;
font-size: 14px;
line-height: 1.4;
outline: 0;
position: relative;
transition-property: transform, visibility, opacity;
white-space: normal
}
.tippy-box[data-placement^=top]>.tippy-arrow {
bottom: 0
}
.tippy-box[data-placement^=top]>.tippy-arrow:before {
border-top-color: initial;
border-width: 8px 8px 0;
bottom: -7px;
left: 0;
transform-origin: center top
}
.tippy-box[data-placement^=bottom]>.tippy-arrow {
top: 0
}
.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
border-bottom-color: initial;
border-width: 0 8px 8px;
left: 0;
top: -7px;
transform-origin: center bottom
}
.tippy-box[data-placement^=left]>.tippy-arrow {
right: 0
}
.tippy-box[data-placement^=left]>.tippy-arrow:before {
border-left-color: initial;
border-width: 8px 0 8px 8px;
right: -7px;
transform-origin: center left
}
.tippy-box[data-placement^=right]>.tippy-arrow {
left: 0
}
.tippy-box[data-placement^=right]>.tippy-arrow:before {
border-right-color: initial;
border-width: 8px 8px 8px 0;
left: -7px;
transform-origin: center right
}
.tippy-box[data-inertia][data-state=visible] {
transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}
.tippy-arrow {
color: #333;
height: 16px;
width: 16px
}
.tippy-arrow:before {
border-color: transparent;
border-style: solid;
content: "";
position: absolute
}
.tippy-content {
padding: 5px 9px;
position: relative;
z-index: 1
}
.tippy-box[data-placement^=top]>.tippy-svg-arrow {
bottom: 0
}
.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,
.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg {
top: 16px;
transform: rotate(180deg)
}
.tippy-box[data-placement^=bottom]>.tippy-svg-arrow {
top: 0
}
.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg {
bottom: 16px
}
.tippy-box[data-placement^=left]>.tippy-svg-arrow {
right: 0
}
.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,
.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg {
left: 11px;
top: calc(50% - 3px);
transform: rotate(90deg)
}
.tippy-box[data-placement^=right]>.tippy-svg-arrow {
left: 0
}
.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,
.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg {
right: 11px;
top: calc(50% - 3px);
transform: rotate(-90deg)
}
.tippy-svg-arrow {
fill: #333;
height: 16px;
text-align: initial;
width: 16px
}
.tippy-svg-arrow,
.tippy-svg-arrow>svg {
position: absolute
}
.tippy-box[data-animation=shift-away][data-state=hidden] {
opacity: 0
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top] {
transform: translateY(10px)
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom] {
transform: translateY(-10px)
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left] {
transform: translateX(10px)
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right] {
transform: translateX(-10px)
}
.tippy-box {
background-color: #e9eef5;
color: #1e293b
}
.dark .tippy-box {
background-color: #384766;
color: #e7e9ef
}
.tippy-svg-arrow svg {
fill: currentColor;
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
color: #e9eef5
}
.dark .tippy-svg-arrow svg {
color: #384766
}
.tippy-box[data-theme~=content] .tippy-content {
padding: 0
}
.tippy-box[data-theme~=primary] {
background-color: #4f46e5;
color: #fff
}
.dark .tippy-box[data-theme~=primary] {
background-color: #5f5af6
}
.tippy-box[data-theme~=primary]>.tippy-svg-arrow svg {
color: #4f46e5
}
.dark .tippy-box[data-theme~=primary]>.tippy-svg-arrow svg {
color: #5f5af6
}
.tippy-box[data-theme~=secondary] {
background-color: #f000b9;
color: #fff
}
.tippy-box[data-theme~=secondary]>.tippy-svg-arrow svg {
color: #f000b9
}
.tippy-box[data-theme~=info] {
background-color: #0ea5e9;
color: #fff
}
.tippy-box[data-theme~=info]>.tippy-svg-arrow svg {
color: #0ea5e9
}
.tippy-box[data-theme~=success] {
background-color: #10b981;
color: #fff
}
.tippy-box[data-theme~=success]>.tippy-svg-arrow svg {
color: #10b981
}
.tippy-box[data-theme~=warning] {
background-color: #ff9800;
color: #fff
}
.tippy-box[data-theme~=warning]>.tippy-svg-arrow svg {
color: #ff9800
}
.tippy-box[data-theme~=error] {
background-color: #ed1d49;
color: #fff
}
.tippy-box[data-theme~=error]>.tippy-svg-arrow svg {
color: #ed1d49
}
.tippy-box[data-theme~=light] {
background-color: #e9eef5;
color: #475569
}
.tippy-box[data-theme~=light]>.tippy-svg-arrow svg {
color: #e9eef5
}
/*!
* FilePond 4.30.4
* Licensed under MIT, https://opensource.org/licenses/MIT/
* Please visit https://pqina.nl/filepond/ for details.
*/
.filepond--assistant {
clip: rect(1px, 1px, 1px, 1px);
border: 0;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px
}
.filepond--browser.filepond--browser {
font-size: 0;
left: 1em;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 1.75em;
width: calc(100% - 2em)
}
.filepond--data {
border: none;
contain: strict;
height: 0;
margin: 0;
padding: 0;
visibility: hidden;
width: 0
}
.filepond--data,
.filepond--drip {
pointer-events: none;
position: absolute
}
.filepond--drip {
background: rgba(0, 0, 0, .01);
border-radius: .5em;
bottom: 0;
left: 0;
opacity: .1;
overflow: hidden;
right: 0;
top: 0
}
.filepond--drip-blob {
background: #292625;
border-radius: 50%;
height: 8em;
margin-left: -4em;
margin-top: -4em;
-webkit-transform-origin: center center;
transform-origin: center center;
width: 8em
}
.filepond--drip-blob,
.filepond--drop-label {
left: 0;
position: absolute;
top: 0;
will-change: transform, opacity
}
.filepond--drop-label {
align-items: center;
color: #4f4f4f;
display: flex;
height: 0;
justify-content: center;
margin: 0;
right: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.filepond--drop-label.filepond--drop-label label {
display: block;
margin: 0;
padding: .5em
}
.filepond--drop-label label {
cursor: default;
font-size: .875em;
font-weight: 400;
line-height: 1.5;
text-align: center
}
.filepond--label-action {
-webkit-text-decoration-skip: ink;
cursor: pointer;
text-decoration: underline;
-webkit-text-decoration-color: #a7a4a4;
text-decoration-color: #a7a4a4;
text-decoration-skip-ink: auto
}
.filepond--root[data-disabled] .filepond--drop-label label {
opacity: .5
}
.filepond--file-action-button.filepond--file-action-button {
border: none;
font-family: inherit;
font-size: 1em;
height: 1.625em;
line-height: inherit;
margin: 0;
outline: none;
padding: 0;
width: 1.625em;
will-change: transform, opacity
}
.filepond--file-action-button.filepond--file-action-button span {
clip: rect(1px, 1px, 1px, 1px);
border: 0;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px
}
.filepond--file-action-button.filepond--file-action-button svg {
height: 100%;
width: 100%
}
.filepond--file-action-button.filepond--file-action-button:after {
bottom: -.75em;
content: "";
left: -.75em;
position: absolute;
right: -.75em;
top: -.75em
}
.filepond--file-action-button {
background-color: rgba(0, 0, 0, .5);
background-image: none;
border-radius: 50%;
box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 0);
color: #fff;
cursor: auto;
transition: box-shadow .25s ease-in
}
.filepond--file-action-button:focus,
.filepond--file-action-button:hover {
box-shadow: 0 0 0 .125em hsla(0, 0%, 100%, .9)
}
.filepond--file-action-button[disabled] {
background-color: rgba(0, 0, 0, .25);
color: hsla(0, 0%, 100%, .5)
}
.filepond--file-action-button[hidden] {
display: none
}
.filepond--action-edit-item.filepond--action-edit-item {
height: 2em;
padding: .1875em;
width: 2em
}
.filepond--action-edit-item.filepond--action-edit-item[data-align*=center] {
margin-left: -.1875em
}
.filepond--action-edit-item.filepond--action-edit-item[data-align*=bottom] {
margin-bottom: -.1875em
}
.filepond--action-edit-item-alt {
background: transparent;
border: none;
color: inherit;
font-family: inherit;
line-height: inherit;
margin: 0 0 0 .25em;
outline: none;
padding: 0;
pointer-events: all;
position: absolute
}
.filepond--action-edit-item-alt svg {
height: 1.3125em;
width: 1.3125em
}
.filepond--action-edit-item-alt span {
font-size: 0;
opacity: 0
}
.filepond--file-info {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
margin: 0 .5em 0 0;
min-width: 0;
pointer-events: none;
position: static;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
will-change: transform, opacity
}
.filepond--file-info * {
margin: 0
}
.filepond--file-info .filepond--file-info-main {
font-size: .75em;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%
}
.filepond--file-info .filepond--file-info-sub {
font-size: .625em;
opacity: .5;
transition: opacity .25s ease-in-out;
white-space: nowrap
}
.filepond--file-info .filepond--file-info-sub:empty {
display: none
}
.filepond--file-status {
align-items: flex-end;
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
margin: 0;
min-width: 2.25em;
pointer-events: none;
position: static;
text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
will-change: transform, opacity
}
.filepond--file-status * {
margin: 0;
white-space: nowrap
}
.filepond--file-status .filepond--file-status-main {
font-size: .75em;
line-height: 1.2
}
.filepond--file-status .filepond--file-status-sub {
font-size: .625em;
opacity: .5;
transition: opacity .25s ease-in-out
}
.filepond--file-wrapper.filepond--file-wrapper {
border: none;
height: 100%;
margin: 0;
min-width: 0;
padding: 0
}
.filepond--file-wrapper.filepond--file-wrapper>legend {
clip: rect(1px, 1px, 1px, 1px);
border: 0;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px
}
.filepond--file {
align-items: flex-start;
border-radius: .5em;
color: #fff;
display: flex;
height: 100%;
padding: .5625em;
position: static
}
.filepond--file .filepond--file-status {
margin-left: auto;
margin-right: 2.25em
}
.filepond--file .filepond--processing-complete-indicator {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 3
}
.filepond--file .filepond--file-action-button,
.filepond--file .filepond--processing-complete-indicator,
.filepond--file .filepond--progress-indicator {
position: absolute
}
.filepond--file [data-align*=left] {
left: .5625em
}
.filepond--file [data-align*=right] {
right: .5625em
}
.filepond--file [data-align*=center] {
left: calc(50% - .8125em)
}
.filepond--file [data-align*=bottom] {
bottom: 1.125em
}
.filepond--file [data-align=center] {
top: calc(50% - .8125em)
}
.filepond--file .filepond--progress-indicator {
margin-top: .1875em
}
.filepond--file .filepond--progress-indicator[data-align*=right] {
margin-right: .1875em
}
.filepond--file .filepond--progress-indicator[data-align*=left] {
margin-left: .1875em
}
[data-filepond-item-state*=error] .filepond--file-info,
[data-filepond-item-state*=invalid] .filepond--file-info,
[data-filepond-item-state=cancelled] .filepond--file-info {
margin-right: 2.25em
}
[data-filepond-item-state~=processing] .filepond--file-status-sub {
opacity: 0
}
[data-filepond-item-state~=processing] .filepond--action-abort-item-processing~.filepond--file-status .filepond--file-status-sub {
opacity: .5
}
[data-filepond-item-state=processing-error] .filepond--file-status-sub {
opacity: 0
}
[data-filepond-item-state=processing-error] .filepond--action-retry-item-processing~.filepond--file-status .filepond--file-status-sub {
opacity: .5
}
[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing svg {
-webkit-animation: fall .5s linear .125s both;
animation: fall .5s linear .125s both
}
[data-filepond-item-state=processing-complete] .filepond--file-status-sub {
opacity: .5
}
[data-filepond-item-state=processing-complete] .filepond--file-info-sub,
[data-filepond-item-state=processing-complete] .filepond--processing-complete-indicator:not([style*=hidden])~.filepond--file-status .filepond--file-status-sub {
opacity: 0
}
[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing~.filepond--file-info .filepond--file-info-sub {
opacity: .5
}
[data-filepond-item-state*=error] .filepond--file-wrapper,
[data-filepond-item-state*=error] .filepond--panel,
[data-filepond-item-state*=invalid] .filepond--file-wrapper,
[data-filepond-item-state*=invalid] .filepond--panel {
-webkit-animation: shake .65s linear both;
animation: shake .65s linear both
}
[data-filepond-item-state*=busy] .filepond--progress-indicator svg {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@-webkit-keyframes shake {
10%,
90% {
-webkit-transform: translateX(-.0625em);
transform: translateX(-.0625em)
}
20%,
80% {
-webkit-transform: translateX(.125em);
transform: translateX(.125em)
}
30%,
50%,
70% {
-webkit-transform: translateX(-.25em);
transform: translateX(-.25em)
}
40%,
60% {
-webkit-transform: translateX(.25em);
transform: translateX(.25em)
}
}
@keyframes shake {
10%,
90% {
-webkit-transform: translateX(-.0625em);
transform: translateX(-.0625em)
}
20%,
80% {
-webkit-transform: translateX(.125em);
transform: translateX(.125em)
}
30%,
50%,
70% {
-webkit-transform: translateX(-.25em);
transform: translateX(-.25em)
}
40%,
60% {
-webkit-transform: translateX(.25em);
transform: translateX(.25em)
}
}
@-webkit-keyframes fall {
0% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
70% {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
to {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes fall {
0% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
70% {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
to {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: scale(1);
transform: scale(1)
}
}
.filepond--hopper[data-hopper-state=drag-over]>* {
pointer-events: none
}
.filepond--hopper[data-hopper-state=drag-over]:after {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 100
}
.filepond--progress-indicator {
z-index: 103
}
.filepond--file-action-button {
z-index: 102
}
.filepond--file-status {
z-index: 101
}
.filepond--file-info {
z-index: 100
}
.filepond--item {
left: 0;
margin: .25em;
padding: 0;
position: absolute;
right: 0;
top: 0;
will-change: transform, opacity;
z-index: 1
}
.filepond--item>.filepond--panel {
z-index: -1
}
.filepond--item>.filepond--panel .filepond--panel-bottom {
box-shadow: 0 .0625em .125em -.0625em rgba(0, 0, 0, .25)
}
.filepond--item>.filepond--file-wrapper,
.filepond--item>.filepond--panel {
transition: opacity .15s ease-out
}
.filepond--item[data-drag-state] {
cursor: -webkit-grab;
cursor: grab
}
.filepond--item[data-drag-state]>.filepond--panel {
box-shadow: 0 0 0 transparent;
transition: box-shadow .125s ease-in-out
}
.filepond--item[data-drag-state=drag] {
cursor: -webkit-grabbing;
cursor: grabbing
}
.filepond--item[data-drag-state=drag]>.filepond--panel {
box-shadow: 0 .125em .3125em rgba(0, 0, 0, .325)
}
.filepond--item[data-drag-state]:not([data-drag-state=idle]) {
z-index: 2
}
.filepond--item-panel {
background-color: #64605e
}
[data-filepond-item-state=processing-complete] .filepond--item-panel {
background-color: #369763
}
[data-filepond-item-state*=error] .filepond--item-panel,
[data-filepond-item-state*=invalid] .filepond--item-panel {
background-color: #c44e47
}
.filepond--item-panel {
border-radius: .5em;
transition: background-color .25s
}
.filepond--list-scroller {
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
will-change: transform
}
.filepond--list-scroller[data-state=overflow] .filepond--list {
bottom: 0;
right: 0
}
.filepond--list-scroller[data-state=overflow] {
-webkit-overflow-scrolling: touch;
-webkit-mask: linear-gradient(180deg, #000 calc(100% - .5em), transparent);
mask: linear-gradient(180deg, #000 calc(100% - .5em), transparent);
overflow-x: hidden;
overflow-y: scroll
}
.filepond--list-scroller::-webkit-scrollbar {
background: transparent
}
.filepond--list-scroller::-webkit-scrollbar:vertical {
width: 1em
}
.filepond--list-scroller::-webkit-scrollbar:horizontal {
height: 0
}
.filepond--list-scroller::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color: rgba(0, 0, 0, .3);
border: .3125em solid transparent;
border-radius: 99999px
}
.filepond--list.filepond--list {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
will-change: transform
}
.filepond--list {
left: .75em;
right: .75em
}
.filepond--root[data-style-panel-layout~=integrated] {
height: 100%;
margin: 0;
max-width: none;
width: 100%
}
.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root,
.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root {
border-radius: 0
}
.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root>*,
.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root>* {
display: none
}
.filepond--root[data-style-panel-layout~=circle] .filepond--drop-label,
.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label {
align-items: center;
bottom: 0;
display: flex;
height: auto;
justify-content: center;
z-index: 7
}
.filepond--root[data-style-panel-layout~=circle] .filepond--item-panel,
.filepond--root[data-style-panel-layout~=integrated] .filepond--item-panel {
display: none
}
.filepond--root[data-style-panel-layout~=compact] .filepond--list-scroller,
.filepond--root[data-style-panel-layout~=integrated] .filepond--list-scroller {
height: 100%;
margin-bottom: 0;
margin-top: 0;
overflow: hidden
}
.filepond--root[data-style-panel-layout~=compact] .filepond--list,
.filepond--root[data-style-panel-layout~=integrated] .filepond--list {
height: 100%;
left: 0;
right: 0
}
.filepond--root[data-style-panel-layout~=compact] .filepond--item,
.filepond--root[data-style-panel-layout~=integrated] .filepond--item {
margin: 0
}
.filepond--root[data-style-panel-layout~=compact] .filepond--file-wrapper,
.filepond--root[data-style-panel-layout~=integrated] .filepond--file-wrapper {
height: 100%
}
.filepond--root[data-style-panel-layout~=compact] .filepond--drop-label,
.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label {
z-index: 7
}
.filepond--root[data-style-panel-layout~=circle] {
border-radius: 99999rem;
overflow: hidden
}
.filepond--root[data-style-panel-layout~=circle]>.filepond--panel {
border-radius: inherit
}
.filepond--root[data-style-panel-layout~=circle] .filepond--file-info,
.filepond--root[data-style-panel-layout~=circle] .filepond--file-status,
.filepond--root[data-style-panel-layout~=circle]>.filepond--panel>* {
display: none
}
.filepond--root[data-style-panel-layout~=circle] .filepond--action-edit-item {
opacity: 1 !important;
visibility: visible !important
}
@media not all and (-webkit-min-device-pixel-ratio:0),
not all and (min-resolution:0.001dpcm) {
@supports (-webkit-appearance:none) and (stroke-color:transparent) {
.filepond--root[data-style-panel-layout~=circle] {
will-change: transform
}
}
}
.filepond--panel-root {
background-color: #f1f0ef;
border-radius: .5em
}
.filepond--panel {
height: 100% !important;
left: 0;
margin: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0
}
.filepond-panel:not([data-scalable=false]) {
height: auto !important
}
.filepond--panel[data-scalable=false]>div {
display: none
}
.filepond--panel[data-scalable=true] {
background-color: transparent !important;
border: none !important;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d
}
.filepond--panel-bottom,
.filepond--panel-center,
.filepond--panel-top {
left: 0;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0
}
.filepond--panel-bottom,
.filepond--panel-top {
height: .5em
}
.filepond--panel-top {
border-bottom: none !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important
}
.filepond--panel-top:after {
background-color: inherit;
bottom: -1px;
content: "";
height: 2px;
left: 0;
position: absolute;
right: 0
}
.filepond--panel-bottom,
.filepond--panel-center {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, .5em, 0);
transform: translate3d(0, .5em, 0);
-webkit-transform-origin: left top;
transform-origin: left top;
will-change: transform
}
.filepond--panel-bottom {
border-top: none !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important
}
.filepond--panel-bottom:before {
background-color: inherit;
content: "";
height: 2px;
left: 0;
position: absolute;
right: 0;
top: -1px
}
.filepond--panel-center {
border-bottom: none !important;
border-radius: 0 !important;
border-top: none !important;
height: 100px !important
}
.filepond--panel-center:not([style]) {
visibility: hidden
}
.filepond--progress-indicator {
color: #fff;
height: 1.25em;
margin: 0;
pointer-events: none;
position: static;
width: 1.25em;
will-change: transform, opacity
}
.filepond--progress-indicator svg {
height: 100%;
transform-box: fill-box;
vertical-align: top;
width: 100%
}
.filepond--progress-indicator path {
fill: none;
stroke: currentColor
}
.filepond--list-scroller {
z-index: 6
}
.filepond--drop-label {
z-index: 5
}
.filepond--drip {
z-index: 3
}
.filepond--root>.filepond--panel {
z-index: 2
}
.filepond--browser {
z-index: 1
}
.filepond--root {
box-sizing: border-box;
contain: layout style size;
direction: ltr;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-size: 1rem;
font-weight: 450;
line-height: normal;
margin-bottom: 1em;
position: relative;
text-align: left;
text-rendering: optimizeLegibility
}
.filepond--root * {
box-sizing: inherit;
line-height: inherit
}
.filepond--root :not(text) {
font-size: inherit
}
.filepond--root[data-disabled] {
pointer-events: none
}
.filepond--root[data-disabled] .filepond--list-scroller {
pointer-events: all
}
.filepond--root[data-disabled] .filepond--list {
pointer-events: none
}
.filepond--root .filepond--drop-label {
min-height: 4.75em
}
.filepond--root .filepond--list-scroller {
margin-bottom: 1em;
margin-top: 1em
}
.filepond--root .filepond--credits {
bottom: -14px;
color: inherit;
font-size: 11px;
line-height: .85;
opacity: .175;
position: absolute;
right: 0;
text-decoration: none;
z-index: 3
}
.filepond--root .filepond--credits[style] {
bottom: auto;
margin-top: 14px;
top: 0
}
/*!
* FilePondPluginImagePreview 4.6.11
* Licensed under MIT, https://opensource.org/licenses/MIT/
* Please visit https://pqina.nl/filepond/ for details.
*/
.filepond--image-preview-markup {
left: 0;
position: absolute;
top: 0
}
.filepond--image-preview-wrapper {
z-index: 2
}
.filepond--image-preview-overlay {
display: block;
left: 0;
margin: 0;
max-height: 7rem;
min-height: 5rem;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
z-index: 2
}
.filepond--image-preview-overlay svg {
color: inherit;
height: auto;
max-height: inherit;
width: 100%
}
.filepond--image-preview-overlay-idle {
color: rgba(40, 40, 40, .85);
mix-blend-mode: multiply
}
.filepond--image-preview-overlay-success {
color: #369763;
mix-blend-mode: normal
}
.filepond--image-preview-overlay-failure {
color: #c44e47;
mix-blend-mode: normal
}
@supports (-webkit-marquee-repetition:infinite) and ((-o-object-fit:fill) or (object-fit:fill)) {
.filepond--image-preview-overlay-idle {
mix-blend-mode: normal
}
}
.filepond--image-preview-wrapper {
background: rgba(0, 0, 0, .01);
border-radius: .45em;
height: 100%;
left: 0;
margin: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.filepond--image-preview {
align-items: center;
background: #222;
display: flex;
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
will-change: transform, opacity;
z-index: 1
}
.filepond--image-clip {
margin: 0 auto;
overflow: hidden;
position: relative
}
.filepond--image-clip[data-transparency-indicator=grid] canvas,
.filepond--image-clip[data-transparency-indicator=grid] img {
background-color: #fff;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M0 0h50v50H0M50 50h50v50H50'/%3E%3C/svg%3E");
background-size: 1.25em 1.25em
}
.filepond--image-bitmap,
.filepond--image-vector {
left: 0;
position: absolute;
top: 0;
will-change: transform
}
.filepond--root[data-style-panel-layout~=integrated] .filepond--image-preview-wrapper {
border-radius: 0
}
.filepond--root[data-style-panel-layout~=integrated] .filepond--image-preview {
align-items: center;
display: flex;
height: 100%;
justify-content: center
}
.filepond--root[data-style-panel-layout~=circle] .filepond--image-preview-wrapper {
border-radius: 99999rem
}
.filepond--root[data-style-panel-layout~=circle] .filepond--image-preview-overlay {
bottom: 0;
top: auto;
-webkit-transform: scaleY(-1);
transform: scaleY(-1)
}
.filepond--root[data-style-panel-layout~=circle] .filepond--file .filepond--file-action-button[data-align*=bottom]:not([data-align*=center]) {
margin-bottom: .325em
}
.filepond--root[data-style-panel-layout~=circle] .filepond--file [data-align*=left] {
left: calc(50% - 3em)
}
.filepond--root[data-style-panel-layout~=circle] .filepond--file [data-align*=right] {
right: calc(50% - 3em)
}
.filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=left],
.filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=right] {
margin-bottom: .5125em
}
.filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=center] {
margin-bottom: .1875em;
margin-left: .1875em;
margin-top: 0
}
.filepond {
display: block;
width: 100%
}
.fp-grid {
--fp-grid: 1
}
.filepond--credits {
font-size: .625rem !important;
font-weight: 300 !important;
line-height: .8125rem !important;
opacity: .1 !important
}
.filepond.fp-grid .filepond--item {
width: calc(1/var(--fp-grid)*100% - .5rem)
}
.filepond.fp-bordered .filepond--panel-root {
background-color: transparent;
border: 2px dashed #cbd5e1
}
.dark .filepond.fp-bordered .filepond--panel-root {
border-color: #465675
}
.filepond.fp-bg-filled .filepond--panel-root {
background-color: rgba(233, 238, 245, .8)
}
.dark .filepond.fp-bg-filled .filepond--panel-root {
background-color: rgba(56, 71, 102, .85)
}
.filepond--drop-label label {
color: #475569
}
.dark .filepond--drop-label label {
color: #c2c9d6
}
.filepond.label-icon .filepond--drop-label label {
color: #94a3b8
}
.dark .filepond.label-icon .filepond--drop-label label {
color: #697a9b
}
/*!
* Quill Editor v1.3.7
* https://quilljs.com/
* Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com
*/
.ql-container {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
height: 100%;
margin: 0;
position: relative
}
.ql-container.ql-disabled .ql-tooltip {
visibility: hidden
}
.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before {
pointer-events: none
}
.ql-clipboard {
height: 1px;
left: -100000px;
overflow-y: hidden;
position: absolute;
top: 50%
}
.ql-clipboard p {
margin: 0;
padding: 0
}
.ql-editor {
word-wrap: break-word;
box-sizing: border-box;
height: 100%;
line-height: 1.42;
outline: none;
overflow-y: auto;
padding: 12px 15px;
-o-tab-size: 4;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap
}
.ql-editor>* {
cursor: text
}
.ql-editor ol,
.ql-editor ul {
padding-left: 1.5em
}
.ql-editor ol>li,
.ql-editor ul>li {
list-style-type: none
}
.ql-editor ul>li:before {
content: "\2022"
}
.ql-editor ul[data-checked=false],
.ql-editor ul[data-checked=true] {
pointer-events: none
}
.ql-editor ul[data-checked=false]>li *,
.ql-editor ul[data-checked=true]>li * {
pointer-events: all
}
.ql-editor ul[data-checked=false]>li:before,
.ql-editor ul[data-checked=true]>li:before {
color: #777;
cursor: pointer;
pointer-events: all
}
.ql-editor ul[data-checked=true]>li:before {
content: "\2611"
}
.ql-editor ul[data-checked=false]>li:before {
content: "\2610"
}
.ql-editor li:before {
display: inline-block;
white-space: nowrap;
width: 1.2em
}
.ql-editor li:not(.ql-direction-rtl):before {
margin-left: -1.5em;
margin-right: .3em;
text-align: right
}
.ql-editor li.ql-direction-rtl:before {
margin-left: .3em;
margin-right: -1.5em
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
padding-left: 1.5em
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
padding-right: 1.5em
}
.ql-editor ol li {
counter-increment: list-0;
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
}
.ql-editor ol li:before {
content: counter(list-0, decimal) ". "
}
.ql-editor ol li.ql-indent-1 {
counter-increment: list-1
}
.ql-editor ol li.ql-indent-1:before {
content: counter(list-1, lower-alpha) ". "
}
.ql-editor ol li.ql-indent-1 {
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
}
.ql-editor ol li.ql-indent-2 {
counter-increment: list-2
}
.ql-editor ol li.ql-indent-2:before {
content: counter(list-2, lower-roman) ". "
}
.ql-editor ol li.ql-indent-2 {
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9
}
.ql-editor ol li.ql-indent-3 {
counter-increment: list-3
}
.ql-editor ol li.ql-indent-3:before {
content: counter(list-3, decimal) ". "
}
.ql-editor ol li.ql-indent-3 {
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9
}
.ql-editor ol li.ql-indent-4 {
counter-increment: list-4
}
.ql-editor ol li.ql-indent-4:before {
content: counter(list-4, lower-alpha) ". "
}
.ql-editor ol li.ql-indent-4 {
counter-reset: list-5 list-6 list-7 list-8 list-9
}
.ql-editor ol li.ql-indent-5 {
counter-increment: list-5
}
.ql-editor ol li.ql-indent-5:before {
content: counter(list-5, lower-roman) ". "
}
.ql-editor ol li.ql-indent-5 {
counter-reset: list-6 list-7 list-8 list-9
}
.ql-editor ol li.ql-indent-6 {
counter-increment: list-6
}
.ql-editor ol li.ql-indent-6:before {
content: counter(list-6, decimal) ". "
}
.ql-editor ol li.ql-indent-6 {
counter-reset: list-7 list-8 list-9
}
.ql-editor ol li.ql-indent-7 {
counter-increment: list-7
}
.ql-editor ol li.ql-indent-7:before {
content: counter(list-7, lower-alpha) ". "
}
.ql-editor ol li.ql-indent-7 {
counter-reset: list-8 list-9
}
.ql-editor ol li.ql-indent-8 {
counter-increment: list-8
}
.ql-editor ol li.ql-indent-8:before {
content: counter(list-8, lower-roman) ". "
}
.ql-editor ol li.ql-indent-8 {
counter-reset: list-9
}
.ql-editor ol li.ql-indent-9 {
counter-increment: list-9
}
.ql-editor ol li.ql-indent-9:before {
content: counter(list-9, decimal) ". "
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
padding-left: 3em
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
padding-left: 4.5em
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
padding-right: 3em
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
padding-right: 4.5em
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
padding-left: 6em
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
padding-left: 7.5em
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
padding-right: 6em
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
padding-right: 7.5em
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
padding-left: 9em
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
padding-left: 10.5em
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
padding-right: 9em
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
padding-right: 10.5em
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
padding-left: 12em
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
padding-left: 13.5em
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
padding-right: 12em
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
padding-right: 13.5em
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
padding-left: 15em
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
padding-left: 16.5em
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
padding-right: 15em
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
padding-right: 16.5em
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
padding-left: 18em
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
padding-left: 19.5em
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
padding-right: 18em
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
padding-right: 19.5em
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
padding-left: 21em
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
padding-left: 22.5em
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
padding-right: 21em
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
padding-right: 22.5em
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
padding-left: 24em
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
padding-left: 25.5em
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
padding-right: 24em
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
padding-right: 25.5em
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
padding-left: 27em
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
padding-left: 28.5em
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
padding-right: 27em
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
padding-right: 28.5em
}
.ql-editor .ql-video {
display: block;
max-width: 100%
}
.ql-editor .ql-video.ql-align-center {
margin: 0 auto
}
.ql-editor .ql-video.ql-align-right {
margin: 0 0 0 auto
}
.ql-editor .ql-bg-black {
background-color: #000
}
.ql-editor .ql-bg-red {
background-color: #e60000
}
.ql-editor .ql-bg-orange {
background-color: #f90
}
.ql-editor .ql-bg-yellow {
background-color: #ff0
}
.ql-editor .ql-bg-green {
background-color: #008a00
}
.ql-editor .ql-bg-blue {
background-color: #06c
}
.ql-editor .ql-bg-purple {
background-color: #93f
}
.ql-editor .ql-color-white {
color: #fff
}
.ql-editor .ql-color-red {
color: #e60000
}
.ql-editor .ql-color-orange {
color: #f90
}
.ql-editor .ql-color-yellow {
color: #ff0
}
.ql-editor .ql-color-green {
color: #008a00
}
.ql-editor .ql-color-blue {
color: #06c
}
.ql-editor .ql-color-purple {
color: #93f
}
.ql-editor .ql-font-serif {
font-family: Georgia, Times New Roman, serif
}
.ql-editor .ql-font-monospace {
font-family: Monaco, Courier New, monospace
}
.ql-editor .ql-size-small {
font-size: .75em
}
.ql-editor .ql-size-large {
font-size: 1.5em
}
.ql-editor .ql-size-huge {
font-size: 2.5em
}
.ql-editor .ql-direction-rtl {
direction: rtl;
text-align: inherit
}
.ql-editor .ql-align-center {
text-align: center
}
.ql-editor .ql-align-justify {
text-align: justify
}
.ql-editor .ql-align-right {
text-align: right
}
.ql-editor.ql-blank:before {
color: rgba(0, 0, 0, .6);
content: attr(data-placeholder);
font-style: italic;
left: 15px;
pointer-events: none;
position: absolute;
right: 15px
}
.ql-snow .ql-toolbar:after,
.ql-snow.ql-toolbar:after {
clear: both;
content: "";
display: table
}
.ql-snow .ql-toolbar button,
.ql-snow.ql-toolbar button {
background: none;
border: none;
cursor: pointer;
display: inline-block;
float: left;
height: 24px;
padding: 3px 5px;
width: 28px
}
.ql-snow .ql-toolbar button svg,
.ql-snow.ql-toolbar button svg {
float: left;
height: 100%
}
.ql-snow .ql-toolbar button:active:hover,
.ql-snow.ql-toolbar button:active:hover {
outline: none
}
.ql-snow .ql-toolbar input.ql-image[type=file],
.ql-snow.ql-toolbar input.ql-image[type=file] {
display: none
}
.ql-snow .ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button:focus,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar button:focus,
.ql-snow.ql-toolbar button:hover {
color: #06c
}
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill {
fill: #06c
}
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter {
stroke: #06c
}
@media (pointer:coarse) {
.ql-snow .ql-toolbar button:hover:not(.ql-active),
.ql-snow.ql-toolbar button:hover:not(.ql-active) {
color: #444
}
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
fill: #444
}
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
stroke: #444
}
}
.ql-snow,
.ql-snow * {
box-sizing: border-box
}
.ql-snow .ql-hidden {
display: none
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
visibility: hidden
}
.ql-snow .ql-tooltip {
position: absolute;
transform: translateY(10px)
}
.ql-snow .ql-tooltip a {
cursor: pointer;
text-decoration: none
}
.ql-snow .ql-tooltip.ql-flip {
transform: translateY(-10px)
}
.ql-snow .ql-formats {
display: inline-block;
vertical-align: middle
}
.ql-snow .ql-formats:after {
clear: both;
content: "";
display: table
}
.ql-snow .ql-stroke {
fill: none;
stroke: #444;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2
}
.ql-snow .ql-stroke-miter {
fill: none;
stroke: #444;
stroke-miterlimit: 10;
stroke-width: 2
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
fill: #444
}
.ql-snow .ql-empty {
fill: none
}
.ql-snow .ql-even {
fill-rule: evenodd
}
.ql-snow .ql-stroke.ql-thin,
.ql-snow .ql-thin {
stroke-width: 1
}
.ql-snow .ql-transparent {
opacity: .4
}
.ql-snow .ql-direction svg:last-child {
display: none
}
.ql-snow .ql-direction.ql-active svg:last-child {
display: inline
}
.ql-snow .ql-direction.ql-active svg:first-child {
display: none
}
.ql-snow .ql-editor h1 {
font-size: 2em
}
.ql-snow .ql-editor h2 {
font-size: 1.5em
}
.ql-snow .ql-editor h3 {
font-size: 1.17em
}
.ql-snow .ql-editor h4 {
font-size: 1em
}
.ql-snow .ql-editor h5 {
font-size: .83em
}
.ql-snow .ql-editor h6 {
font-size: .67em
}
.ql-snow .ql-editor a {
text-decoration: underline
}
.ql-snow .ql-editor blockquote {
border-left: 4px solid #ccc;
margin-bottom: 5px;
margin-top: 5px;
padding-left: 16px
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
background-color: #f0f0f0;
border-radius: 3px
}
.ql-snow .ql-editor pre {
margin-bottom: 5px;
margin-top: 5px;
padding: 5px 10px;
white-space: pre-wrap
}
.ql-snow .ql-editor code {
font-size: 85%;
padding: 2px 4px
}
.ql-snow .ql-editor pre.ql-syntax {
background-color: #23241f;
color: #f8f8f2;
overflow: visible
}
.ql-snow .ql-editor img {
max-width: 100%
}
.ql-snow .ql-picker {
color: #444;
display: inline-block;
float: left;
font-size: 14px;
font-weight: 500;
height: 24px;
position: relative;
vertical-align: middle
}
.ql-snow .ql-picker-label {
cursor: pointer;
display: inline-block;
height: 100%;
padding-left: 8px;
padding-right: 2px;
position: relative;
width: 100%
}
.ql-snow .ql-picker-label:before {
display: inline-block;
line-height: 22px
}
.ql-snow .ql-picker-options {
background-color: #fff;
display: none;
min-width: 100%;
padding: 4px 8px;
position: absolute;
white-space: nowrap
}
.ql-snow .ql-picker-options .ql-picker-item {
cursor: pointer;
display: block;
padding-bottom: 5px;
padding-top: 5px
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
color: #ccc;
z-index: 2
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
fill: #ccc
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
stroke: #ccc
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
display: block;
margin-top: -1px;
top: 100%;
z-index: 1
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
width: 28px
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
padding: 2px 4px
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
right: 4px
}
.ql-snow .ql-icon-picker .ql-picker-options {
padding: 4px 0
}
.ql-snow .ql-icon-picker .ql-picker-item {
height: 24px;
padding: 2px 4px;
width: 24px
}
.ql-snow .ql-color-picker .ql-picker-options {
padding: 3px 5px;
width: 152px
}
.ql-snow .ql-color-picker .ql-picker-item {
border: 1px solid transparent;
float: left;
height: 16px;
margin: 2px;
padding: 0;
width: 16px
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
margin-top: -9px;
position: absolute;
right: 0;
top: 50%;
width: 18px
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""]):before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""]):before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""]):before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""]):before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""]):before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""]):before {
content: attr(data-label)
}
.ql-snow .ql-picker.ql-header {
width: 98px
}
.ql-snow .ql-picker.ql-header .ql-picker-item:before,
.ql-snow .ql-picker.ql-header .ql-picker-label:before {
content: "Normal"
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]:before {
content: "Heading 1"
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]:before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]:before {
content: "Heading 2"
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]:before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]:before {
content: "Heading 3"
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]:before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]:before {
content: "Heading 4"
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]:before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]:before {
content: "Heading 5"
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]:before,
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]:before {
content: "Heading 6"
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before {
font-size: 2em
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]:before {
font-size: 1.5em
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]:before {
font-size: 1.17em
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]:before {
font-size: 1em
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]:before {
font-size: .83em
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]:before {
font-size: .67em
}
.ql-snow .ql-picker.ql-font {
width: 108px
}
.ql-snow .ql-picker.ql-font .ql-picker-item:before,
.ql-snow .ql-picker.ql-font .ql-picker-label:before {
content: "Sans Serif"
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before {
content: "Serif"
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before {
content: "Monospace"
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before {
font-family: Georgia, Times New Roman, serif
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before {
font-family: Monaco, Courier New, monospace
}
.ql-snow .ql-picker.ql-size {
width: 98px
}
.ql-snow .ql-picker.ql-size .ql-picker-item:before,
.ql-snow .ql-picker.ql-size .ql-picker-label:before {
content: "Normal"
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before {
content: "Small"
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before {
content: "Large"
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before {
content: "Huge"
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before {
font-size: 10px
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before {
font-size: 18px
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before {
font-size: 32px
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
background-color: #fff
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
background-color: #000
}
.ql-toolbar.ql-snow {
border: 1px solid #ccc;
box-sizing: border-box;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 8px
}
.ql-toolbar.ql-snow .ql-formats {
margin-right: 15px
}
.ql-toolbar.ql-snow .ql-picker-label {
border: 1px solid transparent
}
.ql-toolbar.ql-snow .ql-picker-options {
border: 1px solid transparent;
box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
border-color: #ccc
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
border-color: #000
}
.ql-toolbar.ql-snow+.ql-container.ql-snow {
border-top: 0
}
.ql-snow .ql-tooltip {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ddd;
color: #444;
padding: 5px 12px;
white-space: nowrap
}
.ql-snow .ql-tooltip:before {
content: "Visit URL:";
line-height: 26px;
margin-right: 8px
}
.ql-snow .ql-tooltip input[type=text] {
border: 1px solid #ccc;
display: none;
font-size: 13px;
height: 26px;
margin: 0;
padding: 3px 5px;
width: 170px
}
.ql-snow .ql-tooltip a.ql-preview {
display: inline-block;
max-width: 200px;
overflow-x: hidden;
text-overflow: ellipsis;
vertical-align: top
}
.ql-snow .ql-tooltip a.ql-action:after {
border-right: 1px solid #ccc;
content: "Edit";
margin-left: 16px;
padding-right: 8px
}
.ql-snow .ql-tooltip a.ql-remove:before {
content: "Remove";
margin-left: 8px
}
.ql-snow .ql-tooltip a {
line-height: 26px
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
display: none
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
display: inline-block
}
.ql-snow .ql-tooltip.ql-editing a.ql-action:after {
border-right: 0;
content: "Save";
padding-right: 0
}
.ql-snow .ql-tooltip[data-mode=link]:before {
content: "Enter link:"
}
.ql-snow .ql-tooltip[data-mode=formula]:before {
content: "Enter formula:"
}
.ql-snow .ql-tooltip[data-mode=video]:before {
content: "Enter video:"
}
.ql-snow a {
color: #06c
}
.ql-container.ql-snow {
border: 1px solid #ccc
}
.ql-container.ql-snow,
.ql-toolbar.ql-snow {
border-color: #cbd5e1
}
.dark .ql-container.ql-snow,
.dark .ql-toolbar.ql-snow {
border-color: #465675
}
.ql-header-filled .ql-toolbar.ql-snow {
background-color: rgba(233, 238, 245, .8)
}
.dark .ql-header-filled .ql-toolbar.ql-snow {
background-color: rgba(56, 71, 102, .85)
}
.ql-toolbar.ql-snow {
border-top-left-radius: .5rem;
border-top-right-radius: .5rem
}
.ql-container.ql-snow {
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}
.ql-snow .ql-stroke {
stroke: currentColor
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
fill: currentColor
}
.ql-snow .ql-fill,
.ql-snow .ql-picker,
.ql-snow .ql-stroke,
.ql-snow .ql-stroke.ql-fill {
color: #475569
}
.dark .ql-snow .ql-fill,
.dark .ql-snow .ql-picker,
.dark .ql-snow .ql-stroke,
.dark .ql-snow .ql-stroke.ql-fill {
color: #a3adc2
}
.ql-editor {
font-size: .875rem;
line-height: 1.25rem
}
.ql-editor.ql-blank:before {
color: inherit
}
.flatpickr-calendar {
-webkit-animation: none;
animation: none;
background: transparent;
border: 0;
border-radius: 5px;
-webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, .08);
box-shadow: 0 3px 13px rgba(0, 0, 0, .08);
-webkit-box-sizing: border-box;
box-sizing: border-box;
direction: ltr;
display: none;
font-size: 14px;
line-height: 24px;
opacity: 0;
padding: 0;
position: absolute;
text-align: center;
-ms-touch-action: manipulation;
touch-action: manipulation;
visibility: hidden;
width: 307.875px
}
.flatpickr-calendar.inline,
.flatpickr-calendar.open {
max-height: 640px;
opacity: 1;
visibility: visible
}
.flatpickr-calendar.open {
display: inline-block;
z-index: 99999
}
.flatpickr-calendar.animate.open {
-webkit-animation: fpFadeInDown .3s cubic-bezier(.23, 1, .32, 1);
animation: fpFadeInDown .3s cubic-bezier(.23, 1, .32, 1)
}
.flatpickr-calendar.inline {
display: block;
position: relative;
top: 2px
}
.flatpickr-calendar.static {
position: absolute;
top: calc(100% + 2px)
}
.flatpickr-calendar.static.open {
display: block;
z-index: 999
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
-webkit-box-shadow: none !important;
box-shadow: none !important
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
-webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6
}
.flatpickr-calendar .hasTime .dayContainer,
.flatpickr-calendar .hasWeeks .dayContainer {
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.flatpickr-calendar .hasWeeks .dayContainer {
border-left: 0
}
.flatpickr-calendar.hasTime .flatpickr-time {
border-top: 1px solid #eceef1;
height: 40px
}
.flatpickr-calendar.hasTime .flatpickr-innerContainer {
border-bottom: 0
}
.flatpickr-calendar.hasTime .flatpickr-time {
border: 1px solid #eceef1
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
height: auto
}
.flatpickr-calendar:after,
.flatpickr-calendar:before {
border: solid transparent;
content: "";
display: block;
height: 0;
left: 22px;
pointer-events: none;
position: absolute;
width: 0
}
.flatpickr-calendar.arrowRight:after,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.rightMost:before {
left: auto;
right: 22px
}
.flatpickr-calendar.arrowCenter:after,
.flatpickr-calendar.arrowCenter:before {
left: 50%;
right: 50%
}
.flatpickr-calendar:before {
border-width: 5px;
margin: 0 -5px
}
.flatpickr-calendar:after {
border-width: 4px;
margin: 0 -4px
}
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowTop:before {
bottom: 100%
}
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowTop:before {
border-bottom-color: #eceef1
}
.flatpickr-calendar.arrowBottom:after,
.flatpickr-calendar.arrowBottom:before {
top: 100%
}
.flatpickr-calendar.arrowBottom:after,
.flatpickr-calendar.arrowBottom:before {
border-top-color: #eceef1
}
.flatpickr-calendar:focus {
outline: 0
}
.flatpickr-wrapper {
display: inline-block;
position: relative
}
.flatpickr-months {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.flatpickr-months .flatpickr-month {
-webkit-box-flex: 1;
background: #eceef1;
border-radius: 5px 5px 0 0;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 1;
overflow: hidden;
position: relative;
text-align: center
}
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-next-month,
.flatpickr-months .flatpickr-prev-month {
fill: #5a6171;
color: #5a6171;
height: 34px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.flatpickr-months .flatpickr-next-month,
.flatpickr-months .flatpickr-prev-month {
cursor: pointer;
padding: 10px;
position: absolute;
text-decoration: none;
top: 0;
z-index: 3
}
.flatpickr-months .flatpickr-next-month.flatpickr-disabled,
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled {
display: none
}
.flatpickr-months .flatpickr-next-month i,
.flatpickr-months .flatpickr-prev-month i {
position: relative
}
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
left: 0
}
.flatpickr-months .flatpickr-next-month.flatpickr-next-month,
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month {
right: 0
}
.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:hover {
color: #bbb
}
.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months .flatpickr-prev-month:hover svg {
fill: #f64747
}
.flatpickr-months .flatpickr-next-month svg,
.flatpickr-months .flatpickr-prev-month svg {
height: 14px;
width: 14px
}
.flatpickr-months .flatpickr-next-month svg path,
.flatpickr-months .flatpickr-prev-month svg path {
fill: inherit;
-webkit-transition: fill .1s;
transition: fill .1s
}
.numInputWrapper {
height: auto;
position: relative
}
.numInputWrapper input,
.numInputWrapper span {
display: inline-block
}
.numInputWrapper input {
width: 100%
}
.numInputWrapper input::-ms-clear {
display: none
}
.numInputWrapper input::-webkit-inner-spin-button,
.numInputWrapper input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
.numInputWrapper span {
border: 1px solid rgba(72, 72, 72, .15);
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
height: 50%;
line-height: 50%;
opacity: 0;
padding: 0 4px 0 2px;
position: absolute;
right: 0;
width: 14px
}
.numInputWrapper span:hover {
background: rgba(0, 0, 0, .1)
}
.numInputWrapper span:active {
background: rgba(0, 0, 0, .2)
}
.numInputWrapper span:after {
content: "";
display: block;
position: absolute
}
.numInputWrapper span.arrowUp {
border-bottom: 0;
top: 0
}
.numInputWrapper span.arrowUp:after {
border-bottom: 4px solid rgba(72, 72, 72, .6);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
top: 26%
}
.numInputWrapper span.arrowDown {
top: 50%
}
.numInputWrapper span.arrowDown:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(72, 72, 72, .6);
top: 40%
}
.numInputWrapper span svg {
height: auto;
width: inherit
}
.numInputWrapper span svg path {
fill: rgba(90, 97, 113, .5)
}
.numInputWrapper:hover {
background: rgba(0, 0, 0, .05)
}
.numInputWrapper:hover span {
opacity: 1
}
.flatpickr-current-month {
color: inherit;
display: inline-block;
font-size: 135%;
font-weight: 300;
height: 34px;
left: 12.5%;
line-height: inherit;
line-height: 1;
padding: 7.48px 0 0;
position: absolute;
text-align: center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
width: 75%
}
.flatpickr-current-month span.cur-month {
color: inherit;
display: inline-block;
font-family: inherit;
font-weight: 700;
margin-left: .5ch;
padding: 0
}