html,
body {
display: flex;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5rem;
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
}
body {
background-color: #1F1F1F;
color: #FFF;
overflow-x: hidden;
position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0 0 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 0.9rem;
}
h6 {
font-size: 70%;
}
p {
font-size: 1rem;
}
@media (min-width: 768px) {
h1 {
font-size: 2.8rem;
}
h2 {
font-size: 2.2rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 0.9rem;
}
h6 {
font-size: 0.7rem;
}
}
@media (min-width: 1200px) {
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 0.9rem;
}
h6 {
font-size: 0.7rem;
}
}
hr {
border-color: #D9D9D9;
margin: 2rem 0;
}
label {
cursor: pointer;
}
label[readonly] {
cursor: default;
}
caption {
margin: 0 0 12px;
padding: 0;
}
a,
.btn {
transition: all 230ms linear;
-moz-transition: all 230ms linear;
-o-transition: all 230ms linear;
-webkit-transition: all 230ms linear;
}
a,
a:focus,
a:active,
a:active:focus {
color: #FF0084;
text-decoration: none;
}
a:hover {
color: #D00072;
}
a.btn,
.btn {
border-radius: 100px;
color: #FFF;
cursor: pointer;
font-family: "Montserrat", sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
line-height: 19px;
padding: 0.5rem 1.5rem;
}
@media (min-width: 1200px) {
a.btn,
.btn {
font-size: 14px;
padding: 0.5rem 3rem;
}
}
.link-default {
color: #BDBDBD;
}
a.btn-sm,
.btn-sm {}
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:active:focus,
.btn:hover,
.btn:focus,
.btn:active,
.btn:active:focus {
box-shadow: 0 0 0 transparent;
outline: 0;
transition: all 230ms linear;
}
a.btn-radius,
.btn-radius {
border-radius: 6px;
}
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary.disabled,
.btn-primary:disabled {
background-color: #FF0084;
border-color: #FF0084;
}
.btn-primary:hover {
background-color: #D00072;
border-color: #D00072;
}
.btn-outline,
.btn-outline:focus,
.btn-outline:active,
.btn-outline:active:focus,
.btn-outline.disabled,
.btn-outline:disabled {
border-color: #FFF;
}
.btn-outline:hover { background-color: #5C636A;
border-color: #5C636A;
}
.bg-transparent {
background-color: transparent;
}
.color-pink {
color: #FF0084 !important;
}
.fw-600 {
font-weight: 600;
}
dt,
dd {
margin: 0;
}
dd {
margin-bottom: 7px;
margin-left: 20px;
}
ul,
ol {
margin: 0 0 15px;
padding: 0 0 0 20px;
}
ul li,
ol li {
margin: 0 0 5px;
padding: 0;
}
pre {
margin: 0 0 15px;
}
.span-tag {
border: 1px solid #76B900;
border-radius: 7px;
display: inline-block;
font-size: 0.8rem;
padding: 0.2rem 0.8rem;
}
.layer-overlay {
background: rgba(0, 0, 0, 0.7) url(//www.cloudgaming.my/wp-content/themes/cloudgaming-v2/assets/images/img-loader.svg) center center no-repeat;
background-size: 200px;
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
opacity: 0;
visibility: hidden;
z-index: -1040;
transition: all 230ms linear;
}
body.show-overlayLoad .layer-overlay {
background: rgba(31, 31, 31, 1) url(//www.cloudgaming.my/wp-content/themes/cloudgaming-v2/assets/images/img-loader.svg) center center no-repeat;
background-size: 200px;
}
body.show-overlay,
body.show-overlayLoad {
overflow: hidden;
}
body.show-overlay .layer-overlay,
body.show-overlayLoad .layer-overlay {
opacity: 1;
visibility: visible;
z-index: 1055;
}
.panel-status {
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 16px;
margin-bottom: 0;
}
.panel-status .span-status {
background-color: rgba(144, 201, 160, 0.3);
border: 1px solid #43B763;
border-radius: 2px;
color: #43B763;
display: inline-block;
font-weight: 500;
padding: 0.5rem 1rem;
}
.panel-status .span-status.status-sm {
font-size: 0.8rem;
padding: 0.2rem 0.5rem;
}
.panel-status .span-status.radius {
border-radius: 100px;
}
.panel-status .span-status.noBorder {
border: 0;
}
.panel-status .span-status.success {
background-color: rgba(56, 186, 145, 0.3);
border-color: #72D9AE;
color: #72D9AE;
}
.panel-status .span-status.warning {
background-color: rgba(242, 224, 160, 0.23);
border-color: #CC9E00;
color: #CC9E00;
}
.panel-status .span-status.danger {
background-color: #2c0b0e;
border-color: #842029;
color: #842029;
}
.panel-status .span-status.light {
background-color: rgba(226, 226, 226, 0.24);
border-color: #9C9C9C;
color: #9C9C9C;
}  .layer-page {
display: flex;
flex-direction: column;
width: 100%;
max-width: 2560px;
margin: 0 auto;
}
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
--bs-gutter-x: 2rem;
}
@media (min-width: 2560px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1920px;
}
} .layer-header {
background-color: #000;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 600;
}
.layer-header .navbar {
background-color: #151515;
}
.link-logo {}
.link-logo img {
max-height: 48px;
max-width: 110px;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 transparent;
}
.layer-header .navbar-nav {}
.layer-header .navbar-nav .nav-item {
line-height: 21px;
margin: 0;
}
.layer-header .navbar-nav .nav-item .nav-link {
padding: 8px 12px;
}
.layer-header .navbar-nav .nav-item .btn {
font-size: 14px;
font-weight: 600;
padding: 0.5rem 1.5rem;
}
.layer-header .span-separator {
background-color: #3E416C;
display: inline-block;
height: 1px;
width: 100%;
}
.layer-header .nav-secondary {
margin: 12px 0 0;
}
.layer-header .nav-secondary .nav-item.dropdown {
margin-top: 12px;
}
.nav-secondary .nav-item.dropdown .dropdown-menu {
background-color: #000;
}
.nav-secondary .nav-item.dropdown .dropdown-menu a {
color: #FFF;
}
.nav-secondary .nav-item.dropdown .dropdown-menu a:hover {
background-color: #FF0084;
}
@media (min-width: 992px) {
.link-logo img {
max-width: 202px;
}
.layer-header .span-separator {
height: 21px;
width: 1px;
}
.layer-header .nav-secondary {
margin: 0 12px;
}
.layer-header .nav-secondary .nav-item.dropdown {
margin-top: 0;
}
} .layer-footer {
background-color: #151515;
}
.layer-footer .layer-footerTop,
.layer-footer .layer-footerBottom {
font-size: 0.8rem;
}
.layer-footer .layer-footerTop {
padding: 2rem 0 0;
}
.layer-footer .layer-footerBottom {
border-top: 1px solid #3E416C;
padding: 1.5rem 0 2rem;
}
.layer-footer .layer-footerBottom p {
color: #8588AA;
font-size: 0.8rem;
font-weight: 400;
line-height: 1.2rem;
margin-bottom: 0;
}
.layer-footerTop .listing-socials {
font-size: 0;
margin: 0;
padding: 0;
}
.listing-socials li {
display: inline-block;
font-size: 1rem;
list-style-type: none;
margin: 0 0 0 1.5rem;
}
.listing-socials li:first-of-type {
margin-left: 0;
}
.listing-socials li a {
display: inline-block;
}
.listing-socials li a img {
height: 22px;
width: 22px;
}
.wp-block-columns {
align-items: normal !important;
box-sizing: border-box;
display: flex;
flex-wrap: wrap !important
}
:where(.wp-block-columns.is-layout-flex) {
gap: 2em;
}
.layer-footer .wp-block-columns {
margin-bottom: 0;
}
@media (min-width: 782px) {
.wp-block-columns {
flex-wrap: nowrap !important
}
}
@media (max-width: 767px) {
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 100% !important
}
}
@media (min-width: 768px) {
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 0;
flex-grow: 1
}
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
flex-grow: 0
}
}
.layer-footerTop .widget_nav_menu {}
.layer-footerTop .widget_nav_menu h2.widgettitle {
font-size: 1rem;
font-weight: 600;
}
.layer-footerTop ul.menu {
margin: 0;
padding: 0;
}
.layer-footerTop ul.menu li {
list-style-type: none;
margin-bottom: 0.5rem;
}
.layer-footerTop ul.menu li:last-of-type {
margin-bottom: 0;
}
.layer-footer a {
color: #F7F7FF;
text-decoration: none;
}
.layer-footer a:hover {
color: #FF0084;
}
@media (min-width: 768px) {
.layer-footer .layer-footerTop {
padding: 3.5rem 0 2rem;
}
.layer-footerTop .widget_nav_menu h2.widgettitle {
font-size: 1.2rem;
}
}
@media (min-width: 992px) {
.layer-footer .layer-footerTop,
.layer-footer .layer-footerBottom {
font-size: 1rem;
}
.layer-footer .layer-footerBottom {
padding: 2rem 0 3.5rem;
}
.layer-footerTop ul.menu li {
margin-bottom: 0.7rem;
}
} .layer-body {
flex: auto;
font-size: 90%;
}
@media (min-width: 992px) {
.layer-body {
font-size: 100%;
}
} .layer-sidebarLinks,
.layer-content {
padding: 2rem 0;
}
@media (min-width: 768px) {
.layer-sidebarLinks,
.layer-content {
padding: 4rem 0;
}
} .layer-sidebarLinks {
margin: 0 -10px;
overflow-x: auto;
padding-bottom: 0;
text-wrap: nowrap;
}
.layer-sidebarLinks .listing-sidebarLinks {
font-family: "Montserrat", sans-serif;
font-size: 0;
margin: 0;
padding: 0;
}
.listing-sidebarLinks li.nav-item {
display: inline-block;
font-size: 1rem;
list-style-type: none;
margin: 0;
padding: 0;
}
.listing-sidebarLinks li.nav-item .nav-link {
font-size: 0.9rem;
padding: 0.5rem 1rem;
position: relative;
}
.listing-sidebarLinks li.nav-item .nav-link:after {}
.listing-sidebarLinks li.nav-item .nav-link i[class^="flaticon-"] {
margin: 0 0.8rem 0 0;
}
.listing-sidebarLinks li.nav-item .nav-link.active,
.listing-sidebarLinks li.nav-item .nav-link:hover {
border-bottom: 3px solid #FF0084;
color: #FF0084;
}
.listing-sidebarLinks li.nav-item .nav-link.active:after,
.listing-sidebarLinks li.nav-item .nav-link:hover:after {}
@media (min-width: 768px) {
.layer-sidebarLinks {
margin: 0;
padding-bottom: 2rem;
overflow-x: visible;
text-wrap: wrap;
}
.listing-sidebarLinks li.nav-item {
display: list-item;
}
.listing-sidebarLinks li.nav-item .nav-link:after {
content: '';
display: block;
height: 100%;
width: 8px;
position: absolute;
right: 0;
top: 0;
transition: all 230ms linear;
-moz-transition: all 230ms linear;
-o-transition: all 230ms linear;
-webkit-transition: all 230ms linear;
}
.listing-sidebarLinks li.nav-item .nav-link.active,
.listing-sidebarLinks li.nav-item .nav-link:hover {
background-color: rgba(255, 255, 255, 0.04);
border: 0;
color: #FF0084;
}
.listing-sidebarLinks li.nav-item .nav-link.active:after,
.listing-sidebarLinks li.nav-item .nav-link:hover:after {
background-color: #FF0084;
}
}
@media (min-width: 1200px) {
.listing-sidebarLinks li.nav-item .nav-link {
font-size: 1.3rem;
line-height: 2rem;
padding: 0.5rem 1.5rem;
}
.listing-sidebarLinks li.nav-item .nav-link i[class^="flaticon-"] {
margin-right: 1.5rem;
}
} .col-borderLine {
border-color: #313131;
border-style: solid;
border-width: 2px 0 0;
}
@media (min-width: 768px) {
.col-borderLine {
border-width: 0 0 0 2px;
}
} .layer-content {}
.layer-content .layer-section {
margin: 2rem 0 0;
}
.layer-content .layer-section:first-child {
margin-top: 0;
}
.layer-content .link-white {
color: #FFF;
}
.layer-content .text-dark {
color: #747474 !important;
}
@media (min-width: 768px) {
.layer-content .layer-section {
margin-top: 4rem;
}
} .layer-subscriberInfo {}
.layer-subscriberInfo .heading-name {
margin-bottom: 0.5rem;
}
.layer-subscriberInfo .panel-location {
margin-bottom: 1.5rem;
}
.layer-subscriberInfo .panel-status {
font-size: 0.8rem;
}
.layer-subscriberInfo .panel-status .span-status {
padding: 0.2rem 1.3rem;
}
.layer-subscriberInfo .panel-status .span-status.success {
background-color: rgba(56, 186, 145, 0.15);
border-color: rgba(56, 186, 145, 0.3);
color: #72D9AE;
text-transform: uppercase;
} .layer-planCard {
background: #0A0A0A url(//www.cloudgaming.my/wp-content/themes/cloudgaming-v2/assets/images/bg-planCard.png) bottom left no-repeat;
background-size: contain; border: 2px solid rgba(255, 241, 241, 0.47);
border-radius: 15px;
display: flex;
flex-direction: column;
font-family: "Montserrat", sans-serif;
height: 148px;
padding: 1rem 1.2rem;
}
.layer-planCard .heading-planName,
.heading-planName {
font-size: 1.2rem;
margin-bottom: 0;
}
.layer-planCard .panel-planAmount,
.panel-planAmount {
line-height: 1.8rem;
margin-bottom: 0;
}
.layer-planCard .panel-planAmount .span-accend,
.panel-planAmount .span-accend {
font-size: 1.2rem;
font-weight: 200;
line-height: 1.4rem;
margin-right: 0.2rem;
vertical-align: top;
}
.layer-planCard .panel-planAmount .span-amount,
.panel-planAmount .span-amount {
font-size: 2rem;
font-weight: 600;
}
.layer-planCard .layer-allocations {}
.layer-allocations .layer-totalAllocation,
.layer-allocations .layer-totalAllocation .span-totalUsed {
background-color: #4E4E4E;
border-radius: 10px;
display: block;
height: 8px;
position: relative;
width: 100%;
}
.layer-allocations .layer-totalAllocation {
margin-bottom: 0.5rem;
;
}
.layer-allocations .layer-totalAllocation .span-totalUsed {
background-color: #76B900;
left: 0;
top: 0;
position: absolute;
}
.layer-allocations.warning .layer-totalAllocation .span-totalUsed {
background-color: #EF4F44;
}
.layer-allocations.warning .panel-planNBD i[class^="flaticon-"] {
color: #EF4F44;
}
.layer-allocations.danger .layer-totalAllocation .span-totalUsed {
background-color: #FE0003;
}
.layer-allocations.danger .panel-planNBD i[class^="flaticon-"] {
color: #FE0003;
}
.layer-planCard .panel-planNBD {
color: #989898;
font-size: 0.8rem;
font-weight: 400;
margin-bottom: 0;
}
.layer-planCard .panel-btn {
font-size: 0.8rem;
margin-bottom: 0;
}
.layer-planCard .panel-btn .btn {
padding: 0.3rem 2rem;
}
.layer-planCard.noPlan {
background-color: rgba(127, 127, 127, 0.1);
background-image: none;
border-style: dashed;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
}
.layer-planCard.noPlan .heading-planName {
margin-bottom: 0.5rem;
}
@media (min-width: 1200px) {
.layer-planCard {
height: 180px;
padding: 1.2rem 1.5rem;
}
.layer-planCard .heading-planName {
font-size: 1.6rem;
}
.layer-planCard .panel-planAmount {
line-height: 2.5rem;
}
.layer-planCard .panel-planAmount .span-accend {
font-size: 1.6rem;
line-height: 1.8rem;
margin-right: 0.2rem;
}
.layer-planCard .panel-planAmount .span-amount {
font-size: 2.5rem;
}
.layer-planCard.noPlan {
padding-top: 1.6rem;
padding-bottom: 1.6rem;
}
} .layer-contentArea {
border: 1px solid transparent;
border-radius: 15px;
}
.layer-contentArea.outline-box {
border-color: #5F5F5F;
padding: 1.6rem;
}
.layer-content .layer-sectionHeading { }
.layer-sectionHeading .heading-sectionTitle {
font-size: 1.5rem;
margin-bottom: 0;
}
.layer-sectionHeading h2.heading-sectionTitle {
font-size: 1.5rem;
}
.layer-sectionHeading .panel-sectionSubtitle {
color: #B8B8B8;
font-size: 0.8rem;
margin: 0.5rem 0 0;
}
.layer-content .layer-sectionContent {}
.layer-sectionContent.profile p {
margin-bottom: 0.5rem;
}
@media (min-width: 992px) {
.layer-sectionHeading h2.heading-sectionTitle {
font-size: 2rem;
}
}
@media (min-width: 1200px) {
.layer-contentArea.outline-box {
padding: 2rem;
}
} .standardForm {}
.standardForm label.form-label {
color: #F7F7FF;
display: block;
}
.standardForm .form-control, 
.standardForm .form-select, 
.input-group-text {
background-color: #1F1F1F;
border: 1px solid #5F5F5F;
border-radius: 8px;
color: #FFF;
padding: 0.5rem 1rem;
}
.standardForm .input-group-text ~ .form-control {
border-left: 0;
}
.standardForm .form-control.bg-transparent {
background-color: transparent;
}
.standardForm .form-control::placeholder {
color: #747474;
opacity: 1; }
.standardForm .form-control::-ms-input-placeholder { color: #747474;
}
.standardForm .form-control:disabled {
background-color: rgba(174, 176, 198, 0.05);
color: #5B5B5B;
}
.form-check .form-check-label {
color: #FAFAFA;
}
.form-check-input {
background-color: transparent;
border-color: #FFF;
}
.form-check-input:focus {
border-color: #FFF;
box-shadow: 0 0 0 transparent;
}
.form-check-input:checked {
background-color: #FF0084;
border-color: #FF0084;
}
.form-check-input:checked[type=checkbox] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFF'/%3e%3c/svg%3e");
background-color: #FF0084;
border-color: #FF0084;
}
.form-group-search {
position: relative;
}
.form-group-search:before {
color: #FBFBFB;
content: "\f002";
font-family: "Font Awesome 6 Free";
font-size: 1rem;
font-weight: 900;
position: absolute;
padding: 0.5rem 1rem;
left: 1px;
top: 1px;
z-index: 6;
}
.form-group-search .form-control {
padding-left: 3.5rem;
} .standardForm .form-text {
color: #989898;
font-size: 0.8rem;
}
.standardForm .input-group {}
.standardForm .input-group.no-border {}
.standardForm .input-group.no-border .form-control {
border-right: 0;
padding-right: 0;
}
.standardForm .input-group .btn.btn-primary {
border-radius: 0 8px 8px 0;
}
.standardForm .input-group.no-border .btn-showPass {
border-color: #5F5F5F;
border-style: solid;
border-width: 1px 1px 1px 0;
border-radius: 0 8px 8px 0 !important;
padding: 0.5rem 1rem;
}
.layer-otpInputs .form-control {
padding: 0.5rem;
}
.row-buttons {
margin-top: 2rem;
}
@media (min-width: 768px) {
.row-buttons {
margin-top: 4rem;
}
} .layer-tableWrapper {
overflow-x: auto;
}
.table {
border-color: #4D5154;
border-style: solid;
border-width: 0 1px;
}
.table th,
.table td {
padding: 0.5rem 0.8rem;
}
.table th {
background-color: #000;
font-weight: 600;
}
.table td {
background-color: transparent;
}
.table a {}
.table .cell-noWrap {
text-wrap: nowrap;
}
@media (min-width: 992px) {
.table {}
.table th,
.table td {
padding: 0.8rem 1.2rem;
}
.table th {}
.table td {}
} .layer-paymentCard {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
display: flex;
flex-direction: column;
height: 160px;
padding: 1rem;
}
.layer-paymentCard p {
margin-bottom: 0;
}
.layer-paymentCard .panel-cardTypeImg {}
.layer-paymentCard .panel-cardTypeImg img {
max-width: 70px;
}
.layer-paymentCard .panel-cardInfo {
line-height: 1.2rem;
margin: 0 0 0 1rem;
}
.layer-paymentCard .panel-cardInfo span {
color: #8588AA;
font-size: 0.8rem;
}
.layer-paymentCard.noCard {
border: 0;
padding: 0;
}
.layer-paymentCard .link-addCard {
border: 1px dashed rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: #FFF;
display: block;
height: 100%;
padding: 19% 0;
text-align: center;
width: 100%;
}
.layer-paymentCard .link-addCard:hover {
background-color: #5C636A;
border-color: #5C636A;
border-style: solid; }
@media (min-width: 768px) {
.layer-paymentCard .link-addCard {
padding: 15% 0;
}
}
@media (min-width: 1200px) {
.layer-paymentCard {
height: 180px;
padding: 2rem;
}
.layer-paymentCard .link-addCard {
padding: 17% 0;
}
} .layer-sectionBanner {
background-size: cover;
}
@media (min-width: 1200px) {
.layer-sectionBanner {
background-size: contain;
}
} .layer-planSelection {} .layer-tabs {}
.layer-tabs .layer-tabNav {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 -1.5rem 4rem;
}
.layer-tabNav ul.nav-pills {
border: 1px solid #FF0084;
border-radius: 50px;
padding: 3px;
}
.layer-tabNav ul.nav-pills li.nav-item {
margin-bottom: 0;
}
.layer-tabNav ul.nav-pills li.nav-item .nav-link {
border-radius: 50px;
color: #FFF;
padding: 0.5rem 1.5rem;
transition: all 230ms linear;
-moz-transition: all 230ms linear;
-o-transition: all 230ms linear;
-webkit-transition: all 230ms linear;
}
.layer-tabNav .nav-link.active,
.layer-tabNav .nav-link.active:hover,
.layer-tabNav .nav-link:focus,
.layer-tabNav .nav-link:active,
.layer-tabNav .nav-link:active:focus,
.layer-tabNav .nav-link.disabled,
.layer-tabNav .nav-link:disabled {
background-color: #FF0084;
}
.layer-tabNav .nav-link:hover {
background-color: #D00072;
}
.layer-tabNav.inline {
display: inline-block;
}
.layer-tabs .layer-tabContent {}
.layer-tabContent .tab-pane {}
@media (min-width: 576px) {
.layer-tabs .layer-tabNav {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 768px) {
.layer-tabNav ul.nav-pills li.nav-item .nav-link {
padding: 0.5rem 3rem;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
letter-spacing: 0.1em;
}
} .layer-plans {}
.layer-plans .layer-plan,
.layer-plan {
background-color: rgba(127, 127, 127, 0.1);
border: 2px solid rgba(221, 221, 221, 0.25);
border-radius: 15px;
color: #FFF;
cursor: pointer;
font-family: 'Montserrat';
position: relative;
transition: all 230ms linear;
-moz-transition: all 230ms linear;
-o-transition: all 230ms linear;
-webkit-transition: all 230ms linear;
}
.layer-plansGlass .layer-plans .layer-plan {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
} .layer-plans .layer-plan.selected,
.layer-plans .layer-plan.plan-current,
.layer-plans .layer-plan:hover {
background-color: rgba(118, 185, 0, 0.1);
border-color: #76B90073;
}
.layer-plan .span-currentPlan {
background-color: #FF0084;
border-radius: 15px 15px 0 0;
color: #FFF;
display: none;
font-size: 90%;
margin: -37px -2px 0 -2px;
padding: 0.5rem 1rem;
}
.layer-plan.plan-current .span-currentPlan {
display: block;
}
.layer-plan.plan-current {
border-radius: 0 0 15px 15px;
}
.layer-plan .span-tag {
background-color: #76B900;
color: #222;
display: none;
font-size: 0.7rem;
font-weight: 600;
line-height: 1rem;
position: absolute;
right: 8px;
top: 8px;
}
.layer-plan.plan-popular .span-tag {
border: 1px solid #76B900;
border-radius: 7px;
display: inline-block;
font-size: 0.8rem;
padding: 0.2rem 0.8rem;
}
.layer-plan.plan-popular {
background-color: #33362F;
border-color: rgba(118, 185, 0, 0.45);
}
.layer-plan .form-check {
display: none;
position: absolute;
right: 8px;
bottom: 8px;
}
.layer-plan.selected .form-check {
display: block;
}
.layer-plan .form-check-input {
background-color: transparent;
height: 25px;
width: 25px;
}
.layer-plan .form-check-input:checked {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FF0084' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
background-color: transparent;
border-color: #FF0084;
border-width: 2px;
}
.layer-plan .form-check:after {
display: inline-block;
}
.layer-plan .card-header {
border: 0;
padding: 1.6rem 1rem 0;
}
.layer-plan .layer-planHeader {  margin-bottom: 10px;
}
.layer-plan .planTitle {
margin-top: 10px;
}
.layer-plan .heading-planName,
.layer-plan .panel-planDuration,
.layer-plan .panel-planAmount,
.layer-plan .panel-planTag {
margin-bottom: 0.625rem;
}
.layer-plan .heading-planName {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 1.4rem;
min-height: 55px;
}
.layer-plan .panel-planDuration,
.layer-plan .panel-planTag {
font-size: 0.875rem;
}
.layer-plan .panel-planAmount {}
.layer-plan .panel-planAmount .span-accend {}
.layer-plan .panel-planAmount .span-amount {}
.layer-plan .panel-planTag {
margin-bottom: 0;
}
.layer-plan .card-body {
padding: 1rem 1rem 2.5rem;
}
.layer-plan .layer-planBtn {
margin-bottom: 1.8rem;
}
.layer-plan ul.listing-planFeatures {
margin: 0;
padding: 0;
}
ul.listing-planFeatures li {
font-size: 90%;
line-height: 1rem;
list-style-type: none;
margin: 0 0 0.5rem;
padding: 0 0 0 22px;
position: relative;
}
ul.listing-planFeatures li:last-of-type {
margin-bottom: 0;
}
ul.listing-planFeatures li:before {
color: #76B900;
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 1px;
}
@media (min-width: 768px) {
.layer-plan .span-currentPlan {
font-size: 100%;
margin: 0;
position: absolute;
left: -2px;
top: -20px;
right: -2px;
}
} .layer-planSelection.carousel .layer-plans {
padding: 0;
}
.layer-planSelection.carousel .layer-plans .slick-list {
display: flex;
overflow: visible;
padding: 0 !important;
}
.layer-planSelection.carousel .layer-plans .slick-track {
display: flex;
}
.layer-planSelection.carousel .layer-plans .slick-dots li button {
background: #FFF;
}
.layer-planSelection.carousel .layer-plans .layer-planSingle {
display: flex;
padding: 0 1rem;
}
.layer-planSelection.carousel .layer-plans .layer-planSingle .layer-plan {
display: flex;
width: 100%;
}
@media (min-width: 768px) {
.layer-planSelection.carousel .layer-plans {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1024px) {
.layer-planSelection.carousel .layer-plans {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
@media (min-width: 1200px) {
.layer-planSelection.carousel .layer-plans {
padding-left: 0;
padding-right: 0;
}
} .layer-paymentMethods {
margin-bottom: 3rem;
}
.layer-paymentMethods .layer-paymentMethod {
border: 1px solid #5F5F5F;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 0.5rem;
padding: 1rem;
}
.layer-paymentMethod .form-check {}
.layer-paymentMethod .layer-paymentMethodContent {}
.layer-paymentMethodContent p {
margin-bottom: 0;
}
.layer-paymentMethodContent .panel-paymentMethodTitle {}
.layer-paymentMethodContent .panel-paymentMethodDesc {
color: #747474;
font-size: 0.8rem;
}
.layer-paymentMethod .panel-img {
margin-bottom: 0;
}
.layer-paymentMethod .panel-img img {
width: 100px;
} .layer-paymentBilling {}
.layer-paymentBilling .form-check-label {
color: #BDBDBD;
} .layer-orderSummary {
background-color: #151515;
border-radius: 20px 20px 0 0;
padding: 1rem 1.5rem;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1019;
}
.layer-orderSummary.position-relative {
border-radius: 20px;
}
.layer-orderSummary.not-fixed {
border-radius: 20px;
padding: 2rem;
position: relative;
right: auto;
bottom: auto;
left: auto;
z-index: auto;
}
.layer-orderSummary .accordion-button {
padding-bottom: 0.8rem;
}
.layer-orderSummary .accordion-button:after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-size: 1.25rem;
height: 1.25rem;
width: 1.25rem;
transform: rotate(-180deg);
transition: transform 0.2s ease-in-out;
}
.layer-orderSummary .accordion-button:not(.collapsed)::after {
transform: rotate(0deg);
}
.layer-orderSummary .layer-orderSummaryContent {
margin: 1.2rem 0 2rem;
}
.layer-orderSummaryContent .layer-orderSummaryHeading {}
.layer-orderSummaryHeading .heading-orderSummary {
font-size: 1rem;
margin-bottom: 2.5rem;
}
.layer-orderSummaryContent .layer-orderSummaryItems {}
.layer-orderSummaryItems .orderSummaryItem {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: start;
margin: 0 0 0.8rem;
}
.layer-orderSummaryItems .orderSummaryItem.non-flex {
display: block;
}
.orderSummaryItem p {
font-size: 0.9rem;
margin: 0;
}
.orderSummaryItem .panel-item {
color: #BDBDBD;
}
.orderSummaryItem.planName .panel-item {
color: #FFF;
font-weight: 600;
}
.orderSummaryItem .panel-amount {
color: #FFF;
margin-left: 0.5rem;
}
.orderSummaryItem.item-total {
margin-bottom: 0;
}
.orderSummaryItem.item-total p {
font-size: 1rem;
}
.orderSummaryItem.item-total .panel-item {
color: #FFF;
}
.orderSummaryItem.item-total .panel-amount {}
.layer-orderSummary .row-buttons {
margin-top: 0;
}
.layer-orderSummary .panel-planAmount .span-accend {
font-size: 1rem;
}
.layer-orderSummary .panel-planAmount .span-amount {
font-size: 1.6rem;
}
.layer-orderSummary.review {}
@media (min-width: 768px) {
body:not(.page-auth) .layer-orderSummary {
border-radius: 20px;
padding: 2rem;
position: relative;
right: auto;
bottom: auto;
left: auto;
z-index: auto;
}
body:not(.page-auth) .layer-orderSummary .layer-orderSummaryContent {
margin: 0;
}
body:not(.page-auth) .layer-orderSummary .row-buttons {
margin-top: 3rem;
}
}
@media (min-width: 1024px) {
.page-auth .layer-orderSummary {
border-radius: 20px;
padding: 2rem;
position: relative;
right: auto;
bottom: auto;
left: auto;
z-index: auto;
}
.page-auth .layer-orderSummary .layer-orderSummaryContent {
margin: 0;
}
.page-auth .layer-orderSummary .row-buttons {
margin-top: 3rem;
}
} .modal {}
.modal-dialog {}
.modal-content {
background-color: #1F1F1F;
}
.modal-header {}
.modal-body {
padding: 1.5rem;
}
@media (min-width: 1200px) {
.modal-body {
padding: 3rem;
}
} .layer-floatAlerts { margin: 0 auto;
position: absolute;
left: 1rem;
right: 1rem;
z-index: 1019;
}
.layer-floatAlerts .alert {
background-color: #F7FCE4;
border-color: #F7FCE4;
border-style: solid;
border-width: 1px 1px 1px 5px;
border-radius: 7px;
color: #000;
margin: 1rem 0 0;
}
.layer-floatAlerts .alert:first-child {}
.layer-floatAlerts .alert.success {
border-left-color: #6CBC6E;
}
.layer-floatAlerts .alert.warning {
border-left-color: #FFB424;
}
.layer-authContent .layer-floatAlerts {
top: 0;
}
.page-auth .layer-floatAlerts .alert {
margin-top: 2rem;
}
.layer-authForm {
margin-top: 2rem;
}
@media (min-width: 576px) {
.layer-floatAlerts {
max-width: 560px;
}
}
@media (min-width: 768px) {
.layer-floatAlerts {
max-width: 720px;
}
.page-auth .layer-floatAlerts .alert {
margin-top: 1rem;
}
.layer-authForm {
margin-top: 4rem;
}
}
@media (min-width: 992px) {
.layer-floatAlerts {
max-width: 980px;
}
}
@media (min-width: 1200px) {
.layer-floatAlerts {
max-width: 1024px;
}
}
@media (min-width: 1400px) {
.layer-floatAlerts {
max-width: 1140px;
}
} .layer-page.page-auth {
max-width: none;
}
.page-auth .layer-body {
display: flex;
}
.page-auth .layer-body .layer-main {
display: flex;
flex-grow: 1;
padding: 0;
}
.page-auth .layer-body .layer-main .layer-section {
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: stretch;
flex-direction: row;
overflow: hidden;
width: 100%;
}
@media (min-width: 1800px) {
.page-auth .navbar>.container-lg {
max-width: none;
}
} .page-auth .layer-authSide {
background-color: #090909;
background-image: url(//www.cloudgaming.my/wp-content/themes/cloudgaming-v2/assets/images/bg-auth-img-footer.png);
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
position: relative;
display: none;
z-index: 1;
}
.page-auth .section-steps .layer-authSide {
background-image: url(//www.cloudgaming.my/wp-content/themes/cloudgaming-v2/assets/images/bg-auth-img-steps-footer.png);
}
@media (min-width: 768px) {
.page-auth .layer-authSide {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 40%;
}
.page-auth .section-steps .layer-authSide {
width: 35%;
}
.page-auth .layer-authSide img.img-logo-auth {
max-width: 220px;
}
}
@media (min-width: 1024px) {
.page-auth .layer-authSide {
width: 50%;
}
.page-auth .section-steps .layer-authSide {
width: 30%;
}
.page-auth .layer-authSide img.img-logo-auth {
max-width: 300px;
}
}
@media (min-width: 1200px) {
.page-auth .section-steps .layer-authSide {
width: 25%;
}
}
@media (min-width: 1440px) {
.page-auth.page-login .layer-authSide {
width: calc(100% - 720px);
}
}
@media (min-width: 1800px) {
.page-auth .layer-authSide {
background-size: cover;
}
.page-auth .section-steps .layer-authSide {
background-size: contain;
}
.page-auth .layer-authSide img.img-logo-auth {
max-width: 380px;
}
} .page-auth .layer-body .layer-authContent {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem;
position: relative;
width: 100%;
}
.page-auth .section-steps .layer-authContent { padding: 1.5rem 1rem;
}
@media (min-width: 768px) {
.page-auth .layer-body .layer-authContent {
width: 60%;
}
.page-auth .section-steps .layer-authContent {
width: 65%;
}
}
@media (min-width: 1024px) {
.page-auth .layer-body .layer-authContent {
padding: 2rem 5rem;
width: 50%;
}
.page-auth .section-steps .layer-authContent {
padding: 2rem;
width: 70%;
}
}
@media (min-width: 1200px) {
.page-auth .layer-body .layer-authContent {
padding: 2rem 8rem;
}
.page-auth .section-steps .layer-authContent {
padding: 2rem;
width: 75%;
}
}
@media (min-width: 1440px) {
.page-auth.page-login .layer-body .layer-authContent {
width: 720px;
}
} .page-auth .layer-authContent .layer-authContentBody {}
@media (min-width: 1440px) {
.page-auth .layer-authContent .layer-authContentBody {
margin: 0 auto;
width: 1024px;
}
} .layer-loginFormArea .layer-loginFormHeading,
.layer-loginFormArea .layer-loginSocials,
.layer-loginFormArea p.panel-loginor {
margin-bottom: 1.5rem;
}
.layer-loginFormArea .row-buttons {
margin-top: 1.5rem;
}
.layer-authContent .layer-loginFormArea {}
.layer-loginFormArea .layer-loginFormHeading {}
.layer-loginFormHeading h1 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.layer-loginFormHeading p {
color: #989898;
}
.layer-loginFormArea p.panel-loginor {
position: relative;
text-align: center;
}
.layer-loginFormArea p.panel-loginor span {
background-color: #1F1F1F;
display: inline-block;
padding: 0 1rem;
position: relative;
}
.layer-loginFormArea p.panel-loginor:before {
background: rgba(255, 255, 255, 0.2);
content: '';
display: block;
height: 1px;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
@media (min-width: 768px) {
.layer-loginFormArea .layer-loginFormHeading,
.layer-loginFormArea .layer-loginSocials,
.layer-loginFormArea p.panel-loginor {
margin-bottom: 1.5rem;
}
.layer-loginFormArea .row-buttons {
margin-top: 1.5rem;
}
.layer-loginFormHeading h1 {
font-size: 2rem;
}
}
@media (min-width: 1200px) {
.layer-loginFormArea .layer-loginFormHeading,
.layer-loginFormArea .layer-loginSocials,
.layer-loginFormArea p.panel-loginor {
margin-bottom: 2rem;
}
.layer-loginFormArea .row-buttons {
margin-top: 2rem;
}
.layer-loginFormHeading h1 {
font-size: 2.5rem;
}
} .layer-loginFormArea .layer-loginSocials {}
.layer-loginSocials .listing-loginSocials {
font-size: 0;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.listing-loginSocials li {
display: inline-block;
font-size: 1rem;
margin: 0 0.5rem;
}
.listing-loginSocials li a.btn-social {
background-color: #FFF;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 44px;
}
.listing-loginSocials li a.btn-social img {
max-height: 23px;
max-width: 23px;
}
.listing-loginSocials li a.btn-social:hover {
background-color: rgba(255, 255, 255, 0.75);
}
.listing-loginSocials li a.btn-social.facebook {
background-color: #1877F2;
}
.listing-loginSocials li a.btn-social.facebook:hover {
background-color: rgba(24, 119, 242, 0.75);
} .layer-progressTop {
background-color: #151515;
display: block;
height: 4px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.layer-progressTop .span-progress {
background-color: #FF0084;
display: block;
height: 100%;
} .layer-authSteps {
background-color: #090909;
border-radius: 0 0 15px 15px; margin: -1.5rem -1rem 2rem;
padding: 1rem;
}
.layer-authSteps ul.listing-steps,
ul.listing-steps {
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 0;
max-width: 420px;
}
ul.listing-steps li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
min-width: 72px;
position: relative;
}
ul.listing-steps p {
margin-bottom: 0;
}
ul.listing-steps p.panel-stepIcon {
background-color: #FF0084;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
line-height: 1rem;
height: 50px;
width: 50px;
min-height: 50px;
min-width: 50px;
z-index: 3;
}
ul.listing-steps p.panel-stepIcon i[class^="flaticon-"] {
color: #FFF;
}
ul.listing-steps p.panel-stepTitle {
font-size: 0.9rem;
font-weight: 700;
}
ul.listing-steps p.panel-stepTitle span {}
ul.listing-steps p.panel-stepDesc {
font-size: 0.8rem;
line-height: 1rem;
}
ul.listing-steps li:before {
background-color: #FF0084;
content: '';
height: 6px;
width: 100%;
position: absolute;
left: -80%;
top: 22px;
}
ul.listing-steps li:first-child::before {
display: none;
}
ul.listing-steps li:after {}
ul.listing-steps li.current:before {}
ul.listing-steps li.current:after {}
ul.listing-steps li.current~li p.panel-stepIcon,
ul.listing-steps li.current~li:before {
background-color: #1D1D1D;
}
ul.listing-steps li.current~li p.panel-stepIcon i[class^="flaticon-"] {
color: #000;
}
@media (min-width: 768px) {
.layer-authSteps {
background-color: transparent;
border-radius: 0;
margin: 0;
padding: 0;
}
.layer-authSteps ul.listing-steps,
ul.listing-steps {
flex-direction: column;
max-width: 220px;
}
ul.listing-steps li {
flex-direction: row;
justify-content: start;
min-height: 60px;
padding: 15px 0;
}
ul.listing-steps li:before {
height: 50%;
width: 6px;
left: 22px;
top: -25px;
}
ul.listing-steps p.panel-stepIcon {
margin-right: 1.5rem;
height: 50px;
width: 50px;
min-height: 50px;
min-width: 50px;
}
ul.listing-steps p.panel-stepTitle {
margin-bottom: 0.2rem;
}
} .panel-icon {
background-color: #FF0084;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
line-height: 1rem;
height: 50px;
width: 50px;
min-height: 50px;
min-width: 50px;
margin: 0;
}
.panel-icon.icon-lg {
font-size: 3rem;
height: 80px;
width: 80px;
min-height: 80px;
min-width: 80px;
}
.span-spinner {
background: url(//www.cloudgaming.my/wp-content/themes/cloudgaming-v2/assets/images/img-spinner.svg) center center no-repeat;
background-size: 140px;
display: inline-block;
height: 30px;
width: 30px;
min-height: 30px;
min-width: 30px;
}
@media (min-width: 992px) {
.panel-icon.icon-lg {
font-size: 4rem;
height: 100px;
width: 100px;
min-height: 100px;
min-width: 100px;
}
}