.container,
.bikin-wizard {
width: 80%;
margin: auto;
}
@media only screen and (max-width: 600px) {
.container {
width: 90%;
margin: auto;
}
}
#multi-step-form-container {
margin-top: 5rem;
margin-bottom: 5rem;
}
.text-center {
text-align: center;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.pl-0 {
padding-left: 0;
}
.button {
padding: 0.7rem 1.5rem;
border: 1px solid #4361ee;
background-color: #4361ee;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.submit-btn {
border: 1px solid #0e9594;
background-color: #0e9594;
}
.mt-3 {
margin-top: 2rem;
}
.d-none {
display: none;
}
.form-step {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
.title-bw {
font-size: 1.5rem;
font-weight: normal;
color: rgb(255, 255, 255);
}
.domain-search p {
color: rgb(255, 255, 255);
}
ul.bikin-wizard {
width: 100%;
counter-reset: section;
margin-bottom: 3rem;
}
ul.bikin-wizard .bikin-wizard-circle {
position: relative;
}
ul.bikin-wizard .bikin-wizard-circle span {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.bikin-wizard-horizontal {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
ul.bikin-wizard>li:not(:last-of-type) {
margin-bottom: 0.625rem;
-webkit-transition: margin-bottom 0.4s;
-o-transition: margin-bottom 0.4s;
transition: margin-bottom 0.4s;
}
.bikin-wizard-horizontal>li:not(:last-of-type) {
margin-bottom: 0 !important;
}
.bikin-wizard-horizontal li {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.bikin-wizard-horizontal li:not(:last-child):after {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 1px;
content: "";
top: 32%;
}
.bikin-wizard-horizontal li:after {
background-color: #dee2e6;
}
.bikin-wizard-horizontal li.bikin-wizard-completed:after {
background-color: #4da3ff;
}
.bikin-wizard-horizontal li:last-child {
flex: unset;
}
ul.bikin-wizard li a .bikin-wizard-circle {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 0;
line-height: 1.7rem;
text-align: center;
background: rgba(0, 0, 0, 0.38);
border-radius: 50%;
}
.bikin-wizard .bikin-wizard-active .bikin-wizard-circle {
background-color: #4361ee !important;
color: #fff;
}
.bikin-wizard .bikin-wizard-active .label {
color: #4361ee !important;
}
.bikin-wizard .bikin-wizard-active .bikin-wizard-circle:hover {
background-color: #4361ee !important;
color: #fff !important;
}
.bikin-wizard .bikin-wizard-unfinished .bikin-wizard-circle {
background-color: #f8f7ff;
}
.bikin-wizard .bikin-wizard-completed .bikin-wizard-circle {
background-color: #0e9594 !important;
color: #fff;
}
.bikin-wizard .bikin-wizard-completed .label {
color: #0e9594 !important;
}
.bikin-wizard .bikin-wizard-completed .bikin-wizard-circle:hover {
background-color: #0e9594 !important;
color: #fff !important;
}
.bikin-wizard .bikin-wizard-active span.text-muted {
color: #fff !important;
}
.bikin-wizard .bikin-wizard-completed span.text-muted {
color: #fff !important;
}
.bikin-wizard .label {
font-size: 1rem;
margin-top: 0.5rem;
}
.bikin-wizard a {
cursor: default;
} .domain-search {
padding: 2em;
border-radius: 20px 20px 0px 0px;
background-image: linear-gradient(321deg, #c084f8, #4353ff 67%, #391389 94%)
}
.domain-search .title-steps h4 {
font-weight: 700;
text-align: center;
margin-bottom: 2em;
color: rgb(255, 255, 255);
}
.domain-search .input-domain {
width: 79.666%;
padding: 14px;
border: #eeeeee;
border-radius: 6px;
}
input[type="text"]:focus {
outline: none !important;
} .domain-search .button-check {
width: 19.666%;
padding: 14px;
font-weight: 500;
font-size: 14px;
background-color: #231955;
border: 1px solid #231955;
border-radius: 6px;
}
.domain-search .button-check:hover {
background-color: #362f99;
border: 1px solid #362f99;
} .wrap-domain-list {
padding: 2em;
}
.row-domain {
align-items: center;
}
.alert-tersedia {
background-color: #f2f5f6;
}
.alert-notersedia {
background-color: #ffeeee;
}
.nama-domain {
font-weight: 600;
font-size: 16px;
}
.status-domain#tersedia {
font-weight: 600;
font-size: 16px;
color: #008651;
}
.status-domain#tidak-tersedia {
font-weight: 600;
font-size: 16px;
color: #ff1e1e;
}
.domain-load {
display: flex;
justify-content: center;
margin-top: 2em;
}
.btn-domain#load-more {
font-weight: 600;
font-size: 16px;
color: #4a4a4a;
border: 1px solid #cacaca;
}
.btn-domain#load-more:hover {
background-color: #f2f5f6;
color: #4a4a4a;
border: 1px solid #f2f5f6;
}
.pilih-domain .btn-domain {
width: 100%;
font-size: 14px;
background-color: #231955;
border: 1px solid #231955;
}
button[type="button"]:disabled {
background: #ff1e1e;
border: 1px solid #ff1e1e;
color: #fff;
}
.pilih-domain .btn-domain:hover {
background-color: #ef5b0c;
border: 1px solid #ef5b0c;
}
.domain-exist {
padding: 2em;
margin-bottom: 2em;
}
.accordion-flush .accordion-item .accordion-button,
.accordion-flush .accordion-item .accordion-button.collapsed {
color: #4a4a4a;
font-weight: 500;
border-radius: 6px;
}
.accordion-flush .accordion-collapse {
background: #efe7ff;
}
.accordion-header {
margin-bottom: 0px;
margin-top: 4px;
}
.accordion-button {
background: #f2f5f6;
border: 1px solid #f2f5f6;
border-radius: 6px;
}
.accordion-button:hover {
background: #f2f5f6;
border: 1px solid #f2f5f6;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.125);
}
.accordion-button:not(.collapsed),
.accordion-button.collapsed {
background: #ffffff;
border: 1px solid #f2f5f6;
}
.domain-form .input-domain {
width: 79.666%;
padding: 14px;
border: 1px solid #eeeeee;
border-radius: 6px;
}
.domain-form .domain-check {
width: 19.666%;
padding: 14px;
font-size: 14px;
background-color: #231955;
border: 1px solid #231955;
border-radius: 6px;
}
.domain-form .domain-check:hover {
background-color: #ef5b0c;
border: 1px solid #ef5b0c;
}
.filter-tema {
padding: 24px 0px 18px 0px;
}
.container-tema .filter-tema a {
margin-right: 5px;
margin-bottom: 5px;
padding: 6px 12px 6px 12px;
border: 1px solid #ffe8e8;
border-radius: 3px;
color: #231955 !important;
}
.filter-tema a:focus {
background: #ffe8e8;
}
.filter-tema a:hover {
background: #ffe8e8;
}
.card-tema {
border: 1px solid #e4e4e4;
margin-top: 1em;
border-radius: 6px;
}
.card-tema:hover {
background: rgb(255, 255, 255);
box-shadow: rgba(36, 48, 155, 0.349) 0px 3px 8px;
}
.card-tema img {
border-radius: 6px;
}
.card-tema .detail-tema {
padding: 1em;
}
.container-tema {
width: auto;
padding: 2em;
}
.b-pilih .btn-pilih {
background: #231955 !important;
color: #eeeeee !important;
padding: 6px 12px 6px 12px !important;
border: 1px solid;
border-radius: 4px !important;
}
.b-pilih .btn-pilih:hover {
background: rgb(255, 94, 0);
}
.b-pilih .btn-demo {
margin-left: 3px;
background: rgb(255, 255, 255);
color: rgb(255, 94, 0);
padding: 6px 8px 6px 8px;
border-color: rgb(255, 94, 0);
;
border: 1px solid;
border-radius: 4px;
}
.b-pilih .btn-demo:hover {
background: rgb(255, 94, 0);
color: #eee;
}
.container-tema .paginasi {
margin-top: 2em;
} .t-pembayaran {
padding: 2em;
background: #cacaca;
border-radius: 20px 20px 0px 0px;
}
.d-pembayaran {
background-color: #f4f4f4;
padding: 1vw;
border-radius: 4px;
}
.summary ul {
list-style-type: none;
}
.form-login .btn-login {
background: rgb(255, 109, 24);
color: #eeeeee;
padding: 6px 12px 6px 12px;
border: 1px solid;
border-radius: 4px;
}
.form-login .alert {
background-color: #FFEEAF;
font-weight: 400;
}
.tabs-login {
--bs-nav-tabs-border-width: 0px;
}
.tab-clogin {
padding: 14px;
}
.nav-item {
width: 50%;
background: #231955;
text-align: center;
}
.nav-tabs .nav-link {
background: red;
color: #ffffff;
border-radius: 0px;
width: 100%;
}
.nav-tabs .nav-link.active {
background: #1c145c;
color: #ffffff;
border-radius: 0px;
width: 100%;
} table td,
table th {
border: none !important;
vertical-align: middle !important;
}
.btn-submit {
background: #1c145c;
color: #eeeeee;
padding: 6px 12px 6px 12px;
border: 1px solid;
border-radius: 4px;
width: 100%;
}
.col-md .banks {
margin-bottom: 8px;
}
.logo-bank {
background: #ffff;
padding: 12px;
display: flex;
justify-content: space-between;
}
.logo-bank img {
width: 60px;
margin-right: 8px;
}
.logo-bank .btn-pilih {
font-weight: 400;
font-size: 14px;
background: #1c175c;
padding: 4px 8px;
border: 1px solid #ffff;
} .no-class {
display: flex;
justify-content: center;
background: #f4f4f4;
}
.f-login {
width: 400px;
height: 400px;
border: 1px solid rgb(214 214 214);
flex-direction: column;
display: flex;
padding: 2em;
margin-top: 10vh;
margin-bottom: 10vh;
justify-content: space-around;
background: #ffff;
}
.f-login>.loginih {
display: flex;
align-items: center;
flex-direction: column;
margin-bottom: 1em;
text-align: center;
} .f-login>.grup-btn {
display: flex;
flex-direction: column;
justify-content: center;
column-gap: 40px;
row-gap: 6px;
}
.grup-btn>.btn-buat {
background: #008651;
font-size: 14px;
font-weight: 500;
border: 1px solid #ffff;
border-radius: 6px;
}
.grup-btn>.sub-login {
font-size: 14px;
text-align: center;
color: #8d8d8d;
}
.sub-login>.t-login {
font-weight: 600;
color: #4a4a4a;
}
.sub-login>.t-login:hover {
color: red;
text-decoration: underline;
} ::selection {
background: #d5bbf7;
}
.card-rd,
.card-kupon {
width: 100%;
margin: 20px auto;
background: #fff;
border-radius: 5px;
padding: 20px;
}
.card-rd .title {
font-size: 22px;
font-weight: 500;
}
.card-rd .content {
margin-top: 20px;
}
.card-rd label.box {
background: #f4f4f4;
margin-top: 12px;
padding: 10px 12px;
display: flex;
border-radius: 5px;
border: 2px solid #eee;
cursor: pointer;
transition: all 0.25s ease;
justify-content: space-between;
align-items: center;
}
#one:checked~label.first,
#two:checked~label.second,
#three:checked~label.third,
#four:checked~label.four,
#five:checked~label.five,
#six:checked~label.six {
border-color: #8E49E8;
background: #d5bbf7;
}
.card-rd label.box:hover {
background: #d5bbf7;
}
.card-rd label.box .circle {
height: 22px;
width: 22px;
background: #eee;
border: 5px solid transparent;
display: inline-block;
margin-right: 15px;
border-radius: 50%;
transition: all 0.25s ease;
box-shadow: inset -4px -4px 10px rgb(0 0 0 / 10%);
}
#one:checked~label.first .circle,
#two:checked~label.second .circle,
#three:checked~label.third .circle,
#four:checked~label.four .circle,
#five:checked~label.five .circle,
#six:checked~label.six .circle {
border-color: #8E49E8;
background: #fff;
}
.card-rd label.box .plan {
display: flex;
align-items: center;
}
.box img {
width: 80px;
}
.card-rd input[type="radio"] {
display: none;
}
.btn-bayar>.sbtn-bayar {
width: 100%;
font-size: 16px;
font-weight: 500;
background: #ef5b0c;
}
.inputan-promo {
background: #f4f4f4;
margin-top: 12px;
padding: 10px 12px;
display: flex;
border-radius: 5px;
border: 2px solid #eee;
cursor: pointer;
transition: all 0.25s ease;
justify-content: space-between;
align-items: center;
}
#diklaim {
background: #008651 !important;
color: #ffff;
}
.inputan-promo>.btn-klaim {
border: 1px solid;
padding: 0.5em;
border-radius: 90px;
font-size: 14px;
}
.col-md.tld-domain {
display: flex;
justify-content: space-between;
}
.card-package:hover {
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
border: 0px;
}
button.pop {
background: #231955;
}
.overflow-category {
overflow-y: hidden !important;
} .overflow-category::-webkit-scrollbar {
width: 20px;
}
.overflow-category::-webkit-scrollbar-track {
background-color: transparent;
}
.overflow-category::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
.overflow-category::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
.filter-tema .d-flex:before{
background: linear-gradient(to left,#fff 20%,rgba(255,255,255,0) 80%); width: 50px;
content: "";
pointer-events: none;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}@media only screen and (max-width: 600px) {
.container,
.bikin-wizard {
min-width: 100%;
padding: 0;
}
.wrap-domain-list {
padding: 1em;
}
.bikin-wizard .label {
font-size: 14px;
}
.form-step {
border: none;
}
.domain-search {
padding: 2em 1em;
border-radius: 20px 20px 0px 0px;
}
.domain-search .title-steps h4 {
font-size: 20px;
margin-top: 1em;
margin-bottom: 1em;
}
.domain-search .form-domain {
background: #ffff;
}
.domain-search .search-form {
display: flex;
justify-content: space-between;
}
.domain-search .input-domain {
width: 100%;
border-radius: 0px;
}
.domain-search .button-check {
width: auto;
font: 12px;
border-radius: 0px;
}
.tld-domain {
display: flex;
justify-content: space-between;
margin: 10px 0px 20px 0px;
}
.pilih-domain {
width: 100%;
}
.domain-exist {
padding: 12px;
margin-bottom: 2em;
}
.pilih-domain .btn-domain {
width: 100%;
font-size: 12px;
font-weight: 400;
background-color: #008651;
border: 0px;
}
.accordion-body {
padding: 8px;
}
.domain-form .input-domain {
width: 70%;
padding: 14px;
font-size: 12px;
}
.status-domain#tersedia {
font-weight: 400;
font-size: 14px;
color: #008651;
}
.status-domain#tidak-tersedia {
font-size: 14px;
font-weight: 400;
}
.domain-form .domain-check {
width: auto;
padding: 14px;
font-size: 12px;
border: 0px solid transparent;
font-weight: 500;
}
.container-tema {
width: auto;
padding: 14px;
}
.row {
--bs-gutter-x: 0.5rem;
}
.card-tema {
width: 100%;
}
}.order-received {
max-width: 1140px;
height: 100%;
margin: auto;
padding: 4em;
}
.order-received>.order-received_body {
display: flex;
flex-direction: column;
align-items: center;
}
.order-received>.order-received_body h2 {
font-size: 24px;
margin-bottom: 4px;
height: 100%;
}
.container_xx {
max-width: 1140px;
margin: auto;
}
.wrap_profil {
margin: 2em 0em;
padding: 40px;
border: 1px solid #ededed;
border-radius: 14px;
box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
}
.wrap_profil>.detail-profil {
color: #1c175c;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.wrap_profil>.detail-profil>.foto-profil {
border-radius: 99px;
}
.wrap_profil>.detail-profil>.nama-profil {
margin-left: 20px;
}
.wrap_profil>.detail-profil>.nama-profil h4 {
font-size: 18px;
font-weight: 700;
line-height: 21px;
margin-bottom: 4px;
}
.wrap_profil>.order-summary {
color: #1c175c;
}
.wrap_profil>.order-summary>h3 {
font-size: 20px;
font-weight: 700;
line-height: 21px;
margin-bottom: 20px;
}
.wrap_profil>.order-summary>.card-order-summary {
display: flex;
justify-content: space-between;
padding: 14px 24px;
border-radius: 14px;
background: #f3faff;
border: 1px solid #d9e0ff;
margin-bottom: 14px;
align-items: center;
}
.wrap_profil>.order-summary>.card-order-summary.order-unpaid {
display: flex;
justify-content: space-between;
padding: 14px 24px;
border-radius: 14px;
background: #fff9f9;
border: 1px solid #ffe0e0;
margin-bottom: 14px;
align-items: center;
}
.wrap_profil>.order-summary>.card-order-summary>.card-row.d {
width: 15%;
margin-right: 40px;
}
.wrap_profil>.order-summary>.card-order-summary>.card-row.lg {
width: 30%;
margin-right: 40px;
}
.wrap_profil>.order-summary>.card-order-summary>.card-row h4 {
font-size: 16px;
font-weight: 600;
line-height: 21px;
margin-bottom: 4px;
}
.card-row>.bt-invoice.order-unpaid {
background: red;
color: #fff;
}
.card-row>.bt-invoice {
font-size: 14px;
font-weight: 500;
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 99px;
background: #4FA095;
}
.card-row>.bt-invoice:hover,
.bt-invoice.order-unpaid:hover {
background: #3B3486;
color: #fff !important;
}
.order-received>.order-received_body>.bt-orders {
margin: 14px 0px 40px 0px;
font-size: 14px;
font-weight: 500;
color: #ffff;
border: 1px solid #ffff;
border-radius: 99px;
background: #38319e;
}