/* icons */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url(../fonts/icons/google.woff2) format('woff2');
}
  
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'robux';
    src:  url('../fonts/icons/robux/robux.eot?8z06cz');
    src:  url('../fonts/icons/robux/robux.eot?8z06cz#iefix') format('embedded-opentype'),
      url('../fonts/icons/robux/robux.ttf?8z06cz') format('truetype'),
      url('../fonts/icons/robux/robux.woff?8z06cz') format('woff'),
      url('../fonts/icons/robux/robux.svg?8z06cz#robux') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
  
[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'robux' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  
.icon-robux:before {
    content: "\e900";
}

/* app */
.bg-app {
    background-color: #161109;
}

.bg-app-sec {
    background-color: #FFD951 !important;
}

.bg-foo {
    background-color: #161109;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #161109;
    color: #dbdbdb;
    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;
    font-size: .875rem;
    line-height: 1.25rem;
    text-rendering: optimizeLegibility
}

.bg-rgb-blue {
    background: linear-gradient(1turn, #C29542 .8%, #FFD951);
    border-bottom: solid 2px #846b43;
}

.b-drop {
    width: 200px;
    align-items: center;
    border-radius: 7px;
    margin-top: 9px !important;
    cursor: pointer;
    display: flex;
    height: 42px;
    padding: 0px 12px;
    gap: 8px;
    font-size: 15px;
    position: relative;
    text-transform: uppercase;
    transition: background-color .1s ease-in-out;
    color: #333;
    background: linear-gradient(1turn, #C29542 .8%, #FFD951);
    border-bottom: solid 2px #846b43;
    justify-content: center;
}

@supports ((-webkit-backdrop-filter:var(--tw)) or (backdrop-filter:var(--tw))) {
    .is-header-blur nav.header .header-container {
        background: #13100F;
    }

    .dark .is-header-blur nav.header .header-container {
        background-color: rgba(34, 46, 69, .8) !important
    }
}

.csm_btn_log_ {
    background: linear-gradient(1turn, #1f1f1f .8%, #201e1e);
    height: 36px;
    width: 80px;
    display: flex;
    border-radius: 7px;
    color: #ffffff;
    font-size: 13px;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.csm_btn_log_2 {
    background: linear-gradient(1turn, #C29542 .8%, #FFD951);
    height: 36px;
    width: 80px;
    display: flex;
    border-radius: 7px;
    color: #333;
    font-size: 13px;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

/* homepage create-account button */
.csm_btn_log_3 {
    background: #C29542;
    height: 41px;
    width: 181px;
    display: flex;
    border-radius: 7px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    border: solid 2px #FFD951;
}

.csm_btn_log_5 {
    background: linear-gradient(1turn, #C29542 .8%, #C29542);
    height: 41px;
    width: 150px;
    display: flex;
    border-radius: 7px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    border: solid 2px #FFD951;
}

.fea_text i {
    color: #FFD951 !important;
}

.bg-blk {
    background-color: #161109;
}

/* homepage sign-in button */
.btn_1 {
    background: #C29542;
    border-bottom: solid 2px #C29542;
    height: 43px;
    border-radius: 7px;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
}

.bg-slate-50 {
    background-color: #161109;
}

.bg-fg {
    background-color: #13100F;
}

.app_po {
    margin-right: 0px !important;
    padding: 1px 0px 1px 14px !important;
    border: solid 1.5px #292a3f;
    background: #161109;
    color: #fff;
}

.focus\:text-slate-800:focus {
    color: #C29542
}

.peer:focus~.peer-focus\:text-primary {
    color: #C29542;
}

.text-app {
    color: #DCAA38;
}

.bg-layot-dark_csm {
    background: #161109;
    border-radius: 13px;
    border: solid 1px #2b2c43;
}

.nav_lay1:hover {
    background: #1f1f1f;
    color: #fff !important;
}

.nav_lay_active {
    background: #1f1f1f;
    color: #C29542 !important;
}

.nav_lay1:hover i {
    color: #C29542 !important;
}

.nav_lay_active i {
    color: #C29542 !important;
}

.nav_lay_active span {
    color: #C29542 !important;
}

.nav_lay1:hover span {
    color: #C29542 !important;
}

.nav_lay1 i {
    font-size: 20px;
    color: #dbdbdb;
    transition: background-color 0.3s ease;
}

.nav_lay1 span {
    color: #dbdbdb;
    font-size: 14.8px;
    font-weight: 600;
}

.bg-dc {
    background-color: #161109;
}

.play-iconA {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 47px;
    height: 47px;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.1s ease;
    justify-content: center;
    align-items: center;
    border: 3px solid #edb962;
    box-sizing: border-box;
    transition: 0.2s;
}

.play-iconA:before {
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent #edb962;
    transition: border-color 0.3s ease;
}

.play-icon:before {
    border-width: 15px 0 15px 30px;
    border-color: transparent transparent transparent #edb962;
    transition: border-color 0.1s ease;
}

.con_li {
    background: linear-gradient(0.25turn, #111010 .8%, #161109);
    z-index: 1;
}

.jumbo {
    height: 319px;
    background: linear-gradient(0turn, #161109 .8%, #161109);
}

.h-col {
    color: #dbdbdb;
}

.toast-success-m {
    background-color: #FFD951 !important;
    box-shadow: none !important;
    color: white;
    padding: 15px !important;
    opacity: 1 !important;
}

.btn_app {
    background: linear-gradient(1turn, #C29542 .8%, #FFD951);
    height: 36px;
    width: 80px;
    display: flex;
    border-radius: 7px;
    color: #ffffff;
    font-size: 13px;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.bg-admin-100 {
    background-color: #161109;
}

.cc_btn {
    background: linear-gradient(1turn, #C29542 .8%, #FFD951);
    padding: 8px 12px;
    border-radius: 6px;
}

.open_cst {
    background: #C29542;
    font-size: 21px;
    padding: 8px 10px;
    color: #fff;
    border-radius: 10px 0px 0px 10px;
    border-bottom: solid 2px #846b43;
}

.open_cst:after {
    content: '';
    position: absolute;
    background-color: #C29542;
    top: 76%;
    left: 10%;
    width: 10px;
    height: 12px;
    transform: rotate(-45deg);
}

.open_cst1:after {
    content: '';
    position: absolute;
    background-color: #FFD951;
    top: 76%;
    left: 10%;
    width: 10px;
    height: 12px;
    transform: rotate(-45deg);
}

.adblock_image-container .image h3 {
    font-size: 26px;
    font-weight: 700;
    background: transparent;
    border: 4px dotted #FFD951;
    border-radius: 50%;
    text-align: center;
    color: #FFD951;
    padding: 27px 0px;
    font-family: inherit;
}

.adblock_image-container .image .fas {
    float: right;
    font-size: 20px;
    margin: 0px 0px 0px -20px;
    color: #FFD951;
    background: #11111c;
    border-radius: 50%;
    padding: 5px 6px 5px 8px;
}

.csm-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    border: 2px solid #161109;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.csm-radio:checked+.csm-box {
    border-color: #FFD951;
}

.csm-radio:checked+.csm-box::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 15px;
    color: #fff;
    background-color: #FFD951;
    border-radius: 50%;
    padding: 2px;
    width: 24px;
    font-weight: bold;
    height: 24px;
    line-height: 21px;
    text-align: center;
}

.wit_btn {
    background: linear-gradient(1turn, #C29542 .8%, #FFD951);
    height: 42px;
    width: 140px;
    display: flex;
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    border-bottom: solid 2px #846b43;
    font-weight: 600;
    line-height: 1;
}

.open_cst1 {
    background: rgb(4 213 119);
    position: fixed;
    right: -3px;
    bottom: 22%;
    font-size: 21px;
    padding: 8px 10px;
    color: #167148;
    border-radius: 10px 0px 0px 10px;
    border-bottom: solid 2px #846b43;
}

/* homepage counter */
.n_se {
    background: #0d0a05;
    height: 155px;
    display: flex;
    align-items: center;
}

/* homepage header */
.text-header {
    color: #E3CB9F;
}

.text-sub-header {
    color: #FCF3D1;
}

/* homepage login form */
.card {
    --tw-shadow: 0 3px 10px 0 rgb(48 46 56/6%);
    --tw-shadow-colored: 0 3px 10px 0 var(--tw-shadow-color);
    background: #0d0a05;
    border-radius: .5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    overflow-wrap: break-word;
    position: relative
}

.card.login-form {
    --tw-shadow: 0 3px 10px 0 rgb(48 46 56/6%);
    --tw-shadow-colored: 0 3px 10px 0 var(--tw-shadow-color);
    background: #13100F;
    border-radius: .5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    overflow-wrap: break-word;
    position: relative
}

.ca_r {
	background: #171411;
	border: 1px solid #312C2C;
	height: 42px;
}

.focus\:ring:focus {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) #312C2C;
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.placeholder\:text-slate-400::placeholder {
	color: #C3C0B9;
}

/* homepage login form's google button */
.border-slate-300 {
	border-color: #312C2C;
}

.text-slate-400 {
	color: #C3C0B9;
}

/* homepage faq */
.border-slate-150 {
	border-color: #312C2C;
}

/* footer divider */
.li_fg {
	background: linear-gradient(90deg, rgba(67, 83, 109, 0) -3%, #312C2C 48.66%, rgba(67, 83, 109, 0) 103.12%);
	height: 1px;
	width: calc(100% - 18px);
}

/* homepage how-it-works-img */
.how-it-works-img {
	height: 112px;
}

/* preloader spinner */
.border-app {
	border-color: #C29542;
}

.border-r-transparent {
	border-right-color: transparent;
}

/* font-family */
html {
    font-family: Arial, sans-serif;
}

body {
    font-family: Arial, sans-serif;
}

.ts-control {
    font-family: Arial, sans-serif;
}

.badge,
.tag {
    font-family: Arial, sans-serif;
}

.filepond--root {
    font-family: Arial, sans-serif;
}

.ql-container {
    font-family: Arial, sans-serif;
}

.ql-editor .ql-font-serif {
    font-family: Arial, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before {
    font-family: Arial, sans-serif;
}

.ql-toolbar.ql-snow {
    font-family: Arial, sans-serif;
}

.ql-container.ql-snow {
    font-family: Arial, sans-serif;
}

.steps .step {
    font-family: Arial, sans-serif;
}

.pagination {
    font-family: Arial, sans-serif;
}

.apexcharts-text {
    font-family: Arial, sans-serif;
}

.apexcharts-canvas .apexcharts-datalabels-group .apexcharts-datalabel-label {
    font-family: Arial, sans-serif;
}

.apexcharts-canvas .apexcharts-datalabels .apexcharts-datalabel,
.apexcharts-canvas .apexcharts-datalabels-group .apexcharts-datalabel-value {
    font-family: Arial, sans-serif;
}

.l_p_ti {
    font-family: Arial, sans-serif;
}

.l_p_ti_1 {
    font-family: Arial, sans-serif;
}

.font-inter {
    font-family: Arial, sans-serif;
}

.csm_rew_deti {
    font-family: Arial, sans-serif;
}

/* icons */
.nav_lay1 span.navigation-icons {
    font-size: 28px;
    font-weight: 300;
}

.sub-navigation-icons {
    font-size: 20px;
    font-weight: 300;
}

.robux-button-icon {
    font-size: 18px;
    font-weight: 300;
}

.google-button-icon {
    font-size: 24px;
    font-weight: 300;
    margin-right: 2px;
}

.sub-header-icon {
    font-size: 28px;
    font-weight: 300;
    color: #FFD951 !important;
}

.sub-header-text {
    margin-left: 3px;
}

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

.text-star i {
	color: #F7C60E !important;
}

.card-small-icon {
	font-size: 20px;
}

.custom-progress-bar {
    background-color: #07577b;
}
  
.custom-progress-bar::-webkit-progress-bar {
    background-color: #07577b;
}
  
.custom-progress-bar::-webkit-progress-value {
    background-color: #facc00;
}

.custom-progress-bar::-moz-progress-bar {
    background-color: #facc00;
}